From c1295f6a26a2a026a287939e0dd3a8270c7f5db8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 11 Jun 2023 00:11:22 +0900 Subject: [PATCH] =?UTF-8?q?2023/05/03=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 68 ++++++++++++++++ .../index.md | 80 +++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md create mode 100644 files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md diff --git a/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md new file mode 100644 index 00000000000000..7a9a0a783d24da --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md @@ -0,0 +1,68 @@ +--- +title: "スキルテスト: HTML 画像" +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images +l10n: + sourceCommit: c2274293475b0a5b4febf85a49c1f91bf43ebac7 +--- + +{{learnsidebar}} + +このスキルテストの目的は、あなたが[画像と HTML への埋め込み](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)を行う方法を理解しているかどうかを評価することです。 + +> **メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。 +> +> 行き詰まったら、助けを求めましょう。このページの最下部の[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。 + +## 課題 1 + +このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。 + +- 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は `blueberries.jpg` という名前で、カレントフォルダー内の `images` というフォルダーに入っています。 +- 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。 +- `` 要素に適切な `width` と `height` を与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。 + +下記のライブコードを更新して、完成例を再現してみてください。 + +{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}} + +> **注目:** +> +> 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images1-download.html)しましょう。 + +## 課題 2 + +この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。 + +下記のライブコードを更新して、完成例を再現してみてください。 + +{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 1000)}} + +> **注目:** +> +> 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images2-download.html)しましょう。 + +## 課題 3 + +この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。 + +下記のライブコードを更新して、完成例を再現してみてください。 + +{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 1000)}} + +> **注目:** +> +> 自分のエディターやオンラインエディターで作業する場合は、[この課題の開始時点のものをダウンロード](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images3-download.html)しましょう。 + +## 評価またはさらなるヘルプ + +この例は、上記のインタラクティブエディターで練習することができます。 + +この作品を評価してほしい、行き詰まっているので相談に乗ってほしいという方は次のようにしてください。 + +1. 作品をオンラインの共有可能なエディター、例えば [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。 +2. [MDN Discourse forum 学習カテゴリー](https://discourse.mozilla.org/c/mdn/learn/250)に評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。 + + - 「HTML 画像、スキルテスト 1 のための評価希望」のような説明的なタイトル。 + - すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。 + - 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。 + - 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。 diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md new file mode 100644 index 00000000000000..d093a6c437e16b --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md @@ -0,0 +1,80 @@ +--- +title: "スキルテスト: マルチメディアと埋め込み" +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding +l10n: + sourceCommit: c2274293475b0a5b4febf85a49c1f91bf43ebac7 +--- + +{{learnsidebar}} + +このスキルテストの目的は、あなたが [HTML への動画および音声コンテンツの埋め込み](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)を行う方法、および [object、iframe およびその他の埋め込み技術](/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)の使い方を理解しているかどうかを評価することです。 + +> **メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業することが便利な場合もあります。 +> +> 行き詰まったら、助けを求めましょう。このページの最下部の[評価またはさらなるヘルプ](#評価またはさらなるヘルプ)の節をご覧ください。 + +## 課題 1 + +この課題では、単純な音声ファイルをページに埋め込んでいただきます。必要なことは次の通りです。 + +- 音声ファイルのパスを適切な属性に追加して、ページに埋め込みましょう。音声は `audio.mp3` という名前で、カレントフォルダー内の `media` というフォルダーの中に入っています。 +- ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。 +- `