Ⅴ-４　文章の中に画像をレイアウトする

１）コンテンツをページを編集します

第４章の８で作ったページの続きを編集します
「マイドキュメント」の「webpage」から保存しておいた「contents.htm」をクリックして開きます
ここでは各コンテンツに画像を入れていきます。

２）画像を用意します

コンテンツに表示させる画像を３枚準備しました。
「5-1.jpg」「5-2.jpg」「5-3.jpg」です。

３）コンテンツ部分に画像を表示させます

文章の最初に画像を表示させるため、
<p>のすぐ後に<img>を挿入して、src="5-1.jpg"で指定します。
このとき、widthとheightで画像サイズを、altで画像の説明文を指定します。
又classでクラス名「photo」と指定しておきます。
これでは、文字の配置に工夫が必要ですね。【参考】
以下でレイアウトを整えます

４）画像が文章に回り込むように設定します

画像が文章に回り込んで配置されるように、「img.photo{　}」をstyleに追加し、デザイン設定します。
回り込みのデザインはfloatで設定することが出来ます。
floatの設定を追加し、値を「left」と指定します。img.photo{float:left}と書きます
これで、画像が左、文章が右に表示されます。【参考】

４'）回り込みを解除する設定

例えばこの例題を見て下さい。【参考】
これは回り込みの指定が解除しない限り、下のコンテンツまで機能するためです。
そこで見出し部分<h2>～</h2>に対して解除の設定をします。
styleの中のh2{～}に、「clear:left」を追加します。【参考】

５）画像とテキストの間に余白を入れます

画像とテキストの間に余白を入れますが、
ここでは画像の右側と下側だけに余白を入る設定にします。
img.photo{　}の中に;margin-right:20px;margin-bottom:20pxを追加して20px余白を設定します。

６）残りの画像を挿入します

残りの画像も同じくクラス名を「photo」と指定することにより、同じデザインを設定出来ます。

<html>
<head>
<title>色の景色</title>
<style type="text/css"></style>
</head>
<body>

<div align="center">
<h1>春の色</h1>
<div>
<a href="#c1">空色</a>・・・そらいろ<br>
<a href="#c2">水色鼠</a>・・・みずいろねず<br>
<a href="#c3">浅縹</a>・・・あさはなだ<br>
</div>
<h2><a name="c1">空色</a>・・・そらいろ</h2>
<p class="text01">
<img src=5-1.jpg width="330" height="255" alt="そらいろ" class="photo">
青空は季節によってかなり濃さが違ってくる<br>
天空と低空でも違って見える<br>
「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br>
地平線近くの色だろうか<br>
「天色」を「てんしょく」と読めば空模様のことだが<br>
「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p>

<h2><a name="c2">水色鼠</a>・・・みずいろねず</h2>
<p class="text01">
<img src=5-2.jpg width="330" height="255" alt="みずいろねず" class="photo">
雪解け水には独特の白い濁りがある<br>
この色が「水色鼠」だろうか。<br>
「四十八茶、百鼠」と言われた江戸時代の色名には「水色鼠」がある。<br>
青みを帯びた灰色が「藍鼠」なので<br>
青みを薄めた灰白色を「水色鼠」としてみた。<br>
「港鼠」や「深川鼠」という色も鼠色がかった淡い藍である</p>

<h2><a name="c3">浅縹</a>・・・あさはなだ</h2>
<p class="text01">
<img src=5-3.jpg width="330" height="255" alt="あさはなだ" class="photo">
風のない湖の水面は<br>
鏡面となって周囲の森を映しこんでいる<br>
ブナの若葉に染められた水の色は<br>
「浅緑」であろうか。<br>
残雪の山の色を色見本で探してみたら<br>
「浅縹」と言う色に近かった</p>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>

７）回り込みの設定{float}

floatを設定することで、画像にコンテンツを回り込ませてレイアウトすることが出来ます。

floatで指定出来る値

none 回り込み無し

left 左に配置（回り込むコンテンツは右）

right 右に配置（回り込むコンテンツは左）

８）回り込みの解除{clear}

floatで指定した回り込みは、clearで解除出来ます。clearは回り込ませたくないコンテンツに指定します。
float:leftで指定した回り込みはclear:leftで、float:rightで指定した回り込みはclear:rightで解除できます。
この様に回り込みを指定した画像が両側にある場合、clear:bothを使って両側の回り込みを解除出来ます。

clearで指定出来る値

none 回り込み解除しない

left 左に配置した画像に対する回り込みを解除【参考】

right 右に配置した画像に対する回り込みを解除【参考】

both 両側に配置した画像に対する回り込みを解除【参考】

９）コンテンツまわりの余白の設定{margin}{padding}

コンテンツまわりの余白はmarginまたはpaddingで設定出来ます。
それぞれtop、right、bottom、leftを付けることで、上下左右の各辺ごとに余白の大きさを指定出来ます。
同じ余白でもmarginでは罫線の外側の余白、paddingでは罫線の外側の余白を指定します。

罫線の外側の余白を辺ごとに指定する場合		罫線の内側の余白を辺ごとに指定する場合
{margin-top:～}	上の余白を設定	{padding-top:～}	上の余白を設定
{margin-bottom:～}	下の余白を設定	{padding-bottom:～}	下の余白を設定
{margin-right:～}	右の余白を設定	{padding-right:～}	右の余白を設定
{margin-left:～}	左の余白を設定	{padding-left:～}	左の余白を設定
【参考】【画像に設定した場合】		【参考】

none	回り込み無し
left	左に配置（回り込むコンテンツは右）
right	右に配置（回り込むコンテンツは左）

none	回り込み解除しない
left	左に配置した画像に対する回り込みを解除	【参考】
right	右に配置した画像に対する回り込みを解除	【参考】
both	両側に配置した画像に対する回り込みを解除	【参考】

Ⅴ-４ 文章の中に画像をレイアウトする