「imageタグの使い方がわからない」
そんな疑問に答えます。
この記事では、THML初心者向けに、【imageタグ】を使って画像を表示する方法を解説します。
imgタグと一緒に使用する、src属性、alt属性、title属性の使い方も紹介。
サンプルコードを使って実践してみましょう。
imageタグの使い方
HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。
<img src="image.png" alt="楽器の写真" title="写真のタイトル">それぞれ1つずつ確認していきましょう。
ここには画像を表示しますよ、ということを示します。
ソースは、出所や源泉という意味です。
表示する画像ファイルの、ファイル名やファイルの場所を示します。
画像のタイトルを指定します。
オルタナティブ、代替の略です。
目の不自由な方向けの読み上げ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は中央です。
中央揃えをしたい場合など、どの領域において中央にしたいのか、というのを意識してくださいね。
