◆授業内容
ブロックレベル要素とインラインレベル要素の使い分け
ブロックレベル要素のみmargin、 paddingの設定ができる。
ブロックレベル要素とインライン要素 - Web標準普及プロジェクト
カンプが実寸大でない時の幅指定の決め方
（カンプ本文のメインテキストの文字をブラウザ標準の16pxとして計算する。htmlを入力したものがあれば、カンプと同じ箇所の一行の長さを、Firefoxの Web developerツール⇒その他⇒ルーラーを表示で測る。）
「カンプ」の検索結果 - Webデザインの勉強 | Webサイト制作科 6月15日開講クラス
幅指定は必ず偶数
幅指定はある程度ラフで良いが、必ず偶数で指定する。奇数だと{margin:0 auto;}で中央配置したときに、0.5pxが表示できないので意図した表示にならない。
bodyのフォントサイズ
標準は16pxだが、ブラウザの設定が文字「小」や「大」だと違うので、改めて16pxと指定する。
CSSの書き始め
reset
CSS内で使う要素に対してのリセット。
↓
font-size
html～pまでの各要素のフォントサイズをまとめて指定する。
本文の文字サイズから決め、見出しサイズを決めていく。
スマホを含む、CSS3ブラウザーのユーザーメインの場合はrem指定が良いが、古いブラウザのユーザー用にpx表記も併記すると良い。
↓
body
背景色、文字色の指定。背景画像を指定する場合は、画像エラー時でも、文字が可読な背景色を設定するのがベター。
emとremの違い
emは親要素、祖先要素の係数を子孫要素に引き継ぐため、表示サイズは累乗の計算にになる。
祖先要素1em（=16px）、親要素0.8em、子要素0.8emの場合
⇒祖先の16pxに対して、
親要素は13px、子要素10pxになる。
remは一番の始祖となる要素に対してのみの比率で指定できる。
祖先要素1rem（=16px）、親要素0.8rem、子要素0.8remの場合
⇒祖先の16pxに対して、親要素は13px、子要素も13pxとなる。
#containerの役割
- コンテンツの幅をきちんと見せる（widthの指定）
- 左右の位置を整える。（左右のmarginをautoで指定）
画像を背景にするかインラインにするか
画像が見えなくても内容が分かるかどうかで判断する。背景画像を設定するときは、背景色も設定する。この際の設定色は、画像表示エラー時でも、文字が見える色が良い。
Photoshopの環境設定
- CS5以前を使用する際は、起動時にAlt+Ctrl＋Shiftを押すと、前回エラー終了時のメモリをクリアでき、再エラーを起こしにくくなる。（環境設定も消えるので、再設定が必要。）
- カラー設定→「Web・インターネット用・日本2」※紙媒体の場合は「プリプレス用・日本」
- 解像度はWebの場合72ppiに設定する。(DTPにおけるptが1/72inchであることに由来する、1ptと1pxの大きさが同じに見える解像度。)※紙媒体の場合はdpiという単位を使う。
ppi=pixel per inch dpi=dot per inch
pt(出版において使用される長さの単位である。文字のサイズや余白の幅などの、版面の構成要素の長さを表す場合に使われる。) ポイント - Wikipediaより
◇◇◇ ツール◇◇◇
Pearl Crescent Page Saver
◆所感
授業の内容的には、主に週末課題の直しでしたが、 かなりテクニカルな解説が入ってきて、教わってきた内容をブログ上で再現するのもなかなか難しかったです。
（特にremのくだり。はてなの大元の<html>のfont-size設定が分からず、ちょっと上手く処理できませんでした・・・orz）
今は教わった一つ一つを気を付けながら数をこなし、いずれは自然にポイントを押さえたCSSの組立ができる様な感じを目指していきたいです。
◆課題
特になし。
