• 無料でHTMLが学習できる

ウェブサイト制作

画像(image)

目次

画像を入れたい

画像を組み込みたい時は<img>タグを使います。
HTMLには、要素と属性と値がついてまわります。
(ここでは『img』が要素です)

1.画像を組み入れたい場合は、画像ファイルを決められた場所へ保管して置きます。
新規フォルダを作ります。名前はimagesとします。
(画像フォルダ専用のフォルダはココでは『images』としましたが、『画像、image、…等』画像が保存された場所という事がわかる事が大事です。)

imagesフォルダの中に、画像ファイルを保管します。
(cap.jpgの帽子の写真が保存させてあります)

<img src=“ images/cap.jpg”>
・srcはsource(ソース)の略
ソースの意味は「出典、由来」など

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>画像</h1>
<hr>
<h2>画像を入れたい</h2>

<img src=“images/cap.jpg”>
</body>
</html>

↑上の図を見てください。
階層が同じ「imagesフォルダ」があるから、パスはこの様になります。
『images/cap.jpg』

もし、画像が出なかったら、ブラウザ画面の『ツール』>『インターネットオプション』>『詳細設定』>『マルチメディア』>『画像を表示する』にチェックします。

拡張子

拡張子を見えるように、フォルダを開いて『表示』を押し、『ファイル名拡張子』をクリックします。

このページのトップへ

画像が表示されない時のためにテキストを入れたい

なかには、あえて画像を表示しないで、ネットサーフィン(*)をすることがあります。
それは、画像があるとその分容量があるので重いのです。
逆に、なにか可愛い画像は無いかなと探す人もいます。

他には、画像の容量が大きすぎて、読み取れない時に『テキスト』が表示されます。

HTMLには、要素と属性と値がついてまわります。
ここで使う要素は『img』
属性が『alt』、値が『私の帽子』では記述してみましょう。
「alt」は図が展開されなかったときに、「テキスト」(この場合には『私の帽子』)が表示されます。

<img src=“images/cap.jpg” alt=“私の帽子”>

うまく画像が出なければ、パスがあっていない事を真っ先に疑いましょう。
『ピリオド』が『コンマ(カンマ)』になってないか?
コードが半角英字になっているか?
パスの先が正しいか?
下位フォルダ、上位フォルダは正しく記述しているのか?
等々
(*) サイトからサイトへ、お気に入りのサイトを探す

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>画像</h1>
<hr>
<h2>画像が表示されない時のために
テキストを入れたい</h2>

<p>
<img src=“images/cap.jpg” alt=“私の帽子”>
</p>

</body>
</html>

このページのトップへ

画像のサイズを指定したい

1.サイズを縦横決めた場合

縦(高さ)はheight属性、 横(幅)はwidth属性
値はピクセル(px)かパーセント(%)でします。
指定しなかったら、画像本来の大きさ出てきます。

<img src=“../images/cap.jpg” alt=“私の帽子”
width=“100px” height=“200px”>

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>画像</h1>
<hr>
<h2>画像のサイズを指定したい</h2>

1.サイズを縦横決めた場合

<img src=“images/cap.jpg”
alt=“私の帽子”
width=“100px” height=“200px”>
</body>
</html>

ちょっと縦長の帽子になっちゃいましたね。

このページのトップへ

2.サイズを横auto(自動)、縦200pxとした場合

続いて、縦(高さ)は変わらず、横(幅)をautoとした場合はどうなるのでしょう。
高さ200px で 元の画像と縦横比が一緒のきれいな画像ができました。

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>画像</h1>
<hr>
<h2>画像のサイズを指定したい</h2>

2.サイズを横(auto)、縦(200px)とした場合

<img src=“images/cap.jpg”
alt=“私の帽子”
width=“auto” height=“200px”>

</body>
</html>

このページのトップへ

イメージマップを作りたい

1.形状は四角形で作りたい

画像を取り組むのは同じです。
<img>タグの中でusemap属性を使います。

<map>タグの中で
area要素でshape属性、coords属性

値は#マップ名で定義するのです。

このページのトップへ

2.形状は円形で作りたい

このページのトップへ

3.形状は多角形で作りたい

このページのトップへ