文字とリストマーク

博士Ｈ：

今回はフォントとリストについてじゃ。
まずは簡単なところから説明しようかの。

font-style 斜体にするかどうかを指定するのじゃ。
値はnormal(普通)、italic(斜体)
font-weight 文字の太さを指定するのじゃ。
値はnormal(普通)、bold(太字)
font-size 文字の大きさを指定するのじゃ。
値は、親のフォントサイズに対して
パーセンテージで指定するのじゃ。
生徒Ｂ：

font-size、なんでパーセンテージだけなの。

博士Ｈ：

バグじゃ。

生徒Ｂ：

・・・免罪符？

博士Ｈ：

うーん、実際のところ、
まだまだバグが多いのは事実なんじゃよ。

生徒Ｂ：

ああ、それで普及してないんだ。

博士Ｈ：

そーじゃのぉ・・

生徒Ａ：

博士、font-faceなんてのは無いんですか？

博士Ｈ：

おお、あるぞい。
じゃがfont-familyじゃ。

HTMLのアレと違って、
フォント名は一つごとに
引用符で囲わないといけないのじゃ。

生徒Ｂ：

いつも最後に囲ってないのがあるじゃん。

博士Ｈ：

それは特殊なフォント名で、
総称ファミリと呼ばれておる。
取りあえず以下の三つを覚えておけばよいじゃろ。

serif ひれ付きのフォントじゃ。
例えば明朝体やTimesNewRomanなんかじゃな。
sans-serif ひれ無しの同じ太さの線で書いたフォントじゃ。
ゴシック体やArialとかがそうじゃな。
monospace 同幅のフォントじゃよ。
preやttの時なんかに使われておるの。
博士Ｈ：

さて、話題変わってリストじゃ。

生徒Ａ：

え!　一度に二種類やるんですか？

博士Ｈ：

うむ、両方とも説明する量は少ないからの。
ただ、説明するプロパティの量は多いで、
キッチリ復習しておくのじゃぞ。

リスト関連は、list-style-で始まるのじゃ。
まずはlist-style-typeじゃ。
値は、以下のウチのどれか。

disc 丸いポイント。●。
circle 白抜きの丸いポイント。○。
square 四角いポイント。■。
decimal 十進数で1から数える。(1,2,3,4,5)
lower-roman 小文字のローマ数字。(i, ii, iii, iv, v)
upper-roman 大文字のローマ数字。(I, II, III, IV, V)
lower-alpha 小文字のアルファベット。(a, b, c, d, e)
upper-alpha 大文字のアルファベット。(A, B, C, D, E)
生徒Ａ：

えっっと、つまり
ulを番号振りリストにしたり
olを番号無しリストにしたり
できるって事ですか？

博士Ｈ：

その通りじゃ。
例えばpに番号を振らせることも出来るのじゃよ。

じゃが、
バグが多すぎるで、番号振りはしないほうが無難じゃ。

生徒Ａ：

えーっ、もったいない。

博士Ｈ：

ちなみに、こうゆうのをリストマーカー、
略してマーカーと呼ぶのじゃ。

次はlist-style-imageじゃ。
これは、リストの項目に使う、画像を指定するのじゃ。
以前紹介したurl("")を使って指定じゃ。

生徒Ｂ：

○とか数値とかの代わりに画像が使えるのか!
CSSすげー！！

博士Ｈ：

ほっほ、じゃが今はまだ
番号ごとに画像を変えることは出来ないんじゃよ。

最後に、list-style-positionじゃ。
これには二つ値があるのじゃ。

inside マーカーを内容の一文字目のように扱うぞい。
outside マーカーを内容の直前に
別のボックスとして表示するのじゃ。
生徒Ａ：

ということは、olやulなんかは、
初期値はoutsideになってるってことですね。

博士Ｈ：

うむ、
しかしこれまた残念なことに、
キッチリと位置が決まっておるわけではないので、
位置の微調整は難しいのじゃよ。

生徒Ｂ：

博士、リスト関連には
まとめて指定するプロパティって無いのー？

博士Ｈ：

もちろんあるぞい。
list-styleがそうじゃ。
同じように、半角スペースで区切って並べるのじゃぞ。

backgroundと同じく、省略したものは初期値じゃ。
じゃがリスト周りには、他よりすこーしバグが多いで、
個別に指定しておいたほうが無難なのじゃ。

今回はここまで。
次回はCSSの難関の一つ、positionとfloatじゃ。