フォントの指定(2013年7月現在)
- bodyで指定するフォントを先生が検証。
- 以下の3フォントをこの順番で記述すればどの環境にも対応できる。
- "Hiragino kaku Gothic ProN"
- Meiryo
- sans-serif
- ブログ「Web初心者の勉強法」の「font-family/font-sizeとline-height」の記事を参照。(移動することがあるのでトップから探してください)
フォントのサイズ
- フォントサイズはブラウザによって異なる。
- bodyを16pxで固定し、他の箇所でemなど倍率で指定すると確実。
line-height
- 文字の中心から次の行の文字の中心の距離。
- 文字の中心から上下に距離を取る。
- webは行末を揃えることはできない。
- 日本語には拗促音があり、サイズや間隔が均等ではない。
- 手を加えてムリに揃えようとすると、他のブラウザで表示が崩れてしまう。
- divは空箱。
- divに名前をつけて使うのと、要素に名前をつけて使うのでは、得られる結果は同じだが、後者の方がコードがすっきりする。
borderを使って大見出しに装飾する
- border:1pxで4辺を囲っておいて、
- border-left:10pxで上からかぶせて左辺を太くし、文頭を強調する。
- line-heightによって文字の位置が上下左右均等ではないので、paddingでそれぞれ値を調整する。
疑似クラス
- 変化をつけなくてもlink、hover、visited、activeの4つは指定しておく。
- hoverはホバーと読む。エイチオーバーではない。
listの書式
- listの文頭にでる黒丸を消す=list-style-type:none;
- listの黒丸は文字に合わせて表示されるので、文字を表示領域いっぱいに寄せると黒丸ははみ出て表示されない。
- listの黒丸を画像で表示する
li {
background-image: url(○○○.jpg);
background-repeat: no-repeat;
background-position: 0px 9px;
padding-left: 12px;
}