CSS コメントを挿入する方法

CSS コードにコメントを含めると、効果的な開発が促進されます

pxhere.com / CC BY 0

すべての Web サイトは、構造的、機能的、およびスタイル的な要素で構成されています。 カスケード スタイル シート Web サイトの外観 (「ルック アンド フィール」) を指定します。これらのスタイルは HTML 構造から分離されているため、更新が容易になり、Web 標準に準拠できます。

スタイルシートの問題

今日の多くの Web サイトのサイズと複雑さにより、スタイルシートは非常に長くて扱いにくくなる可能性があります。この問題は複雑化しており、 メディアクエリ 為に レスポンシブ Web サイト スタイル デバイスに関係なく、Web サイトが本来あるべきように見えるようにするための、デザインの重要な部分です。これらのメディア クエリだけでも、大量の新しいスタイルが CSS ドキュメントに追加される可能性があり、作業がさらに難しくなります。この複雑さを管理することは、CSS コメントが Web サイトのデザイナーや開発者にとってかけがえのない助けになる場合があります。

コメントは構造と明確さを追加します

Web サイトの CSS ファイルにコメントを追加すると、ドキュメントをレビューする人間の読者のために、そのコードのセクションが編成されます。また、ある Web 専門家が別の Web 専門家が中断したところから引き継ぐ場合、または人々のチームがサイトで作業する場合にも、一貫性が確保されます。

整形式のコメントは、スタイルシートの重要な側面を、コードに詳しくないチームのメンバーに伝えます。これらのコメントは、以前にサイトで作業したことがあるが最近は作業していない人にも役立ちます。通常、Web デザイナーは多くのサイトで作業しており、デザイン戦略を次から次へと思い出すのは困難です。

専門家の目にのみ

ページのレンダリング時に CSS コメントが表示されない ウェブブラウザ .これらのコメントは情報提供のみを目的としています。 HTML コメント です (ただし、構文は異なります)。これらの CSS コメントは、サイトの視覚的な表示にはまったく影響しません。

CSS コメントの追加

CSS コメントの追加は非常に簡単です。正しいコメントの開始タグと終了タグを使用して、コメントをブックエンドにします。

を追加してコメントを開始します /* そしてそれを閉じます */ .

これら 2 つのタグの間に表示されるものはすべてコメントの内容であり、コード内でのみ表示され、ブラウザーによってレンダリングされません。

CSS コメントは何行でも使用できます。以下に 2 つの例を示します。

|_+_|

セクションの分割

多くのデザイナーは、スタイルシートを小さくて消化しやすいチャンクにまとめて、読むときに簡単にスキャンできるようにしています。通常、コメントの前後に一連のハイフンが表示され、見やすいページに大きな明確な区切りが作成されます。次に例を示します。

|_+_|

これらのコメントは、コーディングの新しいセクションの開始を示します。

コメントコード

コメント タグはブラウザーにそれらの間のすべてを無視するように指示するため、それらを使用して CSS コードの特定の部分を一時的に無効にすることができます。このトリックは、デバッグ中や Web ページの書式設定を調整するときに便利です。実際、デザイナーはコードの一部を「コメント アウト」または「オフ」にして、そのセクションがページの一部でない場合に何が起こるかを確認するためによく使用します。

コメント アウトする (無効にする) コードの前に開始コメント タグを追加します。無効な部分を終了する場所に終了タグを配置します。これらのタグの間にあるものは、サイトの視覚的な表示に影響を与えないため、CSS をデバッグして問題が発生している場所を確認するのに役立ちます。次に、そのグリッチだけを修正してから、コードからコメントを削除できます。

CSS コメントのヒント

多くのコーダーは、コードを含む新しいファイルの先頭にコメント ブロックを含めます。あなたの名前、関連する日付、および関連情報を含むコメント ブロックを含めることで、その戦略を模倣して、特定のコード ブロックに関連して何が起こるかについての決定だけでなく、プロジェクトのコンテキストを人々が理解できるようにします。