CSSコードにコメントを含めることは便利であり、強くお勧めします。
すべてのウェブサイトは、そのサイトのビジュアルスタイルまたは「ルック＆フィール」だけでなく、HTMLで指示される構造要素で構成されています。 カスケーディングスタイルシート（CSS）は、ウェブサイトの外観を指示するために使用されるものです。 これらのスタイルは、Web標準への更新や遵守を容易にするために、HTML構造とは別に保持されます。
今日の多くのウェブサイトの複雑さの大きさにより、スタイルシートはすぐにかなり長くなり、作業が非常に面倒になります。 これは、 応答性の高いWebサイトスタイルの メディアクエリを追加するときに特に当てはまります 。 これらのメディアクエリだけでは、CSSドキュメントに多大な量の新しいスタイルが追加され、作業がさらに難しくなります。 これは、CSSコメントがウェブサイト上で非常に役立つようになる場所です。
ウェブサイトのCSSファイルにコメントを追加することは、ドキュメントをレビューしている人間の読者のために、そのコードのセクションに構造を追加するのに最適です。 また、あなた自身を含めて、将来的にサイトで作業しなければならないWebプロフェッショナルのためのスタイルを説明する素晴らしい方法です！
最後に、スマートに追加されたCSSコメントは、スタイルシートを処理しやすくします。 これは、実際にチームによって編集されるスタイルシートにとって重要です。 コメントは、すでにコードに精通していないチームメンバーにスタイルシートの重要な側面を伝えるために使用できます。 これらのコメントは、しばらく前から離れた後にコードに戻ってしまう前に、サイトで作業していた人にとって非常に役立ちます。 私はしばしば何ヶ月か何年も前に構築したウェブサイトを編集しなければならず、HTMLとCSSでコメントを整えるのが大変歓迎です！ サイトを構築したからといって、将来そのサイトに戻ったときに行ったことをなぜ覚えているのかを覚えているわけではありません。 コメントは、あなたの意図を明確にして、誤解が起こる前にそれを明確にすることができます。
CSSのコメントについて理解しておくべきことの1つは、ページがWebブラウザでレンダリングされるときに表示されないことです。 これらのコメントは、HTMLコメントと同様に情報提供のみを目的としています（構文は両者で異なります）。 これらのCSSコメントは、サイトのビジュアル表示には何ら影響を与えず、コード自体に存在します。
CSSコメントの追加
CSSコメントを追加するのは簡単です。 あなたは単にあなたのコメントを正しい開始と終了のコメントタグで予約するだけです：
- / *を追加してあなたのコメントを始めてください。
- * /を追加してコメントを閉じる
これらの2つのタグの間に表示されるものは、コード内でのみ表示され、ブラウザによって表示されないコメントの内容になります。
CSSコメントは1行にすることも、複数行にすることもできます。 ここには1行の例があります：
div＃border_red {border：細い実線の赤; } / *赤い枠線の例* /そして、複数行の例：
/ ************************************************* ******コードテキストのスタイル*************************** ************ ************** /セクションを分割する
CSSのコメントをよく使う方法の1つは、自分のスタイルシートをより小さく、より簡単に嫌な塊に整理することです。 私は後でファイルを熟読するときに、これらのセクションを簡単に見ることができるのが好きです。 これを行うために、多くのハイフンをコメントに追加して、コードをすばやくスクロールして見やすい大きな、明らかな改行をページに表示します。 次に例を示します。
/ * -----------------------ヘッダースタイル----------------------- ------- * /私がこれらのコメントの1つを自分のコードで見ると、それがその文書の新しいセクションの始まりであることが分かり、コードをより簡単に処理して使用することができます。
＆＃34;コメントアウトする＆＃34; コード
コメントタグは、ページのコーディングとデバッグの実際のプロセスにも役立ちます。 コメントは、そのセクションがページの一部でない場合に何が起こるかを見るために、そのコードの「コメントアウト」または「オフ」に使用できます。
それではどうやって動くの？ まあ、コメントタグはブラウザにそれらの間のすべてを無視するように指示するので、それらを使用してCSSコードの特定の部分を一時的に無効にすることができます。 これは、デバッグ時やWebページの書式設定時に便利です。
これを行うには、コードを無効にしたい場所に開始コメントタグを追加し、無効な部分を終了する位置にその終了タグを配置します。 これらのタグ間のすべてがサイトのビジュアル表示に影響することはなく、CSSをデバッグして問題の発生場所を確認することができます。 その問題に対処して修正し、コードからコメントを削除することができます。
CSSコメントのヒント
要点として、CSSでコメントを使用するためのヒントをいくつか紹介します。
- コメントは複数の行にまたがることができます。
- コメントには、ブラウザでレンダリングしたくないものの、完全に削除したくないCSS要素を含めることができます。 これはウェブサイトのスタイルシートをデバッグするうえで便利な方法です。ウェブサイト上に必要でないと判断した場合は、未使用のスタイルを削除してください（コメントアウトしないでください）。
- 説明を追加するために複雑なCSSを書くたびにコメントを使用し、将来の開発者、または今後自分自身が知っておくべき重要なことについて将来自分に通知する。 これにより、関係するすべての人の将来の開発時間を節約できます。
- コメントには次のようなメタ情報も含まれます：
- 著者
- 作成日
- 著作権情報
パフォーマンス
コメントは確かに役立ちますが、スタイルシートに追加するコメントの数が多いほど、サイトのダウンロード速度とパフォーマンスに影響します。 これは本当の懸念ですが、パフォーマンスが低下する恐れがあるため、参考にして正当なコメントを追加することを躊躇しないでください。 CSSの行は、ドキュメントに大きなサイズを追加しません。 CSSファイルのサイズに大きな影響を与えるには、TONS個のコメント行を追加する必要があります。 CSSに便利なコメントを追加しても、ページのスピードに悪影響を与えるものではありません。
最終的には、役立つコメントと多すぎるコメントのバランスを見つけて、両方のメリットをCSSドキュメントに取り入れることが望ましいでしょう。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：7/5/17