紹介ページabout.htmlの画像を廻り込ます

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 画像を廻り込ます


速攻HTML

紹介ページの記事内の画像を廻り込ませます

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



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


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


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



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


 <h2>湖畔の工房について</h2>

 <p>河口湖観光社では、湖畔の中にある「体験の工房」を運営しています。体験の工房では、四季おりおりのイベントを開催したり、さまざまな商品の開発を行っています。</p>

 <h3>河口湖クラフトパーク</h3>

<img class="img-right" src="pic1.gif" alt="河口湖クラフトパーク"/>
<p>河口湖クラフトパークは、自然豊かな湖畔にあります。</p>
<p>クラフトパークはいろんな楽しい作品が作れる体験工房。どなたにも、かんたんに素敵なオリジナル作品が作れます。</p>
<p>ガラスは熱を加えると、美しい色を帯びて簡単に変形します。</p>
<p>どこにもあるジュースやお酒のボトル、コップなどはちょっと手を加えることで、世界にたった一つのガラスアートに生まれ変わります。</p>
<p>伸ばす、曲げる、ふくらます。ガラス工芸品の美しさをあなたの感性で存分に楽しんでください。</p>

 <h3>河口湖大石紬伝統工芸館</h3>

<img class="img-left" src="pic2.gif" alt="大石紬伝統工芸館"/>
<p>館内には大石紬の着物が展示され、機織り機が並んでいます。機織の実演も見学出来ます(要予約)。</p>
<p>また、選繭から座繰製糸、、染色などの工程をパネルとビデオで紹介しています。</p>
<p>大石紬の着尺や小物などを販売するコーナーもあります。</p>
<p>大石紬伝統工芸館では古から受け継いだ技術や繭を使った体験教室、自然素材の草木染めなどの体験教室を開催しております。</p>
<p>貴方だけのオリジナルアイテムを作ってみませ んか?</p>

 <h3>河口湖畔のまわりにある散策名所</h3>

<p>湖畔のまわりにはいろいろな名所があります。</p>
<img class="img-right" src="pic3.gif" alt="散策名所" />
<p>9世紀後半に起こった噴火をきっかけに、富士山の北麓に初めて建立された浅間神社。</p>
<p>標高800mでとれるサクランボは、寒暖の差が大きいので糖度が高く、鮮やかな色をしている河口湖サクランボ農園。高砂、紅秀峰など4種類のサクランボが食べ放題</p>
<p>河口湖美術館常設展のテーマは富士山。富士山を描いた日本画や、岡田紅陽の富士の写真を展示している。常設展のほか、年数回の企画展も開催。河口湖を望むティーラウンジも有ります。</p>



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




・float属性


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


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


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


・クラスセレクタ


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


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


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

但し、idセレクタは1ページに1回しか引用出来ません。クラスセレクタは何回でも使えます。


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


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





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


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

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

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

  個別ページ