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

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる