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

こんにちは、mito（@mito_works）です！

今回は、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ー

ABOUT ME

mito

こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。