TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSだけでimgタグのsrcを差し替える方法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSだけでimgタグのsrcを差し替える方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSだけでimgタグのsrcを差し替える方法について解説しています。ここではdisplay: none;で元の画像を非表示にし、差し替え後の画像を表示させる手法を説明します。サンプルコードで動作を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSだけでimgタグのsrcを差し替える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

imgタグのsrcを差し替える方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

imgタグとsrc属性の使い方

imgタグには、src属性の値として、画像までのファイルパスを記述することができます。このsrc属性の値に画像までのファイルパスを記述することで、ページに画像が表示されます。

 

HTML

<img src="https://placehold.jp/150x150.png">

 

表示結果

See the Pen
2020-05-19-sample08 by YOHEI INAI (@yohei_inai)
on CodePen.

 

[PR] Webデザインで副業する学習方法を動画で公開中

hover動作で画像を差し替える方法

正確には、hoverの動作が生じてから、imgタグのsrc属性の値をCSSだけでは書き換えれませんが、既存のimgタグを非表示に隠すことに加えて、背景画像に切り替えることが可能です。この手法は、古いブラウザでは使用できませんが、近年のブラウザでは、実現できます。

 

HTML

<div class="hover-image">
   <img src="https://placehold.jp/150x150.png">
</div>

 

CSS

.hover-image {
   width: 300px;
   height: 300px;
}

.hover-image:hover img {
   display: none;
}

.hover-image:hover {
   background-image: url("https://placehold.jp/300x300.png");
   background-repeat: no-repeat;
}

 

表示結果

See the Pen
2020-05-19-sample09 by YOHEI INAI (@yohei_inai)
on CodePen.

 

画像を差し替えてみよう

可視化を目的に、テックアカデミーにて使用されている画像を元にして、画像を切り替えます。

 

HTML

<div class="hover-image">
   <img src="https://assets.techacademy.jp/assets/mentor-about-1-0ad118da2768301b397245427d65b3c73e42dbed755c15bb61202d0fca28d7d8.jpg">
</div>

 

CSS

.hover-image {
   width: 500px;
   height: 300px;
}

.hover-image img {
   width: 500px;
   height: 300px;
}

.hover-image:hover img {
   display: none;
}

.hover-image:hover {
   background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");
   background-repeat: no-repeat;
}

 

表示結果

See the Pen
2020-05-19-sample10 by YOHEI INAI (@yohei_inai)
on CodePen.

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

CSSの読み込み速度が遅い原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

Webデザインを勉強する時に参考にしたいまとめサイト・記事25選

Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？ そこで、今回はWebデザイン（ホームページ）を勉...
Webデザイン

40社から学ぶ！ヨーロッパのECサイトにおけるフォームの作り方

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、 Adrian氏によって投稿されました。 ...
Webデザイン

実務で役立つ！CSSのセレクタの種類と使い方【初心者向け】

CSSで書くセレクタの使い方について解説しています。 セレクタを使うことで作業効率も上がるので、すぐ覚えるのは難しいかもしれませんが、書いていくうちに慣れ...
CSS

CSSにおけるアスタリスクの使い方を現役エンジニアが解説【初心者向け】

CSSにおけるアスタリスクの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

CSSでかわいいデザインのボタン10選を現役エンジニアが紹介【初心者向け】

CSSでかわいいデザインのボタン10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

