このページの短縮URL(リンク用) §01-03…回り込み<float> – オンライン無料パソコン講座 | PCセミナー

§01-03…回り込み<float>

(01) この写真・画像は、現在1文字分の巨大な文字として認識されています。そのため画像の右には1行分しか文章が回り込みされません。残りの文章も回り込ませるには、CSSで画像に「float」プロパティを指定します。画像を本文の左側に回り込ませるには値を「left」にします。CSSを以下のように更新してからブラウジングしましょう。

body{
background-color:#FFFFCC;
}
h1{color:#0000FF;
border:thin solid #00FFFF;
}
p{
color:#009900;
}
img{
float:left;
}

(02) floatプロパティに使用できる値は以下の通りです。

意味
left 文字の左に回り込ませる
right 文字の右に回り込ませる
none 回り込みさせない