画像の配置(1) TABLEを利用

写真を左右に置いて文章（見出し）をその真ん中に置く方法をふたつ書いて見ました。

　画像の配置(2)
　説明に使った４枚の写真は、いずれもクレマチスです。兵庫県出石郡出石町の本覚寺（てっせんの寺 Tel. 0796-52-2891）には、てっせんとクレマチス合わせて330種が集められています。毎年、5月下旬が見頃で、多くの人が見物に訪れます。お寺は町のシンボルである辰鼓楼から東へ400mのところにあります。

　ブラウザの幅を広くしたり、狭くして文字と写真の配置がどう変わるか試してください。

　配置（１）は、TABLEタグを使って、写真と文字のバランスか崩れないようにしました。（写真の間に入る文字は変わりません）

　配置（２）では、ブラウザの幅によって写真の間に入る文字の数が変わります。imageタグに属性をつけて写真を張り付ける位置、写真の大きさ、文字との間隔を指定しておいてから文章を書いていけばＯＫです。写真の貼り付け方を指定する属性の部分はつぎの通りです。

src="〜"　の 〜 に画像ファイルを指定します。
alt="〜"　の 〜 に書いたコメントは、画像が表示されないときに画像の代わりに表示されます。また、画像上にカーソルを移動するとコメントが表示されます
align="〜"　の 〜 に、left または right を入れて位置を指定します。
height="〜"　画像の高さを、
width="〜"　画像の幅を指定。（いずれもピクセル単位）
hspace="〜"　は水平方向の画像と文字の間隔を、
vspace="〜"　は縦方向の画像と文字の間隔を指定します。

直前のページに戻る