タグの華

  タグの華はコピーして貼り付けるだけで誰でも簡単に作れる自営業者のためのホームページ作成講座です
トップページ タグ辞典(基本編) タグ辞典(応用編) タグ辞典(実践編) タグ辞典(小技編)

 

  ホームページの変更方法 〜 画像の指定編

 ■画像挿入のポイント

画像の横幅を変えるには
<IMG src="画像ファイル名" width="200"> の200の部分の数字を変える。

画像の縦幅を変えるには
<IMG src="画像ファイル名" height="150"> の150の部分の数字を変える。

ただ、なるべく画像ファイルはブラウザ上で表示される大きさのサイズに合わせておきましょう。

画像ファイルは保存してあるHTMLファイルと同じ場所、同じフォルダーの中になければ表示されない。
保存してあるHTMLファイルがあるフォルダに画像専用のフォルダーを作成した場合は画像ファイル名の前にフォルダ名をつける

例). <IMG src="img/flower.jpg"> など。
(この場合画像flower.jpgはimgフォルダの中にあることを意味する。)

画像の周囲に余白を開ける場合は
<img src="画像ファイル名" hspace="10" vspace="10">
hspaceが縦幅、vspaceが横幅。

画像の右側にテキストを表示させるには
<img src="画像ファイル名" align="left">テキスト
左側にテキストを表示させるには
<img src="画像ファイル名" align="right">テキスト とする。

画像の横に書いていたテキストを画像の下に表示させるには
<br clear="all">を下に表示させたいテキストの手前で記述します。

こちらの画像の横と下にテキストを入れる例も参考にしてください! 





 

■画像に関するタグ

 
代替えテキスト <alt="">
<IMG src="img/hana.jpg" alt="月見草">
月見草

* <alt>タグを使うことで画像が読み込まれるまでの間や、画像が表示されない場合に 記載した説明文が画像の代わりに表示されます。


画像と文字の位置 <align="">
<IMG src="img/hana.jpg" align="right">
画像を右に回り込ませました。
<br clear="all">
文字の回り込みを解除しました。
ローズマリー画像を右に回り込ませました。
文字の回り込みを解除しました。

*文字を画像の右側に記載したい場合は <align="left"> と記載する。 横から下に記載に切り替える(文字の回りこみを解除するには)には <br clear> を使う。


画像の余白の設定 <align="">
<IMG src="img/hana.jpg" hspace="20" 
vspace="40"><br>
この画像は左右20px、上下40pxの余白を
設定しています。
チューリップ
この画像は左右20px、上下40pxの余白を設定しています。

*画像はテーブルタグ内で使用するケースが多いため <cellpadding=""> で 余白を指定してしまうことのほうが一般的です。


画像の枠の設定 <align="">
<IMG src="img/hana.jpg" border="5">
ペチュニア

*画像にリンクタグを設定した場合、自動的に枠が表示されてしまいます。 画像の枠を非表示にするには <border="0"> と記載します。






by 自営業者が自分で作るお店のホームぺージ

Copyright © 2008 タグの華 All rights reserved.