画像の挿入

1.1 <img> 要素

HTMLのマルチメディアは、ウェブページの視覚的な体験を向上させる重要な役割を果たしているね。画像の挿入は、HTMLのマルチメディアのキーとなる部分なんだ。ほとんどの場合、<img> 要素が使われるよ。詳しく見てみよう:

<img> 要素はウェブページに画像を挿入するために使われるんだ。これは空要素だから、終了タグがなくて、属性だけを持っているよ。

構文

    <img src="画像のURL" alt="説明" width="幅" height="高さ">
  

    
      <img src="images/photo.jpg" alt="画像の説明" width="500" height="300">
    
  

じゃあ、<img> 要素の属性についてもう少し詳しく見てみよう

1.2 src属性

src属性 の正式名称は source （ソース）だよ。

src 属性は、ページに表示される画像ファイルのパスを指定するんだ。これは絶対パスか相対パスのどちらでもいいよ。

例:

絶対URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

相対パス:

    
      <img src="images/photo.jpg">
    
  

絶対URLはプロトコル（httpまたはhttps）、ドメイン、およびパスを含む画像への完全なアドレスなんだ。相対パスは、現在のドキュメントに対するファイルの場所を示していて、ローカルファイルと一緒に作業するのに便利だね。

1.3 alt属性

正式名称: alternative text （代替テキスト）

alt 属性は画像のテキストによる説明を提供するよ。このテキストは画像が読み込まれない場合に表示されるんだ。そして、視覚に障害のあるユーザーに画像を説明するためにスクリーンリーダーなどで使われるんだ。

例:

    
      <img src="images/sunset.jpg" alt="美しい夕日の写真">
    
  

よく書かれた代替テキストは、画像が利用できない場合にユーザーにその内容を理解させる手助けをするし、ページのSEO（検索エンジン最適化）の改善にもつながるよ。

1.4. width属性

width 属性は画像の幅をピクセルで設定するんだ。もし height 属性が指定されていない場合、画像は幅の変更に応じてその比率を保つんだ。

例:

    
      <img src="images/photo.jpg" width="500">
    
  

固定幅を使うことは画像のサイズを制御するのに便利だけど、デザインの適応性を考慮することも重要だよ。

1.5 height属性

height 属性は画像の高さをピクセルで設定するんだ。もし width 属性が指定されていない場合、画像は高さの変更に応じてその比率を保つんだ。

例:

    
      <img src="images/photo.jpg" height="300">
    
  

width属性と同様に、固定高さを使うことは便利だけど、適応性を考慮する必要があるよ。

属性を一緒に使った例

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="美しい夕日の写真" width="500" height="300">
    
  

この例では、images/sunset.jpg から画像が読み込まれ、幅500ピクセル、高さ300ピクセルで表示されるよ。もし画像が読み込まれなかった場合には、「美しい夕日の写真」というテキストが表示されるんだよ。