スポンサーリンク

意外と知らない?HTMLとCSSのコメントアウト

2019年8月12日

今回は意外と知らない『コメントアウト』について書いてみたいと思います。

コメントとコメントアウト

コメントとは、HTMLやCSSの覚書や注意書きなどソースの中に書くメモのようなものです。
コメントは特定のな記号を用いて記述します。記号で囲われたコメント部分はブラウザで無視され、ブラウザ上では表示されません。

コメントで使用する特定の記号でソースを囲み、処理されないようにすることをコメントアウトといいます。

きらり
きらり

ブラウザで表示されないなら記述する意味ないよね。

結耶
結耶

コメントは見てくれる人のために書くわけじゃないよ。コメントは書く側の人のために使うものなんだよ!

コメントアウトを使う理由

前述でも書いたようにコメントアウトは覚書や注意書きと言ったソースの中に書くメモのようなものです。
タグやページの構成をわかりやすくしたり、タグなどを処理されないようにしたい場合などに使います。

スポンサーリンク

HTML コメントアウト

コメントアウトの書き方はとても簡単です。

HTML<!–– コメント ––>

コメントアウトは『<!––  ––>』で囲みます。<!––  ––>で囲まれた部分は表示されません。

表示サンプル 『きらり☆彡』では、0から始めた私(結耶)がアフィリエイトやブログ運営をするために勉強したことや体験談などを自分自身の備忘録も兼ねて書いています。

コメントはテキストの他にHTMLタグを囲むこともできます。『<!––  ––>』で囲まれたHTMLタグは表示されません。

また複数行を囲むこともできます。

表示サンプル 『きらり☆彡』では、0から始めた私(結耶)がアフィリエイトやブログ運営をするために勉強したことや体験談などを自分自身の備忘録も兼ねて書いています。

注意すること

HTMLのコメントアウトを書く場合注意することがあります。

1.コメントを入れ子にしない
コメントの中にコメントを入れてもコメントアウトは出来ません。
コメントを入れ子にした場合、どのように表示されるかはブラウザによります。入れ子にした場合、最初の『––>』までが表示されずブラウザによってはそれ以降は表示されます。
表示サンプル ※これはただのサンプルです。(コピー禁止) –>
『きらり☆彡』では、0から始めた私(結耶)がアフィリエイトやブログ運営をするために勉強したことや体験談などを自分自身の備忘録も兼ねて書いています。

2.『-(ハイフン)』を使わないようにする
コメントの中で『-』をできるだけ使わないようにしてください。『-』を入れた場合の表示はこちらもブラウザによります。ブラウザによってはコメントの中の『-』を終了タグと認識してしまうものがあるようなので、『-』を使わないようにしてください。

3.重要な情報を書かない
<!––  ––>』で囲んだ部分はブラウザ上では表示されません。ですが、ソースをみれば見ることができます。
ソースは誰でもみることができるので重要な情報を書かないようにしてください。

スポンサーリンク

CSS コメントアウト

CSSのコメントアウトのルールはHTMLのコメントアウトとは違います。

CSS/* コメント */

CSSのコメントアウトには『/*  */』を使います。

きらり
きらり

これは結耶もよく使ってるよね。

結耶
結耶

そうだね。CSSの見出しによく使うね。見出し付けておかないとどこの部分のスタイルなのかわからなくなっちゃうからね(^^;

CSSのコメントアウトではコメントに入れてはいけない文字はありません。ですが『/*』『*/』をコメントの中に入れるとエラーになりスタイルが適用されなくなるので注意してください。

書き方の例

1.見出し
結耶
結耶
これは一例です。編集・修正しやすくするために見出しを付けてわかるようにしています。
2.プロパティの説明
3.複数行を囲む

テキスト以外にも囲むことができます。

このようにスタイルを囲むと、囲んだスタイルは適用されなくなります。

JavaScript・php コメントアウト

JavaScript・php// コメント //

JavaScriptやphpのコメントアウトには『//   //』を使います。

WordPressのphpを編集する場合、記述されているコードを削除しなくてはならないことがあります。「削除するのは不安」なときは『//   //』で囲むと適用されなくなります。
※phpファイルを編集する場合は編集前にバックアップをとることをオススメします。

最後に

今回はHTMLやCSSのコメントアウトについて書いてみました。

HTML、CSSそれぞれの記号で囲われたコメント部分はブラウザでは表示されません。ですが、ページのソースは誰でもみることはできます。コメントの中に重要な情報を入れると他の人にみられてしまう可能性があるので。コメントを書く際には重要な情報を入れないように注意してください。

きらり
きらり

コメントアウトは書く側がHTMLやCSSをわかり易くするために使ったりするものなんだね。

結耶
結耶

そうそう。私もよく「どこだったかな~?」なんて探すことがあるから目印に使ったりするよ(^^;

上手くコメントアウトを利用してHTML文書やCSS文書をわかり易くしてください。

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。