CSS
学習

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

【3月生募集中！】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月生は満員となっております。3月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

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

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

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

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スキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

【3月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月受入枠は満員となっております。3月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら！

無料説明会に申し込む(DMM WEBCAMP ビジネス教養コース)

おすすめの記事