スタイルシートのコメントの記載方法

HTMLとスタイルシート wordpressでブログを作ろう

 スタイルシートにコメントを入れてみよう。

 スタイルシートをカスタマイズするときにコメントの入れ方を覚えておくと「どこをどうカスタマイズしたか忘れた!」なんてことが無くなる。

広告

コメントまたはコメントアウトとは

1、スタイルシートが何を意味しているかの説明を入れる。

2、サイト表示上は表示されない(のでコメントアウトというらしい)ので、基本的にはスタイルシートのカスタマイズなどのときの覚書として使う。

3、ソース上には表示される。

*サイト上には表示されなくても、ソースを見ると誰でもコメントを見ることができるので、あまり変なことは書かないほうが良いけどね。

スタイルシートのコメントの記載方法

スタイルシートのコメントの基本は「/*+コメント+半角スペース+*/

/* 1行コメント */

/* コメント1
  コメント2
 */

 コメントと*/の間は、半角スペースまたは半角英数字をいれる。

半角スペースが入らないとどうなる?

 */の前に半角スペースなどが入らないと、次に「半角スペースなど*/」の記載があるまでのスタイルシートの記述をコメントとみなしてしまう。

 結果、スタイルシートがコメントとみなされて、サイト上に表示されないというトラブルが起こる。

/***1行コメント***/

/***コメント1
  コメント2
***/

 ↑のような書き方をしても[*]が半角であれば大丈夫。

コメントは入れ子にして使わない

 スタイルシートのコメントは入れ子にして使うことはできない。

NG例
/***1つ目のコメント/***2つ目のコメント***/***/

スタイルシートのコメントの使い方

/∗ p要素の文字色 ∗/
p{color:#000000;}

 のようにスタイルシートの始まりにコメントを入れる。

p{color:#000000;} /∗ p要素の文字色 ∗/
div{color:#ffffff;} /∗ div要素の文字色 ∗/

 のように、スタイルシートの横に書くこともできる。

スタイルシートのコメントwordpress初心者の覚書

・スタイルシートのコメントの前後には半角スペースを入れる癖をつけるか奇数の*をつける。

コメント

タイトルとURLをコピーしました