スポンサーリンク

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

2019年8月12日HTML・CSS

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

スポンサーリンク

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

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

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

きらり

きらり

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

結耶

結耶

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

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

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

HTML コメントアウト

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

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

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

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

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

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

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

<!-- きらり☆彡について
ここで簡単にサイトの説明を入れる。
※これはただのサンプルです。(コピー禁止) -->
『きらり☆彡』では、0から始めた私(結耶)がアフィリエイトやブログ運営をするために勉強したことや体験談などを自分自身の備忘録も兼ねて書いています。
表示サンプル

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

注意すること

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

1.コメントを入れ子にしない
コメントの中にコメントを入れてもコメントアウトは出来ません。
コメントを入れ子にした場合、どのように表示されるかはブラウザによります。入れ子にした場合、最初の『––>』までが表示されずブラウザによってはそれ以降は表示されます。

<!-- きらり☆彡について
<!--ここで簡単にサイトの説明を入れる。-->
※これはただのサンプルです。(コピー禁止) -->
『きらり☆彡』では、0から始めた私(結耶)がアフィリエイトやブログ運営をするために勉強したことや体験談などを自分自身の備忘録も兼ねて書いています。
表示サンプル

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

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

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

CSS コメントアウト

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

CSS/* コメント */

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

きらり

きらり

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

結耶

結耶

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

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

書き方の例

1.見出し
/*------------------------------
    大見出し
-----------------------------*/
/* 小見出し */
結耶

結耶

これは一例です。編集・修正しやすくするために見出しを付けてわかるようにしています。
2.プロパティの説明
.sample {
    background:skyblue;  /*背景色*/
    font-size:20px;  /*文字サイズ*/
    color:#000;  /*文字色*/
}
3.複数行を囲む
/*  コメント

  コメント 
 
  コメント*/

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

/*.sample {
    background:skyblue;
    font-size:20px;
    color:#000;
}*/

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

JavaScript・php コメントアウト

JavaScript・php// コメント //

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

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

最後に

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

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

きらり

きらり

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

結耶

結耶

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM