Scroll
HTML の第一歩 — レッスン 6 — 画像
サイト上の画像は非常に重要な要素です。画像がないとサイトは味気なく美しくありません。画像はサイトの装飾、フォトギャラリー、そして単なる絵として使われます。
画像は IMG タグを使って挿入します（image と完全には書かず、img とだけ書くことに注意してください）。IMG タグは単一タグ <img /> で、ペアタグはありません。
IMG タグの主要な属性は src 属性です。これはリンクの href のように機能し、src 属性に画像へのパスを挿入します。パスはリンクと同様に、相対パスまたは絶対パスで書けます。
これは私たちの index.html のコードです。
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>では、このファイルの隣に images フォルダーを作成しましょう。images フォルダーに画像ファイルをコピーします。画像の名前を image.jpg とします。index.html のテキストに img タグを挿入しましょう。
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<img />
</p>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>タグを挿入したので、次は画像へのパスを書きましょう。相対パスを書きます。./ から始めます。
./
次に、画像が入っているフォルダーの名前を追加します。
./images/
そして次にファイル名を書きます。
./images/image.jpg
そして、ファイルへのパスを src 属性に挿入します。
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<img src="./images/image.jpg" />
</p>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>今、画像は元のサイズで表示されていますが、高さと幅の属性を使ってそのサイズを指定できます。
img タグの幅の属性は width です。高さの属性は height です。画像の幅だけ、高さだけ、または高さと幅を同時に指定できます。例えばこのように:
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<img src="./images/image.jpg" width="200" />
</p>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>または高さだけ:
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<img src="./images/image.jpg" height="400" />
</p>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>高さと幅を同時に指定する場合は、幅と高さが元の画像の幅と高さに比例するように気をつけてください。そうでないと、サイト上で画像が歪んでしまいます。
<html>
<head>
<title>私の最初の HTML ドキュメント</title>
</head>
<body>
<h1>私の最初の HTML ドキュメント</h1>
<p>
<img src="./images/image.jpg" height="400" width="100" />
</p>
<p>
<a href="files/file.html">2 番目のドキュメントへのリンク</a>
</p>
</body>
</html>