ホーム>HTMLリファレンス(アルファベット検索)>contentプロパティ
content プロパティ …内容(文字や画像)を挿入する
使用プロパティ
|
content: 値; |
対象となる
要素 |
before 疑似要素、
after 疑似要素 |
継承 |
しない
|
値 |
次項(値と働き)を参照 |
|
|
解説
content プロパティを使えば、要素の前後に、文字列や画像などのコンテンツを挿入することができます。 contentプロパティを指定することができるのは、 before 擬似要素または after 擬似要素をセレクタで使用した場合です。
content プロパティを使用すれば、HTMLを変更することなく、自動的に文字や画像などを挿入できます。
※ content プロパティは複雑で、しかも一般的なCSSでも再現することができるのであまりおすすめはしません。
|
値 |
働き |
値 |
働き |
"文字列" |
文字列をダブルクォーテーション「"」またはシングルクォーテーション「'」で囲んだものを、指定すればその文字列が表示されます。 |
url(URL) |
指定したURLの画像を表示します。 |
counter(カウンター名)、
counters(カウンター名) |
ここで説明するカウンターとは要素の内容に自動的に連番をつけることを指します。カッコ内にcounter-increment プロパティで指定したカウンター名を記述します。詳しくは counter-increment プロパティを参照してください。 |
attr(属性名) |
()内にに表示するタグの属性を入れ、それを表示します。 |
open-quote、
close-quote |
「open-quote」は quotes プロパティで指定した開きカッコを表示し、「close-quote」はquote プロパティで指定した閉じカッコを表示します。 |
no-open-quote、
no-close-quote |
「no-open-quote」は開きカッコを表示せず、「no-close-quote」は閉じカッコを表示しません。 |
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p.sample1:before {
content: "※文字の追加※";
}
p.sample2:after {
content: url(image/gif);
}
</style>
</head>
<!--ページの本文-->
<body>
<p class="sample1">直前に文字を追加しました。</p>
<p class="sample2">直後に画像を追加しました。</p>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
直前に文字を追加しました。
直後に画像を追加しました。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他