見出しの折り返しを、画面とコードから整える。
WordPress・HTML・CSSの小さな修正

KOOL:CREAT;2026.10.20

パソコンでは読みやすかった見出しが、スマホでは３行になる。最後の１文字だけ、次の行に残ってしまう。そんなとき、「ここで改行すれば直るかな」と考えることがあります。

けれども、改行の問題は、改行タグを入れるだけでは解決しない場合があります。文章を置ける幅や文字の大きさ、CSSの指定も、折り返し方に関わっているためです。

今回は、国東バスケットボールクラブの制作途中の画面と、当時保存していたコードを手がかりに、見出しの改行を考えます。記事の後半では、パソコンでは２行に区切り、スマホでは幅に合わせて折り返す練習用コードも紹介します。制作画像は当時の記録です。後半のコードと見え方の例は、仕組みを学ぶために新しく用意したものです。実際のサイトに適用した改善後の画面ではありません。

この記事に必要な知識

読むだけならHTML・CSSの予備知識は必要ありません。役割から説明します。コードを試すならWordPressで編集対象を開き、元のコードを控え、変更後のプレビューを確認できること。今回覚えること自動の折り返し、<br>、class、画面幅で切り替えるCSSの基本。作業の範囲まずは練習ページの見出し１か所。通常の見出しブロックだけを使っている方は、仕組みを理解するところからで大丈夫です。

読む目安：約10〜15分。コードを試す時間は別です。CSSの保存場所はサイトの構成によって異なります。

この記事の内容

1. 見出しの「言葉のまとまり」を考える
2. ３種類の「行が変わる理由」を知る
3. 制作時のコードでは、どう分けていたか
4. 練習：パソコンだけ、指定位置で改行する
5. １文字だけ残る・反映されないときの確認
6. AIへの相談文と、修正後のチェック

01

見出しは、言葉のまとまりで読む。

活動支援ページでは、「子どもたちの挑戦を、地域の力で。」という言葉を使いました。制作途中の画面では、次のように２行で見せています。

この言葉なら、「誰の、どんな挑戦を支えるのか」と「誰の力で支えるのか」を分けられます。単に同じ文字数にそろえるより、意味のまとまりで区切る方が、読み進めやすくなる場面があります。

ただし、同じ位置で改行しても、スマホの狭い幅に１行目が収まるとは限りません。「指定したところで行を分けること」と、「必ず２行に収めること」は別です。

まずは、「どの言葉をひとまとまりで読んでほしいか」を考え、その後で、画面に収まるかを確かめます。

02

行が変わる理由は、
一つではない。

見た目は同じ改行でも、コード側の仕組みは違うことがあります。最初は次の３つを区別できれば、確認の方向がつかめます。

行が変わる理由	仕組み	確認すること
自動の折り返し	表示できる幅に合わせて、文章が次の行に送られる	文字サイズ、文章の幅、左右の余白
改行タグ	<br>を書いた位置で行を分ける	HTMLにそのタグがあるか
CSSで分ける	文章のまとまりを、別の行として表示する	<span>などへの表示指定

通常の文章では、画面幅に合わせた折り返しを使うことが多いです。短いキャッチコピーなど、区切る場所に意味があるときは、改行位置を指定する方法も選べます。

まずは <br> の働きを知る

<p>子どもたちの挑戦を、<br>地域の力で。</p>

<br>は、文章の中に改行を作るHTMLの要素です。この例では「地域の力で。」が次の行から始まります。［1］コードを編集する画面でEnterを押しただけでは、通常のHTML表示に、そのまま改行が出るとは限りません。ここで覚える用語

HTMLは、文章や画像の構造を書くもの。CSSは、その見た目を指定するものです。<br>はHTML、文字の大きさや幅の調整はCSSで扱います。

03

改行タグがなくても、
行が分かれることがある。

保存されていた活動支援ページのHTMLでは、見出しを次のように書いていました。コードのうち、今回説明する部分だけを抜き出しています。

<h1>
  <span>子どもたちの挑戦を、</span>
  <span>地域の力で。</span>
</h1>

ここには<br>がありません。代わりに、言葉を２つの<span>で囲んでいます。spanは、文章の一部をひとまとまりとして扱うために使えます。

