【CSS】スマホのときだけテキストを改行したいときの書き方

こんにちは！CODE CLUB965のKです！

スマホが普及した今では、PC画面だけでなくスマホやタブレットのレスポンシブ対応は当たり前のようなものです。

そんなときにPCではテキストを改行しなくていいけど、スマホでは改行したいといった場合があると思います。

今回は、それを簡単に実現できる方法について紹介したいと思います。

CSSで設定するだけ

実現するのはとてもシンプルです。
まず、改行のタグ（br）に適当なクラス名をつけて、スマホの時だけ改行したい箇所に入れます。

<p>質問したいことがありましたら<br class="sma">お気軽にご連絡下さい。</p>

こんな感じで入れます。
あとは、CSSファイルで以下のように記述するだけです。

/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}

簡単に説明すると、サイトを表示するデバイスのサイズが768px以下だとテキストが改行されます。

逆に768pxより大きければテキストは改行されません。
たったこれだけで実現できるのでいいですね！

最後に

レスポンシブ対応は今や必須と言っても過言ではないので、いろいろなケースに備えて知識の幅を広げておきましょう。

ちなみに、レスポンシブ対応系の記事は以前も書いているので、一応リンクを貼っておきます。

レスポンシブ対応の一部でしかないですが、方法論は知っておいて損はないので参考にしてもらえれば幸いです。

それでは、また！

Follow me!