CSSのcontentで擬似要素を活用してテキストや画像を挿入し、デザインを強化する方法をわかりやすく解説

2024.09.13
スポンサーリンク

contentプロパティは、主に擬似要素である::beforeや::afterと組み合わせて使用され、要素に対して生成するコンテンツを指定します。テキスト、画像、カウンター、属性値などを擬似要素として挿入することができます。

スポンサーリンク

contentプロパティの値とその効果

  • string: 指定された文字列をコンテンツとして表示します。
  • url(): 指定されたURLから画像を挿入します。
  • attr(): 要素の属性値をコンテンツとして表示します。
  • counter(): CSSカウンターを表示します。
  • normal: デフォルトの動作で、コンテンツは生成されません。
  • none: コンテンツが表示されません。

注意点と関連情報

contentプロパティは、主に::beforeや::afterの擬似要素に対して使用され、通常の要素には直接適用できません。また、contentプロパティは、インラインのテキストや画像などのコンテンツを生成する際に便利ですが、フォーム要素など一部の要素には適用されません。さらに、contentは、DOM上には存在しないため、JavaScriptで取得することはできません。

contentプロパティが効かない時の原因と対策

擬似要素に適用されていない

contentプロパティは、擬似要素（::beforeや::after）にのみ適用されます。通常の要素には使用できず、効果がありません。
対策: contentプロパティは擬似要素にのみ適用されることを確認してください。要素の前後にコンテンツを追加したい場合は、必ず::beforeや::afterを使用しましょう。

擬似要素がコンテンツを追加できる要素に適用されていない

contentプロパティは、ブロックレベルやインライン要素に適用されますが、一部の要素（例えば、imgやinput要素）には擬似要素を使用してコンテンツを追加することができません。
対策: 擬似要素が有効に機能するブロックレベルまたはインライン要素に対してcontentプロパティを使用しているか確認し、対応しない要素には適用しないようにしましょう。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        line-height: 1.6;
    }
    .css-sample-box {
        margin: 10px 0;
        padding: 15px;
        font-size: 18px;
        text-align: left;
        position: relative;
    }
    .css-sample-box::before {
        font-size: 16px;
        margin-bottom: 10px;
        padding: 5px;
        border-bottom: 1px solid #ddd;
        content: attr(data-prefix);
    }

content: ‘Hello, World!’

content: 'Hello, World!'は、文字列をコンテンツとして表示します。この例では、擬似要素::beforeに”Hello, World!”というテキストが表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-content-string">
        テキストの例です。
    </div>
    </div>

CSSコード

.css-sample-content-string::before {
    content: 'Hello, World!';
}

表示結果

テキストの例です。

content: url(‘https://via.placeholder.com/150’)

content: url()は、指定されたURLの画像をコンテンツとして挿入します。この例では、プレースホルダー画像が表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-content-url">
        テキストの例です。
    </div>
    </div>

CSSコード

.css-sample-content-url::before {
    content: url('https://via.placeholder.com/150');
}

表示結果

テキストの例です。

content: attr(data-content)

content: attr()は、要素の属性値をコンテンツとして挿入します。この例では、要素のdata-content属性に基づいたテキストが表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-content-attr" data-content="属性からのテキスト">
        テキストの例です。
    </div>
    </div>

CSSコード

.css-sample-content-attr::before {
    content: attr(data-content);
}

表示結果

テキストの例です。

content: counter(item)

content: counter()は、CSSカウンターを使用して連番を表示します。例では、カウンターが::beforeに表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-content-counter">
        カウンター付きテキストの例です。
    </div>
    </div>

CSSコード

.css-sample-content-counter::before {
    counter-reset: item;
    content: counter(item);
}

表示結果

カウンター付きテキストの例です。

まとめ

contentプロパティを使用すると、擬似要素::beforeや::afterに文字列や画像、カウンターなどを挿入できます。レイアウトや装飾の自由度を高めるプロパティですが、主に視覚的な効果に使われるため、DOMに直接影響を与えることはできません。適切な使い方で、ページの表現力を強化できます。

スポンサーリンク