contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-28 17:50:01
  • このエントリーをはてなブックマークに追加

番号の前後に文字を追加する

 番号の前後には文字を追加することも可能だ。たとえば、「第1章」と表示するには、次のように指定する。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: '第' counter(section) '章 ';
}

h1{
counter-increment: section;
}
ブラウザで表示を確認する

番号のデザインを指定する

 contentプロパティで追加した番号のデザインを指定することもできる。たとえば、次のサンプルでは番号の文字の色をオレンジに、大きさを42ピクセルに指定している。また、番号の後ろにはピリオドを付けて「1.」という形で表示するように設定した。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section) '. ';
color: orange;
font-size: 42px;
}

h1{
counter-increment: section;
}
ブラウザで表示を確認する

番号の種類を指定する

 連番の番号は算用数字だけでなく、アルファベットやローマ数字でも表示することができる。番号の種類を指定するには、counter()の設定を次のかたちで指定する。

content: counter(カウンター名, 番号の種類)

 「番号の種類」では、list-style-typeプロパティの値を指定することができる。list-style-typeはリストのマークや番号の種類を指定するプロパティだ。たとえば、大文字のアルファベットで表示するには「upper-alpha」、大文字のローマ数字で表示するには「upper-roman」と指定する。

 次のサンプルでは「counter(section, upper-alpha)」と指定して、番号の代わりに大文字のアルファベットを表示した。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section, upper-alpha) '. ';
color: orange;
font-size: 42px;
}

h1{
counter-increment: section;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]