【HTML入門】画像をリンクにする方法を解説

2024.01.11
HTML入門

みなさんはHTMLの学習をしていませんか?

今回の記事ではHTMLに画像リンクを追加する方法を解説します!

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

タグ表記

<a href=”[URL]”><img src=”[画像のファイル名(絶対パスまたは相対パス)]” alt=”[画像の説明文]” /></a>

タグの省略

<a>要素は省略出来ません。開始と終了タグの両方が必要になります。

<img>要素はそもそも終了タグがありません。<img~ /> のように最後にバックスラッシュを付けてもかまいませんがなくても大丈夫です。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

リンクの設定は画像にもできる

HTML <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。

具体的には、<a>タグと</a>タグの間に、[対象となる文章]を記述すると、その文章をクリックしたときに、[URL]に設定されたWEBページにジャンプつまりページ移動することができます。

<img>要素は、Imageの略で、画像を表示するタグです。表示する画像ファイルはsrc属性(srcはsourceの略)で指定します。 WEBに使用できる画像形式は、主にはGIF・JPEG・PNGの三種類ですがそれぞれ特徴があるので、状況により使い分けてください。


「独学でのプログラミング学習に苦戦していませんか?」

独学でのプログラミング学習の挫折率は9割以上と言われています。

プログラミングを身につけて、年収をUPさせたい
ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

使用できる属性

src(画像を設定する)

画像を設定します。絶対パス指定または相対パス指定可能です。

HTML
<img src="../images/img001.gif">

width及びheight(横幅、縦幅を設定する)

width属性とheight属性は、画像ファイルのブラウザ上での表示サイズを指定します。画像の表示サイズはできるだけ指定するようにしましょう。

画像サイズを指定することで、画像の読み込みに時間が掛かる場合にも、 指定したサイズ分の画像表示スペースが空けられて先にテキスト部分を表示するので、閲覧者にとっては表示速度が早く感じられるからです。

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

alt(代替テキストを設定する)

alt属性では画像を表示できない場合に代わりに表示するテキストを指定します。ここで指定するテキストは、読み上げソフトで音声になったり、点字で表現される場合があるので適切なものを指定しなくてはなりません。

alt属性では画像に関する説明をするのではなく、そのページ全体をテキストだけで表現する際に置き換わるべきものを指定します。例えばそのページがラジオで放送されたり、そのページの内容を電話で伝えることを想定してみると良いのだそうです。

title(画像の説明を設定する)

画像の上にマウスを乗せた際に、画像に関する説明等のテキストを表示させることが目的の場合にはtitle属性を使用してください。

border(画像の周囲の枠線を設定する)

画像の周囲に枠線を引く設定をします。設定値が0だと枠線を引きません。1,2,,,とサイズを大きくすると枠線の幅が広がっていきます。

サンプル

HTML
<html>
<!DOCTYPE html> <html> <head> <title>サンプルページ</title> </head> <body> <img border="0" src="images/img001.gif" width="128" height="128" alt="イラスト1"> <img border="0" src="images/img001.gif" width="128" height="128" alt="イラスト2" title="犬とサッカー"> </body> </html>

サンプル結果


「プログラミング学習に苦戦しているあなたへ」

独学でのプログラミング学習の挫折率は9割以上と言われています。

プログラミングを身につけて、年収をUPさせたい
ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

まとめ

初心者の方向けに画像をリンクにする方法を紹介していきましたが、いかがでしたか?

画像をリンクにすることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5