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

momo

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

mito

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

はじめに

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

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

HTMLでの記載

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

CSSでの記載

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

mito

brタグにクラスを付与して制御すればいいだけだから簡単！

momo

ただbrタグはそこで必ず改行されてしまうので、左右、中央寄せ表示などレイアウトに変更が入る可能性がある場合はあまり多用しない方がいいよ。

mito

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

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

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ー