ブログ

【imageタグ使い方】HTMLでimageタグを使って画像を表示する方法

投稿日:2022年7月1日 更新日:

「imageタグの使い方がわからない」

そんな疑問に答えます。

この記事では、THML初心者向けに、【imageタグ】を使って画像を表示する方法を解説します。

imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介。

サンプルコードを使って実践してみましょう。

imageタグの使い方

HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。

<img src="image.png" alt="楽器の写真" title="写真のタイトル">

それぞれ1つずつ確認していきましょう。

●imageタグ <img … >
ここには画像を表示しますよ、ということを示します。

●ソース属性 src=”…”
ソースは、出所や源泉という意味です。
表示する画像ファイルの、ファイル名やファイルの場所を示します。

●タイトル属性 title=”….”
画像のタイトルを指定します。

●オルト属性 alt=”…”
オルタナティブ、代替の略です。
目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。

【応用】画像の表示スタイルを調整する

画像の表示スタイルは、imgタグにCSSを指定して調整していきます。

画像の大きさを調整する

imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。

はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。

画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。

【CSS】

img.image1{
    width: 50px;
}

img.image2{
    height: 40px;
}

img.image3{
    width: 100%;
}

幅や高さは、ピクセルを示すpxや、親要素の何倍かを示す%という単位で指定します。

意識してほしいのは、画像ファイルそれぞれにある縦幅と横幅の比率です。

imgタグのCSSでは、幅か高さ、どちらかを指定すると、縦横比を維持したまま、もう一方が自動的に決まります。

そして両方を指定すると、縦横比を崩して高さと幅を変更するので、潰れたような画像になってしまいます。

そのため、imgタグにCSSを指定するときは、幅か高さどちらかを指定して、もう一方は指定しないことが多いです。

imgタグにCSSを指定して幅や高さを調整するときは、注意してくださいね。

左右中央揃えを調整する

画像の表示位置を調整する場合、左寄せ、右寄せ、中央寄せの指定がシンプルで使いやすいです。

imgタグを囲っている親要素の中で、imgタグを左右中央のどの位置に表示するか指定します。

【HTML】

<div class="left">
    <img src="image.jpg">
</div>

<div class="center">
    <img src="image.jpg">
</div>

<div class="right">
    <img src="image.jpg">
</div>

上記HTMLのように、imgタグを囲ったdiv要素を作ります。

親要素の領域のなかで、画像を左右中央どこに表示するかは、親要素にtext-alignというCSSを付与します。

【HTML】

div.left {
    text-align: left; 
}

div.center {
    text-align: center; 
}

div.right {
    text-align: right; 
}

left左寄せ、rightは右寄せ、centerは中央です。

中央揃えをしたい場合など、どの領域において中央にしたいのか、というのを意識してくださいね。

-ブログ
-

執筆者:

関連記事

大阪一人旅

【大阪観光ガイドマップ】一人旅で新しい自分探しをしたら、新しい出会いが生まれました

みんな元気? ふと、一人旅がしたくなって大阪に来ました。 旅の目的は「新しい自分探し」 そんなカッコいいものではなく 今のうちにできることを今やっておこうかなって 動機はこれくらいの軽いノリです。 た …
ゴルフ 痩せる

【ゴルフで痩せる】ゴルフでダイエット!素振りのカロリー消費量は?ゴルフボールで美脚も!

ゴルファーのみなさん、こんにちは! 「ゴルフで痩せた」 SNSで友達のこんな書き込みをみて、ゴルフで痩せられるの?と疑問が湧いたのが、この記事を書くきっかけでした。 夏か来る前にダイエットをしよう!  …
セカンダリードミナント

【番外編】メロディの音からセカンダリードミナントを判別する方法をジャニーズのあの曲を使って解説します

皆さんこんにちは! セカンダリードミナントの番外編です。 コード進行の中で、セカンダリードミナントコード(sc.D)の見分け方のポイントを解説します。 セカンダリードミナント “セカンダリ …

【SONY ZV-1の機能】VLOGのための最先端カメラはココがすごい!

「ZV-1」は2020年6月19日発売、素早いフォーカス移動で商品レビューやYouTube動画にもおすすめなデジタルカメラです。 どういうカメラかというと 4K画質で撮れる Vlogのためのデザイン …

【ROLAND FP-30】タッチ感がめちゃくちゃ良い!買って弾いてみた感想をレビューします

みなさん、こんにちは。 僕は先日ローランド製の電子ピアノ「FP-30」を購入しました。買う前の僕はこんな感じでした。 あなた ローランドのFP-30買おうか迷ってるんだけど、後悔しないかレビューでも見 …