From 655dcf66550eccbff3214ec35910f187c127efd8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Dec 2024 01:06:00 +0900 Subject: [PATCH] =?UTF-8?q?2024/12/20=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=9B=B4=E6=96=B0=20(#25226)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../advanced_text_features/index.md | 257 +----- .../basic_html_syntax/index.md | 154 ++-- .../creating_links/index.md | 75 +- .../headings_and_paragraphs/index.md | 802 +----------------- .../structuring_content/html_images/index.md | 96 +-- .../html_table_basics/index.md | 144 +--- .../html_video_and_audio/index.md | 72 +- .../marking_up_a_letter/index.md | 61 +- .../mozilla_splash_page/index.md | 45 +- .../planet_data_table/index.md | 28 +- .../structuring_a_page_of_content/index.md | 35 +- .../structuring_documents/index.md | 134 +-- .../webpage_metadata/index.md | 81 +- 13 files changed, 432 insertions(+), 1552 deletions(-) diff --git a/files/ja/learn_web_development/core/structuring_content/advanced_text_features/index.md b/files/ja/learn_web_development/core/structuring_content/advanced_text_features/index.md index e17f37aa825fdb..1d0d7303078ff2 100644 --- a/files/ja/learn_web_development/core/structuring_content/advanced_text_features/index.md +++ b/files/ja/learn_web_development/core/structuring_content/advanced_text_features/index.md @@ -1,237 +1,45 @@ --- -title: 高度なテキスト整形 +title: 高度なテキスト装飾 slug: Learn_web_development/Core/Structuring_content/Advanced_text_features -original_slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting l10n: - sourceCommit: 960b382072f417a71194bf906261d9a6d1519df1 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}} +{{LearnSidebar}} -テキストの整形のための HTML には他にも多くの要素がありますが、これは [HTML テキストの基礎](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマークアップについて学習します。 +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} + +テキストの装飾のための HTML には他にも多くの要素がありますが、これは[強調と重要性](/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance)の記事には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマークアップについて学習します。 - +
前提条件: - HTML を始めように載っている、基本的な HTML を理解していること。 - HTML テキストの基礎に載っている、 HTML のテキスト整形。 + 基本的な HTML の構文に載っている、基本的な HTML に精通していること。 見出しと段落およびリストなどのテキストレベルの意味付け。
目的:学習成果: - 高度な意味付け機能をマークアップするための、あまり知られていない HTML 要素を学ぶ。 +
    +
  • 引用。
    • +
  • 略語と頭字語。
    • +
  • 連絡先。
    • +
  • 時刻と日付。
    • +
  • 上付き・下付き文字。
    • +
-## 説明リスト - -HTML テキストの基礎では、HTML で [基本的なリストをマークアップする](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#リスト)方法を見てきました、しかしたまに出てくる第 3 のリスト — **説明リスト** — については触れていませんでした。このリストの目的は、項目とそれに関連する説明を一緒にマークアップすることで、用語の定義や、質問と回答などに使います。用語の定義の例を見てみましょう。 - -```plain -独り言 (soliloquy) -ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。 -独白 (monologue) -ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。 -傍白 (aside) -ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。 -``` - -説明リストは他の種類のリストと違うラッパー — {{htmlelement("dl")}} を使います。それぞれの用語を {{htmlelement("dt")}} （description term、説明用語）要素で囲み、それぞれの説明は {{htmlelement("dd")}} （description definition、説明定義）要素で囲みます。 - -### 説明リストの例 - -例をマークアップしましょう。 - -```html -
-
独り言 (soliloquy)
-
- ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。 -
-
独白 (monologue)
-
- ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。 -
-
傍白 (aside)
-
- ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。 -
-
-``` - -ブラウザーの既定のスタイルでは、説明を用語からいくらかインデントします。 MDN のスタイルはこの慣習にほぼ従いますが、用語を太字にします。 - -{{EmbedLiveSample('Description_list_example', '100%', '285px')}} - -### 1 つの用語に複数の説明 - -なお、例えば、単一の用語に複数の説明を持たせることも可能です。 - -```html -
-
傍白 (aside)
-
- ドラマでは、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。 -
-
- 文章では、現在のトピックに関連するコンテンツの一部ですが、本文の流れに直接合わないため、近くに表示されます（多くの場合、横に並んでいる枠の中に入ります）。 -
-
-``` - -{{EmbedLiveSample('Multiple_descriptions_for_one_term', '100%', '193px')}} - -### アクティブラーニング: 定義リストのマークアップ - -説明リストを作ってみましょう。入力欄の生テキストに要素を追加して、出力欄に説明文のリストとして現れるようにしましょう。お望みなら、自身の用語や説明文を使用してみるのもいいでしょう。 - -間違えたら、常に _リセット_ ボタンを使用してリセットすることができます。本当に行き詰まったら、_答えを表示_ ボタンを押して、答えを見ることができます。 - -```html hidden -

ライブ出力

- -
- -

編集可能なコード

-

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

- - - -
- - -
-``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -const textarea = document.getElementById("code"); -const reset = document.getElementById("reset"); -const solution = document.getElementById("solution"); -const output = document.querySelector(".output"); -const code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -const htmlSolution = - "
\n
Bacon
\n
The glue that binds the world together.
\n
Eggs
\n
The glue that binds the cake together.
\n
Coffee
\n
The drink that gets the world running in the morning.
\n
A light brown color.
\n
"; -let solutionEntry = htmlSolution; - -reset.addEventListener("click", () => { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "答えを表示"; - updateCode(); -}); - -solution.addEventListener("click", () => { - if (solution.value === "答えを表示") { - textarea.value = solutionEntry; - solution.value = "答えを隠す"; - } else { - textarea.value = userEntry; - solution.value = "答えを表示"; - } - 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 = (e) => { - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret("\t"); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - let caretPos = textarea.selectionStart; - - const front = textarea.value.substring(0, caretPos); - const back = textarea.value.substring( - textarea.selectionEnd, - textarea.value.length, - ); - textarea.value = front + text + back; - caretPos += text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = () => { - // 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 === "答えを表示") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; -``` - -{{ EmbedLiveSample('Active_learning_Marking_up_a_set_of_definitions', 700, 350) }} - ## 引用 HTML には引用をマークアップするための機能もあります。どちらの要素を使用するかは、ブロックとインラインのどちらの引用をマークアップするかによって異なります。 @@ -333,15 +141,14 @@ HTML には引用をマークアップするための機能もあります。ど 間違えた場合は、 _リセット_ ボタンを使用していつでもリセットできます。本当に動けなくなったら、_答えを表示_ ボタンを押して答えを見てください。 -```html hidden +```html-nolint hidden

ライブ出力

編集可能なコード

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

@@ -316,7 +325,7 @@ function updateCode() { } const htmlSolution = - '

A link to my favorite website.

'; + 'Firefox のアイコン'; let solutionEntry = htmlSolution; reset.addEventListener("click", () => { @@ -341,16 +350,16 @@ solution.addEventListener("click", () => { 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 = (e) => { - if (e.keyCode === 9) { + if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } - if (e.keyCode === 27) { + if (e.code === "Escape") { textarea.blur(); } }; @@ -372,7 +381,7 @@ function insertAtCaret(text) { textarea.scrollTop = scrollPos; } -// Update the saved userCode every time the user updates the text area code +// ユーザーがテキストエリアのコードを更新する時点ごとに、保存された userCode を更新ます。 textarea.onkeyup = () => { // We only want to save the state when the user code is being shown, @@ -391,7 +400,7 @@ textarea.onkeyup = () => { ### 論理属性 -沢山の HTML ソースを見ていくうちに、属性値のない属性を見かけることがあるでしょう。これは文法的に許されています。これらは「論理属性」と呼ばれています。論理属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、 [`disabled`](/ja/docs/Web/HTML/Element/input#disabled) 属性は `input` 要素に指定することができる論理属性と考えてください。（これを使用して、ユーザーが入力できないようにフォームの入力要素を「無効」にします。無効にされた要素は、通常グレーアウトした外見になります。） +沢山の HTML ソースを見ていくうちに、属性値のない属性を見かけることがあるでしょう。これは文法的に許されています。これらは「[論理属性](/ja/docs/Glossary/Boolean/HTML)」と呼ばれています。論理属性が値なしで、または `"false"` のように任意の値で記述された場合、論理属性は常に true に設定されます。それ以外の場合、属性が HTML タグ内に記述されていない場合、属性は false に設定されます。仕様では、属性の値は空文字列（属性に値が明示的に指定されていない場合も含む）または属性名と同じであることが求められていますが、他の値でも同様に機能します。例えば、 [`disabled`](/ja/docs/Web/HTML/Element/input#disabled) 属性は `input` 要素に指定することができる論理属性と考えてください。（これを使用して、ユーザーが入力できないようにフォームの入力要素を「無効」にします。無効にされた要素は、通常グレーアウトした外見になります。） ```html @@ -413,13 +422,13 @@ textarea.onkeyup = () => { ### 属性値を引用符で囲むことの省略 -他にも多くのサイトのコードを見ていると、引用符を使わない属性値など、奇妙なマークアップのスタイルに出会うことがあります。これは特定の状況では許されることですが、他にもマークアップが崩れてしまうことがあります。例えば、先ほどのリンクの例をもう一度見てみると、 `href` 属性だけを使った基本的なバージョンを次のように書くことができます。 +他にも多くのサイトのコードを見ていると、引用符を使わない属性値など、奇妙なマークアップのスタイルに出会うことがあります。これは特定の状況では許容されますが、他の状況ではマークアップを壊す可能性もあります。下記のコードスニペットの要素 `` はアンカーと呼ばれます。アンカーはテキストを囲み、リンクに変換します。`href` 属性は、リンクが指し示すウェブアドレスを指定します。 `href` 属性だけを使った基本的なバージョンを次のように書くことができます。 ```html favorite website ``` -しかし、例えば次のように半角スペースの入った `title` 属性を追加すると動作がおかしくなります。 +アンカーは、リンク先のページの説明である `title` 属性も持つことができます。しかし、`href` 属性と同じ方法で `title` を追加すると、問題が生じます。 ```html-nolint example-bad favorite website @@ -429,7 +438,7 @@ textarea.onkeyup = () => { {{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "") }} -安全なコードを書くために、必ず属性値には引用符をつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。 +必ず属性値には引用符をつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。 ### 二重引用符か単一引用符か @@ -455,21 +464,21 @@ textarea.onkeyup = () => { ``` -引用符を同じ種類の引用符（単一引用符または二重引用符）の中で使用する場合は、 [HTML エンティティ](#実体参照_html_に特殊文字を含める)を使用する必要があります。例えば、このようにすると壊れてしまいます。 +引用符を同じ種類の引用符（単一引用符または二重引用符）の中で使用する場合は、{{glossary("character reference", "文字参照")}}を使用してください。例えば、このようにすると壊れてしまいます。 ```html-nolint example-bad -A link to my example. +A link to my example. ``` 代わりに、このようにしてください。 ```html-nolint -A link to my example. +A link to my example. ``` -## HTML 文書の構成 +## HTML 文書の構造 -これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。 +個々の HTML 要素は、単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。 ```html @@ -486,13 +495,13 @@ textarea.onkeyup = () => { 上記の HTML 文書を例に、順に解説していきます。 -1. ``: 文書型定義です。 HTML の黎明期（1991 ～ 1992 年ごろ）には、文書型定義は、 HTML ページが良い HTML とみなされるために従わなければならない一連のルールへのリンクとして機能するものでした。文書型定義は、以前は次のような形で使用されていました。 +1. ``: 文書型定義です。 HTML の黎明期（1991 ～ 1992 年ごろ）には、文書型定義は、 HTML ページが良い HTML とみなされるために従わなければならない一連のルールへのリンクとして機能するものでした。文書型定義は、以前は次のような形で使用されていました。 ```html ``` - 最近は、文書型定義は歴史的な遺物であり、他のすべてが正しく動作するために記載する必要があるものです。`` は、有効な文書型定義としてカウントされる最も短い文字列です。知っておくことがあることはこれだけです。 + 最近は、文書型定義は歴史的な遺物であり、他のすべてが正しく動作するために記載する必要があるものです。`` は、有効な文書型定義としてカウントされる最も短い文字列です。知っておくことがあることはこれだけです。 2. ``: {{htmlelement("html")}} 要素。ページ上のすべての内容を囲む要素です。ルート要素と呼ばれることもあります。 3. ``: {{htmlelement("head")}} 要素。この要素は、 HTML ページに記載する、ページが閲覧者に見せる**コンテンツではないもの**すべてを入れるコンテナーとして機能します。これには、検索結果に現れるキーワードやページの説明文、内容をスタイル設定するための CSS、文字セットの宣言などが記載されます。これについては、次の記事で詳しく説明します。 @@ -514,7 +523,9 @@ textarea.onkeyup = () => { ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新（または、再読み込み）を行うと編集結果が反映されます。最初はこんな表示です。 -![This is my page と書かれたシンプルな HTML ページ](template-screenshot.png)このアクティブラーニングでは、前述のようにコンピューター上でコードをローカルに編集することもできますし、下のサンプルウィンドウで編集することもできます（編集可能なサンプルウィンドウは、この場合 {{htmlelement("body")}} 要素の内容だけを表しています）。以下の作業を実装するために、腕を磨いてください。 +![This is my page と書かれたシンプルな HTML ページ](template-screenshot.png) + +このアクティブラーニングでは、前述のようにコンピューター上でコードをローカルに編集することもできますし、下のサンプルウィンドウで編集することもできます（編集可能なサンプルウィンドウは、この場合 {{htmlelement("body")}} 要素の内容だけを表しています）。以下の作業を実装するために、腕を磨いてください。 - {{htmlelement("body")}} 要素の開始タグの直下にページのメインタイトルを書きましょう。このメインタイトルは `

` 開始タグと `

` 終了タグで囲んでください。 - 段落の内容を編集して、自分が興味を持っている話題についてテキストを記入しましょう。 @@ -658,31 +669,52 @@ textarea.onkeyup = () => { }; ``` -{{ EmbedLiveSample('Active_learning_Adding_some_features_to_an_HTML_document', 700, 1075, "", "") }} +{{ EmbedLiveSample('Active_learning_Adding_some_features_to_an_HTML_document', 700, 500) }} ### HTML 内のホワイトスペース -上記の例において、大量の（半角）ホワイトスペース（空白文字）がコード内にあることに気づいたかもしれません。これは無くても構いません。次の 2 つのコードスニペットは等価です。 +上記の例において、大量の（半角）ホワイトスペースがコード内にあることに気づいたかもしれません。これは無くても構いません。次の 2 つのコードスニペットは等価です。 ```html-nolint -

Dogs are silly.

+

Dogs are silly.

-

Dogs are +

Dogs + are silly.

``` -HTML 要素の内容でどれだけホワイトスペースを使用したとしても（1 つ以上の空白文字だけでなく、改行も含みます）、 HTML パーサーはコードをレンダリングする際に、ホワイトスペースの並びを 1 文字の空白に縮小します。では、なぜこれほど多くのホワイトスペースを使用するのでしょうか。その答えは、読みやすさにあります。 +HTML 要素の内容でどれだけホワイトスペースを使用したとしても（1 つ以上の空白文字だけでなく、改行も含みます）、 HTML パーサーはコードをレンダリングする際に、ホワイトスペースの並びを単一の空白に縮小します。では、なぜこれほど多くのホワイトスペースを使用するのでしょうか。その答えは、読みやすさにあります。 > [!NOTE] > 訳注: 全角空白はホワイトスペースに含まれず、空白の縮小の対象にもなりません。 コードをきれいに整形すると、何をしようとしているのかがわかりやすくなります。この HTML では、入れ子になっている各要素を、中に入っている要素よりも空白 2 文字分多く字下げしています。整形スタイル（それぞれの字下げレベルを空白何文字分にするか、など）はあなた次第ですが、書式化は検討した方がいいでしょう。 -## 実体参照: HTML に特殊文字を含める +上記の 2 つの段落を、ホワイトスペースありとなしでブラウザーがどのようにレンダリングするのかを見ていきましょう。 + +{{ EmbedLiveSample('Whitespace_in_HTML', 700, 100) }} + +> [!NOTE] +> JavaScript で要素の [innerHTML](/ja/docs/Web/API/Element/innerHTML) にアクセスすると、すべてのホワイトスペースがそのまま残ります。 +> ブラウザーでホワイトスペースがトリミングされると、予期せぬ結果を返す場合があります。 + +```js +const noWhitespace = document.getElementById("noWhitespace").innerHTML; +console.log(noWhitespace); +// "Dogs are silly." + +const whitespace = document.getElementById("whitespace").innerHTML; +console.log(whitespace); +// "Dogs +// are +// silly." +``` + +## 文字参照: HTML に特殊文字を含める HTML では、`<`、`>`、`"`、`'`、`&` の各文字が特殊文字として扱われます。これらは HTML の構文の一部です。では、これらの特殊文字をどのようにテキストに記述するのでしょうか？例えば、アンパサンドや小なり記号を使用したい場合、コードとして解釈されないようにするには、次のようにします。 -そのためには、文字参照（実体参照、エンティティ、とも）を使用します。これは文字を表す特別なコードで、まさにそのような状況で使用するためのものです。それぞれの文字参照は、アンパサンド (&) で始まり、セミコロン (;) で終わります。 +そのためには、{{glossary("character reference", "文字参照")}}を使用します。これは文字を表す特別なコードで、まさにそのような状況で使用するためのものです。それぞれの文字参照は、アンパサンド (&) で始まり、セミコロン (;) で終わります。 | 実際の文字 | 等価な文字参照 | | ---------- | -------------- | @@ -692,9 +724,9 @@ HTML では、`<`、`>`、`"`、`'`、`&` の各文字が特殊文字として | ' | `'` | | & | `&` | -等価な文字参照は、 '\<' は未満 (less than)、 '\"' は引用 (quotation) という具合に思い出しやすくできています。実体参照についての詳細は、[XML と HTML の文字実体参照一覧](https://ja.wikipedia.org/wiki/文字参照) （ウィキペディア）を参照してください。 +等価な文字参照は、未満 (less than) は `<`、引用 (quotation) は `"` という具合に思い出しやすくできています。実体参照についての詳細は、[XML と HTML の文字実体参照一覧](https://ja.wikipedia.org/wiki/文字参照) （ウィキペディア）を参照してください。 -以下の例では、 2 つの段落があります。 +次の例には、 2 つの段落があります。 ```html-nolint

HTML では、

要素で段落を定義します。

@@ -707,7 +739,7 @@ HTML では、`<`、`>`、`"`、`'`、`&` の各文字が特殊文字として {{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }} > [!NOTE] -> 他の記号に実体参照を使用する必要はありません。現代のブラウザーは、HTML の[文字エンコーディングが UTF-8 に設定](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#html_文書の文字コードを指定する)されていれば、実際の記号を正しく扱うことができるからです。 +> 他の記号に実体参照を使用する必要はありません。現代のブラウザーは、HTML の[文字エンコーディングが UTF-8 に設定](/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#html_文書の文字コードを指定する)されていれば、実際の記号を正しく扱うことができるからです。 ## HTML のコメント @@ -731,10 +763,10 @@ HTML のコメントを書くには、特別なマーカーである ` - -```html - -

- The Ruby-throated Hummingbird (Archilochus colubris) is the most common - hummingbird in Eastern North America. -

- - -

- The menu was a sea of exotic words like vatrushka, - nasi goreng and soupe à l'oignon. -

- - -

Someday I'll learn how to spel better.

- - -
-
Semantic HTML
-
- Use the elements based on their semantic meaning, not their - appearance. -
-
-``` - -{{EmbedLiveSample('Italic, bold, underline…','100%','270')}} - -## スキルテスト - -この記事の最後にたどり着きましたが、最も重要な情報を覚えていますか？次に移動する前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります - [スキルのテスト: HTML テキストの基本](/ja/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics) をご覧ください。 - ## まとめ -今回はここまでです。この記事では、 HTML でテキストのマークアップを始めるにはどうすればよいか、よい考えが得られたはずですし、この分野で最も重要な要素のいくつかをご紹介しました。この領域には、さらに多くの意味的要素があり、このコースの後半にある[高度なテキスト整形](/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)の記事で、さらに多くのことを見ていきます。次の記事では、おそらくウェブで最も重要な要素である[ハイパーリンクの作成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)方法について詳しく見ていくことにします。 +以上で、HTMLの見出しと段落についての学習は終了です。次に、HTMLの意味づけについて、さらに見ていきます。単語に強調をくれたりするものです。 -{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/ja/learn_web_development/core/structuring_content/html_images/index.md b/files/ja/learn_web_development/core/structuring_content/html_images/index.md index 273462bfcc16ee..c7279bf476c2d7 100644 --- a/files/ja/learn_web_development/core/structuring_content/html_images/index.md +++ b/files/ja/learn_web_development/core/structuring_content/html_images/index.md @@ -1,37 +1,41 @@ --- title: HTML の画像 slug: Learn_web_development/Core/Structuring_content/HTML_images -original_slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML l10n: - sourceCommit: e831294901a97571f85c34651460401d6d0be897 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} +{{LearnSidebar}} -当初、ウェブは単なるテキストであり、とてもつまらないものでした。幸運なことに、ウェブページ内に画像（および他のより面白い種類のコンテンツ）を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。ウェブページに単純な画像を埋め込むために用いる地味な {{htmlelement("img")}} 要素から始めるのは論理的ですが、他にも考慮すべき種類のマルチメディアがあります。この記事では、基本的な使い方、 {{htmlelement("figure")}} を使用したキャプションの注釈、 {{glossary("CSS")}} 背景画像との関連の詳細、そして他にもウェブプラットフォームで使用することができるグラフィックを紹介するなど、詳しく見ていきます。 +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}} + +当初、ウェブは単なるテキストであり、とてもつまらないものでした。幸運なことに、ウェブページ内に画像（および他のより面白い種類のコンテンツ）を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。この記事では、 {{htmlelement("img")}} 要素の使い方について、基本的な使い方、 {{htmlelement("figure")}} を使用したキャプションの注釈、 {{glossary("CSS")}} 背景画像との関連の詳細などを詳しく見ていきます。 - - + @@ -44,7 +48,7 @@ l10n: [`alt` 属性は後で説明します](#代替テキスト)。 > [!NOTE] -> 続行する前に、[URL とパスに関する簡単な入門](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#url_とパスに関する簡単な入門)を読んで、相対 URL と絶対 URL の記憶を更新してください。 +> 続行する前に、[URL とパスに関する簡単な入門](/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links#url_とパスに関する簡単な入門)を読んで、相対 URL と絶対 URL の記憶を更新してください。 例えば、画像が `dinosaur.jpg` というファイル名で、HTML ページと同じディレクトリーにある場合、画像を次のように埋め込むことができます。 @@ -110,15 +114,15 @@ l10n: `alt` 属性の中に正確に何を書けばいいのでしょうか？それは、最初に画像を置く理由に依存します。言い換えれば、画像が表示されないと何を失うかです。 -- **装飾**。装飾的な画像には [CSS 背景画像](#css_背景画像)を使用すべきですが、 HTML を使用する必要がある場合は、空白の `alt=""` を追加してください。画像がコンテンツの一部でない場合、スクリーンリーダーは読んで時間を浪費すべきではありません。 +- **装飾**。装飾的な画像には [CSS 背景画像](#css_背景画像)を使用すべきですが、 HTML を使用する必要がある場合は、空白の `alt=""` を追加してください。画像がコンテンツの一部でない場合、スクリーンリーダーは読み上げて時間を浪費すべきではありません。 - **コンテンツ**。画像が重要な情報を提供している場合は、簡単な代替テキストで同じ情報を提供してください。それよりもっと良いのは、誰もが見ることができる本文の中で提供することです。冗長な `alt` テキストを書かないでください。すべての段落がメインコンテンツに 2 重に書かれていると、目に見えるユーザーにとってはどれほど迷惑でしょうか？画像が主たる本文で十分に記述されている場合は、単に `alt=""` が使用できます。 -- **リンク**。 {{htmlelement("a")}} タグ内に画像を置いた場合、画像をリンクにすると、[アクセス可能なリンクテキスト](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#明確なリンク語を使う)を提供する必要があります。そのような場合は、同じ `` 要素内に、または画像の `alt` 属性内に書き込むことができます。 +- **リンク**。 {{htmlelement("a")}} タグ内に画像を置いた場合、画像をリンクにすると、[アクセス可能なリンクテキスト](/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links#明確なリンク語を使う)を提供する必要があります。そのような場合は、同じ `` 要素内に、または画像の `alt` 属性内に書き込むことができます。 - **テキスト**。テキストを画像に入れないでください。たとえば、メインの見出しにドロップシャドウが必要な場合は、テキストを画像に入れるのではなく、 [CSS を使用](/ja/docs/Web/CSS/text-shadow)してください。しかし、これが本当に避けられない場合は、 `alt` 属性でテキストを与える必要があります。 基本的には、画像が見えないときでも、実用的な使い勝手を提供することが鍵です。これにより、すべてのユーザーにコンテンツが欠落していないことが保証されます。ブラウザーの画像をオフにして、どのように見えるかを確認してください。画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかがすぐに理解できます。 > [!NOTE] -> 詳細については、[代替テキストのガイド](/ja/docs/Learn/Accessibility/HTML#代替テキスト)を参照してください。 +> 詳細については、[代替テキスト](/ja/docs/Learn_web_development/Core/Accessibility/HTML#代替テキスト)のガイドや [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) を参照すると、さまざまな状況で画像の `alt` 属性を使用する方法が分かります。 ### 幅と高さ @@ -182,11 +186,11 @@ HTML で `width` 属性と `height` 属性を用いて画像の実際の大き > > 画像サイズを大きく設定しすぎると、画像が粗くなったり、ぼやけたり、小さすぎたりして、ユーザーのニーズに合っていない画像をダウンロードすることになり、帯域幅を浪費することになります。また、正しい[アスペクト比](https://ja.wikipedia.org/wiki/アスペクト比)を維持しないと、画像が歪んでいってしまうかもしれません。ウェブページに画像を掲載する前に、画像エディターを使用して正しいサイズにしましょう。 > -> 画像のサイズを変更する必要がある場合は、代わりに [CSS](/ja/docs/Learn/CSS) を使用しましょう。 +> 画像のサイズを変更する必要がある場合は、代わりに [CSS](/ja/docs/Learn_web_development/Core/Styling_basics) を使用しましょう。 ### 画像のタイトル -[リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#title_属性による補足情報の追加)と同様に、画像に `title` 属性を追加して、必要に応じてさらに補足情報を提供することもできます。この例では、これを行うことができます。 +[リンク](/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links#title_属性による補足情報の追加)と同様に、画像に `title` 属性を追加して、必要に応じてさらに補足情報を提供することもできます。この例では、これを行うことができます。 ```html ライブ出力

編集可能なコード

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

マルチメディアと埋め込み画像
前提条件: - インストール済みの基本的なソフトウェア、基本的な - ファイル操作の知識、 HTML の基礎知識になじんでいること（HTML を始めようにあるような）。 + 基本的な HTML の構文に載っている、基本的な HTML に精通していること。 見出しと段落およびリストなどのテキストレベルの意味付け。
目的:学習成果: - 単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。 +
    +
  • 「置換要素」という耀g。どういう意味でしょう。
    • +
  • 基本的な <img> タグの構文
    • +
  • src を使用してリソースを指すこと。
    • +
  • width と height を使用して、例えば、画像の読み込みが完了して表示された後に、 UI が不快でぎこちない動きで更新されるのを避けることができること。
    • +
  • ウェブ用にメディア資産を最適化する — ファイルサイズを小さく保ちます。
    • +
  • メディア資産ライセンスの理解 — さまざまなライセンスの種類、それらに準拠する方法、そして自分のプロジェクトで使用する適切なライセンスのメディアファイルを検索する方法。
    • +