あわせてよく読まれている記事

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 目次imgタグとsrc属性の使い方hover動作で画像を差し替える方法画像を差し替えてみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海">   それぞれ1つずつ確認していきましょう。 imageタグ <img   …  > ここには画像を表示しますよ、ということを示します。   ソース属性      src=”…” ソースは、出所や源泉という意味です。 表示する画像ファイルの、ファイル名やファイルの場所を示します。   タイトル属性  title=”….” 画像のタイトルを指定します。   オルト属性      alt=”…” オルタナティブ、代替の略です。 目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。   では具体例をみてみましょう。 表示したい画像ファイルを用意してsrc属性で指定しましょう。 ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。 マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。 基本的な使い方はこれだけです。   大石ゆかり サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！ 田島悠介 そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。 大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。 田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。   画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。 この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。   Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。 このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。   パスの書き方には、絶対パスと相対パスの2種類あります。 それぞれ詳しく説明しますね。   絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。 市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。 絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。 今回の図では、demoというフォルダがおおもとですね。 パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。 また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。   実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" >   分解して翻訳すると、こんな意味ですね。 「 / 」おおもとのフォルダ内の 「 images/ 」images というフォルダ内の 「 image.jpg 」image.jpg  というファイル   この道順に沿って、HTMLは表示する画像ファイルを見つけるのです。   また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。   相対パス パスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。 市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。 相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。 いくつかのパターンで、具体的に説明していきます。   HTMLとファイルが同階層にある場合 このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。   パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" >   また、カレント記号は省略することもできます。 <img src="image.jpg" >   どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。   ファイルがHTMLより下のフォルダ階層にある場合 次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。   このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" >   また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" >   ファイルがHTMLより上のフォルダ階層にある場合 最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。   パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。 ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" >   これを応用すると、下記のように複雑なパスも簡単に示すことができます。   親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" >   パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。   [PR] Webデザインで副業する学習方法を動画で公開中【応用】画像の表示スタイルを調整する 画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。   画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。 はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。 画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{  
HTML

CSSでマウスクリックで画像を切り替える手法を現役エンジニアが解説【初心者向け】

