[初心者向け]HTMLにリンク付きの画像を貼る方法

2021.09.10
html a img

HTMLにリンク付きの画像を貼るには…??

今日も学習お疲れ様です!DMMWEBCAMPにてメンターをしている山田です!

プログラミングをはじまたばかりの時って、右も左も分からないし、気軽に聞ける人もいない状況だと諦めそうになりますよね…実際に私も最初はそうでした…

そこで今回の記事では、そんな方でもわかりやすいようにつまずきそうなポイントを押さえて、HTMLに画像を貼る方法を書いていきますので、是非参考にしてみてください!

[list class="li-check li-mainbdr main-c-before"]
  • そもそも、どういう時に使うの?
  • HTMLに画像を貼るには?(imgタグ)
  • HTMLにリンクをつけるには?(aタグ)
  • じゃあ、それらを組み合わせるには?
  • まとめ

そもそもどういう時に使うのか

みなさん、普段からWEBは使っているかと思います。どのページにも写真はあるかと思いますが、その写真をクリックするとその写真の詳細であったり、違うページに遷移することがありますよね?

今回はそのような機能を実装していきます!

HTMLに画像を貼るには?(imgタグ)

では、実際に画像を貼る方法について解説していきます。HTMLはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略称で、マークアップ言語と呼ばれています。

このような言語では、テキストに目印をつけていき、表示させていきます。(例えば段落を表示する<p></p>など)

そして、今回の画像に関しても<img>というタグを使って、マークアップしていきます。

では、<img>はどのように使うのか、主に使う属性を例を使って説明していきます!

まずは使用例を書いてみます。

HTML
<pre><code>
<img src=”./img/test1.jpg” alt=”参考画像” width=”100″ height=”70″>
</pre></code>
では、一つ一つ見ていきます。

①<img>

まずは、<img 〜>です。これで囲むことにより、タグを生成します。なお、<img>は終了タグ(</>)が要りませんので注意してください。

②src

次に
HTML
<pre><code>
src=”./img/test1″
</pre></code>
の部分です。これは画像の出所を示しています。
以下の画像のファイル構成を見てもらうとわかりやすいと思います。
“./”が現在のディレクトを指し、その直下にあるimgファイル、そしてさらにその直下にある、”test1.jpg”という指定になっています。
この指定が正しくできていないと、画像は表示されないので注意してください。

<補足>

今回は相対パスという書き方で書いていますが、絶対パスという書き方もできます。
簡単に説明すると、絶対パスとは目的のファイルまでの道筋を全て記述したもので、相対パスは現在のいるファイルからの道筋を記述したものです。
相対パスで書いてみて、どうしても画像が表示されない場合は絶対パスに書き直してみるの一つの手です。

③alt

どんどんいきます!alt=”参考画像”についてです。
これは画像がうまく表示できなかった時に画面に表示させる文字を指定しています。
以下の画像がその例です。
altではどのような画像かがわかるようにするのが基本です。

④widthとheight

では、最後に
HTML
<pre><code>
“width=”100″ height=”70”
</pre></code>
ですね。これは画像のサイズ指定ですね。幅がwidthで、高さがheightとなっています。

HTMLにリンクをつけるには?(aタグ)

次はリンクを貼る方法について解説していきます。
リンクは<a>〜</a>で書いていきます。
では、こちらもまずは例を書いていきます。
HTML
<pre><code>
<a href=”https://www.yahoo.co.jp/” target=”_blank”>テスト</a>
</pre></code>

①<a>〜</a>

こちらもまずは<a>〜</a>というようにタグを作ります。こちらはimgとは違い、</>の終了タグが必要になるので気を付けましょう。

②href

次に、
HTML
<pre><code>
href=”https://www.yahoo.co.jp/”
</pre></code>
の部分です。これはリンク先の指定をしています。参考としてyahooのページに遷移させるようにしています。

③target

では、最後に
HTML
<pre><code>
target=”_blank”
</pre></code>

です。こちらはページ遷移する時に新しく別画面で開くという指定をしています。

どういうことかというと…
まず、「テスト」というリンクを押す前の状態はこちらです。
そこからリンクを押すと…
違う画面で開きました!
もし、このtargetという指定がないと、同じ画面で開いてしまいます。ぜひ、皆さん自分で書いてどのような動きをするか確かめてみてください。

じゃあ、それらを組み合わせるには?

これまで、imgタグとaタグの説明をしてきました。それでは、それらを組み合わせて今回の本題である、HTMLにリンク付きの画像を貼る方法を見ていきましょう。
こちらもますは例を見てみましょう。
HTML
<pre><code>
<a href=”https://www.yahoo.co.jp/” target=”_blank”><img src=”./img/test1.jpg” alt=”参考画像” width=”100″ height=”70″></a>
</pre></code>
気づいたでしょうか?
そうです。imgタグをaタグで囲んであげただけなんです。
つまり、ここまでみていただいた方なら、もうすでに学んだ知識だけで作ることができます!


プログラミングスキルを身につけて、アプリケーションやWEBサービス作成に興味のある方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

経済産業省認定の圧倒的カリキュラム

まとめ

いかがだったでしょうか?
imgタグとaタグの基本的な使い方をマスターすればそれらを組み合わせてできるということがわかったでしょうか?
もし、少し難しいなと思う方は、まずはimgタグとaタグの使い方から勉強しましょう!
少しでも読んでいただいた方の助けになれば幸いです!
引き続き学習、頑張りましょう!


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5