【初心者向け】HTMLで改行を入れる方法

HTMLでWebサイトを作る際に、

  • 文章を改行させたいけど、いまくいかない…!

そのような状態で困ったことはありませんか?

そこで今回は、

HTMLでの改行

改行させる方法2つ

改行の注意点

行間の調整方法

についてご紹介していきます。

HTMLでの改行

HTMLで作成するときに改行させたい場合ですが、通常の文章の書き方で書いてしまうとどうなるでしょうか。

このように表示されます。

ここで改行したい。 …けどうまくいきません。

これは、HTMLの仕様が原因です。

HTMLでは、

  • 「連続した半角スペース」
  • 「タブ文字」
  • 「改行文字」

1つの半角スペースとして表示されてしまうのです。

ですので、ページ上での表示で改行させたい場合は、違った方法を使う必要があります。

改行させる方法

 

基本的な方法として2つありますので順にご説明します。

<br>タグで改行する

<br>タグは「改行タグ」と呼ばれるタグです。

(「break(改行)」の略です)

さきほどの例を<br>タグを使ってみましょう。

このように表示されます。

ここで改行したい。
…今度はうまく改行されました!

うまく改行されましたね!

<p>タグで改行する

続いては段落タグである<p>タグを使用した方法です。

(「paragraph(段落)」の略です)

同じ例を今度は<p>タグを使ってみます。

このように表示されます。

ここで改行したい。

…今度もうまく改行されました!

今回もうまく改行されましたね!

改行させたくない場合

逆に、「ここは改行させたくないな」という場面も出てくると思います。

その際にはこちらのリンクの内容を参考にしてください。

CSSで改行させない方法!white-spaceとinline-blockで実現

改行での注意点

複数行あけたい場合も出てくるかと思います。

<p>タグで空白を開ける

その場合は、<p>で表現しようとした場合にこのように書いたとします。

このように表示されます。

ここで3行ほど空白をあけたい。

あれ?うまく空白があきませんでした。。。

この原因ですが、<p>タグは中身がなければ高さが0になるという仕様だからです。

<br>タグで空白を開ける

では、<br>タグではどうでしょうか。

このように表示されます。

ここで3行ほど空白をあけたい。

 

 

 

今度は上手く聴きました!しかし…

イメージしたとおりになりましたね。

しかし、この方法はHTMLのルール上、あまり推奨できない方法です。

行間を空けたい場合は次の方法を使ってください。

行間の調整方法

 

文章と文章の間の行間の調整方法ですが、CSSを使うのが基本です。

<p>タグで空白を開ける

<p>タグを使用した文章間で空白をあけたい場合は、CSSの「margin」プロパティで調整しましょう。

HTML

CSS

<br>タグで空白を開ける

<br>を使用した改行の文章で空白をあけたい場合は「line-height」プロパティで調整しましょう。

HTML

CSS

まとめ

以上、HTMLで思い通りに改行ができるよう、

HTMLでの改行

改行させる方法2つ

改行の注意点

行間の調整方法

についてご紹介いたしました。

画面文章のレイアウトにこだわりたい場合には必要な情報ですので是非マスターしてみてくださいね。