スマホのときだけ改行したい、PCのときは改行したくないときのCSS

スマートフォンではしたい部分があるがパソコンでは改行せずに表示させたい!
そんな時に有効なCSSの書き方は?

意外とシンプルで基礎的なものを使います。
display: none; と display: block; を使いわける!

まず<br>に何かクラス名をつけてください(今回の例はわかりやすいように.pc_hidとしました)

<p class="mv_copy">安心の有機野菜で<br class="pc_hid">豊かな食卓を</p>

あとは、.pc_hidに対して下記のようにCSSで設定するだけです。

/*PCで無効*/
.pc_hid{
    display: none;
}

/*スマートフォンで有効*/
@media screen and (max-width:768px) {
    .pc_hid{
        display: block;
    }
}

これだけです。
かんたんで拍子抜けしましたか?

CSSは知っているものを工夫して使うこともとても多いです。各プロパティの挙動をしっかりと理解し、柔軟に試してみましょう!

よかったらシェアしてね!

この記事を書いた人

目次
閉じる