ホームページ（ウェブサイト）制作において、ユーザーにとって読みやすい文章レイアウトを構築することは非常に重要です。パソコンやスマートフォンなど、閲覧する画面の大きさが異なる環境において、適切に改行を制御するために使用されるのが、HTMLの「br」タグや「wbr」タグです。
「br」タグは「break」の略であり、テキストの途中で強制的に改行を入れる役割を持ちます。住所の表記や詩の区切りなど、文章の意味としてそこで改行することが正しい場面で使用します。一方、「wbr」タグは「word break opportunity」の略であり、「必要であればここで改行してもよい」という改行の候補位置を示すタグです。長いURLや英単語がスマートフォンの小さな画面で表示された際、レイアウトが崩れて枠外にはみ出してしまうのを防ぐために、あらかじめ「wbr」タグを挿入しておくことで、ブラウザが最適な位置で自動的に改行してくれます。
また、かつては改行を禁止するためのタグとして「nobr」タグが存在していました。しかし、このタグは正式なHTMLの規格として標準化されておらず、現在では非推奨（廃止扱い）となっています。改行をさせたくない文字列がある場合は、HTMLタグを使うのではなく、CSSで「white-space: nowrap;」と指定するのが現在の正しいルールです。
これらのタグを正確に使い分けることは、SEO（検索エンジン最適化）やWebアクセシビリティにおいて大きな意味を持ちます。よくある間違いとして、段落と段落の間に余白を作る目的で「br」タグを連続して使用するケースが見られます。検索エンジンのクローラーは、HTMLの構造を読み取って文章の意味を理解します。見た目の余白を調整するためだけに「br」タグを乱用すると、どこからどこまでがひとまとまりの文章（段落）なのかが正確に伝わらなくなります。
文章の段落は必ず「p」タグで囲み、行間の余白はCSSのマージン（margin）で調整します。「br」タグはあくまで段落内での改行にのみ使用することが求められます。事業用のホームページ（ウェブサイト）において、閲覧するすべてのユーザーや検索エンジンに対して、分かりやすく質の高いコンテンツを提供するための基本的なマークアップ手法と言えます。
本ページでは、「br」「wbr」の基本的な記述方法から、様々な画面サイズに対応し、集客力とユーザー満足度を両立させるための適切な改行コントロールの手法について詳しく解説します。
br（ブレイク、改行）
<br> <br />
ホームページ制作（ウェブサイト制作）の際に使用する<br>タグについてのご説明です。
ホームページ制作において<br>（ブレイク）タグを使用することによって、テキスト等の改行を行うことができます。
<br> 改行する、強制改行
Break（改行）。ブレイク。ホームページ制作において<br>を使用することで改行を行います。
ソース上の改行は反映されない（ブラウザによっては半角スペースと認識）ため、<br>を使用して改行します。
ホームページ制作での<br>の使われ方
ホームページ制作での<br>の使われ方は、段落中などでのテキストの改行です。文章の改行を目的としたHTMLタグですが、上下スペースのために使用されることもあります。
ただし、スペースの幅は閲覧環境によって異なり、正確な記述としてはCSSでmarginなどを指定する方法です。
ブログなどで改行を利用してスペースが設置されている場合がありますが、SEOにもあまり良くないので、なるべくホームページ制作での正式な使用方法である改行のときにだけ使用しましょう。
閲覧環境によって改行のスペース幅が異なる
閲覧環境によってスペース幅が異なるため、上下スペースの幅を正確に指定するときは整形した<table>かCSSで指定します。
通常単体で使用し、閉じタグを使用しないタグは<タグ/>を使用しますが、<br>タグは、html5よりスラッシュありでもなしでも記述可能です。
<br>
<br />
ホームページ修正事例 文字の改行、段落ちや余白、フォームのズレの調整
ホームページ制作・SEOの1ポイント
ホームページ制作でページ内のテキスト間や画像とテキストの間など、余白を設ける場合に改行を利用しているケースがありますが、正規の方法としては、CSSのmarginなどを利用します。
あくまで段落内などでテキストの改行を行う時に使用するのが<br>ですので、SEOを考える上でも基本的には<br>が続く連続使用は行わないほうが良いでしょう。
wbr
<wbr>
ホームページ制作（ウェブサイト制作）の際に使用する<wbr>タグについてのご説明です。
ホームページ制作において<wbr>タグは、ページの中で改行してもよい位置を示す場合に使用します。
強制的な改行を指定するわけではありませんが、ホームページ制作の中で、ホームページの中で改行してもよい場所を指定する場合に用います。
<wbr> 改行してもよい位置を示す
<wbr>タグは、旧来はNetscape Navigator（ネットスケープナビゲーター）独自仕様。
ホームページにおける<wbr>タグは、<nobr>で自動改行を禁止した際に改行しても良い位置（改行位置の候補）を指定するタグです。
html5で標準採用。
<wbr>タグを挿入した箇所での改行を許可します。
単純に改行の指定をする場合は、<br />を使用します。このタグはページ中のテキストの強制的な改行を指定します。
文章の改行に関するCSSプロパティ
<wbr>はhtmlタグのため、論理構造としての改行許可箇所の指定になると考えられます。
単語単位の改行などの指定は、CSSで「装飾方法・表現方法」としての指定をすることができます。
<wbr>
レスポンシブWebデザインにおけるwbrタグの高度な活用
昨今のWeb制作、特にスマートフォン対応が必須となった現在において、このwbrタグは単なる「改行候補」以上の重要な役割を担っています。
制作現場では、画面幅に応じてレイアウトが流動的に変化するレスポンシブデザインの中で、意図しない表示崩れを防ぎつつ、可読性を最大化するための「微調整の切り札」としてこのタグを使用します。
word-break: keep-all との組み合わせによる「文節改行」の制御
特に日本語のホームページ制作において、非常に有効なテクニックがあります。それは、CSSで word-break: keep-all; を指定し、単語の途中での改行を原則禁止にした上で、改行しても良い文節の区切りにのみ <wbr> を挿入するという手法です。
従来の<br>タグでは、PCなどの大画面で見た際に不自然な位置で改行が入ってしまう問題がありましたが、この手法を使えば「画面幅が狭い時だけ、指定した区切りの良い位置で改行する」という、非常にスマートな挙動を実現できます。これにより、どのようなデバイスで見ても美しい日本語の文章構造を維持することが可能です。
長大なURLや専門用語によるレイアウト崩れの防止
商品コードや長い英単語、あるいはURLなどを狭いスマートフォン画面で表示する際、これらが枠を突き抜けてデザインが崩れてしまうことがあります。CSSの overflow-wrap: break-word; などで制御することも一般的ですが、単語の区切りとして不適切な場所で切れてしまうことを防ぎたい場合があります。
そのような際、意味の切れ目にを仕込んでおくことで、ブラウザに対して「切るならここ」という指示出しができ、ユーザーにとって読みやすい改行位置を維持しながら、デザインの崩れを未然に防ぐことができます。
ユーザー体験（UX）とSEOへの貢献
こうした細部へのこだわりは、ユーザーの「読みやすさ」に直結します。ストレスなく読めるコンテンツは、結果としてページの滞在時間を延ばし、直帰率を下げる要因となります。
Googleなどの検索エンジンは、ユーザー体験を重要な評価指標としています。目に見えないコードレベルでの配慮が、巡り巡って事業のSEO成果を底上げする要因の一つとなります。
ホームページ制作・SEOの1ポイント
ホームページ制作において、改行を連続で行って空白を作る方法は、あまり推奨されません。ブログ等でコンテンツを制作する場合、ビジュアルモードでライティングすると、どうしても改行でスペースを作りがちですが、中身が空白の段落の指定や改行が連続することはSEOとしては少しだけマイナスに働きます。なるべく正規の方法でHTMLマークアップを行いましょう。
nobr
<nobr></nobr>
ホームページ制作（ウェブサイト制作）の際に使用する<nobr>タグについてのご説明です。
Netscape Navigator独自仕様ですが、ホームページ制作において<nobr>タグを使用することで、自動改行の禁止を指定することができます。
<nobr> 自動改行の禁止（NN）
<nobr>タグは、Netscape Navigator独自仕様です 。ホームページ（ウェブサイト）のページ中に<nobr>タグを設置することで、ブラウザやテーブルの横幅に関係なく改行せずに表示します。
<wbr>を使用することにより<nobr>内で、 改行を許可する位置を指定します。
<nobr></nobr>
この<nobr>タグは廃止されています。
ホームページ制作・SEOの1ポイント
ホームページ制作で、出来上がったサイトを様々なブラウザで確認すると、文字の改行箇所がそれぞれ異なることがあります。これは、それぞれのブラウザのCSS解釈やブラウザの解像度による影響です。スマートフォン表示などでは、ビューポートと日本語の改行が常に問題になります。厳密な改行をするためには、現状はかなりの工夫が必要ですが、SEOとの関係性もありますので、ある程度の日本語改行問題は、妥協していく必要があるでしょう。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作実績
新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作（ホームページ作成）に対応しています。
ホームページ制作実績
ホームページの更新・修正
ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。 ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・エラー復旧にも対応しております。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）を制作し、運用していく中で、テキストの折り返しや改行の制御は非常に重要です。特にスマートフォンでの閲覧が主流となっている現在、長いURLや英単語が画面の幅を超えてはみ出してしまう「レイアウト崩れ」は、ユーザーの利便性を大きく損なう原因になります。画面を横にスクロールしなければ文章が読めない状態は、訪問者に強いストレスを与え、結果と
-
現在のホームページ（ウェブサイト）制作において、画面上の特定の場所に要素を配置して重ね合わせたり、新聞のように文章を複数の段落に分けたりするデザインは当たり前のように使われています。インターネットの普及期であった1990年代後半、これらの高度なレイアウトを実現するために特定のブラウザ（Netscape Navigator 4など）で独自に生み出されたのが、「
-
ホームページ（ウェブサイト）運営において、一度公開した情報を常に最新かつ正確な状態に保つことは非常に重要です。事業を取り巻く環境の変化やサービスの改定に伴い、ページ内のテキストを後から修正したり追記したりする場面は頻繁に発生します。その際、単に古い文章を消して新しい文章に書き換えるのではなく、「どこが削除され、どこが新しく追加されたのか」を明確に示すために使
-
ホームページ（ウェブサイト）制作において、ページのデザインやレイアウトを構築する際、最も頻繁に使用されるHTMLタグが「div」と「span」です。これら二つのタグには、他の多くのHTMLタグ（見出しを表すhタグや、段落を表すpタグなど）とは異なる大きな特徴があります。それは、タグ自体に「特定の意味を持たない（セマンティクスを持たない）」という点です。 特定
-
ホームページ（ウェブサイト）制作において、事業に関する専門用語や独自のサービス内容をユーザーへ分かりやすく説明することは、情報の正確性を担保する上で非常に重要です。特定の用語とその意味をセットにして記述し、検索エンジンに対して「ここは用語の定義をしている部分である」と正確に伝えるために使用されるのが、HTMLの「dfn」「dl」「dt」「dd」といったタグで
