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

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

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

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

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

スポンサードサーチ

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

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

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

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

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

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

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

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

<img src="画像のURL">

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

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

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

<h1>これはh1タグです。先頭と終わりを<h1></h1>で囲みます。</h>
<p>これはpタグです。先頭と終わりを<p></p>で囲みます。</p>

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

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

<img src="画像のURL">

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

スポンサードサーチ

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

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

1. alt：画像の説明文

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

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

次のように書きます。

<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（高さ）を指定する必要が出てきます。

綺麗にトリミングした状態で画像を表示したければ、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%;
}

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

4. border：境界線

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

<img src="画像のURL" style="border: solid 1px #000000;">

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

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

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

スポンサードサーチ

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

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

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

<div style="text-align:center;">
<img src="画像のURL">
</div>

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

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana SBクリエイティブ 2019年03月18日頃

楽天ブックスで探す

楽天koboで探す

Amazonで探す

Kindleで探す

スポンサードサーチ

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

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

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

こんなところです。

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

おわり。