HTMLで改行するには?改行タグ<br>の正しい使い方と注意点


HTMLで改行するにはどうすればいいの?
改行タグと段落タグの使い分けがいまいちわからない
改行の基本を理解したい

こんにちは!HTML、CSSが得意な侍エンジニアブログ編集部のシホです。みなさんはHTMLで改行するとき、改行タグ<br>や段落タグ<p>を使っていると思いますが、上手く使い分けられていますか?

とりあえず改行は<br>だ!と思って使いすぎてしまうとちょっと困ったことが起きてしまいます。改行タグ<br>と段落タグ<p>の役割をきちんと理解して、見やすいコーディングをマスターしましょう!

この記事はこんな人のために書きました

  • HTMLで改行するには
  • 改行タグと段落タグの基本的な使い方
  • 意図的に改行させたくない場合

HTMLで改行する方法についてわかりやすく解説していますので、ぜひ参考にしてください

HTMLで改行するには

HTMLで改行したいとき、普段テキストで使うようにEnterで改行してみると上手く改行できません。

See the Pen odBweX by Shiho Sakai (@shiho-sakai) on CodePen.0

Enterで改行した結果

このように、テキストで普通にEnterで改行してしまうと、一文字分の空白がはいっただけで改行されません。改行するためには「改行タグ<br>」「段落タグ<p>」を使って明示的に書く必要があります。

HTMLで改行する方法と注意点

改行タグ<br>で改行する

brは「BRreak(改行)」の略です。「ここで1行改行する」という意味なので、終了タグは必要ありません。

See the Pen YLNQoZ by Shiho Sakai (@shiho-sakai) on CodePen.0

改行タグで改行した結果

改行タグ<br>使用時の注意点

改行タグ<br>を使う際に3つ注意して起きたい点があります。

連続で<br>を使わない

行間をたくさんあけるために次のように<br>を連続で使うのは構造上好ましくありません。

See the Pen ZoLydd by Shiho Sakai (@shiho-sakai) on CodePen.0

連続で改行タグを使用した結果

行間をたくさんあける場合は、後で説明する段落タグ<p>を使うかCSS(ページをデザインする言語)でやりましょう。

バージョンによってタグが違う

HTMLは時代によって何度かバージョンアップされてきました。過去HTML4やXHTMLが使われてきましたが現在はHTML5が主流となっています。

HTML4とHTML5では<br>を使うことができますが、XHTMLは<br>ではなく<br />を使うので気をつけましょう。

また、brと/の間には半角空白が必要なので要注意です。

他のディバイスで同じように表示されるとは限らない

改行するならとりあえず<br>を使っておこうという認識は少し危険です。なぜかというと、パソコンのブラウザ上では正しく改行されていても、スマホで見たときに変なところで改行されてしまう可能性があるからです。

以下がスマホで見た場合の例です。

スクリーンショット 2018-04-29 18.19.31

文章最後の数文字でスマホの横幅の限界により改行されていますね。これでは大変読みづらくなります。このようになってしまう場合もあるので、むやみやたらに<br>を使うのではなく、次に説明する段落タグ<p>を使うのをおすすめします!

段落タグ<p>で改行する

続いては、段落タグ<p>を使って改行する場合です。pは「Paragraph(段落)」の略です。

段落タグ<p>の目的は文字通り段落をつけて文章を見やすくするためにあります。<p></p>で囲むことによって文章のまとまりが一目でわかるようになり、改行できます。

See the Pen OZWjgo by Shiho Sakai (@shiho-sakai) on CodePen.0

段落タグで改行した結果

改行させない方法

HTML5では<nobr>を使って改行させない方法がありましたが、最近廃止されたようです。

改行せずにブラウザに表示したい場合は、CSS(ページをデザインする言語)を使いましょう!

WEBサイト製作スキルを身につけて自由に働きたい方は

HTMLを学んでいる人の中には、その先にフリーランスとして案件を獲得し、自由な生活をしたいと考えている人もいるのではないでしょうか。

そんな方はHTMLやCSSのようなマークアップ言語だけでなく、JavaScriptやPHPなどのいわゆる「プログラミング言語」も扱えるようになる事をオススメします。

というのも、HTMLやCSSだけの案件は数が少ないことに加え、単価も低い案件が多いからです。しかし、HTMLやCSSに加えてプログラミングスキルがあれば、高単価案件を継続的に獲得しやすくなります。

かといって、プログラミング言語の習得はHTMLやCSSと比べて難易度が一気に上がるため、学習途中で挫折する独学者は多くいます。

事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを経験した」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

またこうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 確実にスキルを身につけられると思ったから
  • 独学では不安がある
  • 効率よく学べそう

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

「効率よく学べそう」という回答に関しては、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたインタビューでも「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

独学でなく、プログラミングスクールにわざわざ入る理由とは?【インタビュー総集編】

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな...」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できるほどのスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績3万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス
  • 不安や悩み・勉強の進み具合を相談できる学習コーチ

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

侍エンジニアのサポート体制_01 (1)
侍エンジニアのサポート体制_02 (1)
侍エンジニアのサポート体制_03 (1)
侍エンジニアのサポート体制_04 (1)
侍エンジニアのサポート体制_01 (1)
侍エンジニアのサポート体制_02 (1)
侍エンジニアのサポート体制_03 (1)
侍エンジニアのサポート体制_04 (1)
previous arrow
next arrow

侍エンジニアのサポート体制

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

出典:httpscodecamp.jpcoursesmaster_design (1)
2
3
4
5
6
出典:httpscodecamp.jpcoursesmaster_design (1)
2
3
4
5
6
previous arrow
next arrow

侍エンジニアのカリキュラム例

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なぜ侍エンジニアが挫折せずプログラミングスキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

まとめ

いかかでしたでしょうか?

改行タグ<br>と段落タグ<p>の使い分けを正しく理解しておくと、とても見やすくなり、どのブラウザでも同じように表示ができます。

HTMLで改行する時は、ぜひタグの意味や役割を理解して使ってみてください!

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。月額2,980円から学べて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

公式サイトからご入会いただくと、お得なクーポンを利用できるので、気になる方はぜひ詳細をご覧ください。

詳しくはこちら

Writer

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close