対応するCSSには、次の指定がありました。

.kb-support-page__hero h1 span {
  display: block;
}

これは、このページのヒーロー部分にある見出し内のspanを、ブロックとして表示する指定です。こうした表示方法の指定でも、文章を行ごとに分けられます。［2］実際のコードには、後半の言葉への装飾など、別の指定も含まれています。

つまり、「変なところで改行されるから、<br>を消そう」と探しても、見つからない場合があります。HTMLと、その部分に効いているCSSをセットで見ることが大切です。

また、保存されたCSSには、パソコン向けに文章側の幅、見出しの文字サイズ、white-space: nowrap;を組み合わせて調整する記述もありました。改行だけでなく、文章を置くスペースも一緒に考えていたことが分かります。上のコードは制作記録の抜粋です。前後の構造や他のCSSを含んでいないため、そのまま別のサイトへ貼るための完成コードではありません。次の練習では、独立した名前のコードを使います。

04

練習：パソコンだけ、
指定位置で改行する。

ここでは、広い画面では２つの言葉を分け、狭い画面では指定した改行を外して、自然に折り返す見出しを作ります。

自分の公開ページを変更する前に、下書きの練習ページやテスト環境で試してください。すでにある見出しを変える場合は、そのHTMLとCSSを控えてから進めます。

広い表示欄のイメージ

子どもたちの挑戦を、地域の力で。

意味のまとまりで、指定した位置を区切る。

狭い表示欄のイメージ

子どもたちの挑戦を、地域の力で。

指定した改行を外し、幅に合わせて折り返す。

上の２枠は学習用のイメージです。実際の表示結果は、画面幅、フォント、文字サイズ、余白によって変わります。

１．見出しのHTMLを用意する

新しい練習ページでは、カスタムHTMLを扱える箇所に、次のHTMLを入れます。通常の見出しブロックを使っている場合、その中へコードをそのまま文字として貼らないようにします。

<h2 class="kcj-break-demo__title">子どもたちの挑戦を、<br class="kcj-break-demo__pc-break">地域の力で。</h2>

classは、CSSから対象を指定するための名前です。今回の例では、見出しにkcj-break-demo__title、改行にkcj-break-demo__pc-breakという名前を付けています。

２．対応するCSSを用意する

次のコードはHTMLとは別のCSSです。サイトでCSSを管理している欄やファイルに入れます。どこか分からない場合は、現在の編集画面と作り方を確認してから進めます。

.kcj-break-demo__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.5;
}

.kcj-break-demo__pc-break {
  display: none;
}

@media (min-width: 768px) {
  .kcj-break-demo__pc-break {
    display: inline;
  }
}

display: none;で指定した改行を表示しない状態にし、画面の表示領域が768px以上のときにだけ、改行を戻しています。条件に応じてCSSを切り替える仕組みを、メディアクエリーといいます。［3］

768pxは、この練習で決めた境目です。機種名で判定しているわけではなく、すべてのサイトに共通する正解でもありません。実際のサイトでは、読みやすく表示できる幅に合わせて考えます。

font-sizeは文字サイズ、line-heightは行の高さです。ここでのclamp()は、最小値と最大値の間で、画面幅に応じた文字サイズにする指定です。［4］まずは改行の切り替わりを確認し、その後でサイズを調整しましょう。

３．保存し、幅を変えて確認する

HTMLとCSSを保存したら、プレビューで広い画面と狭い画面を見比べます。狭い画面では指定した位置の改行が消えますが、幅が足りなければ自動で折り返します。１行になることを保証するコードではありません。

既存の見出しへ応用する場合は、現在のHTMLに付いている名前や装飾を確認します。練習用のHTMLだけを追加しても、元の見出しは変わりません。元のどこを置き換えるかを明確にしてから反映します。反対に、狭い画面だけ改行したい場合

考え方は、改行を表示する条件を反対にすることです。ただし、上の例へ別の指定を重ねる前に、どちらの動作を使うか決めましょう。最初は１つのパターンを動かし、仕組みを確認するところまでで十分です。

05

１文字だけ残るときも、
文字を小さくする前に確認する。

