1と2の間辺りからはじめるCSS講座文字とリストマーク

もくじ
目次を飛ばして本文へ
博士H:

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

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

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

博士H:

バグじゃ。

生徒B:

・・・免罪符?

博士H:

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

生徒B:

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

博士H:

そーじゃのぉ・・

生徒A:

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

博士H:

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

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

生徒B:

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

博士H:

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

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

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

生徒A:

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

博士H:

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

リスト関連は、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)
生徒A:

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

博士H:

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

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

生徒A:

えーっ、もったいない。

博士H:

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

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

生徒B:

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

博士H:

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

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

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

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

博士H:

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

生徒B:

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

博士H:

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

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

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

<行間と文字間[P] ボックスの位置を操作する[N]>

▲見出しへ戻る
最終更新日:2004年04月02日
Copyright © 2001-2003 ばあど All Rights Reserved.