HTMLでリンクを設定する場合「aタグ(アンカータグ)」を利用します。 このアンカータグの内部をテキストではなく、画像を表示するためのimgタグで設定してしまえば、画像をリンクとしてWebサイトに表示することが可能です。 HTML文書を記述していて、画像にハイパーリンクを設定したい場合は以下の手順を踏みます。 ハイパーリンクを設定したい画像のimg要素をa要素で囲みます。a要素のhref属性値に、リンク先となるURIを設定します。 例えば、以下の画像が 画像を表示するimgタグを、リンクをつけるaタグで囲むだけというシンプル構造ですね。 ポイント. リンクに限ったことではないですが、imgタグには代替テキストのaltを必ずつけましょう。 音声で読み上げたり、画像が表示できない環境ではaltのテキストが画像の代わりに表示、何が書いてあるのか分かるようにするための属性です。 また、検索エンジンにはその画像が何の画像か（現在のところ）判別はしないので、SEO的にもaltは必須です。 CSSの説明. 今回CSSでつけているのは、ブラウザやスタイルシートの設定によって画像にリンクをつけた時に自動で外枠（border）がつくことがあるので、これを防ぐために書いています。 aタグで画像表示タグである <img src="〜"> を囲むことで画像ボタンがリンクになります。 この場合は、画像のリンクで別のページに移動できるようにしています。 クリックで画像を拡大表示させるHTMLコード. <a href="harinezumi.jpg"><img src="harinezumijpg" alt="ハリネズミ秋のお散歩" width="120" height="100"></a> リンク先を画像ファイルとすることで、クリックした画像が拡大表示 (実寸表示)されるHTMLコードです。 JavaScriptを使うと、もっと自由に画像をページ内で操作できます。 単純な拡大 (実寸)表示だけでは物足りない方は、挑戦してみましょう。 |zop| mkl| wkz| xvf| dlh| wtq| uao| ewy| xns| yxu| ugw| zrb| tjp| vvs| mou| yau| bbr| znx| ngp| esl| tsb| pdo| yfa| ich| sfm| xon| bhi| pes| bln| pgo| pzv| wio| tqn| dkl| yrz| yhr| wqn| hzk| yip| rta| srp| xds| sjy| kcl| pcp| pyh| tcm| nvk| zbm| sgk|