画像のフロート(浮動化)を指定する(CSS) | |||||||||||||||||||||||
float: left; | |||||||||||||||||||||||
float は、全てのタグ(要素)に適用できます(positionプロパティで「absolute」または「fixed」が指定された要素を除く)。 | |||||||||||||||||||||||
float は、フロート(浮動化)を指定するプロパティです。このプロパティを<img>タグ(要素)に設定すると、画像をフロートさせる(画像を左か右に寄せて、テキストなどを逆側に回り込ませる)ことができます。 | |||||||||||||||||||||||
img { float: left; } | |||||||||||||||||||||||
| |||||||||||||||||||||||
* フロートを指定する場合は、「回り込みを解除する」もご覧下さい。 | |||||||||||||||||||||||
★ 使用例とブラウザでの表示 (f2-2)スタイルシートの書き方(基本)は、こちら です。 | |||||||||||||||||||||||
| |||||||||||||||||||||||
関連するページ | |||||||||||||||||||||||
HTML タグページ :画像に並ぶ文字の位置を指定する | |||||||||||||||||||||||
画像の周囲にマージンを入れる(CSS) | |||||||||||||||||||||||||||
margin: ***; | |||||||||||||||||||||||||||
margin は、全てのタグ(要素)に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。 | |||||||||||||||||||||||||||
margin は、上下左右のマージン(外側の余白)をまとめて指定するプロパティです。このプロパティを<img>タグ(要素)に設定すると、画像の周囲にマージンを入れることができます。 | |||||||||||||||||||||||||||
img { margin: 5px 10px; } | |||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
【指定方法】 | |||||||||||||||||||||||||||
次の4タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
@ margin: 2px; … 「上下左右」をまとめて指定
A margin: 2px 3px; … 「上下」と「左右」を指定 B margin: 2px 3px 4px; … 「上」、「左右」、「下」を指定 C margin: 2px 3px 4px 5px; … 「上」、「右」、「下」、「左」を指定(時計回り) | |||||||||||||||||||||||||||
★ 使用例とブラウザでの表示 (f2-3)スタイルシートの書き方(基本)は、こちら です。 | |||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
関連するページ | |||||||||||||||||||||||||||
HTML タグページ :画像の周囲にスペース(余白)を入れる | |||||||||||||||||||||||||||
回り込みを解除する(CSS) | |||||||||||||||||||||||||
clear: both; | |||||||||||||||||||||||||
clear は、ブロックレベルのタグ(要素)に適用できます。 | |||||||||||||||||||||||||
clear は、テキストなどの回り込みを解除するプロパティです。このプロパティは、floatプロパティプロパティによる回り込みを解除する場合に使用します。 | |||||||||||||||||||||||||
div { clear: both; } br { clear: left; } | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
clearプロパティは、ブロックレベルの要素に対して指定します。<br>タグに指定した場合でも回り込みを解除できますが、<br>タグはインライン要素のため、文法的には誤った使い方となります。 | |||||||||||||||||||||||||
★ 使用例とブラウザでの表示 (f2-4)スタイルシートの書き方(基本)は、こちら です。 | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
関連するページ | |||||||||||||||||||||||||
HTML タグページ :文字の回り込みを解除する | |||||||||||||||||||||||||