Documentation CSS

この記事で学べること

  • contentプロパティの基本構文と目的
  • ::beforeと::after擬似要素との組み合わせ
  • テキスト、画像、カウンターの挿入方法
  • attr()関数を使った属性値の表示
  • アクセシビリティとSEOへの影響

概要

contentプロパティは、CSSで擬似要素にコンテンツを挿入するためのプロパティです。主に::beforeや::afterの擬似要素と組み合わせて使用され、HTMLを直接編集することなく装飾や追加のテキスト、アイコンなどを表示することが可能です。これにより、デザインの柔軟性が向上し、より洗練されたウェブページの表現が可能になります。

contentプロパティの基本

contentプロパティは、主に要素の前後にテキストや画像、シンボルを追加する際に使用されます。このプロパティは、擬似要素（::beforeや::after）とともに用いることで、HTMLの構造を変更することなくデザインを調整できます。

contentプロパティの構文

.selector::before {
content: "<content>";
}

<content>には、文字列、数値、画像、カウンター、シンボルなどを指定することができます。また、コンテンツを空にしたり、削除するためにnoneを指定することも可能です。

主な値

  • ""（空の文字列）: 空のコンテンツを表示します。
  • text 指定されたテキストを表示します。
  • url() 画像を表示します。
  • attr() 要素の属性値を表示します（例
    attr(href)）。
  • counter() CSSカウンターを表示します。
  • none コンテンツを表示しません。

contentプロパティの使用例

テキストを要素の前後に追加する

::beforeと::afterを使って、要素の前後にテキストやシンボルを追加する例です。これにより、見出しやボタンなどの装飾を簡単に行うことができます。

使用例

h2::before {
content: "★ ";
color: gold;
}
h2::after {
content: " ★";
color: gold;
}
<h2>注目のセクション</h2>

この設定では、見出しの前後に星マークが表示され、注目度が高まります。

アイコンや装飾を追加する

contentプロパティを使用して、擬似要素にアイコンやシンボルを追加することができます。例えば、ボタンの前にアイコンを表示するなど、デザインのアクセントとして活用できます。

使用例

button::before {
content: "🔍 ";
font-size: 1.2em;
}
<button>検索</button>

この設定では、ボタンの前に検索アイコンが表示され、視覚的にわかりやすいデザインになります。

カウンターを使用して番号付きリストを作成する

CSSのカウンター機能とcontentプロパティを組み合わせて、番号付きの項目を作成できます。

使用例

ol {
counter-reset: item;
}
li::before {
counter-increment: item;
content: counters(item, ".") " ";
font-weight: bold;
}
<ol>
<li>最初の項目</li>
<li>次の項目</li>
<li>最後の項目</li>
</ol>

この例では、各リスト項目の前にカウンターが自動的に付加され、番号付きのリストが生成されます。

URLを使って擬似要素に画像を追加する

contentプロパティでurl()を使用すると、擬似要素に画像を追加できます。これを使って、アイコンや背景のような画像を装飾として追加できます。

使用例

div::before {
content: url('icon.png');
display: inline-block;
margin-right: 5px;
}
<div>アイコン付きのテキスト</div>

この設定により、テキストの前にアイコン画像が表示され、視覚的なアクセントが追加されます。

contentプロパティの利点と活用方法

HTMLを変更せずにデザインを調整

contentプロパティを使用すると、HTML構造を変更せずにテキストやアイコンを追加できるため、コードの管理が楽になります。特に、スタイルシートだけでデザインの調整が可能になるため、メンテナンス性が向上します。

装飾や視覚的な強調を簡単に追加

擬似要素と組み合わせて、ボタンやリンクに簡単に装飾を追加できます。特に、デザインの一貫性を保ちつつ、視覚的な強調を行いたい場合に効果的です。

ダイナミックなコンテンツ生成

CSSカウンターや属性値の表示を活用して、動的なコンテンツを生成できます。リストの自動番号付けや、属性値をテキストとして表示するなど、インタラクティブなデザインにも役立ちます。

使用上の注意点

SEOには影響しない

contentプロパティで追加されたテキストは、DOMに追加されるわけではなく、見た目だけの装飾です。そのため、SEOには影響しません。重要なテキストやコンテンツは、HTML内に直接記述する必要があります。

アクセシビリティへの配慮

スクリーンリーダーなどの支援技術が擬似要素のコンテンツを適切に認識しない場合があります。重要な情報をcontentプロパティで表示するのは避け、アクセシビリティを考慮した設計を心がけましょう。

まとめ

contentプロパティは、擬似要素を使ったデザインの幅を広げる強力なツールです。HTMLの変更なしに装飾や情報追加ができるため、ウェブデザインをより柔軟に、かつ洗練されたものにすることが可能です。擬似要素との組み合わせで、様々なデザイン表現を試してみてください。

ポイントの振り返り

値説明例
""空のコンテンツ装飾用の空要素
"text"テキスト"★ "
url()画像url('icon.png')
attr()属性値attr(href)
counter()カウンターcounter(item)
none表示なしコンテンツ削除

関連プロパティ・擬似要素

名前説明
::before要素の前に挿入
::after要素の後に挿入
counter-resetカウンターのリセット
counter-incrementカウンターの増加

参考文献

円