PCでキレイにデザインを整えたのに、スマホで見たら変なところで改行してしまっている。
こんな時、簡単にPCとスマホでの改行位置を切り分ける方法です。
HTML・CSSの設定
HTML
この文末に改行が欲しい。<br />改行できたよ。 スマホではこの文末に改行が欲しい。<br class="sp" />スマホの時だけ改行できたよ。 さらにPC表示でのみこの文末に改行が欲しい。<br class="pc" />PCの時だけ改行できたよ。
CSS
@media screen and (max-width:640px) {
.pc {
display: none;
}
}
@media screen and (min-width:641px) {
.sp {
display: none;
}
}
このCSSをコピーすればOKです。（メディアクエリの幅は任意で変更してください。）
この例だと、スマホ表示で改行したい場所に
<br class="sp" />
を加えるだけでＯＫです。
また、PC表示で改行したい場所には
<br class="pc" />
を加えるだけでＯＫです。
コードの説明
この方法は、CSSにメディアクエリを設定し、そこにスマホ、PC時に使用するクラスを設定するだけなので簡単ですね。
書いてる内容としては、
- ・スマホ表示の場合は『.pc』を表示しない。
- ・PC表示の場合は『.sp』を表示しない。
という内容になっています。
ここで注意したいのは、スマホ用のクラスはPC幅のメディアクエリに、PC用のクラスはスマホ幅のメディアクエリに設定している点です。
@media screen and (max-width:640px) {
.pc {
display: none;
}
}
@media screen and (min-width:641px) {
.sp {
display: none;
}
}
この理由は、次項で説明します。
改行以外にもつかえるよ
このクラスはとても便利で、改行以外にも使用することができます。
たとえば、
この文章は<span class="pc">PC</span><span class="sp">スマホ</span>用だよ
としてやれば、PC・スマホ表示で、テキストを切り替えることができます。
このクラスを設定しておいてやるだけで、どんな要素でもPC・スマホ表示を柔軟に切り替えることができるのです。
筆者もこの方法を取り入れてから、細かい表示の切り分けが、とてもスムーズに行えるようになりました。
ここで、前項での『スマホ用のクラスはPC幅のメディアクエリに、PC用のクラスはスマホ幅のメディアクエリに設定している』理由がわかってくるかと思います。
このクラスは、block要素だけでなくinline要素でも使用することができます。
ただ、以下のように、設定するメディアクエリを逆に書くと、inline要素であってもblock要素として表示されるため、表示に崩れが発生する可能性があるのです。
@media screen and (max-width:640px) {
.sp {
display: block;
}
.pc {
display: none;
}
}
@media screen and (min-width:641px) {
.sp {
display: none;
}
.pc {
display: block;
}
}
そのため、筆者は、使用しない場合は非表示にするという書き方を勧めています。
改行以外にもスマホテキストを整える見せ方
スマホ表示を改行で整えても、デザインが整わない場合があります。
そんな時の筆者の対応方法を参考までに。
■HTML
<p class="spCenter">スマホの時だけ改行するようにしてみたものの、<br class="sp" />左詰めのテキストだと、<br class="sp" />右の方に余白が空いてしまって<br class="sp" />見栄えが悪いよ。</p>
■CSS
@media screen and (max-width:640px) {
.spCenter {
text-align: center;
}
}
スマホ表示では、改行が増えるとデバイスの幅によって右余白が広く空いてしまい、整って見えない場合があります。
そんな時は、テキストを中央揃えにしてやると、案外キレイに見える場合があります。
参考になれば幸いです。