PCとSPで文章の改行位置を変えたいんだけど、どうすればいい？

2025.03.23

PCとスマートフォン（SP）で異なる改行位置を指定したいとき、HTMLとCSSを使って簡単に対応する方法をご紹介します。

方法の概要

改行を切り替えるために<br>要素を活用し、表示する改行と非表示の改行をCSSで制御します。

HTMLの記述

HTMLでは以下のように、改行位置に<br>要素を配置し、それぞれにクラス名を付けます。

<!-- ↓このように、br要素の前後で改行せず、1行で記述しましょう -->
<p>
  SPだけで<br class="sp-only">改行したい
</p>
<p>
  こちらはPCだけで<br class="pc-only">改行したい
</p>

• class="sp-only"：SP表示用の改行
• class="pc-only"：PC表示用の改行

このようにすることで、どちらの改行もHTML上には存在しますが、CSSで切り替えることができます。

CSSの記述

次に、CSSでそれぞれの改行を制御します。

/* 隠しておきます */
.pc-only {
    display: none;
}

@media screen and (1024px <= width) { /* メディアクエリは一例です。作成しているサイトのものを使ってください */
     /* SP用の改行を隠します */
    .sp-only {
        display: none;
    }
     /* PC用の改行を表示します */
    .pc-only {
        display: block;
    }
}

CSSのポイント

• .pc-onlyはデフォルトで非表示にしています。これはPC用の改行を標準では隠しておくためです。
• メディアクエリ内では、SP用の改行(.sp-only)を非表示にし、PC用の改行(.pc-only)を表示するように指定しています。
• メディアクエリの値は、作成しているサイトのデザインに応じて調整してください。

まとめ

この方法を活用することで、同じHTML内でPCとSPで異なる改行位置を指定できます。レイアウトの調整や見栄えの最適化にぜひ役立ててください。