Harukiya Archives

2008/10/16

category /

2006/11/03

category / CSS

1/12 の扇型から 1/6 の扇型を引き正三角形の面積を足すみたいな、いったんマイナスしておいて、後から加えた部分でバランスを取るという CSS の小技。序列リスト <ol>要素は包含する項目の頭に連番を振るブラウザが多いです。その数字部分をスタイリングする方法。

> Styling Ordinal List

サンプルは <ol> の border を使いたかったのでゴチャゴチャやってますが、基本はこれだけです。

  1. body {
  2. font: 1em/1.5 sans-serif;
  3. color: #444;
  4. }
  5. ol {
  6. font: italic bold 2em/1 'Lucida Sans Unicode', serif;
  7. color: #369;
  8. }
  9. ol li p {
  10. font: normal normal .5em/1.5 sans-serif;
  11. color: #444;
  12. }

list-style （連番数字）は ol に依存するので、まずその部分のスタイルを決めます。文字色、太字体、斜体、フォントサイズを倍にするなどなど。このままではリスト全体に継承されてしまうから、孫要素の p で元のスタイルに戻す。注意する点はフォントサイズで ol で 3倍 にしたら p で .33em（33%）のように指定すること。結果的に連番数字だけにスタイリングできるという寸法です。

シンプルだけどコメントリストに ol って合うと思うよ。

writeback

  1. 　

< BELIEVE IN LOVE | 前向きで行こう > | 表紙へ戻る | 探す | 案内

ホームページ アフィリエイト レンタルサーバー FC2ブログ キャッシング