CSSでマウスクリックで画像を切り替える手法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 マウスクリックで画像を切り替える手法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 様々な画像切り替え方法（差し替え／オンオフなど） CSSスプライト クリック動作で画像を切り替えてみよう   様々な画像切り替え方法（差し替え／オンオフなど） 二枚組みの画像のどちらか一方に転換することにて、画像の差し替えや切り替えを実現できます。なお、CSS（カスケーディング・スタイル・シート）だけでは切り替えの実現は困難になりますので、jQueryも用います。   背景画像を差し替える方法 1個の要素のクラスを切り替えて、背景画像を差し替えれます。 See the Pen 2020-06-18-sample07 by YOHEI INAI (@yohei_inai) on CodePen. 背景画像を切り替える（オンオフ）方法 背景画像が設定されている2個の要素を場合によって切り替えれます。 See the Pen 2020-06-18-sample08 by YOHEI INAI (@yohei_inai) on CodePen.   [PR] Webデザインで副業する学習方法を動画で公開中CSSスプライト 画像を二枚組みに並べてから背景画像の位置調整を用いて、切り替えれます。 See the Pen 2019-06-18-sample09 by YOHEI INAI (@yohei_inai) on CodePen.   クリック動作で画像を切り替えてみよう imgタグのsrc属性の値（ファイルパス）を切り替えることもできます。 HTML <img class="toggle_img" src="https://placehold.jp/666666/ffffff/150x150.png" alt="toggle">   JavaScript $(".toggle_img").on("click", function () { if ($(this).hasClass("change")) { $(this).attr("src", "https://placehold.jp/cccccc/333333/150x150.png"); $(this).toggleClass("change"); } else { $(this).attr("src", "https://placehold.jp/666666/ffffff/150x150.png");
CSS

JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】

JavaScriptで画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次 HTMLで画像を表示する JavaScriptで画像を表示するメリット JavaScriptで画像を表示する方法 実際に書いてみよう まとめ そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLで画像を表示する まず、JavaScriptで画像を表示する方法の説明の前に、HTMLで画像を表示する方法について説明します。 HTMLで画像を表示するにはimgタグを使用します。 src属性で画像のファイル名を指定します。 <img src="image1.jpg"> この場合は、image1.jpgというファイル名の画像が表示されます。 この記述だけでは、表示された後に、別の画像に切り替えることはできません。   [PR] Webデザインで副業する学習方法を動画で公開中JavaScriptで画像を表示するメリット JavaScriptで画像を表示するには、imgタグのsrc属性をJavaScriptで指定します。 JavaScriptで画像を表示することにより、 HTMLでsrc属性を指定するのに比べ、動的に画像を表示できます。 例えばボタンをクリックしたり、画像を左右にスワイプしたときなど、任意のタイミングで指定した画像を表示できます。 Webサイトでアルバム機能を作る場合などに便利ですね。 なお、動的とは、「変化する」といった大まかな意味だと考えてください。 この場合は、ボタンをクリックしたら別の画像に「変化する」、といったことを「動的」と言います。 HTMLで画像を表示した場合は、画像は変化しないので、「動的ではない」または「静的である」といいます。   JavaScriptで画像を表示する方法 JavaScript で画像を表示するには、対象のimg要素を取得してsrc属性を指定します。 以下はidが「image_place」というimg要素を取得して、 src属性に「image1.jpg」を指定した例です。 let img = document.getElementById("image_place"); img.src = "image1.jpg";   実際に書いてみよう 今回のサンプルプログラムでは、ボタンを押した時に画像を切り替えるようにしています。 事前に画像ファイルを3枚用意して、 HTMLファイルと同じフォルダに配置しておきましょう。 今回は以下のような画像を用意しました。   プログラムは以下のようになります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample1</title> </head> <body> <button onclick="changeImage()">画像の切替</button> <br> <img id="image_place" src="image1.jpg"> <script type="text/javascript"> // img要素を取得する let img = document.getElementById("image_place"); // 表示する画像番号 let idx = 1;
JavaScript

CSSで画像を縦に並べる方法を現役デザイナーが解説【初心者向け】

CSSで画像を縦に並べる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次imgタグとsrc属性の使い方hover動作で画像を差し替える方法画像を差し替えてみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像を縦に並べる方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像はそのままだと横に並ぶ HTMLの要素は大きく分けて、インライン要素とブロックレベル要素があります。 インライン要素は横に並び、ブロックレベル要素は横には並ばず縦に並んでいきます。 画像を配置する際の<img>は、インライン要素になるので、CSSで何も設定しない場合には横に並んでいきます。 HTML <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> 表示結果   画像にdisplay: block;を適用して縦に並べる ブロックレベル要素なら縦に並ぶので、<img>をブロックレベル要素にするだけで画像は縦に並びます。 上下や左右の間隔はmarginやpaddingで調整が可能です。   HTML <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> CSS img{ display:block; } img:first-child{ margin:0 auto; } img:nth-child(2){ margin-left:3em; } img:nth-child(3){ padding-left:10em; }   表示結果 上記の例では、以下の3つの方法で、ボックスの表示位置を変えています。 1番目の画像は左右のmarginをautoにして中央に表示 2番目の画像は左に3emのmarginを適用 3番目の画像には左に3emのpaddingを適用   [PR] Webデザインで副業する学習方法を動画で公開中display: flex;で縦に並べる flexboxレイアウトを使用して、画像を縦に並べることも可能です。 flexboxを使う場合は、縦に並べたい画像を囲む要素（<div>など）を作って、display: flex;を適用します。 さらに、縦並びにする場合は、flex-direction: column;も適用します。   HTML <div class="flexbox"> <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> </div> CSS .flexbox{   display: flex;   flex-direction: column; } 表示結果 display:flex;を適用した要素の直下に<img>を配置した場合は、align-itemsプロパティの初期値 stretch が適用されるため、画像の幅が指定されていないと画像が親要素の幅に合わせて伸縮します。 align-itemsプロパティの値でstretch以外を適用すると、画像の幅は親要素の幅に合わせて伸縮しなくなると同時に、整列する位置を指定できます。   HTML <div class="flexbox flexbox-left"> <p>ボックスを左端に整列</p> <img src="image.png" alt="">
CSS

CSSのhoverを使ってアニメーションを設定する方法【初心者向け】

今回はCSSのhoverを使ったマウスオーバー時にアニメーションを設定する方法を説明します。 アニメーションを使えばWebサイトの表現に幅が出るので、書き方を覚えておきましょう。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   大石ゆかり 田島メンター！！よくサイトでボタンにカーソルを合わせたとき、そのボタンが少し拡大されたり動いたりするのがありますよね。あれってどうやってるんですか～？ 田島悠介 マウスオーバー時の動作だね。まずはhoverという擬似クラスを使う必要があるのでそれから説明しよう。 大石ゆかり 擬似クラスというのは何ですか～？ 田島悠介 要素の中の特定の状態を指定するときに使うんだ。hoverはマウスカーソルが乗っていて、かつクリックがされていないときを示すよ。   目次 hoverを使った書き方 実際にhoverを使ってみよう よくあるおすすめのマウスオーバー時のアニメーション5つ   hoverを使った書き方 「hover」を使った書き方は以下の通りです。 p:hover{ /*マウスオーバー時の処理*/ } 「hover」はカーソルが乗っている要素に対して適用されるスタイルの指定です。 「hover」の擬似クラスというのは「カーソルが乗っているがクリックはされていない状態」を指します。 CSSでは後述されたものが優先して適用されるためにCSSの書き方も重要です。 「hover擬似クラス」の記述の後に「link擬似クラス」を書くと「link擬似クラス」が優先されます。   田島悠介 hoverの基本の書き方だね。 大石ゆかり {}内に記述された内容が、マウスオーバー時の動作になるわけですね。 田島悠介 そうだね。次はシンプルな例でhoverを実際に見てみよう。   [PR] Webデザインで副業する学習方法を動画で公開中実際にhoverを使ってみよう 実際にコードを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS hover</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <a class="001">マウスオーバーしています。</a> <p class="002">マウスオーバーしていません。</p> </body> </html>   CSS a:hover{ background-color: #5bc0de; }   表示結果を確認してみましょう。   「マウスオーバーしています。」という文言にマウスオーバーすると指定した色に変わります。   動的なWebページを作っていくうえでは必須のコーディングとなります。 「a:hover」とあればカーソルの乗っているクリックがされていない<a>要素のことを言います。   よくあるおすすめマウスオーバー時のアニメーション5つ 「Hover.css」と呼ばれるCSSライブラリは手軽にマウスオーバー時のエフェクトをサポートしてくれます。ここでは100種類以上のエフェクトを手軽に使えるようになります。 そんな中でもお勧めできるのは次の5つです。 「Radial Out」 ・・・ 中心から円状に広がるアニメーション 「Icon Down」 ・・・ 設定したアイコンが下がるアニメーション 「Underline From Center」 ・・・ 真ん中からアンダーラインがでるアニメーション 「Box Shadow Inset」
CSS

HTMLのimgタグにURLを設定する方法を現役エンジニアが解説【初心者向け】

HTMLのimgタグにURLを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 imgタグにURLを設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 imgタグとは imgタグにURLを設定する方法 imgタグの注意点 まとめ   imgタグとは imgタグとは、文章内に画像を表示させるタグのことです。画像はURLで保存されているファイルを指定することで表示されるようになります。 この画像の保存場所の指定は、SRC属性でおこないます。このSRC属性でのURLは画像の保存場所としてのパスなので、通常は画像が保存されているimgフォルダなどを指定していきます。   [PR] Webデザインで副業する学習方法を動画で公開中imgタグにURLを設定する方法 ブラウザ上に表示された写真をクリックすると、別のwebページを表示させるようにすることが出来ます。これはimgタグにURLを設定することで実現できるようになります。imgタグをaタグで囲むように記述します。 (sample.html) <p> <a href="https://www.google.com/"> <img src="free.jpg" width="300" height="300" alt="フリー画像"> </a> </p> 上記のように記述すると、画像をクリックするとGoogleの検索画面が表示されます。   imgタグの注意点 imgタグはpタグやdivタグとは違い、閉じタグが必要ありません。imgタグにはalt属性というものがあり、画像が不具合などで表示出来ない場合に、画像の代わりにテキストを表示することができます。このalt属性は記述をしなくてもエラーとはなりません。 しかし、検索で上位表示をされるためのSEO対策としてはalt属性も記述する必要があります。alt属性は写真が不具合で表示されない場合や、目が不自由な方のための音声読み上げ機能などでも利用できるため、記述しておきたい項目です。 その他の注意点としては、RubyonRailsでアプリを作成した場合には画像の保存場所が意図した場所に保存されていないことが多くあります。 開発環境と本番環境で保存場所が変わる場合やURLが変わってしまう場合もあるため注意が必要です。   まとめ imgタグはwebを表示する際の基本的なタグですが、使用頻度も多く応用して使っていきたいタグの1つです。必ず表示されている状態を確認し、URLのリンク切れなどが起こっていないか確認しながら記述することが大切です。   監修してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSだけでimgタグのsrcを差し替える方法を現役エンジニアが解説【初心者向け】