「imgタグってどうやって使うの」や「画像を思いどおりの場所に表示するにはどうしたらよいんだろう」と悩んでいませんか？
ここでは、imgタグの正しい使い方と画像の調整方法を、初心者向けに分かりやすく解説します。
imgタグは、ホームページに画像を表示するためのタグで、とてもよく使います。
そんな重要なimgタグについて、基本から正しい使い方まで分かりやすく解説するので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- imgタグの基礎知識
- 画像の大きさを変える方法
- 画像の配置を調整する方法
- alt属性の大切さ
- レスポンシブデザインに対応する方法
- SEO対策に効果的な画像の最適化
- 画像が表示されない場合の対処法
- 【まとめ】imgタグとは
|
imgタグの基礎知識
まずは、imgタグの基礎知識からお伝えします。
imgタグとは
imgタグは、ホームページに画像を表示するためのタグです。
imgタグを使うことで、ホームページ上に画像を表示できます。
imgタグの基本的な書き方
imgタグの書き方は、下記のとおりです。
■ <img> タグの記述例
|
<img src="aaa.jpg" alt="建物の画像">
|
■ ホームページ上の表示
表示したい画像のファイル名（上記コードの場合は、aaa.jpg）を、src で指定します。
なお、imgタグは、他の一般的なタグと違って、終了タグ（閉じタグ）が無いことが特徴です。
imgタグに必須の属性
imgタグを使うときに、必ず書かなければならない属性が2つあります。
それは、 「src」と「alt」です。
■ src属性
src属性は、画像のURL（ファイル名）を指定します。
たとえば、<img src="image.jpg"> のように書きます。
■ alt属性
alt属性は、画像の説明を書きます。
もし画像が表示されないときや、画像を見ることができない人に、この説明が使われます。
たとえば、<img src="image.jpg" alt="かわいい猫の写真"> のように書きます。
その他の属性
imgタグには、ほかにもいろいろな属性があります。
ここでは、よく使う属性を紹介します。
■ width属性と height属性
widthは画像の幅、heightは高さを指定します。
たとえば、<img src="image.jpg" width="200" height="100"> のように書きます。
■ title属性
画像にマウスを重ねたときに表示されるテキストを指定します。
たとえば、<img src="image.jpg" title="かわいい猫"> のように書きます。
画像の大きさを変える方法
ここでは、画像の大きさを変える方法について、お伝えします。
画像サイズを調整する方法
画像を表示するだけでなく、そのサイズを調整することもできます。
画像の幅や高さを変えるためには、width と height という属性を使います。
たとえば、次のように書くと、画像の幅が200ピクセル、高さが100ピクセルに設定されます。
|
<img src="image.jpg" width="200" height="100">
|
幅だけ、もしくは、高さだけを指定することもできます。
この場合、画像は元の比率を保ちながら、調整されます。
|
<img src="image.jpg" width="300">
|
画像の配置を調整する方法
ここでは、画像の配置を調整する方法について、お伝えします。
画像を中央に表示する方法
画像をホームページの中でどこに配置するかも大切です。
CSS（スタイルシート）を使って、画像の配置を調整することができます。
たとえば、画像を中央に配置したい場合は、次のように書きます。
|
<img src="image.jpg" style="display: block; margin: 0 auto;">
|
このコードでは、display: block と margin: 0 auto を使って、画像を中央に配置しています。
画像を右寄せで表示する方法
画像をホームページの右側に表示したい場合は、次のように書きます。
|
<img src="image.jpg" style="display: block; margin-left: auto; margin-right: 0;">
|
このコードでは、display: block と margin-left: auto と margin-right: 0; を使って、画像を右側に配置しています。
画像の周りにスペースを作る方法
画像とテキストの間にスペースを作ることもできます。
これには、CSSの margin や padding を使います。
たとえば、次のように書くと、画像の周りに10ピクセルのスペースができます。
|
<img src="image.jpg" style="margin: 10px;">
|
alt属性の大切さ
imgタグに alt属性を付けると、視覚に障がいがある人や画像が表示されない環境でも、内容を理解できるようになります。
ここでは、alt属性の大切さについて、お伝えします。
alt属性の役割
imgタグには、alt 属性があります。
これは「代替テキスト」とも呼ばれ、画像が表示されないときに代わりに表示されるテキストです。
視覚に障がいがある人がスクリーンリーダーを使ってホームページを見るとき、このalt 属性の内容が読み上げられます。
たとえば、次のように書きます。
|
<img src="cat.jpg" alt="かわいい猫の写真">
|
この例では、もし画像が表示されなくても、「かわいい猫の写真」というテキストが表示されます。
適切な altテキストの作り方
適切なalt テキストを作るためには、画像の内容を簡単に説明することが大切です。
画像が何を表しているのか、何が写っているのかを伝えましょう。
たとえば、次のような書き方が適しています。
【悪い例】 <img src="dog.jpg" alt="犬">
【良い例】 <img src="dog.jpg" alt="芝生の上で遊ぶ茶色の犬">
|
まとめ
alt属性を付けると、視覚に障がいがある人や画像が表示されない環境でも、内容を理解できるようになります。
そのため、すべての画像にalt 属性をつけて、画像が何であるかを説明するテキストを入れるようにしましょう。
レスポンシブデザインに対応する方法
ここでは、レスポンシブデザインに対応する方法について、お伝えします。
レスポンシブデザインの基本
レスポンシブデザインとは、いろいろなサイズの画面に合わせて、ホームページのデザインを変えることです。
スマートフォンやタブレット、パソコンなど、どのデバイスでもホームページをキレイに見やすいようにするために使われます。
画像のレスポンシブ対応
画像もレスポンシブにすることができます。
これには、CSSを使います。
たとえば、次のように書くと、画像が画面の幅に合わせて自動で調整されます。
|
<img src="image.jpg" style="max-width: 100%; height: auto;">
|
このコードでは、max-width: 100% と height: auto を使って、画像の幅を画面の幅に合わせ、元の比率を保ちながら高さを自動で調整しています。
具体的な記述例
たとえば、スマートフォンで見るときに画像が大きすぎる場合、この方法を使うと画像が画面にぴったり収まります。
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="image.jpg" alt="サンプル画像">
</body>
</html>
|
この例では、CSSのスタイルを使って、すべての画像がレスポンシブになるように設定しています。
メディアクエリの使用
さらに詳しくデザインを調整するために、メディアクエリというものを使います。
これによって、画面のサイズに応じて異なるスタイルを適用することができます。
たとえば、次のように書くと、画面の幅が600ピクセル以下の場合に、特別なスタイルを適用します。
|
<style>
@media (max-width: 600px) {
img {
width: 100%;
}
}
</style>
|
このコードでは、画面の幅が600ピクセル以下のときに、画像の幅を100%に設定しています。
SEO対策に効果的な画像の最適化
画像を最適化することで、SEO対策に良い影響があります。
ここでは、SEO対策に効果的な画像の最適化について、お伝えします。
ファイルサイズを小さくする
画像のファイルサイズが大きいと、ホームページの読み込みが遅くなります。
画像のファイルサイズを小さくすることで、ページが早く表示されるようになるので、下記の方法でサイズを小さくしましょう。
・画像のファイル容量を小さくする方法 ～ ホームページの最適化 ～
画像形式の選択
画像の形式（ファイルの種類）も大切です。
一般的な形式には、JPEG、PNG、WebP などがあります。
■ JPEG
写真や多くの色を使った画像に適しています。ファイルサイズが小さくなります。
■ PNG
透明な背景や、少ない色数の画像に適しています。ファイルサイズはJPEGより大きくなります。
■ WebP
新しい形式で、JPEGやPNGよりも小さいサイズで高い画質を保てます。
ファイル名の最適化
画像ファイルの名前も重要です。
画像の内容がわかるような名前を付けると、検索エンジンが画像を見つけやすくなります。
たとえば、下記のような名前です。
|
【悪い例】 IMG1234.jpg
【良い例】 beautiful-mountain-scenery.jpg
|
画像が表示されない場合の対処法
最後に、画像が表示されない場合の対処法をご紹介します。
画像のパスが間違っている
画像ファイルの場所（パス）が間違っていると、画像が表示されません。
ファイルの場所が正しいか確認しましょう。
|
<img src="images/photo.jpg" alt="写真">
|
ファイル名が間違っている
画像のファイル名が間違っている場合も、画像は表示されません。
ファイル名が正しいか確認しましょう。大文字と小文字の区別も大切です。
画像ファイルが存在しない
画像ファイルがサーバーにアップロードされていないと、表示されません。
ファイルが正しくアップロードされているか確認します。
ブラウザのキャッシュの問題
ブラウザが古いデータを表示している場合があります。
ブラウザをリロードして、画像が表示されるかどうかを確認してみましょう。
【まとめ】imgタグとは
imgタグとは？画像を表示する方法や配置の調整を徹底解説！の内容は、いかがでしたでしょうか？
imgタグは、ホームページに画像を表示するためのタグです。
imgタグを使うことで、ホームページ上に画像を表示できます。
このimgタグは、ホームページを作る上で、とてもよく使うタグです。
そのため、自分の思いどおりの大きさで画像を表示させたり、自分が配置したいと思った場所に画像を表示させられるようにしましょう。
ホームページに画像を表示することは、とても大切になるので、ぜひマスターしていきましょうね。
