CSSセレクターでWebページを美しく装飾！初心者から上級者まで使えるテクニック
2024-07-27
CSSセレクターとは？
例：
p {
color: red;
font-size: 16px;
}
この例では、すべての<p>要素に赤色のテキストと16pxのフォントサイズを適用します。
セレクターの種類
CSSセレクターには様々な種類があり、それぞれ異なる方法で要素を選択します。以下に、よく使われるセレクターの種類をいくつか紹介します。
- 要素セレクター:
<p>,<h1>,<div>などのHTML要素を指定します。 - IDセレクター: HTML要素に設定されたIDを使って要素を指定します。例：
#header - 子孫セレクター: 親要素の子孫要素を指定します。例：
div p - 隣接セレクター: ある要素の隣接する要素を指定します。例：
p + span - 属性セレクター: HTML要素の属性値を使って要素を指定します。例：
a[href="https://www.example.com"] - 擬似クラスセレクター: 特定の状態にある要素を指定します。例：
:hover,:focus - 擬似要素セレクター: 特殊な要素を指定します。例：
::before,::after
セレクターの組み合わせ
複数のセレクターを組み合わせて、より複雑な条件で要素を選択することができます。例：
div.container p.content {
background-color: #eee;
padding: 10px;
}
この例では、div要素の中にあり、containerというクラスを持つ要素の子孫で、contentというクラスを持つ<p>要素にのみ、スタイルを適用します。
<!DOCTYPE html>
<html>
<head>
<title>CSSセレクターの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p class="important">重要な文章</p>
<div id="container">
<p>コンテンツ</p>
<a href="https://www.example.com">リンク</a>
</div>
</body>
</html>
CSSコード
/* 全ての段落要素に赤色のテキストと16pxのフォントサイズを適用 */
p {
color: red;
font-size: 16px;
}
/* ID "header"を持つ要素に青色の背景色を適用 */
#header {
background-color: blue;
}
/* クラス "important"を持つ段落要素に太字を適用 */
.important {
font-weight: bold;
}
/* div要素の中にあり、id "container"を持つ要素の子孫で、a要素に下線を適用 */
#container a {
text-decoration: underline;
}
/* 要素 ":hover" の状態にある要素にグレー色の背景色を適用 */
:hover {
background-color: gray;
}
説明
このコードでは、以下のCSSセレクターを使用しています。
p: すべての<p>要素を選択します。#header: ID "header"を持つ要素を選択します。.important: クラス "important"を持つ要素を選択します。#container a: div要素の中にあり、id "container"を持つ要素の子孫で、a要素を選択します。:hover: マウスカーソルが要素の上に置かれている状態にある要素を選択します。
これらのセレクターを使って、それぞれの要素に異なるスタイルを適用しています。
実行結果
このコードを実行すると、以下のようになります。
- すべての段落要素が赤色のテキストと16pxのフォントサイズで表示されます。
- ID "header"を持つ要素が青色の背景色で表示されます。
- クラス "important"を持つ段落要素が太字で表示されます。
- マウスカーソルを
#container内のa要素の上に置くと、グレー色の背景色が表示されます。
JavaScript を使用して、動的に要素を選択し、スタイルを適用することができます。
<p id="myParagraph">この段落は JavaScript でスタイル設定されます。</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
この例では、JavaScriptを使用して myParagraph ID を持つ段落要素を選択し、テキストの色を赤色、フォントサイズを 20px に設定しています。
利点:
- 動的にスタイルを更新できます。
- ユーザーとのインタラクションに基づいてスタイルを変化させることができます。
欠点:
- JavaScript の知識が必要です。
- パフォーマンスが低下する可能性があります。
フレームワーク
React、Vue.js、Angular などのフレームワークは、独自のテンプレート構文を使用して要素を選択し、スタイルを適用することができます。
例：React
import React from 'react';
const MyComponent = () => {
return (
<p style={{ color: 'red', fontSize: '20px' }}>この段落は React でスタイル設定されます。</p>
);
}
export default MyComponent;
この例では、React コンポーネントを使用して p 要素を作成し、スタイルを直接要素に適用しています。
- フレームワークの持つ機能を活用できます。
- コードが簡潔になり、保守しやすくなります。
- フレームワークを覚える必要があります。
- フレームワーク特有の書き方に慣れる必要があります。
属性
HTML 要素にスタイル情報を含む属性を設定することができます。
<p style="color: red; font-size: 20px;">この段落は属性でスタイル設定されます。</p>
この例では、style 属性を使用して、p 要素に直接スタイル情報を設定しています。
- 簡単でわかりやすい。
- JavaScript やフレームワークが不要です。
- スタイル情報が冗長になり、HTML コードが読みづらくなる可能性があります。
- 動的なスタイル変更には向いていません。
どの方法を選択すべきか
どの方法を選択するかは、状況によって異なります。
- シンプルなデザインで、動的なスタイル変更の必要がない場合は、CSS セレクターがおすすめです。
- 動的にスタイルを更新したり、ユーザーとのインタラクションに基づいてスタイルを変化させたい場合は、JavaScript がおすすめです。
- フレームワークを使用している場合は、フレームワークのテンプレート構文を使用してスタイルを適用するのが一般的です。
- 属性は、簡単なスタイリングにのみ使用することをお勧めします。
css css-selectors
