k.k.FactoryAdvent Calendar 2024

CSSを学びたい Step6

Posted at 2024-11-02

はじめに

CSSを学びたいStep6です！今回は擬似クラスを学んでいきます！

擬似クラスとは

擬似クラスは、要素の特定の状態に応じてスタイルを適用するものです。例えば、ユーザーがリンクをホバーしたときや、フォームの入力がフォーカスされているときなどの状況に合わせてスタイルを変更できます。

1. hover

これは有名ですね！ホバー時にのみCSSが変更される処理です

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="hover-button">Hover me!</button>
</body>
</html>

styles.css

.hover-button {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hover-button:hover {
    background-color: red; /* マウスオーバー時に背景色を変更 */
}

2. focus

コンポーネントをフォーカスした時に適用される。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="text" class="focus-input" placeholder="フォーカスしてみてください">
</body>
</html>

styles.css

.focus-input {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.focus-input:focus {
    border-color: #3498db; /* フォーカス時にボーダーの色を変更 */
    outline: none; /* デフォルトのアウトラインを削除 */
}

3. active

要素がクリックされている間に適用される

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Active Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="active-button">Click me!</button>
</body>
</html>

styles.css

.active-button {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.active-button:active {
    background-color: #2980b9; /* クリック時に背景色を変更 */
}

4.nth-child

リストの偶数・奇数の行をスタイリングしたり、特定の位置の要素にスタイルを付けたりするのに便利です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="nth-child-example">
        <li>アイテム 1</li>
        <li>アイテム 2</li>
        <li>アイテム 3</li>
        <li>アイテム 4</li>
        <li>アイテム 5</li>
        <li>アイテム 6</li>
    </ul>
</body>
</html>

styles.css

.nth-child-example li {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 5px 0;
}

.nth-child-example li:nth-child(odd) {
    background-color: #f4f4f9; /* 奇数番目のアイテムに背景色を適用 */
}

.nth-child-example li:nth-child(even) {
    background-color: #e0e0e0; /* 偶数番目のアイテムに背景色を適用 */
}

li:nth-child(odd)が奇数番目、li:nth-child(even)が偶数番目を設定しています

5. first-child / :last-child

要素の最初または最後の子要素にスタイルを適用します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First and Last Child Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="child-example">
        <li>アイテム 1</li>
        <li>アイテム 2</li>
        <li>アイテム 3</li>
        <li>アイテム 4</li>
        <li>アイテム 5</li>
    </ul>
</body>
</html>

styles.css

.child-example li {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 5px 0;
}

.child-example li:first-child {
    background-color: #3498db; /* 最初のアイテムに背景色を適用 */
    color: #fff; /* テキストの色を白に設定 */
}

.child-example li:last-child {
    background-color: #e74c3c; /* 最後のアイテムに背景色を適用 */
    color: #fff; /* テキストの色を白に設定 */
}

6.not

特定の条件に合致しない要素にスタイルを適用する擬似クラスです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Not Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="not-example">
        <li>アイテム 1</li>
        <li class="exclude">アイテム 2</li>
        <li>アイテム 3</li>
        <li class="exclude">アイテム 4</li>
        <li>アイテム 5</li>
    </ul>
</body>
</html>

styles.css

.not-example li {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 5px 0;
}

.not-example li:not(.exclude) {
    background-color: #3498db; /* クラス "exclude" を持たないアイテムに背景色を適用 */
    color: #fff; /* テキストの色を白に設定 */
}

7.checked

チェックボックスやラジオボタンが選択されているときに適用されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checked Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="checkbox-example">
        <input type="checkbox" id="checkbox1" class="checkbox">
        <label for="checkbox1">チェックボックス 1</label>
        <br>
        <input type="checkbox" id="checkbox2" class="checkbox">
        <label for="checkbox2">チェックボックス 2</label>
    </div>
</body>
</html>

styles.css

.checkbox-example {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox {
    display: none; /* チェックボックス自体を非表示にする */
}

.checkbox + label {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.checkbox:checked + label {
    background-color: #3498db; /* チェックされているときの背景色 */
    color: #fff; /* テキストの色を白に設定 */
}

8.disabled/enabled

フォーム要素が無効（disabled）または有効（enabled）な状態のときに適用されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled and Enabled Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="btn" disabled>無効化されたボタン</button>
    <button class="btn">有効化されたボタン</button>
</body>
</html>

styles.css

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:enabled {
    background-color: #3498db; /* 有効化されたボタンの背景色 */
    color: #fff; /* テキストの色を白に設定 */
}

.btn:disabled {
    background-color: #ccc; /* 無効化されたボタンの背景色 */
    color: #666; /* テキストの色をグレーに設定 */
    cursor: not-allowed; /* カーソルを「禁止」アイコンに変更 */
}

終わりに

擬似クラスは勉強しようと思ってて、なかなか学べていなかったのでいい機会でした！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up