StyleSheet 回り込み（float）

画像やテーブルなどに float (配置)指定すると、配置した反対側に後続の文字列や要素が回り込みます。また、文字列同士であれば段組みにすることができます。float の効果を止める場合はclear を使います。

● 左と右に画像を寄せて、文字列をそれぞれ反対側に配置してみました。

<p>
<img src="twinb1.jpg" alt="new yorkの夜景" width="120" height="90" class="iti1">
</p>
<p>
世界一美しいといわれるニューヨークの夜景。<br> 水上から見るマンハッタンの夜景とイルミネーションに浮かび上がる自由の女神は圧倒されます。ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。
</p>

<p>
<img src="twinb1.jpg" alt="new yorkの夜景" width="120" height="90" class="iti2">
</p>
<p>
世界一美しいといわれるニューヨークの夜景。<br> 水上から見るマンハッタンの夜景とイルミネーションに浮かび上がる自由の女神は圧倒されます。ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。
</p>

世界一美しいといわれるニューヨークの夜景。
水上から見るマンハッタンの夜景とイルミネーションに浮かび上がる自由の女神は圧倒されます。ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。

● 文字列の回りこみを解除する
float: right を指定した場合、画像が右に配置され、後に続く内容は左側に回り込みます。この指定は clear: right で解除することが出来ます。 float: left の場合は clear: left で解除します。両方の回り込みを解除する場合はclear: both を指定します。

世界一美しいといわれるニューヨークの夜景。水上から見るマンハッタンの夜景とイルミネーションに浮かび上がる自由の女神は圧倒されます。

ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。

スタイルで回り込みを指定
.iti2 { float:right; }
.iti3 { clear:right; color:red; }
HTML内の書き方
<p>
<img src="twinb1.jpg" alt="new yorkの夜景" width="120" height="90" class="iti2">
世界一美しいといわれるニューヨークの夜景。水上から見るマンハッタンの夜景とイルミネーションに浮かび上がる自由の女神は圧倒されます。
</p>
<p class="iti3">
ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。
</p>

世界一美しいといわれるニューヨークの夜景。ワールド・ヨット・ディナー・クルーズで、夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。男性はジャケット着用で、ジーンズ、スニーカーでは乗船できません。

The night view of New York said to be the most beautiful in the world. The night view of Manhattan was able to be slowly seen from three directions at the meal or the restaurant which can carry out a drink, looking at a night view on a world sailboat dinner cruise. A male cannot board with

スタイルで回り込みを指定
div { width:650px; }
.iti4 { float:left; width:300px; }
.iti5 {float:right;width:300px;}
HTML内の書き方
<div>
<p class="iti4">
世界一美しいといわれるニューヨークの夜景。夜景を眺めながら食事又はドリンクできるレストランでゆっくりとマンハッタンの夜景を３方角からみることができました。・・・・・（略）
</p>
<p class="iti5">>
The night view of New York said to be the most beautiful in the world. The night view of Manhattan was ・・・・（略）
</p>
</div>

★ナビゲーションを配置する
ページには、他のページへのリンクを案内するためにテキストや画像でナビゲーションを配置する場合が多いですが、スタイルシートを使います。

スタイルで回り込みを指定

.font1 { font-weight:bold; margin-left:50px; margin-right:50px; }
#navi { float:left; }
#navi1 { float:right; }
#navi2 { text-align:center; }

HTML内の書き方

「戻る」「HOME」「次へ」にそれぞれのテキストにリンクを張ります。今回はページ内で一度しか使えない id で指定しました。画面の右と左側に 50px のマージンをとっています。

文字列の回り込みを指定しよう