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

2019年8月12日2021年7月17日HTML・CSS

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

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]

¥2,178 （2024/09/28 20:24時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

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

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

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

きらり

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

結耶

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

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

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

HTML コメントアウト

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

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

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

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

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

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

注意すること

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

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

CSS コメントアウト

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

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

きらり

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

結耶

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

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

書き方の例

/*------------------------------
    大見出し
-----------------------------*/
/* 小見出し */

結耶

これは一例です。編集・修正しやすくするために見出しを付けてわかるようにしています。

.sample {
    background:skyblue;  /*背景色*/
    font-size:20px;  /*文字サイズ*/
    color:#000;  /*文字色*/
}

/*  コメント

  コメント 
 
  コメント*/

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

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

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

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