【初心者向け】HTMLでbrタグを使わない改行方法をご紹介!

【初心者向け】HTMLでbrタグを使わない改行方法をご紹介!

HTMLで改行といえばbrタグですよね。brタグを入れた箇所で改行ができますが、PCやスマホで改行した際のデザインが異なったり、改行幅が変だったりと不都合があります。そこでbrタグを使わない改行方法を今回ご紹介していきます。ぜひbr以外の改行も知っておきましょう。


目次[非表示]

  1. HTMLで改行するには?
  2. HTMLでbr以外で改行する方法
  3. まとめ

HTMLで改行するには?

HTMLで改行する際にbrタグを使って改行をするケースが多いです。brタグは「Break(改行)」の略でまさに文字通り、brタグを入れた箇所で改行をしてくれるタグです。

下記がbrタグを使ったサンプルコードです。brタグが入っている箇所で改行されていますよね。

brタグの使い方については下記の記事を参考にしてみて下さい。

HTMLのbrタグの意味・略語・使い方とは?間違った使い方を併せて紹介!

HTMLで改行タグといえば「br」タグになります。今回はbrタグの意味や略語、閉じタグや間違った使い方に関してご紹介していきます。改行タグのbrを正しく使ってマークアップしていきましょう!

Thumb

一方でbrタグでの改行で困る場合もあります。例えば改行したい位置でbrタグを2つ設置した場合にPCとスマホで見え方が違ったり、デザイン上brタグでスペースを空けると思い通りにならないケースが多々あります。

そこでbrを使わない、brタグ以外で改行する方法がおすすめで、次の章で紹介していきます。

HTMLでbr以外で改行する方法

HTMLでbrタグ以外で改行するには、pタグなどブロックレベルの要素を使って改行していく方法があります。

例えば先程の文章をpタグを使って改行してみましょう。

いかがでしょうか。PCとスマホで見ても同じ箇所が改行されています。このようにbrタグでは改行が見た目上PCやスマホで異なりますが、pタグなどブロックレベルの要素で改行することによって、PCとスマホで同じ見た目の改行をすることが出来ます。

改行幅(余白)の調整

pタグなどブロックレベルの要素で改行の役割を与えることで、改行幅(余白)の調整が枠になります。marginやpaddingなどのCSSで簡単に行なえます。

例えば先程のサンプルコードで改行をもっと開けたい場合は以下のようにします。

いかがでしょうか。pタグに対してmargin-bottomを30pxと広くとったため、先程よりも段落同士の余白が広くなりました。

まとめ

いかがでしたでしょうか?HTMLを勉強している時には「改行=brタグ」と教えるケースが多いですが、デザイン上の問題でPCとスマホで見た目を統一したい場合にはpタグでの改行がCSSでデザインを修正しやすくおすすめです。

ぜひbrタグを使わない、pタグを使った改行を試してみましょう。