From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/media/images/index.html | 65 ++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 files/ja/web/media/images/index.html (limited to 'files/ja/web/media/images/index.html') diff --git a/files/ja/web/media/images/index.html b/files/ja/web/media/images/index.html new file mode 100644 index 0000000000..30e3aefce7 --- /dev/null +++ b/files/ja/web/media/images/index.html @@ -0,0 +1,65 @@ +--- +title: HTML での画像の使用 +slug: Web/Media/images +tags: + - HTML + - Images + - Landing + - Media +translation_of: Web/Media/images +--- +

HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。

+ +
+
+

リファレンス

+ +

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

+ +

HTML

+ +
+
{{HTMLElement("img")}}
+
HTML <img> 要素は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。
+
{{HTMLElement("picture")}}
+
HTML <picture> 要素は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 <source> 要素を考慮して、それらの中から最適なものを選択します。
+
+ +

CSS

+ +
+
{{cssxref("object-fit")}}
+
object-fit CSS プロパティは、<img> や <video> のような置換要素の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。
+
{{cssxref("object-position")}}
+
object-position CSS プロパティは、要素のボックス内で選択された置換要素内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。
+
{{cssxref("background-image")}}
+
background-image CSS プロパティは、要素の背景画像を設定します。
+
+
+
+ +
+

ガイド

+ +

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

+ +
+
画像ファイルの種類とフォーマットガイド
+
Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。
+
メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする
+
これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。
+
+ +
+
+ +

その他のトピック

+ +

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

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