画像を設置することはホームページを彩るために不可欠であります。

HTMLでは画像や動画も設置したり、背景に指定することができます。

ただし、ひとつのページに容量の大きい画像、動画などを設置しすぎると、ページが重くなってしまうので気をつけて下さい。

Advertisement

1,画像を用意する

ホームページに画像を設置するにしても、画像がなければ始まりません。
まずは、ホームページに表示するための画像を用意しましょう。

容量が大きすぎなければなんでも構いませんが、HTMLで表示できない画像の種類もありますので、代表的な画像ファイルフォーマットである、GIF、JPG、PNG、のどれかで探してみて下さい。
(拡張子で判別できます)

サンプルをおいておきますので、保存して使っても構いません。

GIFサンプル

samplegif

JPGサンプル

samplejpg

PNGサンプル

samplepng

用意した画像は、作成前の下準備で作成したimageフォルダ内に保存して下さい。

保存するファイル名は任意で構いませんが、先のステップではファイル名をsampleにしたと仮定し進めていきます。

2.画像を表示させる

実際に画像を表示させていきます。

画像を表示させる場合には、imgタグにsrc属性で画像の場所を指定します。

<img src="画像のURL">のの部分に画像を保存した場所へのパスを記入します。
考え方としては、画像にリンクして表示させているといった考え方が近いかもしれません。

今回は、imageフォルダ内に保存している画像を指定しますので、 画像のパスは<img src="image/画像のファイル名">となります。

では、画像はGIFファイルで、「sample」というファイル名にしたと仮定して、indexファイルに下図の様なソースコードを書きこんで下さい。

ソースコード

image27

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像を表示させます</title>
</head>

<body>
<h1>たたずむヒヨコ</h1>
<img src="image/sample.gif">
</body>
<html>

画像のファイル名はしっかり拡張子まで記入して下さい。

ブラウザ上では下図の様になっているはずです。

ブラウザ

image28

ホームページに画像を表示させるのは意外と簡単ですね。

3.画像のサイズを変更する

ホームページのデザインに合うように画像を使用するためには、画像のサイズを変更しなければならないはずです。

始めから適正なサイズの画像を用意するのが好ましいですが、HTMLの機能でも表示する画像のサイズを指定する事ができます。

imgタグの属性に、widthとheightを指定する事でサイズを変更する事ができます。
widthは横幅で、heightは縦幅になります。

実際にサイズを指定してみましょう。
横幅を150に指定して、縦幅を200に指定すると、ソースコードとブラウザ上では下図の様になります。

ソースコード

image29

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像を表示させます</title>
</head>

<body>
<h1>たたずむヒヨコ</h1>
<img src="image/sample.gif" width="150" height="200">
</body>
<html>

ブラウザ

inage30

画像が小さくなった事が確認できたと思います。

今回はwidthはとheightへの指定は数字だけで行いましたが、数字にpx(ピクセル)や%(パーセント)を指定することもできます。
つまりwidthを150ピクセルで指定した場合は、width="150px"と書きます。
上記の様にこの様な単位を指定せずに、width="150"と書けば自動的にピクセルとして扱われますが、ブラウザなどによって違いが生じる可能性があるので、なるべく単位は指定するようにしましょう。

今回解説したwidthとheightは、画像だけではなく多様なタグに指定することができますので、覚えておいて下さい。
※ただし一部のタグでは、widthとheightを扱う場合、style属性を利用しなければなりません。詳しくは、「スタイルシート」のページ内、3.タグに直接スタイルシートを書き込むを 御覧ください。

4.画像を背景にする

画像を背景に表示する方法です。

分かりやすくするために背景用にサイズを縮めたサンプル画像を用意しました。

背景サンプル

まずは、この画像を「sample_bg.gif」というファイル名でimageフォルダ内に保存して下さい。

画像を背景として指定するには、styleにbackground属性を指定します。

例えば、bodyタグの背景に画像を指定したい場合は、
<body style="background-image: url(image/sample_bg.gif);">
と記述します。
これは、bodyタグのスタイルにbackground-image属性(背景に画像を指定する記述)を指定し、画像先のurlをimage/sample_bg.gifに指定した記述です。

では、ソースコードに書きこんでみましょう。

ソースコード

image62

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景に画像を指定する</title>
</head>

<body style="background-image: url(image/sample_bg.gif);">
<h1>背景がひよこ</h1>
</body>
<html>

ブラウザ

image62

bodyタグの背景に画像が反映されました。

background-image属性を使用して背景に画像を指定した場合、デフォルトで画像がリピートされる仕様になっています。
このリピートはなくす事ができますし、横方向にだけリピートさせたり縦方向にだけリピートさせる事ができます。

リピートを無くしたい場合は、background-repeat属性にno-repeatの値を指定します。
<body style="background-image: url(image/sample_bg.gif); background-repeat: no-repeat; ">

画像を横方向にだけリピートさせたい場合、background-repeat属性にrepeat-xの値を指定します。
<body style="background-image: url(image/sample_bg.gif); background-repeat: repeat-x;">

画像を縦方向にだけリピートさせたい場合、background-repeat属性にrepeat-yの値を指定します。
<body style="background-image: url(image/sample_bg.gif); background-repeat: repeat-y;">

 

また、background-color属性を利用すれば背景に色を入れることもできます。

ソースコードは背景に画像を指定するよりは単純となり、
<body style="background-color: #000000;">
の様な記述になります。

これは、bodyタグに background-color属性(背景に色を指定する記述)を指定し、値に#000000(色コードで白)を指定しています。
※色コードについては色コードの項目を御覧ください。

今回は例として<body>の背景に画像を指定しましたが、他のタグでも画像や色を背景として指定する事ができますので、色々と試してみましょう。

それでは、次のテーブルを扱うに進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。