文字とリストマーク
![博士H:](../style/hakase.gif)
今回はフォントとリストについてじゃ。
まずは簡単なところから説明しようかの。
font-style | 斜体にするかどうかを指定するのじゃ。 値は normal (普通)、italic (斜体) |
---|---|
font-weight | 文字の太さを指定するのじゃ。 値は normal (普通)、bold (太字) |
font-size | 文字の大きさを指定するのじゃ。 値は、親のフォントサイズに対して パーセンテージで指定するのじゃ。 |
![生徒B:](../style/seitob.gif)
font-size
、なんでパーセンテージだけなの。
![博士H:](../style/hakase.gif)
バグじゃ。
![生徒B:](../style/bHatena.gif)
・・・免罪符?
![博士H:](../style/hAse.gif)
うーん、実際のところ、
まだまだバグが多いのは事実なんじゃよ。
![生徒B:](../style/bSee.gif)
ああ、それで普及してないんだ。
![博士H:](../style/hKomaru.gif)
そーじゃのぉ・・
![生徒A:](../style/seitoa.gif)
博士、font-faceなんてのは無いんですか?
![博士H:](../style/hakase.gif)
おお、あるぞい。
じゃがfont-familyじゃ。
HTMLのアレと違って、
フォント名は一つごとに
引用符で囲わないといけないのじゃ。
![生徒B:](../style/seitob.gif)
いつも最後に囲ってないのがあるじゃん。
![博士H:](../style/hakase.gif)
それは特殊なフォント名で、
総称ファミリと呼ばれておる。
取りあえず以下の三つを覚えておけばよいじゃろ。
serif | ひれ付きのフォントじゃ。 例えば明朝体やTimesNewRomanなんかじゃな。 |
---|---|
sans-serif | ひれ無しの同じ太さの線で書いたフォントじゃ。 ゴシック体やArialとかがそうじゃな。 |
monospace | 同幅のフォントじゃよ。pre やtt の時なんかに使われておるの。 |
![博士H:](../style/hakase.gif)
さて、話題変わってリストじゃ。
![生徒A:](../style/aAmaze.gif)
え! 一度に二種類やるんですか?
![博士H:](../style/hakase.gif)
うむ、両方とも説明する量は少ないからの。
ただ、説明するプロパティの量は多いで、
キッチリ復習しておくのじゃぞ。
リスト関連は、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:](../style/aHatena.gif)
えっっと、つまり
ul
を番号振りリストにしたり
ol
を番号無しリストにしたり
できるって事ですか?
![博士H:](../style/hakase.gif)
その通りじゃ。
例えばp
に番号を振らせることも出来るのじゃよ。
じゃが、
バグが多すぎるで、番号振りはしないほうが無難じゃ。
![生徒A:](../style/aAmaze.gif)
えーっ、もったいない。
![博士H:](../style/hakase.gif)
ちなみに、こうゆうのをリストマーカー、
略してマーカーと呼ぶのじゃ。
次はlist-style-imageじゃ。
これは、リストの項目に使う、画像を指定するのじゃ。
以前紹介したurl("")
を使って指定じゃ。
![生徒B:](../style/bAmaze.gif)
○とか数値とかの代わりに画像が使えるのか!
CSSすげー!!
![博士H:](../style/hakase.gif)
ほっほ、じゃが今はまだ
番号ごとに画像を変えることは出来ないんじゃよ。
最後に、list-style-positionじゃ。
これには二つ値があるのじゃ。
inside | マーカーを内容の一文字目のように扱うぞい。 |
---|---|
outside | マーカーを内容の直前に 別のボックスとして表示するのじゃ。 |
![生徒A:](../style/aSee.gif)
ということは、ol
やul
なんかは、
初期値はoutside
になってるってことですね。
![博士H:](../style/hakase.gif)
うむ、
しかしこれまた残念なことに、
キッチリと位置が決まっておるわけではないので、
位置の微調整は難しいのじゃよ。
![生徒B:](../style/bFuzake.gif)
博士、リスト関連には
まとめて指定するプロパティって無いのー?
![博士H:](../style/hakase.gif)
もちろんあるぞい。
list-styleがそうじゃ。
同じように、半角スペースで区切って並べるのじゃぞ。
background
と同じく、省略したものは初期値じゃ。
じゃがリスト周りには、他よりすこーしバグが多いで、
個別に指定しておいたほうが無難なのじゃ。
今回はここまで。
次回はCSSの難関の一つ、position
とfloat
じゃ。