紹介ページ画像の廻り込み

　　この文字をクリックするとサンプルダウンロード出来ます。


紹介ページに画像を組込む　←　｜　→　イベントページの概要を作成


要素の廻り込の、float属性を適用して、画像を左右に廻り込ませます。

小見出し１の記事画像　：　pic1.gif　画像を右側に廻り込ます。
小見出し２の記事画像　：　pic2.gif　画像を左側に廻り込ます。
小見出し３の記事画像　：　pic3.gif　画像を右側に廻り込ます。


●　スタイルシートに追加します。

.img-right		クラスセレクタ
{　float: right;		右への廻りこみ指定
margin-left: 15px;		左コンテンツ境界との余白
margin-bottom: 15px;　}		下コンテンツ境界との余白
.img-left		クラスセレクタ
{　float: left;		左への廻りこみ指定
margin-right: 15px;		右コンテンツ境界との余白
margin-bottom: 15px;　}		下コンテンツ境界との余白

●　htmlのimgタグ内にクラス指定を追加します。

　ここより上のhtmlソースは割愛。


　<h3>高原の中にある工房</h3>

　<p><img　class="img-right"　src="pic1.gif"　alt="画像１"/>
　牛乳の工房は、自然豊かな丘の林の中にあります。</p>
　<p>林の入口から細い小道を通り、八ヶ岳に向かって進んでください。しばらくすると、
　【　途中略　】

　<h3>高原の四季も楽しむことが出来ます</h3>

　<p><img　class="img-left"　src="pic2.gif"　alt="画像２"/>
　牛乳の工房では、八ヶ岳の四季折々の自然を体感することができます。<br/>
　<br/>
　【　途中略　】

　<h3>工房のまわりにある散策名所</h3>

　<p><img　class="img-right"　src="pic3.gif"　alt="画像３"/>
　工房のまわりにはいろいろな名所があります。絶景赤岳、飯盛山、プラネタリウムを
　　　備えた資料館、高原レタス畑、電波望遠鏡を備えた天文台、日本一高い場所にある駅…。１日では
　【　途中略　】

　ここより下のhtmlソースは割愛。

---

・float属性

要素の廻りこみには、スタイルシートでfloat属性を使います。廻り込み方向は属性値で指定。

　float：right;　要素を右に廻りこませる
　float：left ;　要素を左に廻りこませる

この属性は画像だけで無く、様々な要素に適用できます。
例えば、このサイトではメニューの左カラムを＜div＞で囲んだブロック要素にして、要素全体をfloat属性で左に廻り込ませています。

・クラスセレクタ

スタイルの先頭に．の付いているものを、クラスセレクタと言います。
＃の場合にはidセレクタと言います。

どちらも、htmlで名前を引用して適用させます。引用したタグだけに適用されます。

クラスセレクタ、idセレクタの使い分けはハッキリとは決まってはいません。どちらでも構いません。

クラス属性は・・class="クラスセレクタ名"、id属性は・・id="idセレクタ名"で使用します。

例えば、スタイルシートで　＃img-right・・として、htmlで　＜img id="img-right"・・・としても、
今回のサンプルと全く同じ結果となります。

---

サンプルを表示した結果です。画像が廻り込み、ページが完成しました。

画像を廻り込ませて使うと画像の高さと文字コンテンツの高さ調整が必要になります。

左画像の時、文字高さが画像より高くなると、はみ出た文字が画像の下に廻りこみます。

また、文字高さが低いと、その下の記事が廻り込んできます。
その為、画像サイズを変更したり、改行を入れて文字コンテンツの高さを調整したり・・と中々厄介です。