ホーム>HTMLリファレンス(アルファベット検索)>counter-incrementプロパティ
counter-increment プロパティ …カウンターを設定する
使用プロパティ
|
counter-increment: 値; |
対象となる
要素 |
すべて |
継承 |
する
|
値 |
カウンター名、カウンター名 整数、none |
|
|
解説
counter-increment プロパティを使えば、カウンターを作成することができます。counter-increment プロパティの値にカウンター名を指定すれば、その名前のカウンターの数が1つづつ増えます。また、カウンター名の後に整数を指定すると、その分カウンターの数が増えます。 値に「none」を指定すると、カウンターは変動しません。
counter-increment プロパティを適応させるには before 擬似要素または after 擬似要素をセレクタで使用し、content プロパティを指定しましょう。
※ content プロパティは複雑で、しかも一般的なCSSでも再現することができるのであまりおすすめはしません。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
h1 {
counter-increment: chapter;
counter-reset: section;
}
h1:before {
content: counter(chapter)". ";
}
h2 {
counter-increment: section;
}
h2:before {
content: counter(section) ". ";
}
</style>
</head>
<!--ページの本文-->
<body>
<h1>第一レベルの見出し</h1>
<h2>第二レベルの見出し</h2>
<h2>第二レベルの見出し</h2>
<h1>第一レベルの見出し</h1>
<h2>第二レベルの見出し</h2>
<h2>第二レベルの見出し</h2>
</body>
</html> |
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他