概要

/* : コメントの始まり
*/ : コメントの終わり

処理の対象とされない記述です。

まず comment を日本語訳してみるとカタカナでコメントとなり、さらにコメントという語句を調べると説明（よくわかるように述べること。）とあります。
コメントとは別の訳をと調べると付注（注をつけること。）とあり、さらに注という語句を調べると「本文中の語句や事項などについて、補足したり詳しく説明したりすること。また、その説明。 」とあります。

例示

  1. <div>SAPMLE</div>

CSS の例示の為の、CSS を指定していない HTML のみの例示です。

SAPMLE
  1. div { border-top: double; text-decoration: underline; }

上境界線に２本線を指定，テキストの装飾として下線を指定した例示です。

SAPMLE
  1. div { /* border-top: double; */ text-decoration: underline; }

上境界線に関する記述の前後に、コメントの始まりと終わりを記述した例示です。
上境界線に関する有効な記述がないので、上境界線が初期値の線を表示しないになります。

SAPMLE

活用方法

説明文

コメントで説明を記述する事により、内容を思い出しやすい，第三者が意図を理解しやすい，エディタなどの検索機能で探しやすいなど、便利になります。
欠点は、ファイルのデータ量が増えるという事と、コメントアウトの時に邪魔になる事があります。

  1. /* テキストの装飾のサンプルその１ */
  2. .cdvSample310 { border-top: double; text-decoration: underline; }

コメントアウト

コードの一部をコメント内に入れる(前後にコメントの始まり，終わりを記述する)事により、その記述が意図した効果を表しているのか確認する事が出来ます。また、他の記述の妨げになっているかを確認したりにも用います。
コメントアウトを多用したい場合は、あまり説明文としてのコメントを用いない方が作業が楽になります。

  1. border-style: dashed;
  2. border-width: 1px;
  3. border-bottom: solid;

境界線の線種を破線，幅を1pxで、下境界線だけ一本線にする意図で指定したら、下境界線の幅が太いです。

SAPMLE
  1. border-style: dashed;
  2. border-width: 1px;
  3. /*
  4. border-bottom: solid;
  5. */

下境界線に対する宣言をコメントアウトして、指定の仕方が悪いか，他の理由か確認します。コメントアウトした結果、下境界線は破線で細いので指定の仕方が悪いと判断できます。

SAPMLE
  1. border-style: dashed;
  2. border-width: 1px;
  3. border-bottom-style: solid;

border-bottom: solid; の記述が省略による初期値の扱いで、border-bottom: solid medium currentColor; という事から border-bottom-width: medium; をしていしている事になります。これを避ける為に、border-bottom-style とプロパティを修正して期待する結果が得られます。

SAPMLE

気を付ける点

入れ子に出来ない

コメントは、*/ があるまで続きます。
途中に/* があってもコメント扱いなので、２重，３重の入れ子には出来ません。

  1. border-top: dashed;
  2. border-left: dashed;
  3. /*
  4. border-right: dashed;
  5. */
  6. border-width: 1px;
  7. border-bottom: dashed;

3行目にコメントの始まり，5行目にコメントの終わりを記述した例示です。

SAPMLE
  1. border-top: dashed;
  2. /*
  3. border-left: dashed;
  4. /*
  5. border-right: dashed;
  6. */
  7. border-width: 1px;
  8. */
  9. border-bottom: dashed;

上記(before)の1行目の後(afterの2行目)にコメントの始まり，6行目の後(afterの8行目)にコメントの終わりを追記した例示です。
5行目(afterの6行目)にコメントの終わりが存在するので、そこでコメントが終わっています。6行目の後(afterの8行目)に追記した */(コメントの終わり) はエラーとなり無視され，それに続く元からあった記述もエラーとなっています。エラーの継続は、宣言の区切り ; (セミコロン) などがあるまで続きます。

SAPMLE
  1. border-top: dashed;
  2. /*
  3. border-left: dashed;
  4. /*
  5. border-right: dashed;
  6. */ /*
  7. border-width: 1px;
  8. */
  9. border-bottom: dashed;

6行目でコメントが終わっているので、その後ろにコメントの始まりを更に追記しました。その結果、当初の期待通りにその次もコメントは続いて先に追記した 8行目のコメントの終わりまで続きます。

SAPMLE

文字参照

content プロパティで文字列として */ を扱いたい場合は、*\02F と文字参照を用いておくべきです。通常は文字列として扱われていても /* からコメントの終わりを探されている途中に文字列の */ があると文字列として扱われずにコメントの終わりの記述として扱われてしまいます。

  1. .cdvSample321::before { content: "/* TEXT *\02F"; }
  1. .cdvSample322::before { content: "TEXT --\03E"; }