文章を正しい位置で改行すると、そのまま文章の読みやすさにつながります。
しかし、レスポンシブデザインのサイトの場合、PC表示だと綺麗に見えていてもスマホの場合は幅が狭くなるため文の折り返し位置が変わるので、パソコン用の改行位置だと不自然な見た目になってしまい文章が読みづらくなってしまいます。
今回はPC・タブレット・スマホの端末毎に改行を設定する方法をご紹介します。
改行位置を変えないとどうなるか？
サイトを作成時はPCサイトをベースに作っていきますが、レスポンシブ時でも改行位置を同じにしておくとどんなことが起きるでしょうか？
下の画像をご覧いただくとわかると思いますが、PCサイトでは文章の配置が綺麗でもスマホになると文の折り返しと改行が入り組んでしまい、文が大変読みづらくなります。
端末毎の改行を作成する
では解決策です。「この端末の時だけ表示する」という改行を作成します。
つまりどういうことかと言いますと、改行を意味するbr要素にPC・タブレット・スマホの3つのクラスを付与して、状況に応じて表示・非表示を切り替えていきます。
CSSで改行の設定
まず下のコードをstylesheetに追記します。@media screen and (〜)で対応させる幅を指定し、display:block; or none;を使って、この幅によって表示するもの・しないものを決めていきます。
もし「スマホとPCだけでいいよ」という場合は@media screen and (max-width: 480px)と@media screen and (min-width:481px)の2つで作ればOKです。
/*---br管理--*/
/*---スマホ時改行--*/
@media screen and (max-width: 480px) {
.pc-br{display:none;}
.tb-br{display:none;}
.sp-br{display:block;}
}
/*---タブレット時改行--*/
@media screen and (min-width:481px) and (max-width: 1020px) {
.pc-br{display:none;}
.tb-br{display:block;}
.sp-br{display:none;}
}
/*---PC時改行--*/
@media screen and (min-width:1021px){
.pc-br{display:block;}
.tb-br{display:none;}
.sp-br{display:none;}
}
各クラスの意味は以下の通りです。
- .pc-br パソコン表示の時の改行（パソコンのみ表示）
- .tb-br タブレット表示の時の改行(タブレットのみ表示）
- .sp-br スマホ表示の時の改行（スマホのみ表示）
brにクラスを付与する
改行する場所に応じてbrタグにクラスを付与していきます。実はbrにもクラスってつけられるんです。これで端末ごとで改行を指定することができます。
本日は足元の悪い中、<br class="pc-br">お越しいただきありがとうございました。
上記の場合だとPC表示の時だけ改行が入ります。
注意点
この時に「タブレットとPCで表示したいから」と<br class=”pc-br tb-br”>とbrに対して2つクラスを付与すると”pc-br”の方は動かなくなってしまうので、<br class=”tb-br”><br class=”tb-br”>２つ記載するか、タブレット・PC用のclassを作ると良いでしょう。
