img要素は、ウェブページに画像ファイルを挿入します。src属性でページに挿入する画像ファイルの場所を指定し、alt属性で画像の代替テキストを指定します。img要素は、インライン要素であり、終了タグのない空要素です。
※補足説明
近年、画像のサイズは、スマートフォンでの閲覧が浸透し、デバイスに合わせてサイズ変動させる技術(ビューポート)が一般的になり、HTMLには、画像のサイズを記述しない仕様になりました。今回は、試験対策のため画像サイズを記述する練習を行います。「Webクリエイター能力認定試験(スタンダード版)」では、パソコン仕様のみでの問題が出題されるため、画像のサイズを記述する練習を行っておきましょう。
※ img要素は、インライン要素となりますので直接bodyへ配置することは避け、ブロック要素で囲います。
画像の配置
以下の画像をコピーし、「images」フォルダーへペーストしましょう。
画像ファイル
ウェブサイトには、大量の画像ファイルが使用されています。これから、cssやjsなどファイルがどんどん増えていきますので、画像フォルダーは、専用の「images」というフォルダーの中に収納して呼び出すようにします。
imagesというフォルダーの中にある画像を呼び出すので、src属性のパスは「images/bear.png」となります。拡張子に注意しましょう。
alt属性とは
alt属性(オルト属性)は、一般的に「画像の説明、あるいは代替テキスト」となります。alt属性を記述することで、ウェブブラウザで画像が表示されない際には、画像の代替テキストとして表示されます。
コンテンツを音声に変換して読み上げるソフト(スクリーンリーダー)が使われている場合、alt属性が読み上げられますので、視覚障碍者の方にも理解してもらいやすくなります。読み上げる必要性のない画像の場合などは、あえてalt属性は、空白にしておく場合もあります。
画像のサイズ
画像の大きさを確認し、幅と高さを指定します。img要素のwidth属性で幅を指定し、height属性で高さを指定します。単位「px」は必要なく数値のみを指定します。alt属性の記述場所は、widthの前でも後ろでも、構いません。
<p><img src="images/bear.png" width="640" height="460" alt="森のくまさん" ></p>001.練習問題
以下の画像も配置してみましょう。
