ywork2020.com

Title

要素を指定した値で置き換える

目次 (INDEX)

contentとは

ここで説明するcontent とは次の語句からなるCSSのプロパティです。
content
読み: コンテンツ
意味: 内容

目次に戻る

contentプロパティの概要

このプロパティは生成された値をセレクターに指定した要素の中の疑似コンテンツとして置き換えます。

コンテンツはセレクターに指定された::beforeと::afterの疑似要素を置き換える形で無名の置換要素として内包されます。 ::before はコンテンツの先頭の子要素として置き換えられ、 ::after は最後の子要素として置き換えられます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター::before{content: コンテンツ;}
セレクター::after{content: コンテンツ;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このページのサンプルには下記のコードで示すdiv要素を使用します。 このdiv要素の中には1つのbr要素が内包されています。

contentプロパティは::beforeおよび::after疑似要素で使われるプロパティです。 ::before疑似要素でcontent使うとセレクターに該当する要素の最初の子要素だという意味になります。 また、::after疑似要素でcontent使うとセレクターに該当する要素の最後の子要素だという意味になります。

<body>
	<div id="任意のid値"><br></div>
</body>


<style>
	#任意のid値{
		margin: 10px;
		padding: 5px;
		border: thin solid #aaa;
		background-color: khaki;
		width: fit-content;
	}
</style>

目次に戻る

初期値: normal

初期値のnormalキーワードは::beforeおよび::after疑似要素ではnoneキーワードと等価として扱われます。

このキーワードでは疑似要素は生成されません。


#idDiv1::before{
	content: 'これは id="' attr(id) '"の要素です。';
}
#idDiv1::after{
	content: normal;
}

上記の結果をhtmlのタグとして見た場合、以下のようになると考えてください。

<div id="idDiv1"><疑似要素>これはid­="idDiv1"の要素です。</疑似要素><br></div>

目次に戻る

キーワード値: none

このキーワードでは疑似要素は生成されません。


#idDiv2::before{
	content: none;
}
#idDiv2::after{
	content: 'これは id="' attr(id) '"の要素です。';
}

上記の結果をhtmlのタグとして見た場合、以下のようになると考えてください。

<div id="idDiv1"><br><疑似要素>これはid­="idDiv1"の要素です。</疑似要素></div>

目次に戻る

文字列: コンテンツにテキストを使用する

ここでは疑似要素に単純にテキストを使用してみます。

元からのタグ構成でdiv要素の子要素として配置されているbr要素の前に::before疑似要素が配置され、後に::after疑似要素が配置されているところがポイントとなります。


#idDiv3::before{
	content: "これが::­beforeです。";
}
#idDiv3::after{
	content: "これが::­afterです。";
}

上記の結果をhtmlのタグとして見た場合、以下のようになると考えてください。

<div id="idDiv3">
	<疑似要素>これが::beforeです。</疑似要素>
	<br>
	<疑似要素>これが::afterです。</疑似要素>
</div>

目次に戻る

関数: コンテンツにurl関数を使用する

contentにurl関数を使うと画像を表示することが可能です。


#idDiv4::before{
	content: url(email.png);
}
#idDiv4::after{
	content: "e-mail";
}

上記の結果をhtmlのタグとして見た場合、以下のようになると考えてください。

<div id="idDiv4">
	<疑似要素>[email.pngの画像]</疑似要素>
	<br>
	<疑似要素>e-mail</疑似要素>
</div>

目次に戻る

関数: コンテンツにattr関数を使用する

contentにattr関数を使うと、その要素の属性値を取得することが可能です。


#idDiv5::before{
	content: "この要素のid属性の値は " ;
}
#idDiv5::after{
	content: attr(id) " です。";
}

上記の結果をhtmlのタグとして見た場合、以下のようになると考えてください。

<div id="idDiv5">
	<疑似要素>この要素のid属性の値は </疑似要素>
	<br>
	<疑似要素>idDiv5です。</疑似要素>
</div>

目次に戻る

関数: コンテンツにcounter関数を使用する

ここでは今までのサンプルではなく次の要素を使います。

<body>
	<samp id="idCountSamp">
		<div class="clsDiv"></div>
		<div class="clsDiv"></div>
		<div class="clsDiv"></div>
	</samp>
</body>

contentにcounter関数を使うと、その要素に自動の連番をふることも可能です。 ここでは同じclass属性値をもつ要素で、counter-incrementを使ってカウントしておき、結果を::after疑似要素で出力しています。

<style>
	#idCountSamp{
		counter-reset: countName;
	}
	.clsDiv{
		margin: 10px;
		padding: 10px;
		border: thin solid #aaa;
		border-radius: 50%;
		background-color: pink;
		width: fit-content;
		counter-increment: countName;
	}
	.clsDiv::before{
		content: "No.";
	}
	.clsDiv::after{
		content: counter(countName);
	}
</style>

目次に戻る

グローバル値

contentプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnormalに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター::before{content: グローバル値;}
セレクター::after{content: グローバル値;}

目次に戻る

補足説明

  • ::before::after 疑似要素に適用可能
  • 親要素の値を継承しない

目次に戻る