CSS02

フォントの指定（2013年7月現在）

• bodyで指定するフォントを先生が検証。
• 以下の３フォントをこの順番で記述すればどの環境にも対応できる。

1. "Hiragino kaku Gothic ProN"
2. Meiryo
3. sans-serif

• ブログ「Web初心者の勉強法」の「font-family/font-sizeとline-height」の記事を参照。（移動することがあるのでトップから探してください）

フォントのサイズ

• フォントサイズはブラウザによって異なる。
• bodyを16pxで固定し、他の箇所でemなど倍率で指定すると確実。

line-height

• 文字の中心から次の行の文字の中心の距離。
• 文字の中心から上下に距離を取る。

• webは行末を揃えることはできない。
• 日本語には拗促音があり、サイズや間隔が均等ではない。
• 手を加えてムリに揃えようとすると、他のブラウザで表示が崩れてしまう。

子孫セレクタ

• divは空箱。
• divに名前をつけて使うのと、要素に名前をつけて使うのでは、得られる結果は同じだが、後者の方がコードがすっきりする。

borderを使って大見出しに装飾する

• border:1pxで４辺を囲っておいて、
• border-left:10pxで上からかぶせて左辺を太くし、文頭を強調する。
• line-heightによって文字の位置が上下左右均等ではないので、paddingでそれぞれ値を調整する。

疑似クラス

• 変化をつけなくてもlink、hover、visited、activeの４つは指定しておく。
• hoverはホバーと読む。エイチオーバーではない。

listの書式

• listの文頭にでる黒丸を消す＝list-style-type:none;
• listの黒丸は文字に合わせて表示されるので、文字を表示領域いっぱいに寄せると黒丸ははみ出て表示されない。
• listの黒丸を画像で表示する

li {　/*list要素（ブロックレベル要素）で指定*/
background-image: url(○○○.jpg);　/*画像をパスで指定*/
background-repeat: no-repeat;　/*繰り返し表示をキャンセル*/
background-position: 0px 9px;　
/*画像を表示する位置を、領域の左上からのヨコ・タテの順に指定*/
padding-left: 12px;　/*左右の位置を調整*/
}　/*以上。*/