CSSデザインをもっと自由に！.と#を使いこなして、Webサイトをレベルアップ
CSSにおける「.」と「#」の違い：セレクタの種類と使い分け
「.」：クラスセレクタ
「.」は、クラスという属性に指定された値に基づいて要素を対象とするクラスセレクタを表します。例えば、以下のように記述すると、すべての.redクラスを持つ要素にスタイルが適用されます。
.red {
color: red;
}
クラスセレクタは、共通のデザインを持つ複数の要素をまとめてスタイルを適用したい場合に便利です。例えば、見出し全体を赤色にしたい場合は、すべての見出し要素に.redクラスを付与し、上記のCSSルールを記述します。
#unique-id {
background-color: blue;
}
IDセレクタは、特定の要素のみを確実にスタイル設定したい場合に便利です。例えば、ページ内に1つだけ存在する重要なボタンに特別なデザインを施したい場合は、そのボタンにIDを付与し、IDセレクタを使用してスタイルを記述します。
「.」と「#」の使い分け
- 複数の要素をまとめてスタイル設定したい場合は「.」を使用する
例
以下のHTMLコードとCSSコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>CSS セレクタの例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="red">見出し1</h1>
<p class="red">本文</p>
<button id="unique-id">ボタン</button>
</body>
</html>
.red {
color: red;
}
#unique-id {
background-color: blue;
}
この例では、h1要素とp要素に.redクラスを付与しているので、これらの要素はすべて赤色で表示されます。一方、ボタンにはIDunique-idが割り当てられているので、#unique-idセレクタによってボタンのみ背景色が青色になります。
「.」と「#」は、それぞれ異なる要素を対象とするCSSセレクタです。それぞれの特性を理解し、状況に応じて適切なセレクタを選択することで、効率的かつ効果的なCSSスタイル設定が可能になります。
補足
- 上記以外にも、CSSには様々な種類のセレクタが存在します。詳細については、CSSのチュートリアルやリファレンス資料を参照してください。
- セレクタの記述順序は重要です。より具体的なセレクタが先に記述されている場合、そのセレクタが優先的に適用されます。
HTMLコード
<!DOCTYPE html>
<html>
<head>
<title>CSS セレクタの例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">見出し</h1>
<p class="description">本文</p>
<button id="unique-button">ボタン</button>
</div>
</body>
</html>
CSSコード
/* 全体的なデザイン */
.container {
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
/* 見出し */
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
/* 本文 */
.description {
line-height: 1.5;
margin-bottom: 20px;
}
/* ボタン */
#unique-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
説明
このコードでは、以下のスタイルが定義されています。
.containerクラスを持つ要素は、幅500px、中央揃え、余白20px、境界線1pxというスタイルになります。.titleクラスを持つ要素は、フォントサイズ24px、太字、下マージン10pxというスタイルになります。.descriptionクラスを持つ要素は、行間1.5、下マージン20pxというスタイルになります。#unique-buttonIDを持つ要素は、背景色青色、文字色白、余白10px 20px、境界線なし、カーソルポインタというスタイルになります。
この例では、複数の要素に共通するスタイル（.container、.description）と、特定の要素のみのスタイル（.title、#unique-button）を、それぞれ適切なセレクタを使用して定義しています。
このサンプルコードはあくまでも一例であり、状況に応じて様々なバリエーションが考えられます。ぜひ、ご自身のWebサイトやアプリケーションに合わせて、CSSセレクタを使いこなしてみてください。
属性セレクタは、HTML要素の属性値に基づいて要素を対象とするセレクタです。例えば、以下のように記述すると、href属性がhttps://www.example.comであるすべての<a>要素にスタイルが適用されます。
a[href="https://www.example.com"] {
color: blue;
}
擬似クラスセレクタは、要素の状態や動作に基づいて要素を対象とするセレクタです。例えば、以下のように記述すると、マウスカーソルがホバリングしている要素にスタイルが適用されます。
a:hover {
text-decoration: underline;
}
擬似要素セレクタは、要素の一部または要素周辺に仮想的な要素を追加するセレクタです。例えば、以下のように記述すると、要素の::after擬似要素にスタイルが適用され、要素の後ろに疑似的なコンテンツが追加されます。
p::after {
content: " - 続きを読む";
color: gray;
}
子孫セレクタは、特定の要素の子孫要素のみを対象とするセレクタです。例えば、以下のように記述すると、.containerクラスを持つ要素の子孫であるすべての<p>要素にスタイルが適用されます。
.container p {
font-size: 14px;
}
h1 + p {
margin-top: 0;
}
複合セレクタ
上記で紹介したセレクタを組み合わせて使用することもできます。例えば、以下のように記述すると、.redクラスを持つ要素で、かつ#unique-idIDを持つ要素にのみスタイルが適用されます。
.red#unique-id {
background-color: purple;
}
これらの方法は、それぞれ異なる用途に適しています。状況に応じて適切な方法を選択することで、より柔軟で効率的なCSSスタイル設定が可能になります。
css css-selectors
