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

2018.02.01 2019.03.22

DMM WEBCAMP運営事務局

【難波校OPEN記念】入学金無料キャンペーン実施中！
DMM WEBCAMPは難波校の開校を記念して、通常100,000円(税抜)→無料で入校できるキャンペーンを実施しています。
関西で未経験からエンジニアになりたい方、プログラミング学習で人生を大きく変えたい方、ぜひご検討ください！

キャンペーンの詳細はコチラから

みなさんは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>

まとめ

初心者の方向けにcontentを紹介していきましたが、いかがでしたか？

contentを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！

１ヶ月でHTML・CSSができる！「WebCamp」とは？

WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です！

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

【難波校OPEN記念】入学金無料キャンペーン実施中！
DMM WEBCAMPは難波校の開校を記念して、新しく難波校へご入校された方を限定に
入学金 100,000円(税抜)→無料のキャンペーンを実施しています。
未経験からエンジニアになりたい方、プログラミング学習で人生を大きく変えたい方、
ぜひご検討ください！