「HTML」「CSS」で画像の表示

HTMLでの表示方法

「HTML」で表示するには<img>タグを使用します。
「HTMLファイル」に次のように記述します。

<img src="画像ファイルのパス" alt="画像の説明">

src属性だけでも使えるのですが、alt属性はSEO対策になりますので使用した方が良いです。
※alt属性には短くてわかりやすいものをつけてください。

「CSS」で表示するにはbackground-imageプロパティを使用します。「HTMLファイル」にdivタグで画像表示する場所を指定し、class属性もつけましょう。
そして「HTMLファイル」「CSSファイル」は以下のようになります。

<div class="img_range"></div>

.img_range{
  background-image:url(画像のパス);
  width:表示範囲幅;
  height:表示範囲高さ;
}

※cssはパスを「””」で囲わないので少し注意してください。
「background-image」は指定する値によって表示画像をいじれますので、気になる方は調べてみてください。今回は最低限の説明とさせていただきます。

srcset属性は、閲覧ユーザの端末のスクリーンによって、表示画像を切り替えます。 あらかじめPCのみ、スマホのみ、に対応した画像を作っておく必要があります。
※IEは対応していません。
基本的な書き方は次の通りです

<img srcset="画像のパス 表示する時のスクリーン幅">

次は具体的なサンプルコードです。

<img src="img/large.jpg"
      srcset="img/small.jpg 320w,
                img/middle.jpg 640w,
                img/large.jpg 1024w"
        >

こちらに上記コードのサンプルページを載せました。
対応していないブラウザでは、src属性で指定した画像が表示されます。 「w」という単位は「px」と考えて問題ないと思います。指定した画像すべてではなく、条件にあった画像だけが読み込まれます。

「id」か「class」タグを付けて「width属性」を「100%」に指定してください。
次は「class」タグを付けた場合のサンプルコードです。

.sample{
  width:100%;
}

画像は「html」より「css」で表示した方が、ページの表示が速いように感じると聞きます。しかし、昨今のデータ通信速度などを考えるとそこまで神経質になって考える必要はないと思います。画像の３～４枚程度どうって事ないですよね( ◠‿◠ ) 。