ホーム＞コース別ガイド一覧＞回り込みや段組みを指定しよう！
回り込みや段組みを指定しよう！（float プロパティ） |
 
|
使用プロパティ セレクタ { float: 位置; }
CSS一覧プロパティ辞典 … float プロパティ
float プロパティを使うと、画像など（すべての要素に指定可能）の表示位置を left（左寄せ）、right（右寄せ）、none（指定しない）、のいずれかで指定します。img 要素の align 属性と同じ効果を与えます。left または right を指定すると、指定した要素が左寄せ、右寄せになり、その要素に続く文章がその周りを回り込むように表示されます。回り込みを解除するには clearプロパティ を用います。
そして、この効果を使って div 要素などでブロック要素をいくつか作り、それに float プロパティを指定して段組することによりレイアウトが作れます。
floatプロパティは、すべての要素に適応できます！
画像だけではなく、p 要素などで指定したテキストなども回り込み効果を与えることができます。ですが、このように幅が決まってない要素に float プロパティを指定する場合は、width プロパティを指定して幅を固定しましょう。
float プロパティを使用し、画像を右側に指定し、テキストを左側に回りこませます。画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei1.gif」）をそのまま記述します。なお、使用画像は下の画像を使用しています。また、img 要素にクラス名を指定し、その画像のみに回り込みを指定しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body {
text-align: center;
}
h1 {
background-color: orange;
padding-top: 10px;
paddimg-bottom: 10px;
}
span { font-weight: bold; }
p {
line-height: 1.7em;
}
img.mawarikomi { float: right;}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p><img src="haikei1.gif" class="mawarikomi" alt="one" width="200" height="200" >料理を少しおいしくするためのワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
使用例の表示
[floatプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理 
料理を少しおいしくするためのワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[floatプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするためのワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように右側の画像にテキストが回り込みます。
※回り込みの解除は次のページのclearプロパティを参照してください。
