画像

6-1 テキストのまわりこみ１（縦の位置）

画像表示はボックスに入れたり、HTMLのalign属性で横位置を指定できます。
ここでは横に並ぶテキストに関係した配置を指定します。
tableを使わずに写真と文字をレイアウトしてみましょう。
付属の属性 表示位置
baseline デフォルト（下）
top または text-top 上
middle 中央
bottom または text-bottom 下
*px、*em 任意の位置
*% 任意の位置


サンプル 1 ソースコード 1
緑歩道baselineは一行だけで下へ回り込みます

cssに関する記述
  1. 縦に整列（ベースライン）
htmに関する記述
  1. <div>で写真と文字を挟む（以下同）
  2. 写真に対してスタイルを定義することでテキストの回り込む位置を指定（以下同）
 

.css6-1-1 {
vertical-align: baseline;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6-1-1" />baselineは一行だけで下へ回り込みます
サンプル 2   ソースコード 2
緑歩道topは一行だけで下へ回り込みます

cssに関する記述
  1. 縦に整列（上付き）
 
.css6_1_2 {
vertical-align: top;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_2" />topは一行だけで下へ回り込みます
サンプル 3   ソースコード 3
緑歩道middleも一行だけで下へ回り込みます

cssに関する記述
  1. 縦に整列（中央）
 
.css6_1_3 {
vertical-align: middle;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_3" />middleも一行だけで下へ回り込みます
サンプル 4   ソースコード 4
緑歩道bottomも一行だけで下へ回り込みます

cssに関する記述
  1. 縦に整列（下付き）
 
.css6_1_4 {
vertical-align: bottom;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_4" />bottomも一行だけで下へ回り込みます
サンプル 5   ソースコード 5
緑歩道text-topはtopと同じです

cssに関する記述
  1. 縦に整列（上付けと同じ）
 
.css6_1_5 {
vertical-align: text-top;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_5" />text-topはtopと同じです
サンプル 6   ソースコード 6
緑歩道text-bottomはbottomと同じです

cssに関する記述
  1. 縦に整列（下付けと同じ）
 
.css6_1_6 {
vertical-align: text-bottom;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_6" />text-bottomはbottomと同じです
サンプル 7   ソースコード 7
緑歩道-100px

cssに関する記述
  1. 縦に整列（数値で位置を指定）
 
.css6_1_7 {
vertical-align: -100px;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_7" />-100px
サンプル 8   ソースコード 8
緑歩道100%

cssに関する記述
  1. 縦に整列（％で位置を指定）
 
.css6_1_8 {
vertical-align: 100%;
}
<img src="image/css_6/6_1_1.jpg" alt="緑歩道" width="200" height="150" class="css6_1_8" />100%
 スタイル定義　　　適用
 
関連
CSS ボックス 4-4 配置方法
HTML 画像 5-4 表示位置

6-2 テキストのまわりこみ２（余白）

画像とテキストの間に余白（margin）がないと、文字が読みにくく感じます。 そんな時は画像のまわり又は余白を取りたい方に数値を入れ定義します。
margin-right・・・右に余白をもうける
margin-top・・・上に余白をもうける
margin-left・・・左に余白をもうける
margin-bottom・・・下に余白をもうける
サンプル 1 ソースコード 1
空margin-rightだけ指定します

cssに関する記述
  1. 外側余白の右側に10px指定
htmに関する記述
  1. <div>で写真と文字を挟む（以下同）
  2. 写真とテキストの間に10px分の余白ができる
 
.css6-2-1 {
margin-right: 10px;
}
<img src="image/css_6/6_1_1.jpg" alt="空" width="200" height="150" class="css6_2_1" />margin-rightだけ指定します
サンプル 2   ソースコード 2
空まわりすべてにマージンを指定すると字がずれます

cssに関する記述
  1. 外側余白全部に10px指定
htmに関する記述
  1. <div>で写真と文字を挟む（以下同）
  2. 写真の周りに10px分の余白ができる
 
.css6-2-2{
margin: 10px;
}
<img src="image/css_6/6_1_1.jpg" alt="空" width="200" height="150" class="css6_2_2" />まわりすべてにマージンを指定すると字がずれます
サンプル 3   ソースコード 3
topに余白を指定したばあい空

cssに関する記述
  1. 外側余白の上部に10px指定
htmに関する記述
  1. <div>で写真と文字を挟む（以下同）
  2. 写真の上部に余白ができテキストも上付きになる
 
.css6-2-3 {
margin-top: 10px;
}
topに余白を指定したばあい<br>
<img src="image/css_6/6_1_1.jpg" alt="空" width="200" height="150" class="css6_2_3" />
サンプル 4   ソースコード 4
空
bottomに指定した場合

cssに関する記述
  1. 外側余白の下部に10px指定
htmに関する記述
  1. <div>で写真と文字を挟む（以下同）
  2. 写真の下部に余白ができテキストも下付きになる
 
.css6-2-4 {
margin-bottom: 10px;
}
<img src="image/css_6/6_1_1.jpg" alt="空" width="200" height="150" class="css6_2_4" /><br>
bottomに指定した場合
 
WEBビギナーが作るサイトはこういった箇所に配慮ができないから、画像と文字がくっつきすぎて文字が読みにくいなーと感じることが多々あります。 ちょっとした配慮が見やすいホームページをつくることにつながる？？
関連
CSS ボックス 4-1 サイズ・背景色・余白

6-3 複数行のテキストのまわりこみと解除

float（指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。）は画像や文字列を段組みするようなデザインに使われます。
  float付属の属性 表示位置 clear付属の属性
left 指定したものを左に配置
次に続くものを右側に回り込み（配置）させる		 {float:left;}を解除
right 指定したものを右に配置
次に続くものを左側に回り込み（配置）させる		 {float:right;}を解除
none 左右への配置と回り込みをさせない 回り込みを解除しない
both   {float:left;}{float:right;}の両方を解除


サンプル 1 ソースコード 1
カモ
画像の<div>にleft指定、このテキストは続くdiv>タグなので右に回り込んでます。 ずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いてずっと書いていくと下に回り込みます

css6_3_1に関する記述
  1. 位置を左に指定
css6_3_4に関する記述
  1. 横幅を350pxに指定
htmに関する記述
  1. <div class="css6_3_4">で横幅を指定し、写真とテキストを囲う
  2. 画像自体は位置が左になるよう<div class="css6_3_1">で指定
  3. 画像にcss6_1_1を定義し、テキストを右に回りこませる
 
.css6-3-1 {
float: left;
}
.css6-3-4 {
width: 350px;
}
<div class="css6-3-4">
<div class="css6-3-1"><img src="image/6_1_1.jpg" alt="カモ" width="200" height="150" class="css6-1-1" /></div>
<div>画像の・・・下に回り込みます</div>
</div>
サンプル 2   ソースコード 2
カモ
画像を右に配置して、続く<div>を左に配置。

そのままだと次の<div>要素が下に食い込んできてしまう

つつじ

css6_3_2に関する記述
  1. 位置を右に指定
css6_3_4に関する記述
  1. 横幅を350pxに指定
htmに関する記述
  1. <div class="css6_3_4">で横幅を指定し、写真とテキストを囲う
  2. 画像自体は位置が右になるよう<div class="css6_3_2">で指定
  3. もう一つ<div>の定義をすることで上部の<div>に下の要素が食い込むことを防ぐ
 
.css6-3-2 {
float: right;
}
.css6-3-4 {
width: 350px;
}
<div class="css6-3-4">
<div class="css6-3-2"><img src="image/css_6/6_1_1.jpg" alt="カモ" width="200" height="150"></div>
<div>画像を右に配置して、続く<div>を左に配置。
<br>
<br>
そのままだと次の<div>要素が下に食い込んできてしまう</div>
</div>
<br>
<div><img src="image/css_6/6_1_1.jpg" alt="つつじ" width="200" height="150"></div>
サンプル 3   ソースコード 3
カモ
画像を右に配置して、続く<div>を左に配置。
{clear:right}を指定しました
つつじ

css6_3_2に関する記述
  1. 位置を右に指定
css6_3_4に関する記述
  1. 横幅を350pxに指定
htmに関する記述
  1. <div class="css6_3_4">で横幅を指定し、写真とテキストを囲う
  2. 画像自体は位置が右になるよう<div class="css6_3_2">で指定
  3. <div class="css6_3_5">でクリアに右の定義。食い込みを防ぐ
 
.css6-3-4 {
width: 350px;
}
.css6-3-2 {
float: right;
}
.css6-3-5 {
clear: right;
}
<div class="css6-3-4">
<div class="css6-3-2"><img src="image/css_6/6_1_1.jpg" alt="カモ" width="200" height="150"></div>
<div> 画像を右に配置して、続く<div>を左に配置。</div>
</div>
<div class="css6-3-5">{clear:right}を指定しました<br>
<img src="image/6_1_1.jpg" alt="つつじ" width="200" height="150"></div>
サンプル 4   ソースコード 4
3段組みにするには・・・ ここは40%
続く・・・ここは30%
最後は・・・



css6_3_6に関する記述
  1. 横幅に100%の指定
css6_3_7に関する記述
  1. 位置を左に、横幅に40％、背景色にピンクを指定
css6_3_8に関する記述
  1. 位置を左に、横幅に30％、背景色にブルーを指定
htmに関する記述
  1. <div class="css6_3_6">で横幅100%の囲いを作る
  2. <div class="css6_3_7">で100%の中に40％の指定を入れる
  3. <div class="css6_3_8">で100%の中に30％の指定を入れる
  4. <div class="css6_3_9">で100%の中に30％の指定を入れる
 
.css6-3-6 {
width: 100%;
}
.css6-3-7 {
float: left; width: 40%;
background-color: #FF9999;
}
.css6-3-8 {
float: left; width: 30%;
background-color: #66FFFF
}
.css6-3-9 {
float: right; width: 30%;
background-color: #FFFF66
}
<div class="css6-3-6">
<div class="css6-3-7">3段組みにするには・・・ ここは40%</div>
<div class="css6-3-8">続く・・・ここは30%</div>
<div class="css6-3-9">最後は・・・</div>
</div>
 
ユニバーサルデザインと呼ばれるホームページはテーブルレスで組まれていることが多くなっています。上記の定義を駆使してユニバーサルデザインに挑戦してみましょう！