スマホ用・タブレット用・PC用のそれぞれで、レスポンシブに「テキストの改行<br>」と「要素の表示・非表示」をコントロールしたいです。消すか?表示するか?2つのコードは、裏と表で全く同じです。
レスポンシブに文字を改行するには?
レスポンシブな改行の考え方
レスポンシブな改行へのアプローチとして、まずは、切り替える改行の適切なブレークポイントを決めます。ここでは、スマホファーストとして、スマホ縦の画面幅から考えます。
- スマホ縦(414px以下の表示領域)
- スマホ横はタブレット縦と一緒(415px以上~834以下)
- タブレット横は、PCと一緒(835以上)
と考えれば、とりあえずのブレークポイントは414pxと834pxあたりでしょうか。
ブレイクポイントの設定
ブレイクポイントの設定に確定はありません。サイトの特性と時代により流動的に決めることになります。
<br class=”br-sp”>:スマホ画面サイズ(414px以下)のとき改行有効
<br class=”br-tb”>:タブレット画面サイズ(415px以上-834px以下)のとき改行有効
<br class=”br-pc”>:PC画面として画面サイズ(835px以上)のとき改行有効
動作テスト
下の動作確認では、テストの都合上スマホ縦を(500px)としています。
ブラウザ画面サイズ
□□□□□□□□□□□□□□
□□□□□□□□□□□□□□
□□□□□□□□□□□□□□
□□□□□□□□□□□□□□
□□□□□□□□□□□□□□
□□□□□□□□□□□□□□
動作テストのコード
<p>
□□□□□□□□□□□□□□<br class="br-sp">
□□□□□□□□□□□□□□<br class="br-sp"><br class="br-tb">
□□□□□□□□□□□□□□<br class="br-sp"><br class="br-pc">
□□□□□□□□□□□□□□<br class="br-sp"><br class="br-tb">
□□□□□□□□□□□□□□<br class="br-sp">
□□□□□□□□□□□□□□
</p>
<style>
/************************************
** スマホファースト
** 改行
** 〜414px:スマートフォン縦
** 415px〜834px:スマホ横はタブレット縦と一緒
** 835px〜:タブレット横は、PCと一緒
************************************/
/* スマホ用<br> */
@media screen and (max-width:414px) {
.br-sp { display: block; }
.br-tb { display: none; }
.br-pc { display: none; }
}
/* tablet用<br> */
@media only screen and (min-width:415px) and (max-width:834px) {
.br-sp { display: none; }
.br-tb { display: block; }
.br-pc { display: none; }
}
/* pc用<br> */
@media screen and (min-width:835px) {
.br-sp { display: none; }
.br-tb { display: none; }
.br-pc { display: block; }
}
</style>
動作テストの確認画像



要素の表示・非表示
■■■■■■display-sp スマホで表示■■■■■■
□□□□□□display-tb タブレットで表示□□□□□□
●●●●●●display-pc PCで表示●●●●●●
<div class="display-sp">■■■■■■display-sp スマホで表示■■■■■■</div>
<div class="display-tb">□□□□□□display-tb タブレットで表示□□□□□□</div>
<div class="display-pc">●●●●●●display-pc PCで表示●●●●●●</div>
<style>
/************************************
** スマホファースト
** 要素の表示・非表示
** 〜500px:スマートフォン縦
** 501px〜834px:スマホ横はタブレット縦と一緒
** 835px〜:タブレット横は、PCと一緒
************************************/
/*スマホ用*/
@media screen and (max-width:500px) {
.display-sp { display: block; }
.display-tb { display: none; }
.display-pc { display: none; }
}
/*tablet用*/
@media only screen and (min-width:501px) and (max-width:834px) {
.display-sp { display: none; }
.display-tb { display: block; }
.display-pc { display: none; }
}
/*pc用*/
@media screen and (min-width:835px) {
.display-sp { display: none; }
.display-tb { display: none; }
.display-pc { display: block; }
}
</style>
コメント