記事内に商品プロモーションが含まれる場合があります
HTMLではenterキーで改行しても、たいていブラウザ上では反映されません。下のように改行がただの半角スペースになってしまうのです。※ 後ほど「改行が反映される場合」について解説します。
こんにちは Hello
こんにちは hello 改行されない
HTMLだけで改行する方法
HTMLで改行する方法はいくつかあります。
① brタグで改行
最も有名なのは<br>タグですね。
こんにちは<br>Hello
こんにちは
hello 改行される
上のように、<br>タグを書いたところに改行が入ります。
② display: blockの要素の前後には改行が入る
displayというのは、CSSのプロパティのことです。「プロパティって何？」という方は、ぜひ下の記事にサクッと目を通して頂ければと思います。
displayには何種類もの値があるのですが、代表的なのは下図の4つですね。
それぞれのHTMLタグでは「この中のどの値を初期値でとるのか」ということが決まっています。例えば、段落タグ<p>~</p>や、divタグ<div>~</div>、見出しタグ<h1>~</h1>は特に何も指定しない限りdisplay: blockとなります。
display: blockのタグに囲まれた要素の前後には改行が入ります。
つまり、<p>~</p>や<h2>~</h2>、<div>~</div>の前後には、brタグを使わずとも改行が入るのです。
<p>こんにちは</p> <div>hello</div>
こんにちは
hello 改行される
↓ display: blockではない要素が前後にある場合でも改行は入ります。例えばspanタグ（display: inline）と並べてみましょう。
<span>こんにちは</span> <div>hello</div> <span>こんにちは</span>
こんにちは
hello
こんにちは 前後に改行
p、div、h1〜h6などdisplay:blockのタグを使うと前後に改行が入る
displayについてはこちらの記事で詳しく解説しています。
できればbrなどの改行は使いすぎない
上の方法で改行はサクッとできるのですが、少し注意点があります。それは「違うサイズのウィンドウで見たときに、中途半端な位置で改行されてしまう可能性がある」ということです。
上のように、パソコンやタブレットで見たときは綺麗だけど、スマホで見ると中途半端な位置で改行されてしまう、というようなことがあるのです。
ある程度は仕方がないけど、違和感がないように
最近ではデバイスのサイズは本当にまちまちなので、中途半端な位置で改行されてしまうのは、ある程度は仕方がありません（改行がほとんど無いのも見づらいはずですし）。普段からネットサーフィンしている人なら、見慣れているはずです。
問題は「改行を頻繁にすると、その中途半端さが致命的に見えてしまう」ということです。2文字や4文字だけ行がたくさんあれば、さすがに違和感があります。
それを避けるためにHTMLで文章を書くときには、できる限り改行は少なくしましょう。
文章を書く時はなるべくpタグだけで
さきほど説明した通り、pタグの前後には改行が入ります。ブログなどで文章を書く場合には、pタグだけ使うようにするのがおすすめです。<p>~</p>に囲まれた部分は「段落」を表します。「改行が必要なところ＝次の段落に行くべきところ＝次の<p>~</p>」となるのが、理想的なわけですね。
1行開けるには？改行の幅調整はCSSで
文章を書いていると「文と文の間に1行ぶん間を空けたい」ということもあると思います。
br連打はやめよう
brを連打すれば、その分だけ改行が入ります。
こんにちは<br><br>Hello
こんにちは
hello 1行あくけども
しかし、この方法はあまりおすすめできません。なぜなら、後からまとめてデザインを変更するときに大変だからです。また、余白の大きさなどの見た目に関することはHTMLではなく、CSSで調整するのが理想的とされます。
余白調整用のクラスを作っておく
おすすめは「前後の行との余白調整用のクラスを作っておく」ことです。「クラスって何ぞ？」という方は、こちらをサクッと読んでみてください。
【例】手順1：CSSを用意
例えば「大きめの改行用」の.bs（ビッグスペースの略にしてみました）と「小さめの改行用」の.ss（スモールスペースの略）というクラスを作りましょう。
CSSに以下のようなものを追記します。
.bs {
margin-bottom: 2em;
}
.ss {
margin-bottom: 0.5em;
}
marginは要素まわりの余白を指定するCSSのプロパティですね。margin-bottomなので、要素の下側のスペースを指定しています。
【例】手順2：HTMLの余白調整したいところでクラス名を追加
余白調整したくなったら、さきほどCSSで指定しておいたクラス名を追加します。大きめの空白を空けたいときには、さきほどの.bsを使います。
<p class="bs">こんにちは</p> <p>Hello</p>
こんにちは
hello 大きめの余白に
↓小さめの余白にする場合は、さきほど作った.ssを。
<p class="ss">こんにちは</p> <p>Hello</p>
こんにちは
hello 小さめの余白に
これはpタグに限らず、divや見出しタグなどにも使いまわすことができます。
余白調整が効かない？
おそらく、余白調整用のCSSの優先順位が低かったからだと思われます。pタグや見出しタグなどにもともと指定されている余白指定が優先されてしまっているのです。
下記のように詳細度の高いセレクタ指定（.bsや.ssの前に親要素を並べる）をすると、適用の優先順位が上がり反映されるようになるかもしれません。
main .bs {
margin-bottom: 2em;
}
main .ss {
margin-bottom: 0.5em;
}
詳しくはこちらの記事をどうぞ。
適用の優先順位を上げるためにmargin-bottom: 2em!important;などと書くこともできます。しかし、!importantを使うと、優先順位があまりに最強になってしまうため、あまり多用するべきではありません（最終手段ですね）。
参考：改行が反映されるのは何故？
<br>を使わずとも、HTMLでのenterによる改行が、そのまま反映される場合があります。
これは、CSSのwhite-spaceというプロパティの指定によるものです。
white-spaceの値がpreやpre-wrapだとキーボードの改行がそのまま反映される
white-space: preやwhite-space: pre-wrapという値を指定されている要素内では、enterや による改行＆空白がそのまま反映されて表示されます。
<div class="example"> こんにちは hello </div>CSS
.example {
white-space: pre;
}
こんにちは
hello Enterの改行が反映
「それなら全部Enterで改行されるように、white-space: preやpre-wrapをサイト全体に指定しておけば良いじゃないか」と思われるかもしれませんが、そうすると余計なところに余白が出来まくったりして管理がとっても大変になります。
というわけで、あまり使う機会はないかと思います。
参考：<br>と<br />の違いは？
brタグにスラッシュが入った<br />を見かけることもあるかと思います。これは<br>と全く同じように改行の働きをします。
どちらも機能するのですが、スラッシュ無しの<br>と書いておくの良いかと思います。
