カテゴリー:
CSS
閲覧数:687 配信日:2013-02-19 15:36
・きっかけは、このサイトだった
・へー、CSSでこんなこと出来るのか
・だったら、やってみよう
・割と簡単に考えていた
・5分くらいあれば出来ると思っていた
・甘かった
うまく設置できない場所がある
・普通の場所だと表示されるのだが、ちょっとフロートかましてるとこだと、どうしてもうまくいかない
・どうやら、下記辺りが影響しているらしい
.rounded-list a{
position: relative;
}
.rounded-list a:before{
position: absolute;
} ・しょうがないので、「absolute」かましてないサンプルを探したけど、これがびっくりするぐらい見つからない
・上記のようなサンプルがゴロゴロしてるんだ、と思ったのは勘違いで、たまたま見つけた最初の1件がどうやら最も素晴らしいデモみたい
・後は、定例処理か、せいぜい画像に置き換えるぐらい
olタグ数字の装飾
・結局、自分がやりたいのは「olタグ数字の装飾」ということに気が付き、メゲズに検索し続けていたら、同じ疑問を持った人を発見
【何をしたいのか】
olタグで出来る番号付きリストの、番号の部分を装飾したいです。
番号に装飾は出来ないのでしょうか？
olタグで出来る番号付きリストの、番号の部分を装飾したいです。
番号に装飾は出来ないのでしょうか？
リストマーカは display: marker を持つ特別なボックス（しかも CSS2.1 で削除されてしまった）
擬似要素 li:before
ここで、ようやくこの書き方の重要性に気が付く
li:before {
content: counters(li);
counter-increment: li;・counter-increment CSS 生成内容
・やっと見つけたこのサンプルもabsolute利用
li:before {
position:absolute;・次に見つけたこのサンプルは、数字に背景色付いてないけど、でも、「absolute」使ってない！
・よっしゃいける！
・と思い試すも、やっぱり、フロート部分の微調整が効かない
・relativeの影響？
ol > li:before {
position: relative;・ここで、ようやく、リストではなく、設置するフロート部分がおかしいんちゃうの？ ていうことに気が付く