以下の内容はhttps://ima.hatenablog.jp/entry/20040124/p3より取得しました。


sectionモジュールのスタイルいじり

【元記事:sectionモジュールのスタイルいじり:d:id:manpukuya:20040124:p3

sectionモジュールへの反響について、d:id:danjou:20040123さんは、「リリース直後からすごい反響でめちゃくちゃうれしいです」「(要望の)すべてに対応できるかはちょっとわかりませんが、がんばります」とのことで頼もしい。よろしくお願いいたします。

さて、現状のsectionモジュールで各項目に番号をふれないかと考えて、下のようなスタイルシートを書いてみた。

sectionモジュールを入れる部分は「<div id="section"><hatena name="section" …></div>」としておき、sectionモジュールをほかのモジュールと区別している。

#section div.recentsubtitles a{
display:list-item;       /*それぞれの見出しをリストとして表示するよう指定*/
list-style-type:decimal; /*リストの先頭のマーカーを数字に指定*/
}
#section div.recentsubtitles br
{display:none;} /*br要素を非表示にすることで、1行ごとの余分な改行を抑止*/

しかし、数字は表示されない。Operaで確認しても表示結果は同じだから、IEだけのことではなさそうだ。

id:iserさんのところでは、sectionモジュールがちゃんとリストとして表示されている。スタイルシートを覗かせていただいた限りでは、自分の知らないスペシャルな技が使われているというわけでもなさそう。

自分のスタイルシートでは、どこかほかの指定にバッティングしているのだろうか。うー、わからない。番号つきのリスト化は、いったん保留にしよう。

id:iserさんが、さっそくご自分のスタイルシートを解説してくださいました。なるほど、私のはリストのマーカーが領域の左にあふれ出てしまっていたのですね。勉強になりました。

私はmarginを細かく調整するのはやめて、「list-style-position:inside;」ですませることにしました。「list-style-position」プロパティと「list-style-type」プロパティは「list-style」というプロパティにまとめて書けますので、「list-style:inside decimal;」ということになります。

つまり、以下のように指定しました。

#section div.recentsubtitles a{
display:list-item;         /*それぞれの見出しをリストとして表示するよう指定*/
list-style:inside decimal; /*リストの先頭のマーカーを、領域の内側に、数字で表示するよう指定*/
}
#section div.recentsubtitles br
{display:none;} /*br要素を非表示にすることで、1行ごとの余分な改行を抑止*/

d:id:iser:20040124#p5さんも、スタイルシートを詳しく、わかりやすく説明してくださっています。

「近いうちにモジュールの仕様が変わりそうな気もしますが…」というコメントにはまったく同感ですが、スタイルシートの勉強になったし、こうしてやり取りできたのは嬉しいことです。どうもありがとうございました。




以上の内容はhttps://ima.hatenablog.jp/entry/20040124/p3より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14