改行は、ウェブページを作成するにあたって必ず発生する作業です。改行するタグはいくつかありますが、ウェブページの表面上は同じような改行の仕方をしていても、ソースコードを確認するとそれぞれ違う改行方法を用いている可能性があります。そこで今回のコラムでは、改行方法や活用方法を解説していきます。

改行について学ぶ前に

改行方法をお伝えする前に、まずは改行に使用するタグについて説明します。

<br>タグとは

<br>タグは（break：休憩、中断）の略称で、改行をするために使用するタグのことです。別名、改行タグとも呼ばれています。

<p>タグとは

<p>タグは（paragraph：段落）の略称で、段落を作成する際に使用します。別名、段落タグとも呼ばれています。<p>〜</p>の開始タグ・終了タグで囲まれたテキストは1つの段落であることを示します。

CSSとは

CSS（Cascading Style Sheets）とは、ウェブページのスタイルを指定するための言語です。CSSを使ってテキストを折り返すことが可能です。

改行とSEO

アクセシビリティの重要性

アクセシビリティとは、「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること」を意味します。（引用：外務省　ウェブアクセシビリティ）

アクセシビリティを遵守することは、ウェブサイトを構築するうえで重要なことです。

改行のSEOへの影響

改行することに関しては、直接的なSEOへの影響はありません。
ですが、HTMLで不適切な改行を行うと、アクセシビリティの低下に繋がります。たとえば、目の不自由な人がウェブサイトで情報を得るときに、改行などが適切に行われていないとスクリーンリーダーというテキストを音声で読み上げるソフトが正しく読み込めません。そうなると、目の不自由な人にとって理解しづらい文章になり、満足する情報を得ることができません。

SEOへの直接的な影響はないですが、マシンリーダブル（機械判読可能）なサイトを目指し、アクセシビリティ、ユーザビリィティを向上させましょう。

HTMLでの改行方法

<br>タグでの改行方法

改行したい箇所に<br>タグを入れます。 タグ挿入場所とサイトでの表示のされ方をご紹介します。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

<p>タグでの改行方法

<p></p>で囲むことによってCSSの指定方法によりますが、文章のまとまりが綺麗になり、見やすくなります。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

CSSでの折り返し方法

長い文字を折り返しさせる

長い文字を折り返しするには、widthで折り返ししたい幅を指定します。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

このコードは、CSSで幅を200pxで指定しているので、<p>タグ内の文章が200pxを超えると強制的に折り返されます。

折り返し可能位置を指定して折り返しさせる

改行させたくないテキストの範囲をdisplay: inline-block;のスタイルついたspanタグで囲みます。
画面幅が足りなくて折り返しが必要になる場合に、できるだけ読み手が理解しやすい位置で自動に折り返しされるようになります。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

「span」と「span」要素の間が折り返し位置の候補として優先的に採用されます。

注意点と対策ポイント

<br>タグでの2行間空けるための使用

<br>タグは文章中の改行に使用するタグなので、CSS次第にはなりますが。CSS次第ですが、行間に空白は空きません。
ですので、段落を変えようと<br>タグを使用すると、段落として認識されません。段落を変える改行をする際には、<p>タグを使用しましょう。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

<br>タグの連続使用

行間を多く空けるために<br>タグを連続で使ってはいけません。段落に見せるために段落間で使用してしまうケースがありますが、連続で使用すると、文章中の区切りが分かりづらくなり、アクセシビリティやユーザビリティの低下に繋がります。
また、デバイスによって改行の見え方が変わる場合もあるので、<br>タグの連続使用には注意しましょう。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

<br/>タグは推奨しません

HTML5で改行するときに、<br/>はあまり使わないようにしましょう。
「HTML5」「HTML Living standard」といったHTML構文では、<br>が推奨されています。
「HTML5」や「HTML Living standard」は、現在のHTML構文の主流です。

<br/>を使ってはいけないわけではないですが、「HTML5」や「HTML Living standard」が推奨しているタグを使用しましょう。逆にXHTMLでは<br/>を使用しますので、注意しましょう。

改行させない方法

以前、HTML5では<nobr>を使って改行させない方法がありましたが、現在廃止されています。
CSSを使用すれば、改行せずにブラウザに表示させることができますので、方法についてご紹介します。

横スクロールで表示させる

これは、文章のボリュームがあり、興味がある人にだけ見せたい時に使用する方法です。
特に、全文を表示させる重要度が高い場合に使用します。
横スクロールで表示させる方法はCSSに「overflow-x: scroll」を追加します。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

省略させる

この方法はサイトのレイアウトを壊したくなく、全文を見せる重要度が低い場合に使用します。特に記事一覧などの文章に使用します。
「……」を利用して表示内容を省略させる方法は「overflow: hidden; text-overflow: ellipsis;」を追加します。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

枠のサイズに対して折り返されずずにきれいに表示できますが、省略された部分はソースを見ない限り確認することができません。

マウスオーバーで表示させる

この方法もサイトのレイアウトを壊したくなく、横並びで表示されるようなコンテンツなどで文章に使用します。レイアウトを壊さず、全文を表示することが可能です。省略された文字を表示させるためには、「title」を使います。以下のようなJavaScriptを追加すると、省略された文字がマウスオーバーで表示されるようになります。

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

改行の活用方法

<br>タグの活用方法

内容が変わらない文章内での使用

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

項目や順序以外の短い文章で使用

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

<p>タグの活用方法

段落として使用する場合

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

時間軸が変化する場合

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

「CSS」の活用方法

デバイスごとに改行の有無を変更したい場合

See the Pen Untitled by 黒木柊太 (@gdwbajqz-the-bold) on CodePen.

例として、スマートフォンとPCで表示のされ方を分けたい場合には、
折り返したいポイントに<br class=”sp”>を追加し、画面サイズが768px以上であれば「display: none;」でbrタグが無効化されます。

まとめ

いかがでしたか。改行や折り返しの仕方はさまざまな方法があります。

ユーザビリティやアクセシビリティを満たすサイトにするため、適切なタグやコードを使用しましょう。