CSS パソコンとスマホで改行<br>の表示・非表示を切り替える

HTMLに<br>タグを書くとパソコンサイトとスマホサイト両方に改行が挿入されます。

しかし、パソコンサイトは改行をいれたままにしてスマホサイトは改行を入れないといったケースがよくあります。そんな時に使える方法です。

用途・できること

• スマホサイトでテキストの改行位置を調整してテキストのバランスを整える
• PCサイト、SPサイトで画像の表示・非表示を切り替える

サンプル

HTML

<!-- スマホサイトで改行 -->
ここにテキストがあります。<br class="sp">ここにテキストがあります。

<!-- パソコンサイトで改行 -->
ここにテキストがあります。<br class="pc">ここにテキストがあります。

classに後述するクラス名を挿入するだけで使用できます。

• class="pc"　パソコンサイトのみ表示
• class="sp"　スマホサイトのみ表示

CSS

.sp {
    display: none !important;
}

@media screen and (max-width:767px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選