Web制作 今村 護

デバイスごとにテキストを美しく整える方法！！

こんにちわ、制作部の者です！

今回はホームページ制作をしている者たちの永遠の課題⁉といっても過言ではない、
テキストの改行に関する話題になります。

閲覧するデバイスによってテキストの改行位置を変更する簡単な方法をご紹介したいと思います。
それではLet’s go!!!!

コーディングにおける「改行」って、一言でいっても意外と奥が深いんです。

たとえるなら…

🧍‍♂️改行は、“気のきいた間（ま）”！

想像してみてください。
あなたがプレゼン中にこう言います：

「この商品、めっちゃ売れてます。え〜と、理由はですね……安いからです！」

⬆ この「……」の“間（ま）”がないと、相手にとっては「圧」が強すぎる。

ウェブサイトのテキストも同じで、
適度な“改行”は、読みやすさのカギ🔑なんです。

✅ 表示上の「改行」とレスポンシブ対応

1. テキストをスマホで改行させたい場合

【NG例】

html
<p>このテキストはとても長いので、スマホで見ると途中で切れてしまいます</p>

スマホで見たときに一行が長くなって読みにくくなる。

【OK例：自動で折り返し】

CSSで word-break や white-space を調整する。

css
p {
word-break: break-word; /* 長い単語を途中で改行 */
white-space: normal; /* 普通に折り返し */
}

2. 手動で強制改行を入れたい場合

html
<p>この文章は<br>途中で改行されます。</p>

ただし、過剰な <br> の使用は非推奨です。デザイン上の調整は CSS に任せましょう。

3. レスポンシブで改行位置を変えたい場合

例：PC では1行、スマホでは2行にしたい

html
<p class="responsive-text">
テキスト1<span class="sp-only"><br></span>テキスト2
</p>
css
.sp-only {
display: none;
}
@media (max-width: 768px) {
.sp-only {
display: inline;
}
}

✅ コーディング上の「改行」（コード整形）

  • HTMLやCSS、JavaScriptの可読性を上げるために適切な改行やインデントを使うのは重要です。

  • レスポンシブ対応でメディアクエリを分かりやすくするためにも、改行は積極的に使いましょう。

例：

css
/* PC */
body {
font-size: 16px;
}/* SP */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}

🎁 まとめ

シーン 対応方法
テキストが画面幅で折り返されない word-break: break-word などで調整
改行を入れたい <br> を必要最低限で使う
デバイス別で改行したい CSSメディアクエリ＋クラスで制御
コード整形としての改行 インデントと空行を使って読みやすく

スマホからホームページを閲覧するユーザーも多いので、この辺りの対策は結構重要だと思います。
ぜひ活用してスマホから見ても美しい文章を実現してみてください。

RECOMMENDこちらの記事も人気です。