CSS｜レスポンシブデザインで使える改行〈br/〉の作成

リキッドデザインを採用しているサイトにて、変なところで改行してしまうことありますよね。細かいことですが、その辺りを精査するとプロっぽいデザインになります。

そんなときに使える改行のHTML＋CSSをご紹介します。

HTML

 <br class="br-sm-on" />
 <br class="br-sm-off" />

実は<br/>にはクラスを指定できるので、あとはCSSのメディアクエリで表示する・しないを指定します。

CSS

/*
#################################

レスポンシブ改行

#################################
*/


/*  <br class="br-sm-on" /> 
　　<br class="br-sm-off" /> 　*/
.br-sm-on {
    display: none;
}
@media screen and (max-width: 640px) {
.br-sm-off {
    display: none;
}
.br-sm-on {
    display: block;
}
}

使い方

<br class=”br-sm-on”>を使用すると、
画面幅が640px以下になると改行します。

<br class=”br-sm-off”>を使用すると、
画面幅が640px以下になると改行を辞めます。