【HTMLでの改行】正しい改行コードの使い方【brタグ以外も】

「brタグ(改行で使用するタグ)で改行したけど、スマホで見た時に、文章がバラバラになったけど、上手い解決はないの？」

「brタグってあまり使わない方がいいって聞いたけど、本当? でも、そうなら、どうしたら改行できるの?」

今や、Webサービスもスマートフォン(以下、スマホ)で見られます。文章を作り、そこに当然「改行」が入るのですが、Webできれいに見える文章が、スマホで見た時に、本来の文章構成とは違う箇所で改行されていて、慌てて修正したという経験はないでしょうか？

「取扱注意」、それが「brタグ」です。そのメリットもデメリットも理解して使わないと、後で余計な作業が増える結果になります。そこで、HTMLの学習を始めたばかりの人が、余計なつまづきをしないで済むように、改行のやり方と注意点をご紹介します。Webサイトをつくる時に、頭の片隅に残しておいて欲しい最低限の知識です。

これだけ知っておこう！HTMLでの改行のポイント

通常ブロック要素内に文章があれば、その中で自動的に改行が行われます。問題となるケースは、特定の箇所で行う「意図的な改行」です。改行=「brタグ」と認識されがちですが、「brタグ」だけが改行のやり方ではありませんし、この「brタグ」も意図的な改行でのみ使うという点を理解してください。間違っても、改行ごとに「brタグ」を使わなければならない、という理解はしないでください。以下は、改行のポイントです。

<ブロック要素を使った改行

改行方法

ブロック要素とは、自動的に範囲を決めて、要素の塊を作るタグを指します。例えば、頻繁に使う「hタグ(h1-h6まであります)」、「divタグ」、「pタグ」、「sectionタグ」がそうです。これらの特徴は、要素の塊が上から下に連なるということです。この特徴を利用することで、改行を行うことができます。例えば、以下のコードを書いたとします。「hタグ」の下に「pタグ」が来ます。
 

これはまだ改行されていません。このコードを「これは改行の説明です。」と「改行の注意点を説明します。」で分けて、改行したます。この場合、「pタグ」を使うことで、2つ目が下に表示されます。ただ、このやり方は正しいのでしょうか？

ブロック要素による改行の注意点

実は、上記の改行は、非常にお粗末です。結果、改行できますが、そもそも「pタグ」は改行を目的としたタグではありません。あくまで、一つの段落＝「同じ内容の塊」を認識させるタグで、内容が問われます。前後の文脈と異なる箇所ではブロック要素を使って構いませんが、同じ内容で、改行するのに「pタグ」を使うことは不適切です。以下の例は、「日本」と「アメリカ」という異なる内容を「pタグ」で囲っています。つまり、ブロック要素では結果的に改行が実現しますが、それは「pタグ」の本来の目的に沿って内容ごとに行う、ということです。

ブロック要素内では、その幅に沿って自動的に改行される。

さて、上記の「日本とアメリカ」の例ですが、画面を縮小した場合には、区切りのいい単語からの改行とはいきませんが、範囲に沿って自動改行が行われます。勝手に枠内に収まるのです。例えば、以下は横幅を800pxに縮小した場合の見え方です。

つまり、CSSでブロック要素の幅を指定することで「お任せの改行」を行うのです。そして、このやり方がユーザーとエンジニアにとって最も負担が少ないやり方です。どうしてもこのやり方で対応できない場合は、「意図的な改行」を行わざるを得ませんが、できるだけこのやり方ですませましょう。「でも、行間の調整はどうするの？」と考える人もいるでしょう。それぞれの文章をブロック要素の「pタグ」で囲ったほうが程よい行間ができます。でも、その時こそCSSの出番です。

CSSによる行間の調整

「日本とアメリカ」を例にとり、「line-height」プロパティをご紹介します。CSSで以下のように指定してください。ここでは、わかりやすいように極端な設定としています。

　これを使うと行間が広がったのがわかるはずです。「line-height」を使う場合は、2つポイントがあります。1つ目は、「px」、「em」、「%」などの指定が方法がありますが、「数値」での設定が望ましいとされている点、2つ目に、目が弱い人や障害をもった方のために「1.5以上」が望ましいとされている点です。

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

「brタグ」を使った改行

使い方

次に、「意図的な改行」を説明します。これは、「brタグ」や「preタグ」を使います。「<br>」を調べると、「<br />」という似たタグを見るときがあります。これは、xhtml(xmlというhtmlと同じマークアップ言語から生まれた言語であり、xmlにhtmlの特徴を加えた言語)で使用されるタグです。htmlの場合は、「<br>」と書いてください。

ただ、これらは多用するべきではありません。理由は、ブラウザで見た時とタブレットやスマホで見た時で見え方に違いが出てくるため、それぞれに対応するための作業が発生するからです。使う場合は、「どうしても」の場面で使いましょう。まず使い方を説明します。以下のような「pタグ」で囲った要素があります。

