HTMLのコメント、改行、スペース

HTMLのコメント、改行、スペース：表示結果をその場で確認 | We.Inc

HTMLとCSSのコメントの書き方、改行や連続スペースの入れ方、スペースが詰まるのを防ぐ方法を解説します。すべての例は編集でき、表示結果を横で確認できます。

HTMLのコメント、改行、スペース

HTMLのコメントはのように書きます。ブラウザーは記号の間にあるものをすべて無視します。テキスト内で強制的に改行するには を、新しい段落を始めるにはを使います。ブラウザーは連続したスペースを1つにまとめるため、固定のスペースを1つ入れるには を、入力したとおりの間隔を保つにはCSSのwhite-spaceプロパティを使います。

早見表

やりたいこと
使うもの
補足

HTMLにメモを残す
ページのソースには見えるが、画面には表示されない

CSSにメモを残す
CSSで使える唯一のコメント形式

テキストの行内で改行する
住所、詩、歌詞

新しいテキストのまとまりを作る
スタイルで調整できる余白が付く

詰まりも折り返しもしないスペースを1つ入れる
 
数値と単位の間

すべてのスペースと改行を保つ
white-space: pre-wrap
長い行は折り返される

このページの各ケースでは、コードとブラウザーが実際に描画する結果を並べて示しています。どの例も編集すると結果が更新されるので、自分のページを直す前に、なぜスペースが消えたのか、なぜ改行が効かなかったのかを確認できます。

下のセクションから、自分の問題に合うケースを探します。コメント、改行、スペース、white-spaceプロパティに分かれています。
左側のコードを編集します。右側の結果は、スクリプトを無効にしたサンドボックスのフレーム内で実際にブラウザーが描画したものです。
目的どおりに動くものを自分のページにコピーします。
それでも間隔がおかしい場合は、ページ末尾近くの10のよくある間違いを確認してください。スペースが詰まる問題のほとんどはそのどれかです。

コメントには、マークアップが何かではなく、なぜそうなっているかを書きましょう。nav要素の上にと書いても何の情報にもなりません。
本番のHTMLに社内向けのメモが入ったコメントがあれば削除しましょう。誰でもページのソース表示で読めてしまいます。
タグを重ねる前に、CSSのmarginやgapを使いましょう。CSSの余白は画面サイズごとに変えられますが、改行の並びは変えられません。
 はインデントに使うのではなく、10 kmやMr. Khanのように、1行に収めるべき値の間に入れましょう。

よくある質問

HTMLの複数行をコメントアウトするには？

最初の行の前にを置きます。その間にあるものは、何行あってもすべて無視されます。コメントの中に別のコメントを入れ子にはできません。最初の-->でコメント全体が終わり、残りがテキストとして表示されてしまうからです。

HTMLで連続したスペースが無視されるのはなぜ？

HTMLは通常のテキスト内のスペース、タブ、改行の連なりを1つのスペースとして扱います。そのおかげで、ページに影響を与えずにソースを自由にインデントできます。複数のスペースを残すには、 エンティティを使うか、CSSで要素にwhite-space: pre-wrapを指定します。

、 、 のどれが正しい？

HTMLではどれも動作します。 は素のHTMLの書き方です。スラッシュは任意でHTMLパーサーには無視されますが、ReactのJSXでは自己終了形式の が必須です。

CSSで//コメントは使えますか？

使えません。CSSが理解するのは/* */だけです。//で始まる行はコメントではなく、パーサーは壊れたコードとして扱い、その後の宣言やルール全体を捨ててしまいます。このバグが一見ランダムに見えるのはそのためです。

条件付きコメントは今でも使えますか？

使えません。<!--[if IE]>のような条件付きコメントは古いバージョンのInternet Explorerだけが読み取るもので、Internet Explorer 10で廃止されました。現在のブラウザーはすべて通常のコメントとして扱うため、中のマークアップは表示されません。

改行が適切な場面

を使うべきなのは、改行そのものが内容の一部である場所です。住所の各行、詩の一節、署名欄などです。こうした場所では、読み手が手でテキストを書き写すときにも改行を残すはずです。
それ以外の場所では、改行はレイアウトであり、レイアウトはCSSで扱うべきです。 で区切った2つの段落は、デスクトップでは余白を広く、スマートフォンでは狭くしたくなるまでは問題なく見えます。marginを付けた2つの要素なら、どのブレークポイントでも変更でき、スクリーンリーダーも別々の段落として読み上げます。

スペースが詰まる理由と、4つの回避方法

通常のテキストに対するブラウザーの初期値はwhite-space: normalで、連続する空白をすべて1つのスペースにまとめ、必要な場所で行を折り返します。ソースのインデントが画面に表示されないのはこのためです。
スペースを残すには、エンティティ（ と、より幅の広い&ensp;や&emsp;）、<pre>要素、またはwhite-spaceの値pre、pre-wrap、pre-line、break-spacesのいずれかを使います。エンティティは1〜2か所の固定の隙間に向いており、CSSの値はコード、詩、ユーザーが入力したメモなど、テキストのまとまり全体に向いています。

コメントは公開されている

HTMLのコメントはすべての訪問者に送られます。ページには表示されませんが、ソース、保存されたコピー、検索エンジンがダウンロードする内容には含まれています。パスワード、社内のアドレス、顧客名、セキュリティホールに関するTODOメモをコメントに残してはいけません。
多くのビルドツールはコメントを自動で削除できます。Viteなどのバンドラーは、ミニファイ時にJavaScriptとCSSのコメントを取り除きます。indexファイル内のHTMLコメントを消したい場合は、HTMLミニファイの処理が必要になることがあります。