バナー画像

HTMLの学習を始めたばかりの方は、画像挿入の方法についてまだ何も知識がない状態かも知れません。

Webサイト作成において、画像挿入は頻出処理の1つであるため、しっかりと理解しておくことが大切です。

本記事では、HTML初心者の方向けに画像挿入の方法について、概要からサンプルコードを交えた解説まで、順にご紹介していきたいと思います。

HTMLで画像挿入に使用するのはimgタグ


HTMLで画像を挿入するためには「imgタグ」を使用します。imgはimageの略称です。

imgタグの記述方法

imgタグの記述方法は下記のようになります。

<img src="画像のパス">

src属性のみ必須属性と指定されており、Webサイト上に表示する画像のパスを指定します。

最低限これだけ記述すればWebサイト上に画像を表示することが可能です。

ポテパンダの一言メモ

imgタグには閉じカッコは不要です。

HTMLでの画像挿入:imgタグの属性を把握しよう


HTMLでの画像挿入に使用するimgタグで、設定可能な属性について確認していきましょう。

今回はよく利用される属性のみに絞ってご紹介していきます。

  • src属性(必須)
  • alt属性
  • width属性
  • height属性
  • align属性

src属性(必須)

src属性では、挿入したい画像のファイルパスを指定します。

パスの指定方法には「相対パス」と「絶対パス」を利用することが可能です。

<img src="sample.jpg">

このようにファイル名だけを画像パスとして指定した場合、htmlファイルと同階層にある「sample.jpg」ファイルが挿入されます。

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

一方で、絶対パスを指定することで別のWebサイトから画像を引用することも可能です。

ポテパンダの一言メモ

他のWebサイトからの画像を使用する場合は、著作権や利用規約に従った形で利用するようにしましょう。

alt属性

alt属性は、画像が表示出来なかった場合に代替文字として表示するテキストを指定します。

<img src="sample.jpg" alt="サンプル画像が表示されます。">

ブラウザが何らかの理由により画像を表示出来なかった場合、alt属性に指定したテキストがWebサイト上に表示されます。

width属性

width属性では、画像の横幅をピクセル単位またはパーセンテージで指定することが可能です

<img src="sample.jpg" widht="300px">

単位を指定しなかった場合には、デフォルトでピクセルが指定された状態となります。

ポテパンダの一言メモ

width属性と後述するheight属性の両方を指定しなかった場合には、元画像のサイズで表示されます。

height属性

height属性では、画像の縦幅をピクセル単位またはパーセンテージで指定することが可能です。

<img src="sample.jpg" height="200px">

基本的な使い方はwidth属性と同じです。

ポテパンダの一言メモ

ちなみにwidth属性・heiht属性どちらかしか指定しなかった場合、もう一方の値は元画像の比率に従って自動で決定されます。

align属性

align属性では、画像とテキストの配置を決定することが可能です。

「top」「middle」「bottom」「right」「left」の値を指定することで画像とテキストの位置関係を決定していきます。

<img src="sample.jpg" align="top">

具体的なイメージは後述するサンプルコードでご確認ください。

HTMLでの画像挿入:サンプルコードで動きを確認しよう


では実際にHTMLでの画像挿入をサンプルコードで確認していきたいと思います。

各属性の動きを確認するサンプルコード

alt属性以外の各属性の動きについて確認していきたいと思います。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Image Insert Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p>オリジナルの画像サイズ</p>
<img src="img/sample1.jpg">
<p>width・height属性で画像サイズを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px">
<p>画像のパスを間違えるとalt属性のテキストが表示</p>
<img src="img/ample1.jpg" alt="sample1.jpgが表示される予定です。">
</body>
</html>

サンプルコードをブラウザ上で表示した結果が下記となります。

align属性に設定した値の違いをサンプルコードで確認しよう

次にalign属性の値によって表示される内容の違いを確認していきましょう。

index.html(top, middle, bottom)

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Image Insert Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p>align属性にtopを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px" align="top">テキスト表示内容の確認です。
<br>行を変更するとこんな感じ。
<p>align属性にmiddleを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px" align="middle">テキスト表示内容の確認です。
<br>行を変更するとこんな感じ。
<p>align属性にbottomを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px" align="bottom">テキスト表示内容の確認です。
<br>行を変更するとこんな感じ。
</body>
</html>

サンプルコードをブラウザ上で表示した結果が下記の通りです。

次にalign属性に「left」と「right」を指定した場合の動きを確認してみます。

index.html(left, right)

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Image Insert Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p>align属性にleftを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px" align="left">テキスト表示内容の確認です。
<br>行を変更するとこんな感じ。
<br clear="all">
<p>align属性にrightを指定</p>
<img src="img/sample1.jpg" width="200px" height="100px" align="right">テキスト表示内容の確認です。
<br>行を変更するとこんな感じ。

</body>
</html>

サンプルコードをブラウザ上で表示した結果が下記の通りです。

ポテパンダの一言メモ

ちなみに<br clear=”all”>を設定しなかった場合、pタグに記述した「align属性にrightを指定」のテキストも上の画像の右側に回り込んだ状態で表示されてしまいます。

一度実際に試して動作を確認してみてください。

さいごに:HTMLでの画像挿入はWebサイト作成の必須知識


本記事では、HTMLでの画像挿入の方法について、概要からサンプルコードでの動きの確認を行ってきました。

Webサイト作成において、画像挿入は必ずといって良いほど頻繁に利用することになります。

基本をしっかりと抑えた上で、Webサイト作成に何度も挑戦し、HTMLでの画像挿入を使いこなせるようになりましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。