【CSS初心者入門】contentとは何？使い方も解説！

2018.02.01 2019.03.22

DMM WEBCAMP運営事務局

【9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。

・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください！

転職保証コースはこちら！

みなさんはCSSの学習をしていませんか？

CSSを学習する時に「content」が使えることは基本となっています。

今回の記事ではcontentの使い方を解説します！

目次を見たい方はココをクリック♪

1 contentとは
2 設定できる値
3 サンプル
4 まとめ
- 4.1 １ヶ月でHTML・CSSができる！「WebCamp」とは？

contentとは

contentはCSSで指定できるプロパティです。

要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。

擬似要素とは、要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。:before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。

設定できる値

contentプロパティには様々な値が設定できます。
beforeなら前方、afterなら要素の後方に挿入します。

文字列

挿入する文字列を「"」または「'」で括って指定します。

URLファイル指定

画像や音声等のファイルを指定します。

カウンタ

CSSでカウンタを定義し、contentプロパティで表示することができます。
要素内容に自動連番をつけます。

counter()関数、またはcounters()関数により、カウンタ（連番）を呼び出した値が、contentプロパティの値として指定されます。


counter-increment: number;
content: counter(number) "番 ";
counter-reset: number;

属性値(Attribute)指定

「attr(xxx)」と記述し、(XXX)には属性の名前を指定します。

contentプロパティを適用する要素の、該当属性で指定されている値が、contentプロパティの値として指定されます。

例えば、attr(alt)とすると、alt属性で指定されている文字列が要素の直前または直後に挿入されます。

クォート指定

1.open-quote,close-quote

quotesで設定したものをopen-quote,close-quoteで設定します。

open-quoteを指定すると開始引用符、close-quoteを指定すると終了引用符が挿入されます。


quotes: "【" "】" ;
content: open-quote;
content: close-quote;

2.no-open-quote,no-close-quote

引用符は表示されませんが、quotesプロパティで指定されている引用符の入れ子の深さが一階層前後します。

no-open-quoteを指定すると一階層深くなり、no-close-quoteを指定すると一階層浅くなります。

サンプル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>class</title>
<style type="text/css">

.text:before { content: "テスト"; }
.text:after { content:"CSSです。"; }

.link:before {
content: attr(title);
}

.counter li{
counter-increment: number;
}
.counter li:before {

content: counter(number) " : ";
}
.address {
quotes: "【" "】" ;
}
.address:before {
content: open-quote;
}
.address:after {
content: close-quote;
}

</style>

</head>
<body>

<h3>テキスト</h3>
<div class="box">
<p class="text">になります。</p>
</div>
<h3>プロパティの値</h3>
<div class="box">
<a href="#" title="市役所" class="link">のHPはこちら</a>
</div>
<h3>カウンター</h3>
<div class="box">
<ul class="counter">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
</ul>
</div>
<h3>quote</h3>
<div class="box">
<div class="address">日本-東京</div>
</div>
</body>
</html>