最後の１文字を収めようとして、文字サイズを何度も下げると、読みにくい見出しになることがあります。まずは、何が幅を狭めているかを見直します。

症状	確認する順番の例
１文字だけ次の行に残る	指定した改行 → 文章欄の幅 → 左右の余白 → 文字サイズ
改行タグがないのに行が分かれる	文章を囲む要素 → その要素の表示方法 → 自動の折り返し
１行にしたら、画面からはみ出す	折り返しを止める指定 → 文章の長さ → 置ける幅
CSSを変えても表示が変わらない	保存状態 → 対象の名前 → 他のCSSとの重なり → 表示の更新やキャッシュ

nowrapは、幅を広げる指定ではない

white-space: nowrap;は、自動の折り返しを抑える指定です。［5］文章の幅が足りないまま指定すると、文字が外へはみ出すことがあります。また、<br>で指定した改行を取り除くための指定ではありません。

「この言葉を途中で切りたくない」という希望があるときも、狭い画面で読み切れるかまで確認します。写真の横に文章を置いている場合は、文章側の幅も関係します。

余白は、改行を重ねて作らない

見出しの下を空けたいときに<br>を繰り返すと、文章の行と余白の調整が混ざります。要素の間隔にはCSSのmarginなどを使い、文章内の改行とは分けて扱います。［1］

また、１つの画面幅だけでちょうどよく見えるよう、空白文字をたくさん入れて位置を調整する方法も、別の幅では崩れやすくなります。配置の問題なのか、言葉の区切りの問題なのかを分けて相談しましょう。

06

画面とコードをそろえて、
希望する読み方を伝える。

同じ言葉でも、置く場所が変わると調整の仕方が変わります。トップページ内の活動支援セクションでは、集合写真の横に見出しと本文を置いていました。

AIへ相談するときは、「改行を直して」だけでなく、どの画面で、どの言葉を、どう見せたいかを伝えます。次は、そのための相談文の例です。

相談文の例｜当時の会話の転載ではなく、この記事の練習用です

WordPressで作っている活動支援セクションの見出しです。
画像１はパソコン、画像２はスマホの画面です。
現在のHTMLとCSSも添付します。

パソコンでは、次の２つのまとまりに分けたいです。
「子どもたちの挑戦を、」
「地域の力で。」

スマホでは指定した改行を外し、読みやすく折り返したいです。
文字を極端に小さくする前に、文章の幅や余白も確認してください。

今の改行が、brタグ・CSS・自動の折り返しのどれによるものか教えてください。
変更するHTMLとCSSの範囲を示し、追加か置き換えかも説明してください。

まだスマホの画面やコードを用意できていない場合は、先にそろえてから使います。画面だけでは原因を確認しきれないこともあるため、必要なコードの範囲を聞いてから送っても構いません。

最後に、３つの幅で確認する

狭いスマホ、少し広いスマホ、パソコンの表示を見比べます。確認する幅の例は360px・390px・1024pxです。境目を768pxにした練習では、767pxと768px付近も見て、切り替わるときに不自然な表示がないかを確かめます。

ブラウザーの幅の確認に加え、実際のスマホでも表示します。フォントの違いや、サイト共通のCSSによって、見え方が変わる場合があるためです。

• 言葉のまとまりが、読み取りやすいか。
• 指定した改行と、自動の折り返しを区別できているか。
• 文字が小さくなりすぎていないか。
• 文字が画面の外へはみ出していないか。
• 行数が増えても、写真やボタンに重ならないか。
• 他の見出しに、意図しない変化が出ていないか。

今回の制作メモ

改行を整えることは、
読み方を整えること。

改行の位置に目を向けると、文字の大きさや文章の幅、写真とのバランスにも気づきます。小さな修正ですが、「何を先に読んでほしいか」を考えるきっかけになります。

今回覚えておきたいのは、行が変わる理由を確認してから直すこと。自動の折り返しなのか、改行タグなのか、CSSなのか。その違いが分かれば、AIへの相談も具体的になります。

希望する言葉の区切りを決める。今の指定を確かめる。違う幅でも読む。この３つを、改行を見直すときの基本にしてみてください。

次回は、同じ制作画面を手がかりに、見出しと本文の「文字の大きさ」を取り上げます。