HTML入門:テキストの改行【<br>タグ】

    • このページをはてなブックマークに追加

    公開日:2016年08月10日 最終更新日:2019年10月24日

    1. HTML文書のテキストを改行してみよう

    1.1 <br>タグ

    HTML文書でテキストを改行させても、ブラウザー上では改行して表示されません。テキストの改行は半角のスペースとして表示されます。

    <!DOCTYPE html>
    <html>
    <head><title>HTMLの基礎(改行)</title></head>
    <body>
    この度は弊社のサイトよりご注文頂き誠にありがとうございます。
    お買い上げ頂いた△△△グッズのお届けは月曜日になりますので、
    商品の到着まで今しばらくお待ち下さい。
    </body>
    </html>

    ●ブラウザーの表示(改行タグなし)

    br0

    改行を入れたい場合は、<br>タグを使います。"br" は Break(改行)の略です。

    <body>
    この度は弊社のサイトよりご注文頂き誠にありがとうございます。<br>
    お買い上げ頂いた△△△グッズのお届けは月曜日になりますので、<br>
    商品の到着まで今しばらくお待ち下さい。
    </body>

    ●ブラウザーの表示(改行タグあり)

    br0-1

    ▲ページトップへ戻る

    1.2 改行タグ【<br>】と段落タグ【<p>】の違い

    HTML文書に限らず一般的に文章を作成する時には、大きな意味のまとまりで区切られた文を「段落」と言い、段落の後に「改行」を入れ、また次の段落を作成します。文章を「段落」と「改行で」構成する事で、文章を明確に分かりやすくします。
     HTML文書でも、この文章のまとまりである「段落」と「改行」をコードとして正しく指定します。
    「段落」を表すタグは<p>タグで、段落の最初と最後にコードを記述しましょう。段落の中に改行を入れる事は多くはありませんが、住所表示や詩などを書くときには、改行を入れて文章を作成します。

    <body>
    <p>
    ○×△株式会社<br>
    東京都中央区△△町0丁目0番地<br>
    ◇◇ビル28階<br>
    </p>
    </body>

    ●ブラウザーの表示(住所)

    br4

     <p>タグと</p>タグで囲まれた範囲は「段落」であるとみなされ、文章の前後それぞれに1行分のスペースが自動で入ります。

    <body>
    <h1>詩集</h1>
    <h2>【雨ニモマケズ】宮澤賢治</h2>
    <p>
    雨にも負けず<br>
    風にも負けず<br>
    雪にも夏の暑さにも負けぬ<br>
    丈夫なからだをもち<br>
    慾はなく<br>
    決して怒らず<br>
    いつも静かに笑っている<br>
    …
    </p>
    </body>

    ●ブラウザーの表示(詩)

    br2

    見出しタグ【<h>】、段落タグ【<p>】、改行タグ【<br>】を適切な場所に記述することで、ブラウザーでの見た目も自動で調整され見やすくなりました。

    ▲ページトップへ戻る

    2. 推奨される<br>タグの使い方

     レイアウトやデザイン要素をCSSのようなスタイルシートを使ってコーディングするということが定着していなかった頃には、行間のスペースを空けるために<br>タグを複数記述してレイアウトを調整するHTML文書が多くありました。また現在でも手軽にレイアウトを調整できるため<br>を使ってスペースを調整したり、文章の意味のまとまりをあまり考えずに<br>タグを利用しているページが多く見受けられます。
     本や正式文書のように、厳密に段落などの構成を作りあげる必要はありませんが、「段落」や「改行」の基本的なの考え方は、文章を本として出版するときの構成と一緒だと思ってもよいでしょう。HTML文書ではブラウザーでの見やすさとある程度の意味のまとまりを考えてページの構造を考えておくことも大切です。
     よく見られるおすすめできない<br>の使い方と推奨される<br>の使い方を見てみましょう。

    ●<br>タグを連続して使わない

     <br>タグを2つ3つと連続して記述するとスペースを空けることができますが、段落の後などにスペースを空けるときは、<p>タグを使いましょう。

    非推奨の記述

    <body>○○様<br><br>●下記内容にて商品を出荷致しました。<br><br>この度は弊社のサイトよりご注文頂き誠にありがとうございます。<br>お買い上げ頂いた△△△グッズのお届けは月曜日になりますので、<br>商品の到着まで今しばらくお待ち下さい。</body>

     意味のまとまりある「宛名」と「タイトル要素」、「本文」を段落タグ【<p>】で囲み、本文中の改行が必要な箇所で改行タグ【<br>】を記述しています。

    推奨される記述

    <body>
    <p>○○様</p>
    <p>●下記内容にて商品を出荷致しました。</p>
    <p>
    この度は弊社のサイトよりご注文頂き誠にありがとうございます。<br>
    お買い上げ頂いた△△△グッズのお届けは月曜日になりますので、<br>
    商品の到着まで今しばらくお待ち下さい。
    </p>
    </body>

     ブラウザーの表示はどちらも同じですが、HTMLの構文としては段落タグ【<p>】と改行タグ【<br>】を適切に使った記述が推奨されています。

    ●ブラウザーの表示

    br5

    ▲ページトップへ戻る

    ●ブラウザーのサイズを考える

     また、最近はスマホに対応したウェブサイトも多く見られるようになりました。
    表示するブラウザーの横幅が狭いと改行が見にくくなることもありますので、自分の見ているブラウザーの表示だけを確認するのではなく、ウィンドウのサイズを変えてみたり、ブラウザーの種類を変えて表示を確認して下さい。 ユーザーがホームページを見る環境も考慮してサイトのレイアウトなどを考えるようにしましょう。

    ●ブラウザーの表示(推奨)

    br3

    改行タグのついてるテキストは、横幅がせまくなると思わぬ表示になり見にくくなることがあるので、なるべく文章のまとまりで改行タグをいれるように心がけましょう。

    <body>
    <p>○○様</p>
    <p>●下記内容にて商品を出荷致しました。</p>
    <p>
    この度は弊社のサイトよりご注文頂き誠にありがとうございます。<br>
    お買い上げ頂いた△△△グッズのお届けは月曜日になりますので、
    商品の到着まで今しばらくお待ち下さい。
    </p>
    </body>

    ●ブラウザーの表示(推奨)

    br6

    ▲ページトップへ戻る

    最新案件情報をチェック!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...