本文中に画像を挿入するやり方です。
ここではサンプル画像として“image.jpg”というファイル名の画像を用意しました。
画像ファイルは、このページのHTMLファイルと同階層に“img”というフォルダをつくり、その中に保存しておきます。
目次 Table of Contents
HTMLで画像を表示する
画像をHTMLで埋め込むには以下のように記述します。
<img src="./img/image.jpg" width="400px" height="200px" alt="富士山の画像" />
画像タグには</終了タグ>がありませんが、HTMLで覚えておくべきルールで解説したように、単独で機能するタグは最後を/（スラッシュ）で閉じます。
また、サンプルではwidth・height属性で画像サイズを指定しています。これはなくても表示されるのですが、ブラウザによって生じる微妙な違いによって、指定しないと表示までのスピードが遅くなる場合があります。面倒でもサイズ指定をするクセをつけておきましょう。
alt属性は、万が一画像が表示できなかったときに、代わりに表示されるテキストです。画像の意味がわかるテキストを入れておくと親切ですね。
src属性で画像ファイルがある場所を指定します。パス指定といいますが、これは次回コラムで解説します。
画像の位置と文章の回り込み
画像タグにalign属性を指定することで、文章を画像の横に回り込ませることもできます。
属性値rightで画像は右へ、leftで左に配置されます。
<img src="./img/image.jpg" width="400px" height="200px" align="right" alt="富士山の画像" />
こんな感じで画像が右寄せになり、文章が左側に回り込みました。
回り込みを解除するには
<br clear="all" />
を入力すればOKです。
CSSで背景画像を表示する
画像の表示のもう一つの方法に、CSSを使って背景画像として表示するやり方があります。
HTMLのdivタグやpタグなどのブロック要素にクラス名をつけ、CSSで背景画像のパスを指定します。
<div class="sentence">こんな感じに背景画像が表示されます。</div>
div.sentence {
width: 400px;
height: 200px;
background-image: url(./img/image.jpg);
}
今回はdiv要素の幅と高さを画像と合わせましたが、他にもやり方はありますので後のコラムでご紹介します。
comment closed