回り込み(float)に関するスタイルシート

左右への回り込みと配置の設定

左右への回り込みや配置の指定には「float」と言われるスタイルシートを使用します。
この指定をすることで、左右に画像を回り込ませて、反対側に説明文などを配置したり、よくホームページでみかける、右側(左側)にメニューバーを設置して、左側(右側)にメインメニューを設置するといった、いわゆる分割型のレイアウトをすることができるようになります。
レイアウトの基本のCSSとなるので、しっかり覚えて活用してくださいね！！

画像を左右に回り込ませて配置する

「float」の指定によって画像を右側に回り込ませたり、左側に回り込ませたりすることができます。

<回り込みの設定>

【左側に回り込む】
float:left

【右側に回り込む】

float:right

うえのように「float」の後ろに「left」を記入すれば左側に、「right」を記入すれば右側に要素を回り込ませることが出来ます。

一般的には画像の横(回り込ませた方向の反対側)と下側に余白を設けてレイアウトを整えます。
下のような感じですね。

＜記述例＞

【CSS記述】
.left{
float:left;/*画像を左側に回り込ませる*/
margin-right:10px;　/*右側に10pxの余白*/
margin-bottom:10px　/*下側に10pxの余白*/
}

.right{
float:right;/*画像を右側に回り込ませる*/
margin-left:10px;　/*左側に10pxの余白*/
margin-bottom:10px　/*下側に10pxの余白*/
}

【HTML記述】
<div style="width:450px">
<img class="left" src="../img/table/butakim.jpg" alt="画像説明" width="150" height="100"/>
<p>・・本文・・</p>
</div>
<br />

<div style="width:450px">
<img class="right" src="../img/table/butakim.jpg" alt="画像説明" width="150" height="100"/>
<p>・・本文・・</p>
</div>

表示例はこちら

ちなみに画像にクラス指定をする時は下のような記述を行います。

※画像にクラス名を付ける方法※

無料レンタルサーバー

優良レンタルサーバー