SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.27
  • CATEGORY
TITLE

【CSS】contentを解説! 擬似要素にコンテンツを挿入しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】contentを解説! 擬似要素にコンテンツを挿入しよう!
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • contentの使い方について学びたい方へ
  • :beforeや:afterについても学習しよう

擬似要素である:before、:afterに対してcontentを指定しています。
:beforeを指定すると要素の直前にコンテンツが挿入されます。
:afterを指定すると要素の直後にコンテンツが挿入されます。

contentについて

contentについて

contentプロパティとは、「:before」と「:after」擬似要素にコンテンツを挿入します。
書き方は以下のようになります。

/*-before--*/
〇〇:before {content: 〇〇;}

/*-after--*/
〇〇:after {content: 〇〇;}
指定できる値
  • normal(初期値)
    コンテンツを何も挿入しません
  • none
    normalを同じになります、コンテンツを何も挿入しません
  • 文字列
    content: ""(ダブルクオーテーション)で囲み、文字を挿入します
    ※(シングルクオーテーション)でも問題ありません
  • url(ファイルのURL)
    content: url("")(ダブルクオーテーション)で囲み、urlを指定し画像ファイルを挿入します
    ※(シングルクオーテーション)でも問題ありません
  • counter(カウンター名)
    カウンター名を指定することで、連番を挿入します、counter-incrementと同時に指定します
  • attr(属性名)
    要素の属性名を指定することで、指定されている属性の値が挿入します
  • open-quote
    quoteプロパティで指定した開始記号が挿入します
  • close-quote
    quoteプロパティで指定した終了記号が挿入します

content 文字列について

content 文字列について

文字列とは、content: ""(ダブルクオーテーション)または、(シングルクオーテーション)で囲み、
文字を挿入します。
テキストを入力し、文字色や背景色などCSSでの装飾を可能になります。

文字列について

  • 新メニュー〇〇追加
  • 新メニュー〇〇追加
  • 新メニュー〇〇追加
<ul>
	<li>新メニュー〇〇追加</li>
	<li>新メニュー〇〇追加</li>
	<li>新メニュー〇〇追加</li>
</ul>
ul li {list-style: none;}

ul li:before {

	/*--contentを指定--*/
	content: "NEW";
	
	/*--以下 装飾--*/
	color: #fff;
	background-color: #fa5e5a;
	margin: 0 20px 0 0;
	padding: 5px 20px;
}

content url(ファイルのURL)について

content url(ファイルのURL)について

url(ファイルのURL)とは、content: url("")(ダブルクオーテーション)または、(シングルクオーテーション)で囲み、urlを指定し画像ファイルを挿入します
クラス名を指定することにより、個別に
content: url("")の指定が可能になります。

url(ファイルのURL)

  • サルくん
  • キリンくん
  • ゾウくん
  • クマくん
<ul>
 	<li class="list-01">サルくん</li>
	<li class="list-02">キリンくん</li>
	<li class="list-03">ゾウくん</li>
	<li class="list-04">クマくん</li>
</ul>
ul li {list-style: none;}

ul li:before {
	margin: 0 20px 0 0;
	vertical-align: middle;
}

/*--contentを指定--*/

ul li.list-01:before {
	content: url("画像パス");
}
ul li.list-02:before {
	content: url("画像パス");
}
ul li.list-03:before {
	content: url("画像パス");
}
ul li.list-04:before {
	content: url("画像パス");
}

content counter(カウンター名)について

content counter(カウンター名)について

counter(カウンター名)とは、カウンター名を指定することで、連番を挿入します。
counter-incrementと同時に指定します。

counter-incrementプロパティとは、カウンター名を入力をすることにより、連番の指定が可能になります。指定した要素が続く度に数字が1つずつ増えていきます。

counter(カウンター名)

  1. 〇〇〇〇商品
  2. 〇〇〇〇商品
  3. 〇〇〇〇商品
  4. 〇〇〇〇商品
  5. 〇〇〇〇商品
<ol class="list-inner">
 	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
</ol>
ol.list-inner li {
	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
	list-style: none;
}
	
ol.list-inner li:before {
	/*--content  counter(num)に指定--*/
	content: "第" counter(num) "位";
		
	/*--以下 装飾--*/
	color: #febe3e;
	margin: 0 20px 0 0;
	font-weight: bold;
}

ポイント!
counter(カウンター名)を指定する際のポイント!
counterはリストタグ以外での指定も可能になりますが、連番(数値)の意味になるため、
ol li「順序のあるリスト」での使用が一番適してるかとおもわれます。

content attr(属性名)について

content attr(属性名)について

attr(属性名)とは、要素の属性名を指定することで、指定されている属性の値が挿入します。
属性名とは、href属性やtitle属性になります。

attr(属性名)

<div title="どうぶつたちのすむもり"><img src="画像パス"></div>
img:after{

	/*--content  htmlのtitle属性の値を取得--*/
	content:attr(title);
	
	/*--以下 装飾--*/
	display:block;
	color:#fff;
	font-size: 18px;
	text-align:center;
	margin: 20px 0 0;
}

content open-quote、close-quoteについて

content open-quote、close-quoteについて

open-quoteとは、quoteプロパティで指定した開始記号が挿入します。
close-quoteとは、quoteプロパティで指定した終了記号が挿入します。

quoteプロパティとは、contentプロパティで挿入する記号を指定する際に使用します。
挿入する記号は(ダブルクオーテーション)または、(シングルクオーテーション)で囲み指定します。
半角スペースで区切り、開始記号と終了記号をそれぞれ指定します。

open-quote、close-quote

ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。

<p><q>ホームページ制作、名刺制作、ロゴ制作</q>など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。</p>
p q {
	
	/*--quotes指定--*/
	quotes: "「" "」";
}


p q:before {

	/*--open-quote指定--*/
	content: open-quote; 
	color: #febe3e; 
	font-weight: bold;
}


p q:after {

	/*--close-quote指定--*/
	content: close-quote; 
	color: #febe3e; 
	font-weight: bold;
}

まとめ

今回はこれで以上です。

POINT
  • contentとは、擬似要素である:before、:afterに対して指定します。
  • ダブルクオーテーションやシングルクオーテーションは忘れずに指定しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top