【CSS初心者入門】contentとは何?使い方も解説! | プログラミング入門ならWEBCAMP NAVI
【1月枠も残りわずか】転職保証コース

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

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

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

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

contentとは

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

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

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

設定できる値

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

文字列

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

URLファイル指定

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

カウンタ

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

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

CSS
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を指定すると終了引用符が挿入されます。

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

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

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

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

サンプル

HTML
<!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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%

 

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。