その１

リストの行頭の種類を変えてみる

いつものように先回の最終ページを変更していくが、わしは、またファイル名を変更するからの。見本ページはsample17.htmlとstyle17.cssぢゃ。

では、さっそく目的のプロパティを追加していくぞい。

ul{
list-style-type: upper-roman;
}

こうなったかいの？
第１５回で、ブロック分けしてもらった時に、MENU部分を<ul></ul>タグで囲んでもらったのを覚えておるかの？
今回、そのタグを指定したんぢゃ。

list-style-type（リストのスタイルタイプ）:（は） upper-roman（大文字のギリシャ文字）;（です）

スタイルタイプは下のような物がある。
いろいろ試してみてくだされのぉ。

none	なし
disc	黒丸	●
circle	白丸	○
square	四角	■
decimal	数字	1.
lower-roman	小文字のギリシャ文字	i.
upper-roman	大文字のギリシャ文字	I.
lower-alphabet	小文字のギリシャ文字	a.
upper-alphabet	大文字のギリシャ文字	A.

ぢゃが、確かromanは機種依存文字で、macでは表示されんと思ったが・・・。/^^;
この本は、windows＆IE対応ぢゃから・・・そこまで配慮はされてないのも当然か。/^-^;;;

その２

リストの行頭を画像にする

お次は、画像を使ってみるぞい。
この画像「

」を右クリックでご自分のＰＣに保存するか、自分で適当な画像を用意してくだされ。あ、わしの顔でもいいぞい。（大きすぎるがのぉ。・・（笑

ulタグ指定で下の赤い部分を変更してくだされ！

ul{
list-style-image: url(crescent1.gif);
}

image	今回は、typeでなく、image、つまり画像ということぢゃな。
url(crescent1.gif);	青い部分は画像ファイル名ぢゃ。この場合はページがあるフォルダ内に画像ファイルもある場合ぢゃ。

で、ページはこうぢゃ。どうちゃの？
それぞれ行頭に、画像がきておるぢゃろ？

そうしてのぉ、リストの中の特定な項目の画像だけの変更もできるのぢゃ。
ちょいとhtmlも変えないといけないがのぉ。

にこにこ顔の助手
新着表示のときなどいいですね。

そうぢゃの。ここでは、ちょいと大きめの画像「」で代用しておくとしよう。
まずは、htmlの方で、menuの特別画像表示したい項目の<li>タグに、クラス名を付けてくだされ。下のようにリストの１つ目のところを変更するんぢゃぞい。

そして、cssファイルの方は、li　タグの指定を追加ぢゃ。

li.new{
list-style-image: url(bg_day.gif);
}

どうぢゃの？こうなったちゃろうかの？

さて、お次もちょいと記事部分の文字表示の変更をちょこっとやるぞい。
またよろしゅうのぉ。