ブログをリニューアル予定。過去記事は削除するかもです。

【imgタグとは】HTMLで画像を表示する方法を初心者向けに解説

【imgタグとは】HTMLで画像を表示する方法を初心者向けに解説

HTMLで画像を表示させる方法を知りたいな。

イメージタグを使うときに注意するポイントは?

プログラミング勉強中の僕にもわかるように教えて欲しい。

 

こんな疑問やお悩みに答えます。

HTMLで画像を表示させるには<img>タグを使えば解決です。

本記事にて、イメージタグの使い方とポイントを丁寧に解説します。

CSSを使って、思い通りの場所をトリミングしつつ画像表示する方法もお伝えするので参考にどうぞ。

 

スポンサードサーチ

【imgタグとは】基礎解説と表記方法

【imgタグとは】基礎解説と表記方法

まずは<img>タグの基本を身につけましょう。

具体的な記述方法と、使うときに注意したいポイントをまとめました。

 

imgタグとは【画像を表示させるためのHTML】

<img>タグ(イメージタグ)とは、その名の通り、画像を表示させるためのHTMLタグです。

インターネット上に存在するほぼ全ての画像は<img>タグで表示されているので、これさえ覚えれば自由に画像を操れるようになります。

 

imgタグとは【画像を表示させるためのHTML】

たとえば、この画像のHTML表記はこうです。
<img src="https://ksonoda.com/wp-content/uploads/2021/05/a-tag-frequently-used.jpg">
インターネットでは、このようにして画像をHTMLコード化し、ブラウザ画面上に表示しているんですね。

 

imgタグの書き方【めちゃ簡単です】

<img>タグの記述ルールはめちゃくちゃ簡単です。

 

HTMLで画像を表示する
<img src="画像のURL">

 

これだけ。<img src="">""の間に、画像のURLを入れるだけです。

 

imgタグを書くときの注意点

HTMLでは、要素を開始タグと終了タグで囲むのが基本ですが、<img>では終了タグが不要です。

 

一般的なHTMLの書き方
<h1>これはh1タグです。先頭と終わりを<h1></h1>で囲みます。</h>
<p>これはpタグです。先頭と終わりを<p></p>で囲みます。</p>

 

通常は、このように開始タグ(<p>とか<h1>とか)ではじめ、終了タグ(</p>とか</h1>とか)で囲みつつ表記していく必要があります。

しかし、<img>には終了タグが存在しません。

 

imgには終了タグは必要ない
<img src="画像のURL">

 

間違って、</img>としてしまわないように注意しましょう。

 

スポンサードサーチ

imgタグに必要な属性を追加する

imgタグに必要な属性を追加する

<img>タグにはいくつか属性を追記して、より細かな設定が可能です。

 

  • alt:画像に説明文を加える
  • width:横幅を指定する
  • height:高さを指定する
  • border:境界線をつける

 

1. alt:画像の説明文

alt属性はブラウザで画像が上手に表示されなかったときに代わりに表示されるテキストのことです。

alt属性については、Googleも推奨しており、SEOにも効果的なので、できればすべての画像に記入しておきましょう。

次のように書きます。

 

altを追加する
<img src="画像のURL" alt="ここに画像のタイトル"> 

 

こうしておけば、たとえ何か問題が起こって、ウェブサイトの画像がうまく表示されなくても、altに記入したテキストが代わりに表示されるようになります。

 

① ユーザビリティが高まる

 

alt属性について詳しく解説した記事を書きました。こちらも合わせてご参照ください。

»【altタグをSEO最適化する方法】書き方を覚えればaltから被リンクが発生します

 

2. width&height:横幅&高さ

<img>タグで画像を表示する場合、横幅と高さを指定しないと元サイズのまま表示されます。

ページのレイアウトに合わせて、表示画像のサイズを調整したいときは、width(幅)とheight(高さ)を指定しましょう。

 

サイズを指定する
<img src="画像のURL" width="200" height="200"> 

 

こうすると、横幅200ピクセル、高さ200ピクセルのサイズで表示されるようになります。

ただし、この方法では画像がトリミングされるわけではないので、元画像の縦横比率に合わせてwidth(幅)とheight(高さ)を指定する必要が出てきます。

 

2. width&height:横幅&高さ

 

綺麗にトリミングした状態で画像を表示したければ、CSSの設定が必要です。

 

画像をトリミングして表示したい(CSSで可能)

横幅の2520pxに合わせて中央をトリミングしたい場合は下記をCSSに追記します。

 

画像をトリミング
img { 
 width: 2520px;
 height: 2520px;
 object-fit: cover;
}

 

これで、センターを中心に、縦横2520ピクセルをトリミングした画像が表示されました。

 

画像をトリミングして表示したい

 

画像の指定の位置をトリミングして表示したい(これもCSSで可能)

中央ではなく、画像の位置を指定して自由にトリミングすることも可能です。

先ほどのCSSにobject-position: 横の位置 縦の位置%を追記しましょう。

 

横の位置は、左上を基準に右に行くににつれて、0%〜100%になります。

縦の位置も、左上を基準に下がるにつれて、0%〜100%になります。

 

左下をトリミング
img { 
 width: 1500px;
 height: 1500px;
 object-fit: cover;
 object-position: 0 100%;
}

 

画像の指定の位置をトリミングして表示したい(これもCSSで可能)

 

こんな感じで位置を指定すれば、好きな場所をトリミングして表示可能です。

 

4. border:境界線

画像に境界線を設置したい場合は、borderスタイルを記載します。

 

境界線をつける
<img src="画像のURL" style="border: solid 1px #000000;">

 

太さ、線の色は自由に変えることができます。

また、実線、点線なども変更可能なので、自由に調整してみてください。

 

4. border:境界線

 

境界線の指定は、それぞれ下記の通りです。

 

  • solid:実線
  • doubled:二重線
  • dashed:破線
  • dotted:点線

 

スポンサードサーチ

画像を左右または中央寄せにする

画像を左右または中央寄せにする

画像の表示位置を左右または中央に合わせる場合は、text-alignのプロパティを使う方法が簡単です。

<img>タグを記載し、さらに<div style="〜〜">で囲むだけのシンプルな構図になります。

 

画像を中央寄せ
<div style="text-align:center;">
<img src="画像のURL">
</div>

 

右寄せならtext-align="right"とし、左寄せはtext-align="left"にすればOKです。

 

スポンサードサーチ

まとめ:imgタグで画像を表示しよう

まとめ

HTMLで画像を表示したい場合は<img>タグを使いましょう。

本記事で解説したポイントをもう一度おさらいしますね。

 

  • <img>には終了タグがない
  • alt属性は記載したほうが良い
  • サイズ指定はCSSで設定すれば自由自在

 

こんなところです。

<img>タグをマスターして、ウェブサイトに綺麗な画像を表示させましょう。

おわり。