ホームページ作成講座画像リンク

画像リンクの作り方

画像リンクは、基本的に以下のようにします。imgタグをaタグで囲めばOKです。

<a href="リンク先"><img src="画像パス"></a>

では実際に以下のボタンを使ってINDEXへ戻るボタンを作ってみましょう。 まずはHomePageフォルダ内のimgフォルダに、下の画像を右クリックし、「index.png」という名前で保存してください。

続いてtemp.htmlを開き、pictureフォルダに「lesson3.html」という名前で保存しましょう。 そしてbody内に以下のように記述してみてください。

<a href="../index.html"><img src="../img/index.png" alt="目次へ"></a>

ブラウザで表示すると、下のようになります。

画像をクリックすると、index.htmlのページが表示されたら成功です。

（今回はaタグとimgタグを1行で書きましたが、もし折り返して複数行に分けて記述する場合は注意が必要です。 このページの続く部分でその点について説明しているので、是非一読下さい）。

サムネイルの活用

たくさんの画像を掲載する場合は、サムネイルという小さな画像を並べて、 クリックすると元の大きさの画像を表示させる方法が取られます。 今度はその方法について見てみることにしましょう。

（クリックすると大きな画像が開きます）

サムネイルのリンクは、以下のように記述します。

<a href="元画像のパス"><img src="サムネイル画像のパス"></a>

上記のサムネイルの例を下に記します。 元の大きさの画像ファイルはmercy.jpg、サムネイルの画像ファイルはthum.jpgです。

実際に上記のサムネイルのHTMLタグは、以下のようになっています。

<a href="img/mercy.jpg" target="_photo"><img
 src="img/thum.jpg" width="120" height="90"
 alt="ま～し～君"></a>

１行で書くと非常に長くなるので、途中で折り返しました。

上記の例では、３行に折り返して記述しました。 しかし多くの方は、変な所で折り返しているなと感じられたでしょう。 自然に折り返すなら下のようになります。

<a href="img/mercy.jpg" target="_photo">
<img src="img/thum.jpg" width="120" height="90" alt="ま～し～君">
</a>

しかしHTMLで改行すると、その位置に少しのスペースが入ります。それで、 上のような位置で折り返すと、画像の前後にゴミのようなスペースができることがあります。 そのゴミの部分にリンクの下線が引かれると、みっともないことになります↓

タグとタグの間で折り返した例

そのような訳で画像を使ったリンクを途中で折り返したい場合は、 タグ内の属性と属性の間で折り返します。 こうすると無駄なスペースが出来ずに済みます。