From 2c6ec8ea4fc822ee84f5b86426a040da1c7340bc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 7 Mar 2022 01:46:45 +0900 Subject: 2020/07/28 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/media/images/index.md | 74 +++++++++++++++----------------------- 1 file changed, 28 insertions(+), 46 deletions(-) (limited to 'files') diff --git a/files/ja/web/media/images/index.md b/files/ja/web/media/images/index.md index 30e3aefce7..6a27dfd6c5 100644 --- a/files/ja/web/media/images/index.md +++ b/files/ja/web/media/images/index.md @@ -3,63 +3,45 @@ 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 サイトへの画像の追加を扱うリソースへのリンクを紹介します。

+{{Glossary("HTML")}} の {{HTMLElement("img")}} 要素で HTML 文書に画像を埋め込むことができ、 {{HTMLElement("picture")}} 要素を使用すると[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。 -
-
-

リファレンス

+## リファレンス -

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

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

HTML

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

CSS

+### CSS -
-
{{cssxref("object-fit")}}
-
object-fit CSS プロパティは、<img> や <video> のような置換要素の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。
-
{{cssxref("object-position")}}
-
object-position CSS プロパティは、要素のボックス内で選択された置換要素内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。
-
{{cssxref("background-image")}}
-
background-image CSS プロパティは、要素の背景画像を設定します。
-
-
-
+- {{cssxref("object-fit")}} + - : **`object-fit`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば [``](/ja/docs/Web/HTML/Element/img) や [`
+- [HTML の学習: レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + - : この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なる端末でも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。 -- cgit v1.2.3-54-g00ecf