修正依頼を受けて「どう対応しよう？」と頭を抱えることは、ありませんか。この記事では、HTML・CSSデザイナーが職場であるある！と感じる困りごとの解決策をご紹介。今回は、モニターサイズによって改行位置が変わってしまうことへの対処方法です。今まさに“レスポンシブ化に困っている”というあなたに、届きますように。
【筆者】小林 マサユキさん
Webデザイナー。Webサイト制作をメインにサイト設計からデザイン、コーディングまでをワンストップで請負うフリーランスWebデザイナーとして活動。シンプルで伝わりやすいデザインを得意とし、中小企業のコーポレートサイト制作を主として制作。Twitter（@pulpxstyle）では、自身の経験から得た制作の現場で使えるTipsやアイデアを発信中。著書は、『現場で使える Webデザインアイデアレシピ』（マイナビ出版）。
「スマホから見ると、改行位置がおかしなことに…」
あなたならどう修正する？
修正依頼者
今気が付きましたが、スマホから見ると見出しがおかしな位置で改行されていて…。
PC表示は問題ないです。
自分
確認します。
修正依頼者
スマホから見ても、読みやすくしてください。
自分
承知しました。修正します。
（brタグだと、調整に時間がかかるしなぁ…。他に良い方法は…？）
レスポンシブコーディングは、Webサイトのレイアウトを画面サイズに合わせて調整する便利な方法です。1つのソースコードで複数のデバイスに対応できるのですが、汎用性が上がった分、調整が必要な場合もあります。
特に、メインビジュアルのメインコピー（見出し）は、訪問者が最初に目にするコンテンツなので、見た目にもこだわりたいものです。しかし、モニターサイズや文章の長さによっては、調整に手間がかかることがあります。
レスポンシブコーディングをしたことがある方なら、以下のような状況に遭遇したことがあるかもしれません。
PCでは見た目よく表示されている
スマホだと意図した位置で改行できていない
画像のように、PCでは視認性の高い“見やすい表示”になっていますが、スマホの場合は文章の途中で改行されてしまい、“見た目が良くない状態”になってしまうことがあります。
英字テキストは、単語ごとに改行指定ができますが、日本語テキストは、一文字ごとに改行するため、意図しない表示になってしまうのです。
ただ、以下動画のように、HTMLとCSSで改行位置を指定することができます。
今回は意図した位置で改行させるコーディング方法をご紹介します。複数方法があるので、代表的なものを3つ取り上げて説明します。
1：「改行タグ」で解決する方法
一つ目は、任意の位置にHTMLタグの<br>を記述する方法です。
<p>見た目よく<br >きれいに表示させる<br>HTML&CSS<br class=”sp”>コーディングテクニック</p>例えば、下図のように『HTML&CSSコーディングテクニック』の箇所をPCでは1行で表示し、スマホでは2行に表示したいとします。
PCでの表示
スマホでは2行で表示
これを実現させるために、<br>タグにclass=”sp”を付与します。
CSSで以下を指定すれば、568px以下で改行されます。
.sp {
display: none;
}
@media not all and (min-width: 568px){
.sp {
display: block;
}
}
ただし、<br>タグを記述する方法は、文章を変更した際に<br>タグの記述調整が必要となり、汎用性の高い方法とは言えません。
また、読み上げ機能を使用した際、<br>タグを記述した箇所で1テンポ遅れて読み上げられるものがあるため、わずかな空白ができてしまい、聞き心地が悪くなる可能性があります。アクセシビリティの観点からも積極的には使えない方法です。
2：「メディアクエリ」で解決する方法
<br>のアクセシビリティ問題を解決するために、改行ごとに<span></span>で括り、メディアクエリを使って改行する方法があります。
<p>
<span class=”pc”>見た目よく</span>
<span class=”pc”>きれいに表示させる</span>
<span class=”pc”>
<span class=”sp”>HTML&CSS</span>
コーディングテクニック
</span>
</p>
span間に改行があると余白ができてしまうので、実際には1行で記述します。
CSS
.pc {
display: block;
}
@media not all and (min-width: 568px){
.sp {
display: block;
}
}
これであれば読み上げ機能を気にする必要はなく問題なく改行されますが、<span>タグを多用するのでソースコードの視認性が悪くなるのと、2つのclassを指定した<span>タグが存在するので、編集する際に閉じタグを忘れるなどのミスが出やすくなります。
▼1行で記述した視認性の悪い例
<p><span class=”pc”>見た目よく</span><span class=”pc”>きれいに表示させる</span><span class=”pc”><span class=”sp”>HTML&CSS</span>コーディングテクニック</span></p>3：「自動で解決」する方法
汎用性があり、更新しやすい方法が、display: inline-blockを使ったものです。下記のように、画面幅によって改行されて欲しい箇所を<span></span>で括っておきます。classは不要です。
HTML
<p>
<span>見た目よく</span>
<span>きれいに表示させる</span>
<span>HTML&CSS</span>
<span>コーディングテクニック</span>
</p>
span間に改行があると余白ができてしまうので、実際には1行で記述します。
CSSは<span>にdisplay: inline-blockを指定するだけです。これで<span></span>で括った箇所が画面横サイズいっぱいになったタイミングで自動改行されます。
span {
display: inline-block;
}
画面サイズに合わせて自動改行される
■画面サイズの大きいPCでも、改行位置を指定する場合
画面サイズの大きいPCでも改行したい箇所は、読み上げたときに空白が空いても問題ない箇所であれば下記のように<br>タグを記述します。
HTML
<p>
<span>見た目よく</span>
<span>きれいに表示させる</span><br>
<span>HTML&CSS</span>
<span>コーディングテクニック</span>
</p>
span間に改行があると余白ができてしまうので、実際には1行で記述します。
もしも、読み上げを考慮する必要がある場合には、下記のように改行したい箇所の<span>タグにclassを付与し、display: blockで改行させます。
.newline {
display: block;
}
<p>
<span>見た目よく</span>
<span class=”newline”>きれいに表示させる</span>
<span>HTML&CSS</span>
<span>コーディングテクニック</span>
</p>
span間に改行があると余白ができてしまうので、実際には1行で記述します。
<p>
<span class=”newline”>
<span>見た目よく</span>
<span>きれいに表示させる</span>
</span>
<span>HTML&CSS</span>
<span>コーディングテクニック</span>
</p>
span間に改行があると余白ができてしまうので、実際には1行で記述します。
注意
<span></span>で括った箇所の横幅よりも小さい画面サイズの場合は意図しない箇所で改行されてしまいます。よって、フォントサイズを変えたり、上記のように<span>の数を増やして改行位置を足したり、サイトに合わせた工夫が必要です。
今回はメインビジュアルに掲載するコピーを例に紹介しましたが、見出し全般で使う機会が多いかと思います。また、中央寄せの文章にも意図した位置で改行ができるので、汎用性が高い方法です。いざというときのために、ぜひ覚えておいてください。
▼これまでのHTML・CSS修正のアイデア
・fit-contentで画像キャプションを最適化するには
・モニターサイズに合わせて画像を出し分けする方法
