こんにちは、mito（@mito_works）です！
今回は、PCとスマホでHTMLの内容を切り替える方法について書きます。
momo
簡単にいうと、HTMLはサイトの枠組み、CSSは装飾を制御しているよ。今回は枠組みそのものを変えたいということだね。
mito
そうです！PCでは改行させたいけれど、スマホではさせたくないなどです。
はじめに
レスポンシブ対応で、レイアウトを変えざるを得ない時、以下の2つの方法で解決しました。
CASE1
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で指定してあげる方がシンプルです。
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
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
