4-13-10a　回り込みの設定

文章や画像を左右に回り込ませる方法です。floatプロパティを利用致します。

float : left ;
対象を左に寄せて配置し、後に続く属性を右側に回り込ませます。
float : right ;
対象を右に寄せて配置し、後に続く属性を左側に回り込ませます。
float : none ;
初期値です。（対象をフロート［回り込み］させません）

文字の位置を設定（左寄せ・右寄せ等）するのはtext-alignプロパティ で説明しております。

[ 関連事項 ： HP-TIPS > CSS > スタイルシートの書式 ]

pagetop

4-13-10-1　具体例　（float）

画像を左寄せし、文章を右側に流れ込ませる方法です。（class属性も併用致します）

CSS

<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
.image {
float: left; /* 対象を左寄せ */
}
-->
</style>

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > CSS > classとは ]


HTML

<body> ～ </body> 内に記述して下さい。
<p>
<img src="no-image.gif" width="110" height="160" alt="NO-IMAGEアイコン" class="image">
画像に「float: left;（対象を左寄せ指定）」しておりますので、文章は画像の右側に流れ込みます。「left」を「right」に変更すると、今度は画像が右寄せされ文章は左に回り込みます。
</p>
<p>
画像が大きい場合、次に指定した段落の文字も右側に流れ込みます。これを解除する為には、「clear」プロパティを利用致します。（詳しくは次の項目をご覧下さいませ）
</p>

表示結果

NO-IMAGEアイコン 画像に「float: left;（対象を左寄せ指定）」しておりますので、文章は画像の右側に流れ込みます。「left」を「right」に変更すると、今度は画像が右寄せされ文章は左に回り込みます。

画像が大きい場合、次に指定した段落の文字も右側に流れ込みます。これを解除する為には、「clear」プロパティを利用致します。（詳しくは次の項目をご覧下さいませ）



CSS部分では .クラス名 { float： 値； } と書き込み、
（※　黒い点「.」はピリオドです）
HTML部分で class="" とclass（クラス）名を指定すればOKです。『値』には「leftかright、none」を指定して下さい。（今回の見本のクラス名は「image」になります）

[ 関連事項 ： FAQ（よくある質問） > 画像が表示されません ]

pagetop

4-13-10b　回り込みの解除

文章や画像の回り込みを解除する方法です。clearプロパティを利用致します。（class属性も併用致します）

clear : left ;
左寄せされた要素に対して回り込みを解除致します。
clear : right ;
右寄せされた要素対にして回り込みを解除致します。
clear : both ;
左寄せ、右寄せされた要素全てに対して回り込みを解除致します。（いわゆる<br clear="all">に相当致します。但しこの書き方はCSSでの代替えが進められている項目です。「clear : both ; 」の方をお使い下さい）。
clear : none ;
初期値です。（対象の回り込みを解除致しません）

[ 関連事項 ： HP-TIPS > CSS > スタイルシートの書式 ]

pagetop

4-13-10-2　具体例　（clear）

CSS

<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
.clear {
clear: both; /* 両端の回り込みを解除する */
}
-->
</style>

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
[ 関連事項 ： HP-TIPS > CSS > classとは ]


HTML

<body> ～ </body> 内に記述して下さい。
<p>
<img src="no-image.gif" width="110" height="160" alt="NO-IMAGEアイコン" class="image">
画像に「float: left;（対象を左寄せ指定）」しておりますので、文章は画像の右側に流れ込みます。「left」を「right」に変更すると、今度は画像が右寄せされ文章は左に回り込みます。
</p>
<p class="clear">
この段落には「clear: both;（両端の回り込みを解除）」を指定しておりますので、画像の下に文章が表示されます
</p>

表示結果

NO-IMAGEアイコン 画像に「float: left;（対象を左寄せ指定）」しておりますので、文章は画像の右側に流れ込みます。「left」を「right」に変更すると、今度は画像が右寄せされ文章は左に回り込みます。

この段落には「clear: both;（両端の回り込みを解除）」を指定しておりますので、画像の下に文章が表示されます

CSS部分では .クラス名 { clear： 値； } と書き込み、
（※　黒い点「.」はピリオドです）
HTML部分で class="" とclass（クラス）名を指定すればOKです。『値』には「leftかright、both、none」を指定して下さい。（今回の見本のクラス名は「image」と「clear」になります）

その他、特定のセレクタ（例：「body」、「p」等）に複数のプロパティ（「color」、「font-size」等）を設定する見本は 『4-9　見出しを修飾する』 をご覧下さい。

[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > プロパティ ]

pagetop