【HTML初心者入門】<br>タグとは？使い方も解説！
みなさんはHTMLの学習をしていませんか？
今回の記事では改行ができる<br>タグの使い方や注意点について紹介していきます！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
改行が出来る
br タグは改行を挿入します。英単語breakの略です。挿入したその位置で改行します。
HTML文書では、テキストエディタで改行した部分は改行にはなりません。よって、文章を明示的に改行するためにはこの <br> を用います。
ただの改行はbrタグですが、ブロックとして切り分けたい場合は、 <div> を使用します。
また、HTML文書の改行をそのまま改行として表示したい場合には <pre> を用いるとテキストエディタのレイアウト通りに改行できます。
・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。
【初心者入門】HTMLの学習で参考になるおすすめのブログ８選！を参考にしてみてください。
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
使用上の注意点
行頭に書いた場合の動作
<br> を行頭に記述していると、その直前の行の末尾がブラウザの右端に配置される時に1行余分に改行されてしまうことがあります。
<br> タグは行末に記述する方が間違いありません。行頭や行間に記述する場合は十分動作確認してお使いください。
<br>と<br />
<br>という表記と<br />という表記の両方があります。
この違いというのは、そのページが「HTML」で書かれているか、「XHTML」で書かれているかの違いです。
XHTMLは、「開始タグで始まれば終了タグ（閉じタグ）を必ず入れなければならない」というルールがあります。(もちろんHTMLも厳密にはそうですが、エラーにはなりません）
たとえば、<p>で始まれば</p>で終わるというものです。
しかし、<br>は終了タグが存在しないため、<br />と表記するようになっています。<img />タグなども同じ理由です。
ちなみに、HTMLはそこまで厳密ではないため<br />と書いてもエラーにはなりませんし、動作します。
・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト４選！を参考にしてみてください。
<br>の連打
HTMLでは<br>を続けて使って、行間を大きくとるため・空白行を入れるためなどの間隔開け目的などに使用するのは、文法違反とされています。
間隔開けはCSSで、段落は<p>など、タグの正しい用途を守っていきましょう。
<br> 改行を正しく使うべき理由は 主に 2 つあります。
ブラウザの表示を統一して読みやすくする
ある程度適当な記述でも、ブラウザは自動補正して表示してくれます。
改行タグ <br> に関して言うなら、連続して使用すればどのブラウザでもそのぶんだけ改行して表示してくれます。
つまり、人が見る上では現在の仕様では問題は出にくいです。
段落 <p> と段落の間は 1 ～ 1.5 行ぶんの空白をとるのが一般的ですが、CSS の設定によっては余白がない場合もあります。
しかし、改行と段落タグをはじめとするタグの仕様は、仕様が変更された場合に意図しない動作をして困るかもしれません。
各タグの正確な使い方を覚えておけば、どのブラウザでも同じように表示させることができますし用途が正しければ仕様変更とはいえ、問題がおきることは少ないです。
記事の構造を検索エンジンに適切に伝える
HTML タグを正確に使う一番の理由は、検索サイトに記事の構造を適切に伝えるためです。もちろん、正しい記述をしたから必ず上位表示されるわけではありません。
しかし、大事な要素であることに変わりはありません。
構造以外の要素がほぼ同レベルなら正しい記述をしておいたほうが有利、ぐらいに考えておくといいかもしれません。
レスポンシブ対応
<br>は明示的に改行を挿入でき、意図通りに改行できますが、その代わり融通がききません。
たとえば、PC環境に合わせて改行を差し込んでも、スマホ等で覗くと最適な改行位置にはなっていない場合が多々あります。
レスポンシブ対応などを考える場合に、改行を様々な環境に適応させるのは、例えば<p>要素で段落わけをして自動改行を利用するなど、よく考えて最適なタグを検討します。
サンプル
<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>
ここが1行目です。<br>
改行後の2行目です。<br>
3行目です。<br>
4行目です。<br>
ここがみっつめの段落です。<br>
間隔開けなどの場合は<br>
pタグ等を使用しましょう。<br>
</body>
</html>初心者の方向けにbrタグを編集していきましたが、いかがでしたか？
brタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね！
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
