状態:挫折により終了
閲覧数:3,270
投稿日:2013-02-19
更新日:2013-02-19
やりたかったこと
・olタグ数字を装飾しようした
・具体的には、背景色を付け、丸で囲おうとした
結果
・特定状況下でうまくいかないことが判明
・2時間弱試すも、結局挫折
結論
・olタグ数字装飾は難しい
・ulタグも含め、リスト文字装飾は、規定以外のことにCSSで挑戦しようとすると、途端に難易度が高くなる
・「レスポンシブ」で、かつ、動的に「広告」数が変化する、サイトのCSS微調整は、非常に難しい
・olタグ数字を装飾しようした
・具体的には、背景色を付け、丸で囲おうとした
結果
・特定状況下でうまくいかないことが判明
・2時間弱試すも、結局挫折
結論
・olタグ数字装飾は難しい
・ulタグも含め、リスト文字装飾は、規定以外のことにCSSで挑戦しようとすると、途端に難易度が高くなる
・「レスポンシブ」で、かつ、動的に「広告」数が変化する、サイトのCSS微調整は、非常に難しい
経緯
・きっかけは、このサイトだった
・へー、CSSでこんなこと出来るのか
・だったら、やってみよう
・割と簡単に考えていた
・5分くらいあれば出来ると思っていた
・甘かった
うまく設置できない場所がある
・普通の場所だと表示されるのだが、ちょっとフロートかましてるとこだと、どうしてもうまくいかない
・どうやら、下記辺りが影響しているらしい
・しょうがないので、「absolute」かましてないサンプルを探したけど、これがびっくりするぐらい見つからない
・上記のようなサンプルがゴロゴロしてるんだ、と思ったのは勘違いで、たまたま見つけた最初の1件がどうやら最も素晴らしいデモみたい
・後は、定例処理か、せいぜい画像に置き換えるぐらい
olタグ数字の装飾
・結局、自分がやりたいのは「olタグ数字の装飾」ということに気が付き、メゲズに検索し続けていたら、同じ疑問を持った人を発見
擬似要素 li:before
ここで、ようやくこの書き方の重要性に気が付く
・counter-increment CSS 生成内容
・やっと見つけたこのサンプルもabsolute利用
・次に見つけたこのサンプルは、数字に背景色付いてないけど、でも、「absolute」使ってない!
・よっしゃいける!
・と思い試すも、やっぱり、フロート部分の微調整が効かない
・relativeの影響?
・ここで、ようやく、リストではなく、設置するフロート部分がおかしいんちゃうの? ていうことに気が付く
・へー、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;
・ここで、ようやく、リストではなく、設置するフロート部分がおかしいんちゃうの? ていうことに気が付く
設置するフロート部分
・ところが、この部分、何遍やってもうまくいかない
・リストに合わせるようとするとフロートが崩れるし、フロートに合わせると、リスト部分が崩れる
原因
・原因は、分かっている
・「レスポンシブ対応」、かつ「動的な広告表示対応」で、無理をしているため
・「レスポンシブ」は、width設定が通常とは違うため、やりづらい
・CSSフレームワークに任せておけば基本的にはOKなのだが、そこに指定width以外の広告が入ると、途端に難しくなる
・しかも、広告設置数には制限があるため、エントリー毎に、「広告ありパターン」✕「広告なしパターン」を動的に制御表示しなければいけない
・ガチガチに固めた場所に設置するなら問題ないのだが、上記のような不安定なフロート状態のところに、リストタグで、absoludeだの、relativeだの持ってこられると、エントリーテキスト量によっては、うまくいかないこともあるよ、という話
・と言うか、多分、オレが、「レスポンシブ」を良く分かっていないだけなんだろうね
・結局、olタグ利用は、今回見送りすることにした
・「CSS4」が登場するか、あるいは、「素敵なolタグCSSカスタマイズサンプル」を発見するまで、この件は、もうヤンナイ
・時間かかって、しょうがないから
・リストに合わせるようとするとフロートが崩れるし、フロートに合わせると、リスト部分が崩れる
原因
・原因は、分かっている
・「レスポンシブ対応」、かつ「動的な広告表示対応」で、無理をしているため
・「レスポンシブ」は、width設定が通常とは違うため、やりづらい
・CSSフレームワークに任せておけば基本的にはOKなのだが、そこに指定width以外の広告が入ると、途端に難しくなる
・しかも、広告設置数には制限があるため、エントリー毎に、「広告ありパターン」✕「広告なしパターン」を動的に制御表示しなければいけない
・ガチガチに固めた場所に設置するなら問題ないのだが、上記のような不安定なフロート状態のところに、リストタグで、absoludeだの、relativeだの持ってこられると、エントリーテキスト量によっては、うまくいかないこともあるよ、という話
・と言うか、多分、オレが、「レスポンシブ」を良く分かっていないだけなんだろうね
・結局、olタグ利用は、今回見送りすることにした
・「CSS4」が登場するか、あるいは、「素敵なolタグCSSカスタマイズサンプル」を発見するまで、この件は、もうヤンナイ
・時間かかって、しょうがないから