12/03 floatプロパティとillustrator練習 - Webデザインの方法

Webデザインの方法 12日目内容

IEの下位バージョンでの動作確認
floatプロパティの特徴
floatでの注意点まとめ
２カラムレイアウト練習
illustratorの練習（マスク）

IEの下位バージョンでの動作確認

IEtester導入

画像中央の緑色のボタンをクリックしてexeファイルをダウンロード
ダウンロードしたファイルを実行して手順に従ってインストール
DreamweaverにIEtesterを紐付けるため起動する
編集→環境設定→ブラウザでプレビュー→+ボタン→参照→IEteste.exeを指定→OK

その他の検証方法

Expression Web 4「SuperPreview」
MultipleIE
Adobe BrowserLab

floatプロパティの特徴

floatした時のIE６でのバグ

floatした側のmarginをつけると2倍になってしまう

例えば、次のようなhtmlを記述する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatプロパティのバグ</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  float: left;
  width: 200px;
  margin-left: 50px;/* 1つ目のboxの左側のマージンが2倍になる */
  background: #CCF;
  height: 100px;
}
</style>
</head>
<body>
<div class="box"><br></div>
<div class="box"><br></div>
</body>
</html>

これをIE6のブラウザで確認すると1つ目のbox左側の余白と2つ目のboxの余白が同じでなければならないのに1つ目のboxの余白が2倍になっているのがわかる

昔はスターハックなど様々な方法で対策をしていた

現在はfloatをつけたセレクタには「display: inline;」をつけて対策するのが主流

先ほどのhtmlのbox部分に「display: inline;」を追記する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatプロパティのバグ</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  float: left;
  width: 200px;
  margin-left: 50px;
  background: #CCF;
  height: 100px;
  display: inline;/* IE6対策でfloatで浮いたものを沈める */
}
</style>
</head>
<body>
<div class="box"><br></div>
<div class="box"><br></div>
</body>
</html>

IE6で確認すると他のブラウザと同様の見た目に戻りバグが解消されているのがわかる

floatした時の親の高さがなくなるバグ
floatとは浮きあがり次の要素がその部分に回りこむことなので、浮き上がってしまうと親のボックスが高さを認識できなくなる
これはどのブラウザでも同じ解釈なので必ず対策が必要
例えば、次のようなhtmlを記述する（宣言とhead部分は省略）

<body>
<div id="container">
<div id="primary"><br><br><br><br><br><br><br><br><br><br></div>
<div id="secondary"><br><br><br><br><br><br><br><br><br><br></div>
</div>
</body>

CSSはこのように記述

@charset "UTF-8";

#container {
	width: 760px;
	background-color: #6c9;/* この色が表示されない */
}
#primary {
	float: left;
	width: 550px;
	background-color: #c7d5ed;
}
#secondary {
	float: right;
	width: 200px;
	background-color: #f9cfba;
}

これを各ブラウザで確認するとconainerに指定した緑色がprimaryとsecondaryの間に確認出来ない

親ボックスのセレクタに「overflow: hidden;」をつける

これによりもしセレクタの大きさをはみ出たら隠すという行動をブラウザに認識させ、親ボックスの中に高さがあるんじゃないかと思うようになりfloatしたセレクタの高さを認識するようになる
先ほどのcssに、「overflow: hidden;」を追記する

@charset "UTF-8";

#container {
	width: 760px;
	background-color: #6c9;
	overflow: hidden;/* この一文を追加する */
}
#primary {
	float: left;
	width: 550px;
	background-color: #c7d5ed;
}
#secondary {
	float: right;
	width: 200px;
	background-color: #f9cfba;
}

すると本来表示したい通りprimaryとsecondaryの間にしっかりと緑色が確認できる

回り込みの解除と上方向のマージン
例として次のようなhtmlとcssの記述を用意する

<body>
<div id="container">
<div id="header"></div>
<div id="primary"></div>
<div id="secondary"></div>
<div id="footer"></div>
</div>
</body>

@charset "UTF-8";

#container {
  width: 760px;
  background-color: #6c9;
  overflow: hidden;
}
#header {
  width: 760px;
  height: 50px;
  background-color: #ddd;
  margin-bottom: 10px;
}
#primary {
  float: left;
  width: 550px;
  height: 300px;
  background-color: #c7d5ed;
}
#secondary {
  float: right;
  width: 200px;
  height: 300px;
  background-color: #f9cfba;
}
#footer {
  width: 760px;
  height: 50px;
  background-color: #f9c;
  margin-top: 10px;
}

これを確認するとprimaryとsecondaryはfloatで浮遊化して通常の流れから外れているためにfooter部分がheaderのすぐ下に表示されてしまう
これを解消するために、floatを解除するプロパティの「clear: both;」をfloatを解除する要素に指定する

先ほどのcssに、「clear: both;」を追記する

@charset "UTF-8";

#container {
  width: 760px;
  background-color: #6c9;
  overflow: hidden;
}
#header {
  width: 760px;
  height: 50px;
  background-color: #ddd;
  margin-bottom: 10px;
}
#primary {
  float: left;
  width: 550px;
  height: 300px;
  background-color: #c7d5ed;
}
#secondary {
  float: right;
  width: 200px;
  height: 300px;
  background-color: #f9cfba;
}
#footer {
  width: 760px;
  height: 50px;
  background-color: #f9c;
  margin-top: 10px;/* ここがうまく表示されない */
  clear: both;/* この一文を追加する */
}

この時clear: both;を指定してfloatを解除したのにもかかわらずfooterのmargin-topが効いてないのがわかる
これはfloatをclearしたボックスはfloatをしているboxの下に配置されるように、自動的にクリアランス（空間）が確保されるために起こる
margin-topが無効になっているわけではないので、自動的に確保されたクリアランス+10oxをとってあげるとしっかりとfooterの上に10pxの余白が出来る
しかし、コンテンツ部分の高さは可変であることが多いので実用的ではない為floatしているボックスの下方向つまりmargin-bottomを指定して余白を確保することが多い
先ほどのcssのprimaryに、「margin-bottom」をに指定する

@charset "UTF-8";

#container {
  width: 760px;
  background-color: #6c9;
  overflow: hidden;
}
#header {
  width: 760px;
  height: 50px;
  background-color: #ddd;
  margin-bottom: 10px;
}
#primary {
  float: left;
  width: 550px;
  height: 300px;
  background-color: #c7d5ed;
  margin-bottom: 10px;/* ここに一文を追加する */
}
#secondary {
  float: right;
  width: 200px;
  height: 300px;
  background-color: #f9cfba;
}
#footer {
  width: 760px;
  height: 50px;
  background-color: #f9c;
  /* ここにあったmargin-topは削除する */
  clear: both;
}