Skip to Main Content

★HTML/CSSによる文書の作成とデザイン: 隠しコメントの記述

ホームページやブログのデザインはHTMLという言語によって記述されています。もしあなたがブログを作る機会があったら使える知識がここにあるかも?

目次

コメントの記述方法

HTMLでは<title>~</title>で挟むことでページタイトルを、<body>~</body>で挟むことでページの内容を表示させることが理解できたと思います。ではただのメモのような表示したくない内容、つまりHTML文中に隠しコメントを挿入するにはどうしたら良いでしょうか。その際に使用されるのがコメントアウト<!-- ~ -->と記述します。使用例は以下の通りです。

<!-- HTMLのコメントアウト -->

複数行に渡る場合は改行しても構いません。

<!-- ここからHTMLのコメントアウト
この文面はページには表示されません
ここまでコメント -->

コメントアウトの内部にタグを含む文書を記述していても反映されないので、一度消したコードや予備のコードを残しておくことができます。ただし、(括弧の中に括弧をいれるような)コメントアウトの入れ子構造にならないように気をつけましょう。

<!-- ここからHTMLのコメントアウト
そしてこれが<!-- 入れ子コメントアウト -->ですね
ここまでコメント -->

この時実際のコメントアウトとして認識されるのは赤字の部分になります。後半部分が隠しコメントになりませんね。

面白い隠しコメントを探してみよう

さて、このHTMLを利用して企業はホームページを作成しているわけですが、中にはコメントアウトに隠しメッセージを忍ばせているページもあります。有名なのは「食べログ」のホームページです。実際にソースコードを表示してみると一番上にアスキーアートを用いて作られた食べログのロゴと採用ページへの案内文が現れます(ブラウザによっては見づらいかもしれません)。

また、Amazonのソースコードの一番下には猫なのかアヒルなのかよくわからない何かが描かれています。

ごく一部のわざわざソースコードを見に来る人のための遊び心なのかもしれませんね。