はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
レイアウトを組んでみる！ ～floatについて～
2008/07/07
- トモ・リーン
- つぎはfloatの説明行くわよ～。
よく初めてCSS組みをする人がつまずくのが「float」なのよ！
floatについて
要素を横に並べるためのCSSプロパティ。
floatの値
- left
- 左に並べる。
- right
- 右に並べる。
- none
- 横に並べない。
- ケンジ
- 横並びにするためのプロパティだよね。
- トモ・リーン
- そうよ。
- ケンジ
- 実は俺、これの使い方が良く分からないからCSS苦手なんだよね・・・。
- トモ・リーン
- 今回のサンプルでもナビゲーションとコンテンツ内容の部分で使っているわ。
HTMLファイル
<body>
<div id="header">ヘッダ</div>
<div id="siteMenu">ナビゲーションなど</div>
<div id="contents">ページ内容</div>
<div id="copyright">フッタ</div>
</body>
</html>
実際のファイルを見てみる
CSSファイル
* {
border: 3px solid;
}
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
width: 800px;
color:#EEEEEE;
}
#header {
height: 91px;
color:#FF0000;
margin-bottom: 10px;
}
#siteMenu {
width:167px;
float:left;
color:#00FF00;
margin-bottom: 10px;
height:200px;
}
#contents {
float: left;
width: 600px;
margin: 0 0 10px 13px;
color:#0000FF;
height:200px;
}
#copyright {
clear: both;
height: 20px;
color:#FF0000;
}
実際のファイルを見てみる
- ケンジ
- う～ん。
俺も並べるまでは出来るけど、その後がなぜかズレまくるんだ。
- トモ・リーン
- ふ、ふ、ふっ！
それはズヴァリ「floatの解除をしていないから！」ね！！！
- ケンジ
- えぇええええ！！！
な、なんだよ「解除」って！！
爆弾かよ！！！
- トモ・リーン
- floatの解除をしないと横並びを続けようとしてグダグダになるのよ。
下の図を見てみて！
- float解除成功例
- float解除失敗例
- ケンジ
- あーーーーーっ！
まさしくこれだよ・・・。
俺の残業の原因はこれか！！！
- ケンジ
- で、どうやって解除するの？
- トモ・リーン
- floatを止めたいところで「clear:both;」のスタイルプロパティの入っている要素を置くのよ。
clearについて
回りこみを解除するCSSプロパティ。
clearの値
- left
- 左の回りこみを解除。
- right
- 右の回りこみを解除。
- both
- 左右、どちらの回りこみも解除。
- none
- 回りこみを解除しない。
- トモ・リーン
- 実際のレイアウトではこんな感じで書いているわね。
HTMLファイル
<body>
<div id="header">ヘッダ</div>
<div id="siteMenu">ナビゲーションなど</div>
<div id="contents">ページ内容</div>
<div id="copyright">フッタ</div>
</body>
</html>
実際のファイルを見てみる
CSSファイル
* {
border: 3px solid;
}
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
width: 800px;
color:#EEEEEE;
}
#header {
height: 91px;
color:#FF0000;
margin-bottom: 10px;
}
#siteMenu {
width:167px;
float:left;
color:#00FF00;
margin-bottom: 10px;
height:200px;
}
#contents {
float: left;
width: 600px;
margin: 0 0 10px 13px;
color:#0000FF;
height:200px;
}
#copyright {
clear: both;
height: 20px;
color:#FF0000;
}
実際のファイルを見てみる
- ケンジ
- う～ん、そっか～！！
- ケンジ
- ところで、この場合は左並びを解除しているから「clear:both;」より「clear:left;」の方がいいんじゃないの？
- トモ・リーン
- まぁ～、それでもいいけど、「clear:both;」はどちら側の回りこみにも対応できるから、「とりあえず回りこみ解除はclear:both;で！」と単純に覚えておけるから楽よ。
左右の記述ミスでスタイルが反映されない！何てことも防げるしね。
- 今回のポイント！
- floatは必ず解除しておこう！
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：レイアウトを組んでみる！ ～floatについて～
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/83
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
