CSSコメントの書き方と使い方を徹底解説
CSSコメントとは
CSSでは、スタイル宣言に対してコメント（注釈）を記述することができます。コメントを適切に活用することで、コードの可読性が向上し、そのCSSが何を意図しているのかを他の開発者（や将来の自分自身）が理解しやすくなります。
CSSのコメントは、C言語スタイルの構文に従います。コメントはスラッシュとアスタリスクで始まり、アスタリスクとスラッシュで終わります。/* と */ の間に記述された内容はすべてブラウザに無視されるため、ページの表示には一切影響しません。
コメントの基本構文
CSSコメントの構文は以下のとおりです。
/* コメント */
コメントは単一行でも複数行でも記述できます。また、セレクタの前後や宣言の横など、スタイルシート内のさまざまな場所に自由に配置可能です。
例1：リストマーカーの削除をコメントで説明
次の例では、list-style: none; という宣言の横にコメントを付け、その目的（黒丸の非表示）を明示しています。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none; /* 黒丸を非表示にする */
}
</style>
</head>
<body>
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。
例2：宣言を一時的に無効化する
コメントは、特定の宣言を一時的に無効化したい場合にも非常に便利です。次の例では、border プロパティをコメントアウトしています。コメントを解除すれば、いつでも簡単に元に戻せます。
<!DOCTYPE html>
<html>
<head>
<style>
div { /* すべての div 要素を選択し、以下の宣言を適用 */
margin: 8px;
float: left;
width: 100px;
height: 100px;
/* border: 2px solid black; */ /* 枠線は削除済み */
background-color: lightpink;
}
div + div { /* 2つ目以降の div を円形にする */
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。
まとめ
CSSコメントは、コードの意図を説明したり、不要になった宣言を一時的に無効化したりする際に役立つ基本的な機能です。/* */ で囲むだけで手軽に使えるため、日頃からわかりやすいコメントを残す習慣をつければ、保守性の高いスタイルシートを作成できるようになります。
-
CSS子セレクター（>）とは？使い方とサンプルコードで解説
CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s
-
CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法
CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro