などの疑問や悩みを解決してまいります。
画面幅によって改行を使い分けたく思ったことありませんか？
例えばスマホで見てみると、画面幅のせいで変なところで改行されていたり。
かといって<br>タグを入れるとPCでは逆に変に見えてしまう…などですかね。
この記事では簡単にPCとスマホで改行を切り替えることができるようになります。
<br>タグにPCとスマホの切り替え用のクラスを付与する
<br>タグはテキストを改行する際に使用します。
普段は<br>単体で使用することが多いと思うのですが、クラス名を付与できることはご存じでしたでしょうか？
ポイント
<br>タグにはクラスを付与することができる
なのでPCとスマホで改行の有無を切り替え用のクラスを作り、それを<br>タグに付与することで実現します。
PC用と、スマホ用でクラスを作る
先程も説明した通り、PCサイズでは改行させ、スマホサイズでは改行させないクラス、またPCサイズでは改行させず、スマホサイズでは改行させるクラスを作る必要があります。
以下のクラスを用意しました。
.pc {
}
.sp {
}PCサイズでは改行させ、スマホサイズでは改行させないのを pcクラス、またPCサイズでは改行させず、スマホサイズでは改行させるのを spクラスとします。
次は上記クラスにCSSを指定していきます。
クラスにCSSを指定する
以下のCSSを指定します。
/*今回の注目コード*/
@media screen and (min-width: 415px) {
.pc {
display: block; /*画面幅が415px以上の場合は表示*/
}
.sp {
display: none; /*画面幅が415px以上の場合は非表示*/
}
}
@media screen and (max-width: 414px) {
.pc {
display: none; /*画面幅が414px以下の場合は非表示*/
}
.sp {
display: block; /*画面幅が414px以下の場合は表示*/
}
}
/*ここまで*/pcクラス は画面幅が415px以上であれば表示させ、画面幅が414px以下の場合は非表示にするCSSを作成しています。
spクラス は画面幅が415px以上であれば非表示させ、画面幅が414px以下の場合は表示にするCSSを作成しています。
つまり、PCでは改行させたいけど、スマホでは改行させたくない場合は pcクラス を、逆にPCでは改行させたくないけどスマホでは改行させたい場合は spクラス を<br>タグにクラス指定してあげればいいのです。
それでは試してみましょう。以下HTMLを用意しました。
<body>
<section>
<h1>画面幅によって<br class="sp">改行させる方法を解説します。</h1>
<p>
pcクラス は画面幅が415px以上であれば表示させ、<br class="pc">画面幅が414px以下の場合は非表示にするCSSを作成しています。<br>
spクラス は画面幅が415px以上であれば非表示させ、<br class="pc">画面幅が414px以下の場合は表示にするCSSを作成しています。
</p>
</section>
</body><h1>タグには445px以下で改行されるように、<p>タグには415px以上で改行されるようになっています。
画面幅が1000pxのときの状態です。
<h1>タグは画面幅が415px以上あるので改行されず、<p>タグは改行がされていることが分かります。
次は画面幅が375pxのときです。
先程と違い、<h1>タグが改行されて、<p>タグは画面幅が414px以下なので改行されなくなりました。
このように画面幅によって改行の切り替えができます。
