HTML 改行タグの使い方・文中で改行する方法

本記事は広告が含まれる場合があります HTML

HTML改行タグbrの使い方・文中に改行を入れる方法

今回は、HTMLを勉強し始めた方向けに、brタグの使い方を説明します。

brタグを利用すると、文中の任意の箇所に改行を入れることができます。brタグはHTMLを勉強している人だけでなく、WordPressでブログを書いている人でも知っておくと便利なので覚えておきましょう。

brタグを使って文中に改行を追加している例
 

 

HTML改行タグbrの意味と使い方

brタグの基本的な使い方

brタグは文中に改行を入れることができるHTMLタグです。

改行したい箇所に<br>と記述してあげるだけでOKです。

brタグを使って文中に改行を追加している例

上の例では「〜HTMLタグです。」の後ろに<br>タグを記述しているため、こちらで改行されています。
 

brタグに閉じタグをつけてはいけません

brタグには閉じタグが必要ない(つけてはいけない)点に注意しましょう。

HTMLタグには空要素といって、閉じタグが要らないHTMLタグが存在します。brタグも空要素の1つなので閉じタグを記述しないように注意しましょう。

brタグは空要素の1つのため、閉じタグが要らない。

なお、<br><br />と書かれている場合もあります。

これはHTMLと(昔流行った)XHTMLの書き方の違いによるものです。今では一般的に<br>を使います。

 

 

brタグを綺麗に使う方法

基本的な使い方は前述の通りで、開業したい箇所に<br>タグを記述するだけです。

ただし、本来意味的に違う段落になる箇所をbrタグで改行したり、レイアウト目的でbrをたくさん入れて無理やり余白を作ったりすることは、推奨されないやり方なので参考に覚えておきましょう。

brタグを綺麗に使うには下記を意識しておきましょう。

■brタグを使う上での注意点・ポイント

  1. 各段落毎に改行を入れたい場合はpタグを使用する
  2. なるべくレイアウト目的では使用しない

 

各段落毎に改行を入れたい場合はpタグを使用する

まず、各段落毎に改行を入れたい場合はpタグを使用しましょう

基本的に各段落毎に改行したい場合はpタグを使用して、同一段落内で改行したい場合のみbrタグを使用します

同一段落内で改行したい場合はbrタグを使用する

なお、pタグの詳しい使い方については「【HTML pタグとは】pタグの使い方と改行brの違い」をあわせてご覧ください。
 

なるべくレイアウト目的では使用しない

brタグはなるべくレイアウト目的で使用しないようにしましょう。

brタグは文中で改行をするために使用されるHTMLタグのため、細かい余白調整などには不向きです。

例えば以下のように間にスペースを取りたいだけの理由(レイアウト目的)で使用することは一般的に推奨されていません。

 

スペースを取る(レイアウト目的)だけのために<br>タグを使うのは推奨ではない

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

引用:HTML Standard

そのため、レイアウト目的でスペースを取りたい場合はmarginプロパティやpaddingプロパティといったCSSのプロパティを利用するようにしましょう。

レイアウト目的でスペースを取りたい場合はmarginプロパティやpaddingプロパティといったCSSのプロパティを利用する

 
 

(応用)異なるウィンドウ幅になった際に改行ポイントを追加する方法

最後にbrタグの少し応用的な使い方として、以下のように異なるウィンドウ幅になった際に改行ポイントを追加する方法を紹介します。

CSSを知っている前提での説明になりますので、まだHTMLを勉強し始めてCSSがわからない方は一旦読み飛ばしていただいて大丈夫です。

 

異なるウィンドウ幅になった際に改行ポイントが追加されている例

異なるウィンドウ幅になった際に改行ポイントが追加されている例

異なるウィンドウ幅になった際に改行ポイントを追加するには、以下の3つの手順を踏む必要があります。

■異なるウィンドウ幅になった際に改行ポイントを追加する方法

  • STEP. 1:改行を追加したい箇所にbrタグを追加する
  • STEP. 2:CSSで初期状態では非表示にしておく
  • STEP. 3:ウィンドウ幅が変わるとbrタグを再表示させる

 

STEP. 1:改行を追加したい箇所にクラス名付きのbrタグを追加する

まず改行を追加したい箇所に任意のクラス名付きのbrタグを追加します。

今回はスマホの時とタブレットの時を想定して、以下の2箇所に下記のようなbrタグを記述します。

PC・タブレット・スマホの全てにおいて「今からでも遅くない!」と「プログラミングを習得して」の後に改行が追加された

この状態は、PC・タブレット・スマホの全てにおいて2箇所に改行されています。

 

STEP. 2:CSSで初期状態では非表示にしておく

次に、追加したbrタグ(改行)をCSSで非表示にしておきましょう。

STEP. 1で追加したbrタグにはあらかじめクラス名を付けているので、以下のように記述することで追加したbrタグ(改行)を非表示(無効)にしておくことができます。

display: noneを指定して、追加したbrタグ(改行)を無効にしている
これで改行がPC・タブレット・スマホのすべてで効かなくなりました。
 

STEP. 3:ウィンドウ幅が変わるとbrタグを再表示させる

最後にウィンドウ幅が変わると先ほど非表示にしたbrタグを再表示させるために、ブレイクポイントを使って「display: block」を指定しましょう。

異なるウィンドウ幅になった際に改行ポイントが追加されている例

これでウィンドウ幅が1024px以下(タブレット表示)になると「今からでも遅くない!」、599px以下(スマホ表示)になると「プログラミングを習得して」の後に改行を追加することができました。

あくまで一例ですが、こういったCSSを組み合わせたやり方でスマホの時だけ改行(または改行しない)といったことが可能になります。

 

 

まとめ

まとめです。今回は文中に改行を入れることができるHTMLタグ<br>の基本的な使い方を紹介しました。

brタグを使って文中に改行を追加している例

brタグを利用すると、文中の任意の箇所に改行を入れることができます。brタグはHTMLを勉強している人だけでなく、WordPressでブログを書いている人でも知っておくと便利なので覚えておきましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML