HTML WEBページの改行コードについて

ブログはEnterイコール改行になる

みなさんはWEBページ上の改行はどのようにされていますか？

基本的にHTMLサイトの場合は、改行したい箇所に<br>タグを直接記述していきます。このタグのある所でないと改行されません。

テキストエディタ上でEnterを押しても、そこで改行は反映されませんよね。

WordpressではEnterすると改行が自動挿入される

それに対してWordpressなどブログサイトの編集画面上では、Enterを1回押すと自動的に改行コードの<br>（brタグ）が1つ追加されるようになっています。

Enterを入れたHTMLソース上箇所に改行タグが入るので、そこできちんと改行されます。

行間を空けるのも簡単

管理画面でさらにもう1度連続してEnterを押すと、ソース上ではさらに<br><br>と改行がされ、ちょうど一行分の行間が空きます。

同じように3回Enterを押せば、2行分の行間が開くという訳です。

このようにブログなどの編集画面で行間を空ける場合は、何も考えずただ単純にEnterを押して連続して改行すれば対応ができます。

brタグの連打はダメ

先ほども言いましたがタグを手打ちして作成する際は、自分でこの<br>タグを直接記入していく必要があります。

しかし本来このbrタグの連続打ちは良くないものとされています。

ですのでbrタグを連続でつなげるやり方ではなく、きちんと段落タグやCSSで制御をするように推奨されています。

今までは改行タグ<br>で改行するのが一般的

任意の箇所で一段下に改行をする場合はbrタグを一つ入れる事に何ら問題はありません。

しかし行間をたくさん空けるためにbrタグをを連続で入れるのは構造上好ましくないという事です。

連続で<br>を使う良くない例

文章 <br> <br> <br> <br> <br> 文章

改行にはいろいろな方法がありますので、一通り改行の仕方をおさらいしましょう。

html上で改行する場合基本は段落pタグ

基本は段落タグのpを使う

pタグのpとは「Paragraph（段落）」の略です。

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

基本は改行をしようと意識せず、このpタグを使って文章をマークアップする事を心がけましょう。

【改行】 <p>段落文章</p>【改行】 <p>段落文章</p>【改行】

なぜ段落タグには改行が入るのか

「display:block」の要素

以上のタグは特に何も指定がない限り「display: block」となっています。

基本ルールとして、display: blockのタグに囲まれた要素の前後には改行が入るようになっているのです。

ですので、<p></p>や<h2></h2>、<div></div>の前後には、brタグを使わずとも自動で改行が入るようになっています。

brをどうしても使う場合

htmlバージョンに注意

ただしどうしてもbrタグを使う必要がある場合は自由に使って問題はありません。

HTMLは現在バージョンアップされてHTML5になっています。過去HTML4やXHTMLが使われてきましたが、現在の主流はHTML5ですね。

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

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

あわせて読みたい関連記事

理由：レスポンシブルデザイン対応が必要

今までは一段だけ改行をするためとりあえず<br>を使っていましたが、今はそうではなく段落pタグを使った方が良い明確な理由があります。

それはWEBサイトがレスポンシブルデザインへ対応しなければならなくなったからです。

スマホ画面で中途半端な位置で改行される

パソコン画面上では正しく改行されていても、スマホ等の画面幅の小さい端末で見たときに変なところで改行されてしまう可能性があるからです。

スマホで見た場合の例

スマホで見た場合、変なところで改行が入るのでバランスが悪い

文章を書く時はなるべくpタグだけで

さきほど説明した通り、pタグは段落を表現していますのでの前後には改行が入ります。

ですのでスマホ版で変なところで改行されないように、基本は段落が終わるまで横に並べるべきなのですね。

Wordpressも同様

Wordpressなどで文章を書く場合にも、pタグだけ使うようにするのがおすすめです。

改行が必要なところはそこでpタグ段落の終了であり、次のpタグ段落に進むのが自然な流れですね。

1行分の間隔を開けるには？

pタグで改行させるのは理解いただいたと思いますが、それではpタグを使って1行分の行間を空けるためにはどうしたらよいのでしょう。

CSSで段落タグの幅調整をする

まずは一段落分の間隔を空けるためのCSSクラスを作りましょう。

CSSに下記のようにマージンを記述

.mb2 { margin-bottom: 2em; }

一段落分の間隔を空けたい直前のタグにクラス名を追加

<p class="mb2">おはようございます</p> <p>Good morning</p>

1行の間隔が必要な部分の直前のpタグにクラス名を入れましょう。

そうすればCSSのマージンが効いて、1行分の余白が開きますね。

おはようございます Good morning

このように1行分の空間ができます。

応用編1：Enterを改行として反映させるコード

ここから応用編です。

brタグを使わずにHTMLでのEnterによる改行をそのまま反映させる事ができます。

