はじめに

CSSを学びたいStep7です！今回は擬似要素を学んでいきます！！

擬似要素とは

CSSで要素の特定の部分に対してスタイルを適用したり、内容を追加するために使われる機能です。擬似要素は、HTMLで直接指定したコンテンツではない「仮想的な」部分にスタイルを適用するのが特徴です。例えば、要素の最初の文字や行、要素の前後に内容を追加することができます。

1. ::before

要素の「内容の前」に仮想的な要素を追加します。装飾やアイコン、記号などを追加する際によく使われます。

index.html

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

styles.css

.before-example {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
}

.before-example li {
    padding: 10px 10px 10px 30px; /* 左側に余白を追加 */
    border: 1px solid #ddd;
    margin: 5px 0;
    position: relative; /* 擬似要素の位置を相対的に設定 */
}

.before-example li::before {
    content: "★"; /* 擬似要素の内容を設定 */
    color: #3498db; /* 擬似要素の色を設定 */
    position: absolute; /* 擬似要素の位置を絶対的に設定 */
    left: 10px; /* 擬似要素の左位置を設定 */
    top: 50%; /* 擬似要素の上位置を設定 */
    transform: translateY(-50%); /* 擬似要素を垂直方向に中央揃え */
}

2. ::after

要素の「内容の後」に仮想的な要素を追加します。装飾的な要素や、要素を囲む装飾線などに使われます。

index.html

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

styles.css

.after-example {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
}

.after-example li {
    padding: 10px;
    border: 1px solid #ddd;
    margin: 5px 0;
    position: relative; /* 擬似要素の位置を相対的に設定 */
}

.after-example li::after {
    content: "→"; /* 擬似要素の内容を設定 */
    color: #3498db; /* 擬似要素の色を設定 */
    position: absolute; /* 擬似要素の位置を絶対的に設定 */
    right: 10px; /* 擬似要素の右位置を設定 */
    top: 50%; /* 擬似要素の上位置を設定 */
    transform: translateY(-50%); /* 擬似要素を垂直方向に中央揃え */
}

3. ::first-line

ブロック要素の「最初の行」にスタイルを適用します。特に、パラグラフの最初の行だけを強調したい場合などに便利です

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 Line Pseudo-element Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="first-line-example">
        これは段落の最初の行に特定のスタイルを適用する例です。最初の行だけが太字になり、色が変わります。
    </p>
</body>
</html>

styles.css

.first-line-example {
    font-size: 16px;
    line-height: 1.5;
}

.first-line-example::first-line {
    font-weight: bold; /* 最初の行を太字にする */
    color: #3498db; /* 最初の行の色を変更する */
}

4. ::first-letter

ブロック要素の「最初の文字」にスタイルを適用します。段落の最初の文字を大きくしたり、色を変えたりするのに使われます。

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 Letter Pseudo-element Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="first-letter-example">
        これは段落の最初の文字に特定のスタイルを適用する例です。最初の文字だけが大きくなり、色が変わります。
    </p>
</body>
</html>

styles.css

.first-letter-example {
    font-size: 16px;
    line-height: 1.5;
}

.first-letter-example::first-letter {
    font-size: 2em; /* 最初の文字を大きくする */
    color: #3498db; /* 最初の文字の色を変更する */
    font-weight: bold; /* 最初の文字を太字にする */
    float: left; /* 最初の文字を左に浮かせる */
    margin-right: 5px; /* 最初の文字の右に余白を追加する */
}

→新聞の見出しとかでよく見るやつですね！

5. ::selection

ユーザーがテキストを選択（ドラッグしてハイライト）したときのスタイルを指定します。通常、テキスト選択時の背景色や文字色を変更するために使われます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selection Pseudo-element Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="selection-example">
        これはテキストを選択したときに特定のスタイルを適用する例です。テキストをドラッグして選択してみてください。
    </p>
</body>
</html>

styles.css

.selection-example {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.selection-example::selection {
    background-color: red; /* 選択されたテキストの背景色を変更 */
    color: #fff; /* 選択されたテキストの文字色を変更 */
}

おわりに

擬似要素に関してでした！selectionとかは初めて使いましたが、面白いですね！