学習

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

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

DMM WEBCAMP←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方！
TechAcademy←オンラインで開講しているプログラミングスクール
オンラインでどこでも学べる！/教室に行くのが忙しい人でも安心！
TECH::CAMP←教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方！
DMM WEBCAMP PRO←転職保証付き！エンジニアとして転職したい人におすすめ！
未経験からプロのエンジニアへ３ヶ月で転職する為のスクールです！
【1月生募集中！】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP PROコース。
12月生は満員となっております。1月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

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

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

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

無料説明会に申し込む(DMM WEBCAMP)


▼ついに開講！オンラインでWEBデザイン・プログラミングを学びたい方はこちら！

オンラインコースに申し込む

おすすめの記事