HTMLの改行方法

どうも、べ〜やんです。

今回はHTML5で改行する方法を紹介します。

タグが必要

HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。

<p>HTML5で改行するためには
普段文章を書いている感覚と同じように
Enterで改行はできません。</p>

↓

HTML5で改行するためには 普段文章を書いている感覚と同じように Enterで改行はできません。

<br>

<br>タグを使うと改行することができます。<br>タグはBReak(改行)の略です。

<br>タグには終了タグはありません。

See the Pen NWWdeQx by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。

注意点

デバイスの違い

<br>タグは文章の改行の部分を決定する便利なタグですが、どの部分で改行する方が読みやすいのか、どの部分で改行する方が綺麗に見えるかはデバイスによって違います。

パソコンの画面で見て読みやすい改行でもスマートフォンで見ると不自然で読みにくい改行になってしまう可能性などがあるので<br>タグを多様するのはおすすめできません。

行間

行間をあけるために連続で<br>タグを使ってレイアウトするのはよくありません。

See the Pen GRRrPab by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。

このような時には、CSSを使ってレイアウトするようにしましょう。

<p>

<p>タグはParagraphの略で段落を意味するタグです。

<p></p>で囲んだ部分をひとつの段落とします。

<br>タグと<p>タグは全く同じように改行される訳ではありませんので、細かい調整はCSSを使って調整してみてください。

See the Pen WNNRLYQ by beeyan (@orientado) on CodePen.

↑HTMLボタンやResultボタンなどで表示を切り替えられます。

おわりに

今回はHTML5で改行する方法を紹介しました。