これはCSSの「white-space」というプロパティが指定されている事によるものです。

HTMLソースとCSS記述例

<div class="ex"> おはようございます【ここにEnterが入っている】 Good morning </div> CSS .ex { white-space: pre; }

おはようございます Good morning

このようにwhite-space: pre;と記述がある部分についてはEnterの改行がそのままHTML上に反映されるようになっています。

preはタグとしても直接表記できる

preタグ

preとは「preformatted text」でいわゆるフォーマット済みのテキストという意味です。

半角スペースや改行をそのままHTML上に表示する場合に使用します。

<pre> おはようございます【ここにEnterが入っている】 Good morning </pre>

おはようございます
Good morning

このpreタグで囲まれた箇所はEnterを押した改行が反映されるようになっています。

その他の小技

半角スペースの非表示方法

HTMLではEnterキーを押して改行した場合、半角スペース一つ分として認識されるようになっています。

そこでその半角スペースを無くしたい時はどうすれば良いのか、その対処法を紹介していきます。

タグの中で改行させる事

終了タグの「>」を書く前で改行すると半角スペースを非表示にする事ができます。

<span>文章が入ります</span
><span>文章が入ります</span
><span>文章が入ります</span>

この様にするとEnterを押した部分に半角スペースは生まれません。

強制的に改行させない方法

white-spaceプロパティ

改行をさせない様にするには、white-spaceプロパティを使います。

white-spaceプロパティとは、HTMLソース内にある半角スペース・タブ・改行などの表示の仕方が指定できます。

今回は「nowrap」を使います。

「nowrap」はソース中の連続する半角スペース・タブ・改行を、全て1つの半角スペースとして表示するタグです。

この指定要素の範囲内では自動改行がされないようになります。

white-space:nowrapの設置例

sample text サンプルテキスト sample text サンプルテキスト sample text サンプルテキスト

ブラウザやレイアウトの幅に関係なく半角スペースは入っていますが、改行されずに表示されていますね。

あわせて読みたい関連記事

応用編2：スマホ版のみbrタグを無効にするコード

さらなる応用編ですが、スマホでは<br>改行をさせないようにできます。

そうすればbrタグをパソコン版に限定して使っても、スマホ版ではbrタグが効かないので改行される事がなく便利ですよね。

メディアクエリを使ったコントロール

ここでメディアクエリを使った制御技を紹介します。

下の方法は
「PCやタブレット等のモニター幅では改行が反映され、スマホでは改行がされなければ良い」
という特定条件下を想定したものとなります。

手順紹介

普通にbrタグを任意の位置に設置

まずはbrタグを文章中の改行したい位置（PC・タブレット向け）に入れます。

段落文章があります<br>段落文章があります<br>段落文章があります

そのbrタグにクラス名を付けます

例えば、<br class="no-kai">、など

段落文章があります<br class="no-kai">段落文章があります<br class="no-kai">段落文章があります

CSSのメディアクエリでスマホ表示の部分に下記を設定

@media only screen and (max-width:768px) { br.no-kai{ display: none; } }

実行結果を見てみよう

PC版文章

スマホ版文章

これでスマホでの閲覧の場合は改行タグに邪魔をされず、純粋にpタグの段落のみの文章となります。

応用編3：urlを改行させる方法

こういったブログ等でurl（WEBサイトのアドレスやパス）を表示させる事ってよくありますよね。

urlがあまりに長いものになると、改行がされずに枠からはみ出てしまう場合があります。

特にスマホ版で枠外にはみ出す

PCだけ見ていると気づかないかも知れませんが、スマホ版は幅が狭いので枠の外にはみ出しやすいです。

はみ出している分だけWEBページがスマホ画面に収まらずに、ページ枠自体が左右にズレる場合があります。

このままにしているとGoogle Search Consoleのモバイルユーザービリティに引っかかってしまう可能性があるのですね。

urlを枠内で自動改行させる方法

方法は簡単です。urlを記述しているタグに対して下記のスタイルを適用すれば大丈夫です。

.longurl{ word-break: break-all; }

これにより長いurlも枠内できちんと改行されるようになります。

リンクurlは<br>タグなどで任意に改行させると、リンクが切れたように見えるので気持ち悪いですしね。

スタイル適用例

スマホ版で確認するときちんと改行されていると思います。

部分的に適用しても良いと思いますが、urlがたくさん入る様なページもあるでしょうから、デフォルト設定としていた方がいいかも知れません。

まとめ

いかがでしたか

冒頭ではbrタグを使わずに段落タグだけで記述をして下さいと説明しましたが、実は他にも様々な方法があります。

preタグやCSSプロパティ・メディアクエリを駆使すれば、自在に改行をコントローする事が可能です。

特に応用編2のメディアクエリを使うと、スマホ版の事は一切気にせずに改行できますので便利ですよ。

一押し人気コーナー紹介