TIL

Today I Learned. 知ったこと、学んだことを書いていく

画像を表示する imgタグ - HTML

imgタグを使うことで画像を表示できる

<img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" 
     width="横幅" height="高さ">

例)

<img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600">

width属性とheight属性

画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい?

画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像の読み込みに時間が掛かる場合にも、 指定したサイズ分の画像表示スペースが空けられて先にテキスト部分を表示するので、閲覧者にとっては表示速度が早く感じられるからです。

-HTMLタグリファレンス

ドットインストールでも、できるだけ指定する方がいいって言ってたから、指定するようにしよ!

alt属性

画像が表示されなかった場合に表示するテキスト。

ページを読み上げる機能(スクリーンリーダー)を使っていた場合、alt属性に指定したテキストが本文にも記述されている場合、2回読まれたと思われてしまうため、alt属性には何も指定しないっていう使い方もある。

<img src="images/asakusa.jpg" alt=""><br>
浅草の風景

ウィンドウサイズに合わせて画像を縮小する

縮小したいクラスに以下のスタイルを設定する

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
  • display: block;:要素をblockにする?
  • max-width: 100%;:横幅をウインドウサイズにする
  • height: auto;:高さを自動で調整する

それぞれのプロパティをコメントアウトしてみた結果

max-widthとheightは重要!!!

  • display: block;:何も変わらなかったため、指定する必要があるのかよくわからない
  • max-width: 100%;:ウィンドウサイズを変えると、画像の横幅が変わった!
  • height: auto;:高さが変わらなくなってしまった。ウィンドウサイズを変えると縦長になってしまった

display:block;ってなに!?今度調べてみよ

参考文献