【初心者必見！】CSSとbrタグでスマホとPCで改行を使い分ける方法を徹底解説！

アサル（ASAL）です！

今回は、レスポンシブのサイトを作る時に必須である「スマホだけに改行させる」「スマホとPCの改行を別々にする」などの方法について、初心者に向けて画像やサンプルを活用しつつ、徹底解説していきます！

結論から、少しお話しすると、brタグにclassを付けて、cssで表示と非表示を切り替えるということをします。

言葉だけでは伝わりにくいので、実際にコードとプレビューを使って、解説していきます。

brにclassをつける
CSSで表示と非表示を切り替える
実際に試してみる
まとめ

brにclassをつける

普段、改行を使う時には、下記のようにbrタグを使って改行させますよね？

<h1>プロフィールの<br>紹介ページです！</h1>

しかしその場合、スマホやPC関係なく、常に改行されてしまいます。

そこでまず最初に、下記のように、brタグにclassを付けてみましょう！

初心者にありがちなのは、divタグにしかclassをつけることができないと思いがちなんですよね。。。

<h1>プロフィールの<br class="sp">紹介ページです！</h1>

これで、brにclassがつきました！

この「sp」というclassを利用して、CSSで表示と非表示を行なうこと(今回は、display: none;)で改行の付け外しを可能にします！

CSSで表示と非表示を切り替える

次に、レスポンシブのコーディングで使うときのメディアクエリを利用して、下記のようにCSSを記述してみましょう！

今回は、スマホからコーディングした場合の記述になりますので、用途に合わせてmax-widthなどに変更して下さいね。

/* スマホの時は改行 */
.sp {
  display: block;
}

@media screen and (min-width: 600px) {
  /* タブレットは改行させない */
  .sp {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  /* パソコンは改行させない */
  .sp {
    display: none;
  }
}

※注意

なお、メディアクエリを使用する際には、HTMLのheadタグの中に、下記のコードを記述しておくことを忘れないようにしましょう！

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=1.0">

これは、メディアクエリを使う際に必須のコードとなり、これがないとメディアクエリは使用できませんので注意して下さい。

改行を付けたい時は、display: block;で改行を表示し、改行がいらない時は、display: none;で消してしまいます。

実際に試してみる

それでは、上記の説明を踏まえて実際に、「スマホでは改行をさせて、パソコンで改行をさせない」をやってみましょう！

まず、HTMLです。

<div class="wrap">
      <h1>プロフィールの<br class="sp">紹介ページです！</h1>
      <p>本文がはいります。</p>
      <p>本文がはいります。</p>
      <p>本文がはいります。</p>
      <p>本文がはいります。</p>
    </div>

次に、CSSです。

/* 余白と周りの線 */
.wrap {
  margin: 16px;
  padding: 16px;
  border: 1px solid #ccc;
}

/* タイトルの文字大きさ */
h1 {
  font-size: 32px;
  font-weight: 700;
}

/* スマホの時は改行 */
.sp {
  display: block;
}

@media screen and (min-width: 600px) {
  /* タブレットは改行させない */
  .sp {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  /* パソコンは改行させない */
  .sp {
    display: none;
  }
}

これを実際のスマホとパソコンで見てみると下の画像のようになります。