CSSで使えるcontentプロパティの基本から実例まで徹底解説

（最終更新日：2023年11月）

✔当記事がぴったりの方

「CSSのcontentプロパティってどのようなことができるんだろう？」
「contentプロパティの正しいコーディング方法が知りたい」
「contentプロパティ実例を参考にしたい」

✔当記事を通してご紹介する内容

• contentプロパティの基本概念
• contentプロパティのコーディング方法と応用例
• contentプロパティを使った具体的な事例

当記事では、contentプロパティの基本的な理解から、応用的な使い方に至るまで、実例を交えてわかりやすく解説していきます。

ぜひ最後までお楽しみください。

CSS contentプロパティの基本概念

こちらでは、contentプロパティの基本的な概念を解説します。

• CSS contentとは
• 構成と値
• アクセシビリティへの影響
• 公式定義と形式文法

CSS contentとは

CSS contentプロパティは、特定の疑似要素の内容を設定するために使用されます。

これにより、HTML文書内に新たなコンテンツを追加したり、既存のコンテンツを修正したりが可能です。

主に、:beforeと:after疑似要素と組み合わせて使用されます。

構成と値

CSSのcontentプロパティは、要素の内容を操作するために使用されます。

:beforeおよび:after疑似要素と一緒に使われるのが一般的。

文字列、画像、カウンタなどを挿入できます。

アクセシビリティへの影響

contentプロパティを使ってコンテンツを追加するときは、その影響がアクセシビリティに与える影響に注意する必要があります。

なぜならcontentプロパティでコンテンツを追加すると、スクリーンリーダーなどの支援技術がそのコンテンツを認識できない場合があるからです。

公式定義と形式文法

contentプロパティの公式定義は、CSS Generated Content Module Level 3にあります。

contentプロパティの形式文法では、以下のような値を取れます。

• none
• normal
• string
• url
• counter
• attr
• open-quote
• close-quote
• no-open-quote
• no-close-quote

これらの値によって、どのようなコンテンツを生成するかが決まるのです。

コンテンツの挿入方法

こちらでは、contentプロパティを使用して、どのようにコンテンツを挿入するかについて説明します。

• テキスト挿入
• 画像挿入
• カウンター利用
• リンク先URL表示

テキスト挿入

contentプロパティを使用してテキストを挿入する方法は非常に直感的です。

疑似要素にcontentプロパティを適用し、その値に挿入したいテキストをダブルクォーテーションで囲んで指定します。

この方法を用いて、特定の要素の前後に追加のテキストを挿入することが可能です。

/* 特定の要素の前にテキストを挿入 */
.element:before {
    content: "挿入するテキスト";
}

/* 特定の要素の後にテキストを挿入 */
.element:after {
    content: "挿入するテキスト";
}

画像挿入

contentプロパティは、ウェブページに画像を挿入するためにも使用できます。

この場合、contentの値として画像のURLをurl()関数内に指定しましょう。

ただし、この方法で挿入された画像は装飾的な目的にのみ使用され、ウェブページの主要なコンテンツとして扱われません。

/* 特定の要素の前に画像を挿入 */
.element:before {
    content: url('画像のURL');
}

カウンター利用

CSSのcontentプロパティは、カウンターを利用するためにも使用できます。

これにより、項目の番号付けや章の番号付けなど、自動的に数字を生成してコンテンツに追加が可能です。

/* カウンターの初期化 */
body {
    counter-reset: sectionCounter;
}

/* カウンターのインクリメントと表示 */
h1:before {
    counter-increment: sectionCounter;
    content: "セクション " counter(sectionCounter) ". ";
}

リンク先URL表示

contentプロパティを使用して、ハイパーリンクのURLを表示することも可能です。

attr()関数を使用してhref属性の値を取得し、これをcontentプロパティの値として指定します。

これにより、リンクの宛先が可視化され、ユーザーにとってより便利なウェブページを作成が可能です。

/* ハイパーリンクの後にURLを表示 */
a:after {
    content: " (" attr(href) ")";
}

実践！CSS contentプロパティでできること

次に、contentプロパティを用いて、実際に何ができるのかを具体的に見ていきましょう。

• 見出しと引用符のスタイリング
• テキストと画像の組み合わせ
• クラスターゲティング
• 画像および属性の操作
• 要素の置き換え

見出しと引用符のスタイリング

