テキストの位置画像のフロート 画像周囲のマージン回り込み解除 イメージcss ﾘﾌｧﾚﾝｽ へ
画像に並ぶテキストの位置（垂直方向）を指定する(CSS)
vertical-align: top;
　vertical-align は、img要素、td要素、th要素、iframe要素に適用できます。
　vertical-align は、垂直方向の揃え方を指定するプロパティです。このプロパティを<img>タグ（要素）に設定すると、画像に並ぶテキストの位置を指定できます。
　img { vertical-align: middle; }
プロパティ名値説　　明
vertical-align baseline 画像の下端と、親要素のベースラインを揃える（初期値）
top 画像の上端と、行の上端を揃える
middle 画像の中心と、親要素の文字の中心を揃える
bottom 画像の下端と、行の下端を揃える
text-top 画像の上端と、親要素のフォントの上端を揃える
text-bottom 画像の下端と、親要素のフォントの下端を揃える
数値＋単位（px 等） 任意の位置に揃える（baseline を基準にし、
正の値は下方向、負の値は上方向に表示）
パーセント
＊ 「数値＋単位」と「パーセント」の指定は、baseline が基準の位置となります。
＊ 「パーセント」の指定は、行の高さ（line-height）に対する割合となります。
bottom の指定は、Internet Exp.7 以前と Opera は top と同じになります。
　★ 使用例とブラウザでの表示 (f2-1)
設定例 ： .f2-1bas { vertical-align: baseline; }   .f2-1top { vertical-align: top; }
.f2-1mid { vertical-align: middle; }     .f2-1bot { vertical-align: bottom; }
.f2-1t-to { vertical-align: text-top; } .f2-1t-bo { vertical-align: text-bottom; }
.f2-1px10 { vertical-align: 10px; }      .f2-1p50 { vertical-align: -50%; }
使　用　例   ブラウザの表示
<img src="photo1.jpg" class=f2-1bas>:baseline
<img src="photo2.jpg" class=f2-1top>:top
:baseline  :top
<img src="photo1.jpg" class=f2-1mid>:middle
<img src="photo2.jpg" class=f2-1bot>:bottom
:middle :bottom
<img src="photo1.jpg" class=f2-1t-to>:text-top
<img src="photo2.jpg" class=f2-1t-bo>:t-bottom
:text-top :t-bottom
<img src="photo1.jpg" class=f2-1px10>:10px
<img src="photo2.jpg" class=f2-1p50>:-50%
:10px :-50%
☆ bottom の指定は、Internet Exp.7 以前と Opera は top と同じになります。
関連するページ
HTML タグページ 画像に並ぶ文字：画像に並ぶ文字の位置を指定する
テキストの位置画像のフロート 画像周囲のマージン回り込み解除 イメージcss ﾘﾌｧﾚﾝｽ へ
画像のフロート（浮動化）を指定する(CSS)
float: left;
　float は、全てのタグ（要素）に適用できます（positionプロパティで「absolute」または「fixed」が指定された要素を除く）。
　float は、フロート（浮動化）を指定するプロパティです。このプロパティを<img>タグ（要素）に設定すると、画像をフロートさせる（画像を左か右に寄せて、テキストなどを逆側に回り込ませる）ことができます。
　img { float: left; }
プロパティ名値説　　明
float noneフロートさせない（初期値）
left 画像を左に配置し、テキストなどを右側に回り込ませる
right 画像を右に配置し、テキストなどを左側に回り込ませる
＊ フロートを指定する場合は、「回り込みを解除する」もご覧下さい。
　★ 使用例とブラウザでの表示 (f2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： img.fle { float: left; }   img.fri { float: right; }
使　用　例   ブラウザの表示
<img src="photo1.jpg" class=fle>
画像を左に<br>配置します｡		 画像を左に
配置します｡
<img src="photo2.jpg" class=fri>
画像を右に<br>配置します｡		 画像を右に
配置します｡
画像を横に並べます。<br>
<img src="photo1.jpg" class=fle>
<img src="photo2.jpg">		 画像を横に並べます。


関連するページ
HTML タグページ 画像に並ぶ文字：画像に並ぶ文字の位置を指定する
テキストの位置画像のフロート 画像周囲のマージン回り込み解除 イメージcss ﾘﾌｧﾚﾝｽ へ
画像の周囲にマージンを入れる(CSS)
margin: ***;
　margin は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　margin は、上下左右のマージン（外側の余白）をまとめて指定するプロパティです。このプロパティを<img>タグ（要素）に設定すると、画像の周囲にマージンを入れることができます。
　img { margin: 5px 10px; }
プロパティ名値説　　明
margin 数値＋単位（px 等） or パーセント マージンの大きさを指定
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① margin: 2px; … 「上下左右」をまとめて指定
② margin: 2px 3px; … 「上下」と「左右」を指定
③ margin: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ margin: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）
　★ 使用例とブラウザでの表示 (f2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .f2-3mar { margin: 0 15px 0 0; }   img.fle { float: left; }
使　用　例   ブラウザの表示
<img src="photo1.jpg" class=fle>
ﾏｰｼﾞﾝ無し：<br>画像を左に<br>配置します｡		 ﾏｰｼﾞﾝ無し：
画像を左に
配置します｡
<img src="photo1.jpg" class="f2-3mar fle">
ﾏｰｼﾞﾝ15px：<br>画像を左に<br>配置します｡		 ﾏｰｼﾞﾝ15px：
画像を左に
配置します｡
☆ margin: 0 15px 0 0; … 値が 0 の場合は単位を省略できます。
☆ この使用例では、フロートの指定と組み合わせています。
関連するページ
HTML タグページ 画像周囲の余白：画像の周囲にスペース（余白）を入れる
テキストの位置画像のフロート 画像周囲のマージン回り込み解除 イメージcss ﾘﾌｧﾚﾝｽ へ
回り込みを解除する(CSS)
clear: both;
　clear は、ブロックレベルのタグ（要素）に適用できます。
　clear は、テキストなどの回り込みを解除するプロパティです。このプロパティは、floatプロパティプロパティによる回り込みを解除する場合に使用します。
　div { clear: both; }　  br { clear: left; }
プロパティ名値説　　明
clear none回り込みを解除しない（初期値）
left左フロートの回り込みを解除
right右フロートの回り込みを解除
both左右の回り込みを解除
clearプロパティは、ブロックレベルの要素に対して指定します。<br>タグに指定した場合でも回り込みを解除できますが、<br>タグはインライン要素のため、文法的には誤った使い方となります。
　★ 使用例とブラウザでの表示 (f2-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .f2-4cl { clear: both; }   img.fle { float: left; }
使　用　例   ブラウザの表示
<img src="photo2.jpg" class=fle>
画像を左に配置：<br>回り込みの解除は、
<div class=f2-4cl>clear を使用します。</div>		 画像を左に配置：
回り込みの解除は、
clear を使用します。
☆ <div class=f2-4cl>は、<br class=f2-4cl>と記述しても、回り込みを解除できます。
関連するページ
HTML タグページ 回り込み解除：文字の回り込みを解除する
テキストの位置画像のフロート 画像周囲のマージン回り込み解除 イメージcss ﾘﾌｧﾚﾝｽ へ