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;
    }
}

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note