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

スマホ用・タブレット用・PC用のそれぞれで、レスポンシブに「テキストの改行<br>」と「要素の表示・非表示」をコントロールしたいです。消すか？表示するか？２つのコードは、裏と表で全く同じです。

レスポンシブに文字を改行するには？

レスポンシブな改行の考え方

レスポンシブな改行へのアプローチとして、まずは、切り替える改行の適切なブレークポイントを決めます。ここでは、スマホファーストとして、スマホ縦の画面幅から考えます。

• スマホ縦（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>

動作テストの確認画像

要素の表示・非表示

<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>