高速コーティング術を学習する

ちなみにこの本も学習しています。

XHTML&CSS超高速コーディング術

• 作者: 大藤 幹
• 出版社/メーカー: ソシム
• 発売日: 2009/12
• メディア: 単行本

その際のメモをここで記述

・パーツ一覧ページを用意した方が良い。
・ボーダーは背景の上に表示されるため、線種が実線だと背景はそのボーダーで被る。
　また初期値は「実線」ではなく「無し」になっている
・displayプロパティの「table」は内容に合わせた幅になっている
・上下のマージンの相殺は、floatが指定されている要素、絶対配置されている要素
　displayの値が「inline-block」の要素との間のマージンには相殺が行われない。
・絶対配置の位置指定は、絶対配置にした要素を含む要素のうち、「相対配置」「絶対配置」「固定配置」のいずれかに指定されている最も近い要素のボックスを基準として配置される。なお、IE6以前は固定配置には対応していない。

【セレクタの書き方について】
・基本的にはセレクタの最終的な適用対象となる要素までに経由する要素は、全て記入
・パーツに含まれるすべての要素に対するセレクタと｛｝を階層順に並べて先に書いてから表示指定を行うのが良い。
・body要素にたいしてclass属性とid属性の両方を指定した方が良い。
　classにはディレクトリ名　idにはファイル名
・ページやカテゴリごとに固有の表示をする場合、セレクタはbody要素も含め列挙して書くのが良い。

【コーディング基本ルール】
・floatもしくは絶対配置に幅をセットで指定する
・floatと「display:inline;」をセットで指定する
・floatとclearfixをセットで指定する
・ブロックレベル要素の幅は一番外側の要素にだけ指定する
・高さは指定しない
・hasLayoutの切り替えには「zoom:1;」を使用する


white-spaceプロパティに「pre-line」「pre-wrap」が追加されてる

・シャドーコーディング→実際にコーディングをする前に頭の中でシミュレーションをすること。

【コーディングをするにあたって】
・外側の枠組みをしっかりと作り、その後にその内部（ヘッダ・フッダ・ナビゲーション・サイドバー・メインコンテンツなどの各領域の中身）を作る
＜外枠組み＞
・２段カラムで常にサイドバーの背景画像をフッタに接するように表示させるには、この背景画像をサイドバーの背景画像として表示させるのではなく、その親要素のボックスの背景として表示させればよい。
・IE6ではfloatを指定した要素のボックスとボックスの間にコメントがあると表示が崩れてしまうことがあるので、コメントは終了タグの直前に付ける。
・html要素とbody要素の両方に「height:100%;」とさせてbody要素の背景画像をウィンドウズ全体に表示させる指定方法もあるが、マージンやパディングをbody要素に指定しているとその分だけbody要素がhtml要素よりも長くなってしまい、常にスクロールバーが出てしまう。

＜ヘッダの作成＞
・ルールとして決めているわけではないが、「position:relative;」を指定した時に合わせて「zoom:1;」を指定することが多い。
・fontをまとめて指定する時、ine-heightプロパティの値を指定するときはfont-sizeプロパティの値との間にスラッシュ（/）を入れる。（知らなかったw）
http://www.xml.vc/property/font/font.html
・rightプロパティを使用すると問題が発生することがあるため、可能な限りtopプロパティとleftプロパティを使用する。
・cssソースコードの中で同じパターンで数値部分だけが異なるような指定の場合には、こうすることで異なっている部分がわかりやすくなり、編集もしやすくなる。

＜フッダの作成＞
・フッダ部分のナビゲーションをul要素とし、その子要素である先頭のli要素にはクラスを定義して処理を行う。
・上記の際、li要素と下マージン指定して行と行の間の間隔を広げる。
・「white-space:nowrap;」を入れることでfloatした状態で改行されるのを防ぐ。

【ブラウザで表示チェックする際のポイント】
・スクロールしてみる
・ウィンドウサイズを変えてみる
・元のデザインと比較して差異がないか確認する
・マウスオーバーしてみる
・クリックしてみる
・ステータスバーを確認する
・フォントの異なる環境で確認する