レスポンシブに「改行」を制御・要素の「表示・非表示」

CSS

スマホ用・タブレット用・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>

コメント

タイトルとURLをコピーしました