画像を表示する imgタグ - HTML
imgタグを使うことで画像を表示できる
<img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" width="横幅" height="高さ">
例)
<img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600">
width属性とheight属性
画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい?
画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像の読み込みに時間が掛かる場合にも、 指定したサイズ分の画像表示スペースが空けられて先にテキスト部分を表示するので、閲覧者にとっては表示速度が早く感じられるからです。
ドットインストールでも、できるだけ指定する方がいいって言ってたから、指定するようにしよ!
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;
ってなに!?今度調べてみよ
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る