はじめに
本日は、画像の挿入についてまとめます
webページに掲載できる情報の１つに画像があります。
画像ひとつ載せるのにもいろんな属性が存在しています
画像を表示する「image(img)」要素
まず画像を挿入するためには「img要素」を使用します。
<img src="画像の場所・ファイル名" alt="画像の説明" title="画像やリンク先のタイトル名" width="画像の横幅" height="画像の高さ">
img要素は、src属性とalt属性をセットで書きます。
src属性は画像ファイルが置いてある場所・ファイル名を指定します。
alt属性は画像の説明を記述します。
「src属性」 (source)
表示させる画像が保存されている場所と、ファイル名を指定します。
画像ファイル名は、相対URLか、絶対URLで記述しましょう。
外部のサイトの画像ファイルを指定する
一般的に他のサイトの画像URLで指定するのはマナー違反となります。
画像の持ち主が画像を削除したり移動した場合には表示されなくなります。
著作権的な問題もあるので注意しましょう。
「alt属性 」 (alternate attribute)
表示する画像をテキストで説明します。
なんらかの理由により画像の表示がされない場合、読み上げ機能が何の画像であるかを読み上げたり、記述されたテキストが表示されます。
googleなどの検索エンジンは、画像の見た目ではなくalt属性を読み取り何の画像が掲載されているのかを理解します。
なので、alt属性には画像の内容を書きましょう。
例えば、犬の写真なら「写真」ではなく「犬」と記述します。
「ブルドックの子犬」など具体的に書ければ尚良いですが「夏の朝に眠たそうにしているかわいいブルドックの子供」のように情報の詰め込みは何を伝えたいのかが分かりにくいです。
検索エンジンに伝わりやすいよう簡潔にまとめましょう。
「title属性」
画像やリンク先のタイトルを表示します。
imgタグを続けて記述する
imgタグを連続で書くと画像が並んで表示されます。
(CSSでの記述が必要となります。)
<img src="img/sakura.jpg" width="200px" height="100px" alt="桜"><img src="img/omoide.jpg" width="200px" height="100px" alt="思い出の場所">
空要素とは？
img要素には終了タグはなく、内容を持たない単体となります。
このように内容を持たない要素を「空要素」と呼びます。
画像のサイズを指定
画像のサイズを指定する属性値はピクセル、またはウィンドウに対する％で指定します。
実際の画像の大きさではない数値を指定することも可能ですが、元のサイズより大きい数値や縦横の比率が異なる数値を入れてしまうと粗く表示されたりゆがんでしますので注意しましょう。
また、数値をいれていない属性は縦横比率を保ったなりゆきのサイズになります。
「width」属性
width属性は画像の横幅を指定します。
「height」属性
height属性は画像の高さを指定します。
まとめ
画像を掲載することにより、テキストでは表現しきれない内容を感覚的に伝えることが可能です
多くのWebサイトに当たり前のように画像が使われていますね