スマホの時だけ改行したい、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は知っているものを工夫して使うこともとても多いです。各プロパティの挙動をしっかりと理解し、柔軟に試してみましょう!

勉強頑張ってね

#PR ----------

ブラックフライデーやプライムセールよりも、
Adobe Creative Cloudをいちばん安く購入する方法 →Adobeベーシック講座

この記事が気に入ったら
フォローしてね!

勉強仲間にも教えてね
目次