マンガでわかるホームページ作成

htmlで画像の貼り方【imgタグの使い方】

画像を貼るにはimgタグを使う

htmlで画像を貼る(設置する)にはimgタグを使います。

src属性

imgタグと必ずセットで設定するのはsrc属性です。この値に画像のファイルの場所を指定します。

パスに気を付けて記載しましょう。

<img src="gazou.jpg">

画像が表示されないときは下記の可能性があります。

  • パスを間違えている
  • ファイル名を間違えている
  • 拡張子を間違えている

大文字・小文字の違いでも表示されなくなるので注意です。
パスについては下記の記事で説明します。

width,height属性

画像の横幅(width)高さ(height)を指定します。

<img src="gazou.jpg" width="200" height="100">

「px」などの単位は入れませんが、単位はpxです。

設定していない場合は画像本来の最大サイズが表示されます。

レスポンシブ対応(スマホ対応)をするときはCSSを以下のようにしておくことをオススメします。

img{
max-width:100%;
height:auto;
}

これはimgの横幅を最大で100%にしています。これによりブラウザの横幅が小さくなってもはみ出ないようにできます。

それより小さい画像の場合はその画像の最大幅になるだけで必要以上に大きくなるものではありません。

height:autoを指定するとアスペクト比を維持し、画像の横幅(width)に応じて自動で高さを調節してくれます。

このように横幅・高さはCSSで調整できるのでwidth,height属性を設定する必要は特にありません。width,height属性を指定してかつCSSでもwidth,heightを指定している場合CSSが優先されます。

 

width,height属性を設定するメリットとしては画像の読み込みよりも先に縦横の領域を確保するので後からカクカク広がることがないということくらいです。

alt属性

alt属性には画像代替文字を設定します。

画像代替文字とは呼んで字のごとく、画像の代わりになる文字です。

<img src="gazou.jpg" alt="○○の写真">

初心者にとって理解に苦しむのがalt(オルト)属性です。

以下詳しく説明しますが、alt属性はなくても画像表示できるので興味ある方だけ読んでみてください。

alt属性を設定する理由

1.Google(SEO)のため

右クリックから「ソースの表示」をするとhtmlソースが見えますね?Googleなどのロボットはこのソースは見ることができても、写真がなんなのか判断できません。画像がどれだけ重要だとしてもGoogleはわからないのです。

そこでテキストにすることでGoogleに何の画像なのか伝えるというものです。Googleに伝わるということはSEOにも一定の効果があるということです。

2.目の不自由なかた(読み上げソフト)のため

目の不自由なかたもあなたと同じようにインターネットを便利に使っています。

目が見えないのにどうやってインターネット使ってるの?と思ったでしょう。

読み上げソフトというものを使っています。

読み上げソフトがインターネット上のテキストを読み上げ、目の不自由なかたは耳で情報を集めているわけです。

 

画像も当然見えません。読み上げソフトも何の画像かわかりません。

そこでalt属性です。

alt属性のテキストは読み上げることができます。

altには何を設定すればいい?

まったく文字のない写真だとか、逆に文字だらけのポスターだとかあったときにaltになんて設定すればいいのか困りますよね。

基本的にはその画像がなく、代わりに文字が表示されたときに、わかりやすく意味が伝わるか、ということを考えてみてください。

altが設定されていることでかえってわかりづらくなっていないか、画像とalt+周辺のテキストを比較して情報量が変わっていないか判断してみてください。

altは不要なときでも設定する

altの値が不要であってもalt属性自体は以下のように設定したほうがいいらしいです。

<img src="gazou.jpg" alt="">

これによって読み上げソフトがそこに画像があることがわかるそうです。

まとめ

画像を貼る(imgを設定する)ときは以下のように書く

<img src="gazou.jpg" alt="">

関連記事