【HTML】imgタグでドキュメント内に画像を入れ、配置を設定する方法を解説

このページについて

このページではHTMLで使えるimgの使い方を解説しています。

imgタグ

imgはimageから来ている通り、画像を扱うことのできるタグになります。基本的には画像を設置するのが主な役割といえます。

imgは正確には「画像を埋め込む」わけではなく、「画像のサイズ分のスペースを確保し、URL先にある画像を取得して表示する」という機能です。そして画像特有の細かい注意点などがいくつかあります。

• 注意点1

後半で詳しく解説しますが、imgには2つの必須属性があります。1つはsrc属性で、画像のリソース(URLなど)を設定する属性になります。画像のリンクを取得して表示するのだから当然といえば当然ですね。次にalt属性です。これは画像を表示できない場合に、代わりに表示するテキストをセットします。スクリーンリーダを使用している方向けへの画像の説明にも使用されるので必須です。

• 注意点2

上の2つの必須属性に加えて、画像の高さと幅もセットしておきましょう。height属性と、width属性ですね。これらが必要な理由は「ドキュメントの読み込み中と読み込み完了時で画像の分だけテキストが上下移動する」のを防ぐためです。これはGoogleのCLS(Cumulatve Layout Shift)と呼ばれるウェブ指数に影響を与えます。あらかじめ画像の高さと幅がセットされていれば、imgがその領域を確保するのでCLSへの影響はありません。

この2つの注意点はimgを扱う上でかなり重要となるのでしっかり覚えておきましょう。

imgタグの書き方

ここからは実際にimgの書き方を紹介していきます。上でも書いた通り、必須の属性が2つ+あると何かといいことがある属性2つの計4つは最初からセット扱いで書いていきます。

<img src="画像URL" alt="代替テキスト" height="200" width="200">

imgは終了タグの省略が可能です。そのため上記のような書き方でも問題ありません。ワードプレスなどでは自動で最後にスラッシュが挿入されますが、それはどちらでも構いません。

上のコードの場合は縦と横が200の画像を表示するエリアを確保し、画像URLの画像を表示するという書き方になります。

画像にリンクを与えたい場合もあると思います。その場合はaタグの中に入れて仕舞えばOKです。

<a href="リンク先ページURL"><img src="画像URL" alt="代替テキスト" height="高さ" width="横幅"></a>

こんな感じで書きます。通常のaタグは開始タグ→ドキュメントに表示するテキスト→終了タグの順番に書きますが、画像を使用する場合はドキュメントに表示するテキストを画像に置き換えるだけでOKです。

複数の画像を横並びに表示したい場合、CSSのflexを使用します。

まずはHTML側のコードから。こちらは広く使われているulタグ・liタグを使った方法を紹介します。

<ul class="yoko">
<li class="yimg">
 <img src="画像URL" alt="代替テキスト" height="高さ" width="横">
</li>
<li class="yimg">
 <img src="画像URL" alt="代替テキスト" height="高さ" width="横">
</li>
</ul>

今回、classを2つ使用しています。1つはulタグに付与したyokoというクラス。ドキュメント中にulタグを使った際に影響しないように、独自のクラスを付与しています。ただしクラスなので、1ドキュメント中に複数のyokoクラスをセットすることが可能で、そのクラスに対しては全てに影響します。

2つ目はyimgです。これも上記のyokoクラス同様に、特定のクラスの全てに影響はするけど普通のliタグには影響しないようにしています。

そして以下がCSSです。

ul.yoko{
 display: flex;
}
li.yimg{
 margin: 1px;
 list-style:none;
}

トータルでも3行です。これは「ulタグのyokoクラスをフレックスにする」というのと、「liタグのyimgクラスのマージン(四辺の余白)を1pxにし、リストの先頭文字を非表示(none)にする」という書き方です。

実際に実行すると、ワニガメの画像2枚を横並びにすることができました。

通常のリストの先頭文字がなく、画像が横並びになっていることが確認できます。

新聞記事などのようのに、画像と文章が横並びになっているやつもHTMLとCSSで実現できます。ただし画像の周囲にテキストを表示するタイプは読みにくいのでやめておいた方がいいかなと思うのが個人的な意見です。

一番簡単かつ、レスポンシブデザインにも使用できる書き方はやはりflexを使用する方法です。

以下はまずHTML側です。

<div class="ypimg">
<img src="画像URL" alt="代替テキスト" height="高さ" width="よこ幅" class="yi">
<p>文章</p>
</div>

まず全体を一括でフレックスにするために、1つの大きなコンテナを作成します。今回はというかいつでもどこでも大体便利なdivタグの出番です。クラスはypimgとしました。画像にclass=”yi”を付与した以外は特段変わったところはありません。

以下はCSS側です。

.ypimg{
display: flex;
}
.yi{
width:100%;
height:240px;
}

まずは2つの要素を囲んでいるdivコンテナにフレックスを付与し、中に入れる画像の大きさを強引に指定しています。これはなぜかheight:autoが有効にならず画像が引き伸ばされて変形していたので、その対策にと強引に数値設定しています。実際にブラウザで見てみると以下のようになります。

ワニガメカミツキガメの仲間だけど、カミツキガメほど攻撃性は高く無いとされています。
ただし人間の指を食いちぎるほどの力を持っているため、危害を加えない方が賢明です。
食性は動物食性が強いものの、時期によっては植物食傾向が強くなる個体もいるそうです。
日本ではかみつきがめ科自体が動物愛護法で特定動物に指定されているため、ペットとして飼育するには自治体の許可が必要となります。以前はペットとしての流通量が多かったものの、特定動物に指定されたことをうけてか流通量は激減しました。

こんな感じで画像の真横に文章をくっつけることができます。ただし画像の下の部分は空いたままになります。これを下にも表示させるとなると変なところで改行されることが頻発するので自分はやめました。

imgタグで使える属性

imgで使える属性はいくつかありますが、必須なものを上に表示しています。

こんな感じでそこそこ多いです。上で書いた4種はimgの書き方のところとかを参考にしてもらえればそれで十分なんですが、他はあまり使わないので参考程度にって感じでいいと思います。

そしてグローバル属性・イベント属性の両方をサポートしています。

まとめ

imgは画像をドキュメントに表示する機能を持っています。扱い方次第ではコンテンツのレイアウト構築の際にズレが発生したりするので、あらかじめ高さ・横幅を指定しておきましょう。そしてsrc属性・alt属性は必須なのでこの4つは必ず確認しておきましょう。

CSSとの併用で画像の並び方を工夫することもできるので、色々と試してみるのもいいと思います。

HTMLの基礎

HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。

HTMLタグで押さえておきたいポイント3選

HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。

HTMLタグと属性一覧

HTMLタグと属性の一覧です。

tableタグ生成ページ

tableタグの基本形を生成できるページです。

ulタグ・olタグ生成ページ

ulタグとolタグの基本形を生成できるページです。