CODING

【レスポンシブ】PC・スマホの画面表示でHTMLのコンテンツ内容を切り替える方法

こんにちは、mito(@mito_works)です!

今回は、PCとスマホでHTMLの内容を切り替える方法について書きます。

momo
momo
簡単にいうと、HTMLはサイトの枠組み、CSSは装飾を制御しているよ。今回は枠組みそのものを変えたいということだね。

mito
mito
そうです!PCでは改行させたいけれど、スマホではさせたくないなどです。

はじめに

レスポンシブ対応で、レイアウトを変えざるを得ない時、以下の2つの方法で解決しました。

CASE1

PCで改行、スマホでは改行させない方法

HTMLでの記載

<p>こんにちは。<br class="br-sp">みなさま・・・
</p>

 

CSSでの記載

@media screen and (max-width: 640px) {
.br-sp { 
 display:none;
 }
}

mito
mito
brタグにクラスを付与して制御すればいいだけだから簡単!
momo
momo
ただbrタグはそこで必ず改行されてしまうので、左右、中央寄せ表示などレイアウトに変更が入る可能性がある場合はあまり多用しない方がいいよ。

mito
mito
確かに、右寄せにして<br>を入れていたんだけど、中央寄せに変更になりレイアウトが崩れて修正に一手間かかりました。(できるのであれば)text-alignで指定してあげる方がシンプルです。
CASE2

PCとスマホで表示内容を変える方法

テーブルデータにおいて、PCでは時間を縦表示にし、スマホでは横表示にするということをしました。

PC版

SP版

HTMLの記載

<table class="program_table">
 <tr>
  <th class="aisatsu_pc_area">12:30<br>|<br>12:35</th>
  <th class="aisatsu_phone_area">12:30~12:35</th>
  <td class="aisatsu2 pad5">開会のご挨拶</td>
 </tr>
</table>

mito
mito
PC表示用、SP表示用の両方を記載し、CSSの制御で出し分けます。

CSSの記載

PCでの表示

th.aisatsu_pc_area{
	background-color: #fdebd3;
}
th.aisatsu_phone_area{
	display:none;
	background-color: #fdebd3;
	text-align: center;
	vertical-align: middle;
}

スマホでの表示

@media screen and (max-width:640px){
th.aisatsu_phone_area{
	display:block;
}
th.aisatsu_pc_area{
	display: none;
}
}

ーEndー

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始め、2020年11月までに完全フリーランスを目指しています。 チャレンジすることに、年齢とか経験とかママとか関係ない! 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。