今日も学習お疲れ様です！DMMWEBCAMPにてメンターをしている山田です！
プログラミングをはじまたばかりの時って、右も左も分からないし、気軽に聞ける人もいない状況だと諦めそうになりますよね…実際に私も最初はそうでした…
そこで今回の記事では、そんな方でもわかりやすいようにつまずきそうなポイントを押さえて、HTMLに画像を貼る方法を書いていきますので、是非参考にしてみてください！
- そもそも、どういう時に使うの？
- HTMLに画像を貼るには？(imgタグ)
- HTMLにリンクをつけるには？(aタグ)
- じゃあ、それらを組み合わせるには？
- まとめ
HTMLにリンク付きの画像を貼るには…??
そもそもどういう時に使うのか
みなさん、普段から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タグで囲んであげただけなんです。
つまり、ここまでみていただいた方なら、もうすでに学んだ知識だけで作ることができます！
未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！
✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！
＼実践的なスキルが身に付くカリキュラム／
まとめ
いかがだったでしょうか？
imgタグとaタグの基本的な使い方をマスターすればそれらを組み合わせてできるということがわかったでしょうか？
もし、少し難しいなと思う方は、まずはimgタグとaタグの使い方から勉強しましょう！
少しでも読んでいただいた方の助けになれば幸いです！
引き続き学習、頑張りましょう！
【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！
✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート
＼目的別で選べる3つのコース／
