floatを使ったレイアウト - WEB

IE対策準備

レイアウトが崩れやすいIEブラウザ表示を考慮してページ作りをするために

IE Tester
IE5.5, IE6, IE7, IE8, IE9betaの確認が同時にできる
Expression Web
試用期間あり？
MultipleIE
IE3〜IE6を一括インストール

授業ではIE Testerを導入

float

本来、上から下へ記述されていく要素（static）を横並べにするレイアウト方法

文書構造を保ったまま、レイアウトを変更することができる
浮かび上がることで不安定になるので、使うときはwidth（幅指定）とセット

text-align　IE対策　位置を指定
overflow: hidden　子要素が浮いて実体をなくした状態なので、親がその分高さ要素を失う→その状態を解決
display: inline　IE対策　フロートした要素のマージンが２倍になってしまうバグ解消
clear: both　float要素の次に続いたものが前に潜り込んでいかないように

＜練習用に＞
サンプルサイト：intensivstation
サンプルサイト：Layout Gala

イラストレーター演習

クリッピングマスク

例）１．四角の中に納まるように円を描く
　　２．両方選択し、クリッピングマスク実行
　　３．円の形にくり抜かれて四角が見える

複合パス

例）１．四角に一部重なるように円を描く
　　２．円の中に納まるようにもう一つ円を描く
　　３．２つの円を選択し、複合パス作成
　　４．内側の円の形がくり抜かれたように四角が見える
複合パス＝一筆書きの状態にする（一つの図形として認識された状態）

・・以上を踏まえて応用

　　１．画像の上に四角作成
　　２．横方向に複製作成→Ctrl+Ｄで繰り返し
　　３．複数の四角を下方向へ複製、繰り返し　画像を四角で埋める
　　４．四角すべてを選択し複合パス作成
（を行なわないと、５でクリッピングマスクを実行した際に最後に作成した四角のみにしか反応しない）
　　５．クリッピングマスク実行
　　６．画像が格子で分割された状態に見える