contentプロパティを使うことで、見出しや引用に特別なスタイリングを追加することが可能です。

たとえば、見出しの前に特定の記号を追加したり、引用文を引用符で囲んだりなどのデザインが可能です。

/* 見出しの前に特定の記号を追加 */
h1:before {
    content: "★ ";
}

/* 引用文を引用符で囲む */
blockquote:before, blockquote:after {
    content: '"';
}

テキストと画像の組み合わせ

contentプロパティを利用すれば、テキストと画像を組み合わせたコンテンツも生成できます。

この機能を用いて、ボタンやリンクにアイコンを追加したり、画像とキャプションを一緒に表示したりが可能です。

/* リンクにアイコンを追加 */
a.icon:before {
    content: url('アイコンのURL');
    padding-right: 5px;
}

/* 画像にキャプションを追加 */
figure:after {
    content: attr(title);
    display: block;
    text-align: center;
}

クラスターゲティング

特定のクラスが適用された要素にだけスタイルを適用することも、contentプロパティの力を借りれば実現可能です。

これにより、特定の条件下でのみ表示されるテキストや画像を作成できます。

/* 特定のクラスが適用された要素にスタイルを適用 */
.special-text:before {
    content: "特別なお知らせ: ";
    font-weight: bold;
}

画像および属性の操作

contentプロパティは、画像のURLやその他の属性値を操作するのにも利用可能です。

これにより、異なる状況やデバイスに応じて表示する画像を変更するなど、より柔軟にコンテンツを管理できます。

/* 異なる状況で表示する画像を変更 */
.responsive-img:before {
    content: url('画像のURL1');
}

@media (max-width: 600px) {
    .responsive-img:before {
        content: url('画像のURL2');
    }
}

要素の置き換え

contentプロパティで、特定のHTML要素を完全に別ものに置き換えることも可能です。

たとえば、特定のクラスが適用されたリンクのテキストを、そのリンクのURLに置き換えるなどのことが可能です。

/* リンクのテキストをURLに置き換え */
a.show-url:after {
    content: " (" attr(href) ")";
}

ただし、これは主要なコンテンツに対しておこなうべきではありません。

なぜなら、contentプロパティによる要素の置き換えは、スクリーンリーダーなどのアクセシビリティツールに正しく認識されない可能性があるからです。

主要なコンテンツは元のHTMLで記述し、contentプロパティは装飾的な用途や特定の状況下でのみの表示変更に使いましょう。

応用編: よくある質問と利用法

ここでは、contentプロパティを使う上でよくある質問とそれらへの回答を提供します。

• :beforeと::beforeの違い
• ツールチップでtitle属性のテキスト表示
• 引用文にカギ括弧をつける方法

:beforeと::beforeの違い

:beforeと::beforeの違いは何でしょうか？

これらはどちらも要素の内容の前に何かを挿入するための疑似要素ですが、異なるCSSのバージョンで定義されています。

:beforeはCSS2で定義され、::beforeはCSS3で導入されました。

最新のブラウザは::beforeをサポートしていますが、古いブラウザは:beforeしかサポートしていない可能性があります。

そのため、互換性を確保するためには:beforeを使用することをお勧めします。

ツールチップでtitle属性のテキスト表示

次に、ツールチップでtitle属性のテキストを表示する方法を見てみましょう。

これはcontentプロパティとattr()関数を使って達成できます。

attr()関数は引数として属性名を取り、その属性の値を返すもの。

これをcontentプロパティと組み合わせると、title属性の値をツールチップとして表示できます。

引用文にカギ括弧をつける方法

引用文に引用符をつけるにはどうすれば良いでしょうか？

これはcontentプロパティと一緒にbeforeおよびafter疑似要素を使用することで達成できます。

before疑似要素を使用して引用符を追加し、after疑似要素を使用して引用符を閉じることで、引用文を引用符で囲むことができます。

まとめ

最後に、今回学んだことを整理しましょう。

• CSS contentプロパティの基本的な使用法と応用例
• 活用の幅を広げるcss content

CSS contentプロパティは、強力でありながらも十分に理解されていない機能のひとつです。

その能力を理解し、適切に活用すれば、ウェブサイトのデザインや機能を大幅に強化できます。

実際のウェブサイトを作成し、contentプロパティを活用することで、理解をより深められるでしょう。