HTMLのbr要素を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのbr要素について解説しています。これは文章内で改行を入れる際に利用されます。br要素の書き方と、使用する際の注意点について覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

HTMLのbr要素について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

br要素について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLのbr要素とは

HTMLのbr要素は、文中に改行を生成する為に使用されます。市や住所など、行の分割が必要な場合に使います。終了タグはなく、

<br>

のみ記述します。

 

br要素で改行を入れる方法

br要素を使って改行を入れる場合、次のようにコーディングします。

<p>改行なし</p>
  <p>改行<br>あり</p>

改行を入れたい部分にbr要素を書きます。終了タグは必要ありません。

 

[PR] Webデザインで副業する学習方法を動画で公開中

br要素の使用上の注意点

br要素はお手軽に改行を差し込めるため、改行以外の目的で使用することは推奨されていません。例えば、行間を調整する為にbrタグを使用してもユーザーの環境によって大きく表示が変化する可能性があります。

また、改行目的で使用してもユーザーのフォントサイズによって、想定した改行にならないこともあります。そういった場合はline-heightやmarginを使用してcssで表示をコントロールする方が一般的です。

 

実際に書いてみよう

それでは実際に使ってみましょう。以下のコードを書いて、結果を確認してみましょう。

<p>
  Lorem ipsum dolor sit amet,<br>
  consectetuer adipiscing elit.<br>
  Aenean commodo ligula eget dolor.<br>
  Aenean massa. Cum sociis natoque<br>
  penatibus et magnis dis parturient montes,<br>
  nascetur ridiculus mus. Donec quam felis,<br>
</p>

出力結果は以下のようになります。

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque

penatibus et magnis dis parturient montes,

nascetur ridiculus mus. Donec quam felis,

以上で解説を終わります。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

監修してくれたメンター

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する