【CSS初心者入門】contentとは何？使い方も解説！
みなさんはCSSの学習をしていませんか？
CSSを学習する時に「content」を使えることは基本となっています。
今回の記事ではcontentの使い方を解説します！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
contentとは
contentはCSSで指定できるプロパティです。
【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説
要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。
擬似要素とは、要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。:before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
設定できる値
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を指定すると一階層浅くなります。
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
サンプル
<!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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