このコードは以下のような見え方をします。途中に改行がないため、幅いっぱいに文字が広がります。

そこで、改行をしたい箇所にに「brタグ」を入れてみましょう。この「brタグ」は「imgタグ」同様、閉じタグはありません。

すると、以下のように表示されます。「brタグ」を境に改行されているのがわかるでしょう。

さて、これをスマホサイズで見た場合は、どうなるでしょうか？以下、縮小サイズでの見え方です。

段落の中に、中途半端な改行が入っていることがわかります。ここに「brタグ」があるため、本来改行を予定していない箇所で改行が入ることが分かったでしょう。このように、ブラウザ上で納得する見え方ができても、サイズが変わると途端に見えずらい状態になります。

ただ、この「brタグ」は、特定の画面サイズになった場合CSSで消すことができます。以下の「@media only screen and (max-width: 480px)」は、「横幅480pxまでは、brの表示を消しなさい(display: none;)」という指示で、これによって480px以下では「brタグ」が表示されなくなります。特定の箇所の「brタグ」だけを消したい場合は、「<br class= “display_hidden”>」のように、「class」名をつけて、それをCSS側で非表示とすれば良いでしょう。

「brタグ」を使う際の注意点

「brタグ」は連続して使うと、その分行間が増える特徴があります。これを利用して、「brタグ」を多用しないように注意してください。以下のようなケースは控えてください。

以下のように、「brタグ」を連続させることで行間が広がります。

「brタグ」が想定しているのは、行間を開ける行為ではなく、あくまで「改行」です。このように目的から外れた使い方をすると、googleが適切にコードを理解できなくなります。タグ本来の目的に沿うことこそ、googleに伝わりやすいやり方なのです。

「brタグ」を使う状況

できるだけ使わないに越したことはない「brタグ」ですが、フォームの作成で、どのサイズであっても、ラベルの下にフォームがきてほしい場合などには使います。

「inputタグ」は、インライン要素ですので、自動的に横並びになるため、ブロック要素のように縦に要素が連なってほしいときには「brタグ」の出番です。このように、インライン要素を縦に並べたい時は「brタグ」は適しています。

「preタグ」を使った改行

文中に「brタグ」のようなタグを使わずに、改行をそのまま反映させるには、「preタグ」があります。「pre」は「preformatted text」の略で、ブロック要素です。先ほどの「pタグ」に代えて「preタグ」を使ってみましょう。そして、文中で改行を行います。以下のように改行箇所で「brタグ」を使用しません。

それにもかかわらず、表示では改行が認識されます。仮に文中にスペースを入れたとしても認識されます。これが「preタグ」の効果です。

preタグの注意点

ただし、注意点もあります。以下の画像は上が「preタグ」を使用した場合、下が「pタグ」を使用した場合の比較です。幅を縮小した図ですが、「pタグ」が自動改行されているのに対して、「preタグ」は自動改行がさずに文が切れています。また文字の大きさも異なります。そのため、使い勝手が良いとは言えません。使う場面は限られており、PCとスマホ両方で見せたいケースにはそぐわないでしょう。

「white-space」を使った改行

改行をコントロールできるのは、HTML上のタグだけではありません。ここではCSSでコントロールする「white-space」プロパティをご紹介します。これは以下の5つの値がとれます。

	html上の改行	文中のスペースの反映	指定の幅に応じる	画面縮小による自動改行
normal	反映される	スペースは残らない	◯
nowrap	反映されない	スペースは残らない
pre	反映される	スペースは残る
pre-line	反映される	スペースは残らない	◯	◯
pre-wrap	反映される	スペースは残る	◯

以下のコードをCSSの「white-space」で試してみます。コードには、意図的な改行を行い、また、スペースも含めています。

1. normal:
   この値をとる場合は、「pタグ」と同じ効果がでます。つまり、改行は反映されませんが、範囲に応じて自動的に改行がされます。また、スペースは無視されます。以下は縮小した画像ですが、自動的に改行されていることがわかります。

• nowrap:
  この値をとる場合は、改行効果が無効となります。スペースも反映されません。絶対に改行させたくない場合に使用してください。縮小してもしなくても、一切、改行がされていません。

• pre:
  この値をとる場合は、「preタグ」と同じ効果が出せます。html上の改行がそのまま反映され、また、文中のスペースもそのまま反映されます。ただし、画面の縮小に応じて自動的な改行はなされませんので、使用範囲が限られます。

• pre-line:
  この値をとる場合は、「preタグ」と同じように改行が反映され、また画面の幅の変動に応じて自動的に改行されますが、スペースは無視されます。

• pre-wrap:
  この値をとる場合は、「preタグ」どうように改行とスペースが反映され、また、画面サイズの変動に応じて自動的に改行されます。

まとめ

改行は制作過程で必ず意識することです。ですが、HTML上でのタグを使った改行は、そのデメリットを理解して使わないと作業効率を落としかねません。できるだけ、CSSで改行を調整し、できるだけタグを使わない改行を行いたいものです。