olタグ装飾しようとしたら、「レスポンシブ」と「広告」影響により挫折

CSS

 状態:挫折により終了  閲覧数:3,270  投稿日:2013-02-19  更新日:2013-02-19
やりたかったこと
・olタグ数字を装飾しようした
・具体的には、背景色を付け、丸で囲おうとした

結果
・特定状況下でうまくいかないことが判明
・2時間弱試すも、結局挫折

結論
・olタグ数字装飾は難しい
・ulタグも含め、リスト文字装飾は、規定以外のことにCSSで挑戦しようとすると、途端に難易度が高くなる
・「レスポンシブ」で、かつ、動的に「広告」数が変化する、サイトのCSS微調整は、非常に難しい

経緯

 閲覧数:618 投稿日:2013-02-19 更新日:2013-02-20
・きっかけは、このサイトだった
・へー、CSSでこんなこと出来るのか
・だったら、やってみよう
・割と簡単に考えていた
・5分くらいあれば出来ると思っていた
・甘かった


うまく設置できない場所がある
・普通の場所だと表示されるのだが、ちょっとフロートかましてるとこだと、どうしてもうまくいかない
・どうやら、下記辺りが影響しているらしい
.rounded-list a{
position: relative;
}
.rounded-list a:before{
position: absolute;
}


・しょうがないので、「absolute」かましてないサンプルを探したけど、これがびっくりするぐらい見つからない
・上記のようなサンプルがゴロゴロしてるんだ、と思ったのは勘違いで、たまたま見つけた最初の1件がどうやら最も素晴らしいデモみたい
・後は、定例処理か、せいぜい画像に置き換えるぐらい


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;


・ここで、ようやく、リストではなく、設置するフロート部分がおかしいんちゃうの? ていうことに気が付く

設置するフロート部分

 閲覧数:688 投稿日:2013-02-19 更新日:2013-02-19
・ところが、この部分、何遍やってもうまくいかない
・リストに合わせるようとするとフロートが崩れるし、フロートに合わせると、リスト部分が崩れる

原因
・原因は、分かっている
・「レスポンシブ対応」、かつ「動的な広告表示対応」で、無理をしているため
・「レスポンシブ」は、width設定が通常とは違うため、やりづらい
・CSSフレームワークに任せておけば基本的にはOKなのだが、そこに指定width以外の広告が入ると、途端に難しくなる
・しかも、広告設置数には制限があるため、エントリー毎に、「広告ありパターン」✕「広告なしパターン」を動的に制御表示しなければいけない
・ガチガチに固めた場所に設置するなら問題ないのだが、上記のような不安定なフロート状態のところに、リストタグで、absoludeだの、relativeだの持ってこられると、エントリーテキスト量によっては、うまくいかないこともあるよ、という話
・と言うか、多分、オレが、「レスポンシブ」を良く分かっていないだけなんだろうね

・結局、olタグ利用は、今回見送りすることにした

・「CSS4」が登場するか、あるいは、「素敵なolタグCSSカスタマイズサンプル」を発見するまで、この件は、もうヤンナイ
・時間かかって、しょうがないから


invalid property value css background-color

インライン要素のまま、上下marginを適用させる



類似度ページランキング
順位 ページタイトル抜粋
1 olタグ装飾しようとしたら、「レスポンシブ」と「広告」影響により挫折 85
2 レスポンシブ画像実装方式 30
3 iframeタグ レスポンシブ対応 → うまくいかず 30
4 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 30
5 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 29
6 テーブルレスポンシブ 27
7 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 27
8 レスポンシブ画像系用語 27
9 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 26
10 レスポンシブウェブデザイン 26
11 レスポンシブユーティリティ 26
12 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 25
13 レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい 25
14 「position:absolute;」が分からなくなったときに見るエントリー 25
15 親要素の横幅を越えたヘッダー/レスポンシブ対応 25
16 画像ライセンスについて調査した結果、分かったこと 24
17 レスポンシブWebサイトにおけるブレイクポイント 24
18 レスポンシブの margin と width 設定 24
19 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 24
20 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 23
2024/10/12 9:17 更新
週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新