HTML での画像の使用

リファレンス

これらの記事では、ウェブ上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。

HTML

<img>

HTML の <img> 要素は、ウェブページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性に対応しており、画像を見られない人のために alt テキストのような重要な情報を追加することができます。

<picture>

HTML の <picture> 要素は、 0 個以上の <source> 要素と 1 個の <img> 要素を含み、様々な画面や端末のシナリオのために画像の別な版を提供します。ブラウザーは、子要素であるそれぞれの <source> 要素を考慮して、それらの中から最適なものを選択します。

CSS

object-fit

object-fit は CSS のプロパティで、置換要素、例えば <img> や <video> の中身をコンテナーに合わせるために、どのようにリサイズする可を設定します。

object-position

object-position は CSS のプロパティで、要素のボックス内で選択された置換要素内のコンテンツの配置を指定します。ボックス内の領域のうちで置換要素のオブジェクトに覆われていない部分には、要素の背景が表示されます。

background-image

background-image は CSS のプロパティで、 1 つまたは複数の要素の背景画像を設定します。

ガイド

これらの記事では、画像の種類を選択して構成するためのガイダンスを提供しています。

画像ファイルの種類と形式ガイド

ウェブブラウザーが一般的に対応ている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要素などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。

メディアのコンテナー要素の width および height 属性をアスペクト比に対応付ける

これにより、ブラウザーが画像を読み込む方法が変更され、アスペクト比がブラウザーによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。

その他のトピック

興味がありそうな関連トピック

HTML の学習: レスポンシブ画像

この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なる端末でも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。