From 36cd7922a212d9ba7b9c1c54f89e4191706185a4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 10 Jun 2023 19:04:39 +0900 Subject: [PATCH] =?UTF-8?q?2023/05/22=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=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mozilla_splash_page/index.md | 14 +-- .../other_embedding_technologies/index.md | 110 +++++++++++------- 2 files changed, 73 insertions(+), 51 deletions(-) diff --git a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 6a42891762d0a1..d202c5b8871df1 100644 --- a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -2,7 +2,7 @@ title: Mozilla のスプラッシュページ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page l10n: - sourceCommit: ace1400b3b5cf252d6afc0caaccf170d0316c15e + sourceCommit: 0b2ed45bea188abc27cdd92c3faffcb7483d3314 --- {{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} @@ -28,7 +28,7 @@ l10n: ## 出発点 -この評価試験を開始するには、github の [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/) ディレクトリーにある HTML とすべての画像を取得する必要があります。 [index.html](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/index.html) の内容をローカルドライブの新しいディレクトリーの `index.html` というファイルに保存します。 それから、[pattern.png](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) を同じディレクトリーに保存します（画像を右クリックして保存するオプションを選びます）。 +この評価試験を開始するには、GitHub の [mdn-splash-page-start](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start/) ディレクトリーにある HTML とすべての画像を取得する必要があります。 [index.html](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/index.html) の内容をローカルドライブの新しいディレクトリーの `index.html` というファイルに保存します。 それから、[pattern.png](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) を同じディレクトリーに保存します（画像を右クリックして保存するオプションを選びます）。 [originals](https://github.com/mdn/learning-area/tree/main/html/multimedia-and-embedding/mdn-splash-page-start/originals) ディレクトリーの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディターを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリーに保存する必要があります。 @@ -72,7 +72,7 @@ l10n: 正しい画像と正しいリンクが一致していることを確認してください。 -> **メモ:** `srcset` と `sizes` の例を適切にテストするには、サイトをサーバーにアップロードする必要があります ([Github ページ](/ja/docs/Learn/Common_questions/Using_Github_pages)を使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の[ネットワークモニター](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)などのツールを使用して正しく動作しているかどうかをテストできます。 +> **メモ:** `srcset` と `sizes` の例を適切にテストするには、サイトをサーバーにアップロードする必要があります ([GitHub ページ](/ja/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)を使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の[ネットワークモニター](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)などのツールを使用して正しく動作しているかどうかをテストできます。 ### アートディレクションされたレッサーパンダ @@ -99,9 +99,9 @@ l10n: 1. [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), [Glitch](https://glitch.com/) などのオンライン共有エディターに、自身の作品を入れてください。 Glitch は画像のようなアセットをアップロードできるので、この例では Glitch の方が良いかもしれませんが、他のツールはそうではありません。 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250) に、評価や助けを依頼する投稿を書きます。投稿には、以下を記載してください。（訳注: やりとりは英語になります。） - - "Assessment wanted for Mozilla splash page" のような説明的なタイトル。 - - すでに保有されている内容や、私たちに希望されること。例えば、行き詰って助けが必要な場合や、評価を希望される場合は、その旨を指示してください。 - - 評価したい、あるいは助けが必要な例へのリンクを、オンライン共有エディターで表示します（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。 - - 実際のタスクまたは評価ページへのリンク。そうすると私たちがヘルプが必要な質問を探すことができます。 + - "Assessment wanted for Mozilla splash page" のような説明的なタイトル。 + - すでに保有されている内容や、私たちに希望されること。例えば、行き詰って助けが必要な場合や、評価を希望される場合は、その旨を指示してください。 + - 評価したい、あるいは助けが必要な例へのリンクを、オンライン共有エディターで表示します（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。 + - 実際のタスクまたは評価ページへのリンク。そうすると私たちがヘルプが必要な質問を探すことができます。 {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} diff --git a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 9b1e40e0b7d815..efb5c4526f18d7 100644 --- a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -2,7 +2,7 @@ title: object から iframe まで — その他の埋め込み技術 slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies l10n: - sourceCommit: bf7b8b744aba00d0457f4636e0940d3ec162931b + sourceCommit: 0b2ed45bea188abc27cdd92c3faffcb7483d3314 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} @@ -68,18 +68,21 @@ l10n: ```html hidden

ライブ出力

-
-
+

編集可能なコード

-

Esc を押すとコード領域からフォーカスを移動させることができます（Tab はタブ文字を挿入します）。

+

+ Esc を押すとコード領域からフォーカスを移動させることができます（Tab はタブ文字を挿入します）。 +

- +
- - + +
``` @@ -106,10 +109,10 @@ body { ``` ```js hidden -const textarea = document.getElementById('code'); -const reset = document.getElementById('reset'); -const solution = document.getElementById('solution'); -const output = document.querySelector('.output'); +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); let code = textarea.value; let userEntry = textarea.value; @@ -117,38 +120,39 @@ function updateCode() { output.innerHTML = textarea.value; } -reset.addEventListener('click', function() { +reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; - solution.value = '答えを表示'; + solution.value = "答えを表示"; updateCode(); }); -solution.addEventListener('click', function() { - if(solution.value === '答えを表示') { +solution.addEventListener("click", function () { + if(solution.value === "答えを表示") { textarea.value = solutionEntry; solution.value = '答えを隠す'; } else { textarea.value = userEntry; - solution.value = '答えを表示'; + solution.value = "答えを表示"; } updateCode(); }); -const htmlSolution = '\n\n'; +const htmlSolution = + '\n\n'; let solutionEntry = htmlSolution; -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); +textarea.addEventListener("input", updateCode); +window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead -textarea.onkeydown = function(e){ +textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault(); - insertAtCaret('\t'); + insertAtCaret("\t"); } if (e.keyCode === 27) { @@ -161,7 +165,10 @@ function insertAtCaret(text) { let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length); + const back = textarea.value.substring( + textarea.selectionEnd, + textarea.value.length + ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; @@ -172,10 +179,10 @@ function insertAtCaret(text) { // Update the saved userCode every time the user updates the text area code -textarea.onkeyup = function(){ +textarea.onkeyup = function () { // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code - if(solution.value === '答えを表示') { + if(solution.value === "答えを表示") { userEntry = textarea.value; } else { solutionEntry = textarea.value; @@ -189,17 +196,27 @@ textarea.onkeyup = function(){ ## iframe の詳細 -簡単で楽しかったでしょう？ {{htmlelement("iframe")}} 要素は、他のウェブ文書を現在の文書に埋め込むことができるように設計されています。これは、直接制御できない可能性のある第三者のコンテンツをウェブサイトに組み込むのに適していて、独自のバージョンを実装する必要はありません — オンライン動画プロバイダーの動画、 [Disqus](https://disqus.com/) のようなコメントシステム、オンライン地図プロバイダーの地図、広告バナーなど。このコースで使用しているライブ編集可能な例は、`` のタグの間に、ブラウザーが `