ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

floatとclearの応用

floatとclearを使ってデザインする

カラムを組むには、floatプロパティとclearプロパティを上手く使いながら組み上げていきます。

ヘッダー、サイドナビ、コンテンツ、フッターなどのスタイルを作り、お互いに回りこませながらレイアウトを整えていきます。

例えば、下の2カラムレイアウトはサイドナビとコンテンツにfloat:leftを指定し、フッターでclearしています。

floatとclearでのカラム作成

floatとclearの特性

説明だけでは、イマイチ伝わりにくいので、実際にfloatとclearを使って特性を理解してみましょう。

まずは以下のスタイルを準備します。

[用意するCSS]

.box1 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
}

.box2 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
}

.box3 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
}

box1、box2、box3という、3つのスタイルです。特にコレといって特徴のない、その名の通り「箱」が表示されるスタイルですね。

このスタイルをdivを使って呼び出しましょう。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>floatとclear</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="box1">
</div>

<div class="box2">
</div>

<div class="box3">
</div>

</body>
</html>

[ブラウザでの表示例]
ホームページの画像

上から順番にbox1、box2、box3と、赤い枠線の箱が3つ表示されましたね。

では、この縦にならんだ3つのboxを横に並べるには、一体どうするといいでしょうか?

答えはfloatを使います。

floatを使うことにより、縦にならんだboxを横に並べることができます。

boxを横並びにする(回りこませる)

では、縦にならんだboxを、横にならべてみましょう。

先ほどのスタイルに、float:left;を書き加えます。

[CSSの記述例]

.box1 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;  ← float:leftを追加
}

.box2 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;  ← float:leftを追加
}

.box3 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;  ← float:leftを追加
}

追加したら、あらためてブラウザで確認してみましょう!
boxが横にならんでいるはずです。

[ブラウザでの表示例]
横並びにしたBOX

float:left;を追加することによって、今まで縦にならんでいたboxがそれぞれ左寄せになり、右側に回りこみ処理されたことにより、横並びに表示されました。

ホームページの画像

覚えておきたいポイント

floatとclearがデザインのカギ

floatとclearの関係を覚えてしまえば、もうホームページ作りを半分マスターしたようなものです。それくらい頻繁に使用します。
ホームページ作りを学習する上での難所ですが、頑張ってマスターしましょう!

floatを解除する

floatで横並びにすることができましたが、floatを解除しないといつまでも回り込み処理されてしまいます。

floatを解除するには、clearを使います。
これまでのCSSに、clearスタイルを作ってみましょう。

[CSSの記述例]

.box1 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;
}

.box2 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;
}

.box3 {
width:148px;
height:148px;
border:dashed 1px #FF0000;
float:left;
}

.clear { ← 回り込みを解除するスタイル
clear:both;
}

このclearを、回り込みを解除したい位置に入力します。

試しに、box2とbox3の間に入れてみましょう!

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>floatとclear</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="box1">
</div>

<div class="box2">
</div>

<div class="clear">  ← ここで回り込みを解除
</div>

<div class="box3">
</div>

</body>
</html>

ブラウザで確認すると、box2までで回り込みが解除され、box3は縦に表示されます。

[ブラウザでの表示例]
clearでfloatを解除した図

なお、box3もfloat:left;を指定しているので、box3以降も回りこみをさせたくなかったら<div class="box3"></div>の後に、<div class="clear"></div>を入力します。
clearしなければ、box3以降からまた、横並びに表示されます。

必ずclearを忘れずに

最終的には必ず、回り込みを解除するようにしましょう。
clearがされないままだと、レイアウト崩れの原因となり非常に面倒なことになります。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>floatとclear</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="box1">
</div>

<div class="box2">
</div>

<div class="clear">
</div>

<div class="box3">
</div>

<div class="clear">  ← 必ずclearで回り込みを解除しましょう
</div>

</body>
</html>

なんとなくfloatとclearの特徴を掴むことができたでしょうか?

箱を作って回り込み&解除だけでも、色んなページレイアウトが表現できます。
カラムを組むときには横長の箱や縦長の箱をつくり、回り込み&解除しているだけです。
箱の数によって、2カラム、3カラム、4カラムなどが表現できます。

覚えておきたいポイント

floatの解除は忘れずに

float(回り込み)の解除は忘れずに行うようにしましょう。解除を行わなければずっと回りこみ処理が効いてしまうので、ホームページのデザインが崩れてしまう可能性があります。

カラムを構成する
« 前のページへ カラム(段組)とは?

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。