contentプロパティの説明
CSSのcontentプロパティは、特定の要素に対してコンテンツの挿入や置換を行います。基本的には、擬似要素の::beforeまたは::afterに対して使用します。この値によって挿入されたコンテンツは、無名の置換要素として配置されます。
CSSで生成されたコンテンツは、DOMツリーには含まれません。そのため、contentを使って挿入するものに関して、文書の中で意味のあるコンテンツや、失われてしまった場合にアクセシビリティに影響を及ぼすものは避けた方が良いでしょう。通常、装飾目的やレイアウトの補助として用いられることが多いプロパティです。
contentに指定できる値
none- 特にコンテンツを持ちません。擬似要素に適用した場合、その擬似要素は生成されません。
normal- 特にコンテンツを持ちません。擬似要素に適用した場合は、
noneと同じ扱いになります。 <string>- 代替テキストを持ちます。この値は任意の数の文字列です。ラテン文字以外を挿入する場合は、Unicodeエスケープシーケンスを用いてエンコードする必要があります。
<image>- 画像コンテンツを持ちます。URL指定による外部ファイルの参照、
<gradient>値によるグラデーション、element()関数によるウェブページの一部を挿入できます。 counter()- CSSカウンターの値を持ちます。
counter-resetおよびcounter-incrementで定義された値を使って、計算された内容を挿入します。counter()には、counter(name)またはcounter(name, style)の指定形式があります。 attr()- 要素の属性値を持ちます。かっこの中には属性の名前が入ります。その属性が存在しない場合は、空文字列が返されます。
open-quotequotesで定義された引用符の値を持ちます。引用符の組が定義されていれば、開始の記号を表します。close-quotequotesで定義された引用符の値を持ちます。引用符の組が定義されていれば、終了の記号を表します。no-open-quote- 入れ子になった引用符の階層を増加させます。
no-close-quote- 入れ子になった引用符の階層を減少させます。
contentの使い方とサンプルコード
contentプロパティの構文は以下の通りです。
/* キーワード値 */
content: normal;
content: none;
/* <string>値 */
content: "text";
content: "日本語も可能";
/* <image>値 */
content: url("https://weblan3.com/image.png");
content: linear-gradient(#fff, #000);
content: image-set("pic1x.png" 1x, "pic2x.png" 2x);
/* <counter>値 */
content: counter(section);
content: counter(item, decimal-leading-zero);
content: counters(countbox, "：");
content: "第" counters(number) "章";
/* 属性値 */
content: attr(value string);
/* 引用符を挿入するキーワード */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* グローバル値 */
content: inherit;
content: initial;
content: revert;
content: unset;
contentの実例
それでは実際にcontentプロパティの書き方を見ていきましょう。最初の例では、リンク要素の後に擬似要素を追加してcontentで文字列を挿入します。これにより、文書の中で意味を持たない補助的な役目の文字列を、CSSで配置することができます。
<section class="samp_box">
<h2>content指定なし</h2>
<p><a href="###">リンクテキスト</a></p>
<h2>content指定あり</h2>
<p><a href="###" id="exlink">リンクテキスト</a></p>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin-top: 1rem;
}
#exlink::after {
content: "[↗]";
}
続いて、HTMLの属性を参照してその値を挿入した時の挙動を確認します。ここでは、<abbr>要素で略語を囲い、title属性で全文を表し、通常は不可視である属性の値をcontent経由で可視化します。
<section class="samp_box">
<h2>content指定なし</h2>
<p>スタイルシートの中で最も普及している形式は、<abbr title="Cascading Style Sheets">CSS</abbr>です。</p>
<h2>content指定あり</h2>
<p>スタイルシートの中で最も普及している形式は、<abbr title="Cascading Style Sheets" id="attr">CSS</abbr>です。</p>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin-top: 1rem;
}
.samp_box abbr {
text-decoration: underline solid;
}
#attr::after {
color: #666;
content:'［'attr(title)'］';
}