From 4d3b1c2c79113786e001e3bec551205cd34f818a Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 21 May 2021 00:42:40 +0000 Subject: [CRON] sync translated content --- files/ja/web/html/element/isindex/index.html | 78 -------- files/ja/web/html/element/listing/index.html | 52 ----- files/ja/web/html/element/multicol/index.html | 36 ---- files/ja/web/html/preloading_content/index.html | 243 ------------------------ 4 files changed, 409 deletions(-) delete mode 100644 files/ja/web/html/element/isindex/index.html delete mode 100644 files/ja/web/html/element/listing/index.html delete mode 100644 files/ja/web/html/element/multicol/index.html delete mode 100644 files/ja/web/html/preloading_content/index.html (limited to 'files/ja/web/html') diff --git a/files/ja/web/html/element/isindex/index.html b/files/ja/web/html/element/isindex/index.html deleted file mode 100644 index 7443d92c49..0000000000 --- a/files/ja/web/html/element/isindex/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: -slug: Web/HTML/Element/isindex -tags: - - Deprecated - - Element - - HTML - - Reference - - Web -translation_of: Web/HTML/Element/isindex ---- -
{{HTMLRef}}{{Obsolete_header}}
- -

<isindex> は廃止された HTML 要素であり、文書に問い合わせを行うためのテキストフィールドをページに追加します。 <isindex> は、問い合わせ文字列を入力するための 1 行テキスト入力フィールドを提供していました。これを送信すると、サーバーが問い合わせに一致するページの一覧を返していました。この対応状況は、ブラウザーとクエリに対応するサーバーの両方に依存していました。

- -

<isindex> は HTML 標準から削除されました。 HTML 4.01 で非推奨になりました。同じ動作は HTML フォームを使用して実現することができます。すべての主要なブラウザーが <isindex> を削除しています。

- -

属性

- -

他のすべての HTML 要素と同様に、この要素はグローバル属性を受け付けます。

- -
-
{{htmlattrdef("prompt")}}
-
この属性の値を、テキストフィールド用のプロンプトとして追加します。
-
{{htmlattrdef("action")}}
-
この属性は、異なる URL に対してクエリーを送信する必要がある場合に使用します。アクションは W3C で定義されていません。
-
- -

例

- -
<head>
-  <isindex prompt="Search Document..." action="/search">
-</head>
- -

過去のブラウザーでは、解釈時に、 DOM ツリーに以下の HTML と同等のものを作成していました。

- -
<form action="/search">
-  <hr>
-  <label>
-    Search Document...
-    <input name="isindex">
-  </label>
-  <hr>
-</form>
-
- -

歴史

- -

1992 年 6 月に Dan Connolly は、isindex よりも別の アンカー タイプを 好むと表明しました。

- -

1992 年 11 月に、インデックスは文書よりもリンクであるという考えを推進する Dan Connolly によって indexes as links rather than documents の議論が始まりました。このスレッドでは、さまざまな解決策が提案されました。クエリーを作成する方式への疑問が、Dynatext browser に関連して 言及されました: "The browser displays toggle buttons, text fields etc. The user fills in the fields, clicks OK, and the query results come up in the table of contents window."

- -

1992 年 11 月の isindex に関するスレッドで、Kevin Hoadley は isindex 要素の必要性に 疑問を持って、 廃止を提案しました。彼は、代わりに input 要素 (Steve Putz が 支持した アイデア) を持つよう提案しました。Tim Berners-Lee は、検索結果を集約したものになるという、isindex の目的を 説明しました。Kevin は isindex の二者択一的な性質が嫌いであり、すべてを検索可能なシステムが好ましいと 返信する とともに、当時の WWW Framework を特定の httpd 設定で拡張して、ある URI と検索クエリーの作成を関連付けることを提案しました。

- -

2016 年に、 isindex は Edge および Chrome から削除された後で、標準から削除する提案が行われました。この削除は、 Safari と Firefox の対応が削除された後に翌日に完了しました。

- -

HTML リファレンス

- - - -

ブラウザーの互換性

- - - -

{{Compat("html.elements.isindex")}}

- -

関連情報

- - diff --git a/files/ja/web/html/element/listing/index.html b/files/ja/web/html/element/listing/index.html deleted file mode 100644 index a359093d17..0000000000 --- a/files/ja/web/html/element/listing/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: -slug: Web/HTML/Element/listing -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/listing ---- -
{{Obsolete_header}}
- -

概要

- -

HTML の Listing 要素 (<listing>) は、開始タグと終了タグの間にあるテキストを HTML として解釈せず、等幅フォントを使用して表示します。HTML 2 標準では、1 行が 132 文字を超えない場合は改行すべきではないと勧告しています。

- -
注記: この要素を使用してはいけません。 - -
    -
  • この要素は HTML 3.2 で非推奨とされており、実装していないブラウザがあることに加えて実装に一貫性がありません。さらにこの要素は HTML5 で廃止されており、適合するユーザエージェントによっては {{HTMLElement("pre")}} 要素のように表示されるかもしれませんが、内部の HTML を解釈するでしょう!
    • -
  • 代わりに {{HTMLElement("pre")}} 要素、または意味的に適切な場合は {{HTMLElement("code")}} 要素を使用して、タグが解釈されないようにするため HTML の '<' と '>' をエスケープしてください。
    • -
  • 等幅フォントによる表示は {{cssxref("font-family")}} プロパティの総称フォントとして monospace を使用する、適切な CSS スタイルを適用した {{HTMLElement("div")}} 要素でも実現できます。
    • -
-
- -

属性

- -

この要素は、すべての要素で共通のグローバル属性以外の属性がありません。

- -

DOM インタフェース

- -

この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。

- -
-

実装メモ: Gecko 1.9.2 まで、Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。

-
- -

ブラウザーの対応

- - - -

{{Compat("html.elements.listing")}}

- -

関連情報

- -
    -
  • 代わりに {{HTMLElement("pre")}} 要素や {{HTMLElement("code")}} 要素を使用します。
    • -
  • {{HTMLElement("listing")}} と同様に {{HTMLElement("plaintext")}} 要素や {{HTMLElement("xmp")}} 要素も廃止されています。
    • -
- -
{{HTMLRef}}
diff --git a/files/ja/web/html/element/multicol/index.html b/files/ja/web/html/element/multicol/index.html deleted file mode 100644 index 9f6b50d3e1..0000000000 --- a/files/ja/web/html/element/multicol/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: ': HTML 段組みレイアウト要素（廃止）' -slug: Web/HTML/Element/multicol -tags: - - Element - - HTML - - Non-standard - - Obsolete - - Reference - - 段組み -translation_of: Web/HTML/Element/multicol ---- -
{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
- -

HTML の段組みレイアウト要素 (<multicol>) は段組みレイアウトを実現するために設計された実験的な要素でしたが、使用しないでください。これは支持されたことがなく、ほとんどの主要ブラウザーでは実装されていません。ここでは他の文書で見かけたときに警告するだけの目的で説明しています。

- -
-

使用しないでください！段組みレイアウトを実装するためであれば、 {{HTMLElement("div")}} のような普通の HTML 要素と CSS 段組みレイアウトとの組み合わせを使用してください。

-
- -

仕様策定状況

- -

なし。

- -

ブラウザーの対応

- - - -

{{Compat("html.elements.multicol")}}

- -

関連情報

- - diff --git a/files/ja/web/html/preloading_content/index.html b/files/ja/web/html/preloading_content/index.html deleted file mode 100644 index daef71acd9..0000000000 --- a/files/ja/web/html/preloading_content/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: rel="preload" によるコンテンツの先読み -slug: Web/HTML/Preloading_content -tags: - - Guide - - HTML - - JavaScript - - Link - - Media - - Performance - - Web Performance - - as - - preload - - rel -translation_of: Web/HTML/Preloading_content ---- -

{{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性で preload を指定すると、 HTML の {{htmlelement("head")}} 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

- -

この記事では <link rel="preload"> がどのように動作するのかについての基本的なガイドを提供します。

- -

基本概念

- -

多くの場合は以下のように、 <link> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。

- -
<link rel="stylesheet" href="styles/main.css">
- -

しかしここで、 rel の値に preload を使用すると、 <link> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。

- -
    -
  • リソースへのパスを {{htmlattrxref("href", "link")}} 属性へ。
    • -
  • リソースの種類を {{htmlattrxref("as", "link")}} 属性へ。
    • -
- -

簡単な例は以下のようになります (JS と CSS のサンプルコード および デモ) も参照してください)。

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js" defer></script>
-</body>
- -

ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <link rel="stylesheet"> と <script> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。

- -
    -
  • フォントや画像など、 CSS の中から指しているリソース
    • -
  • JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース
    • -
  • より大きな画像や動画ファイル。
    • -
- -

preload には他の利点もあります。 as によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。

- -
    -
  • リソースの読み込みの優先付けがより正確にできます。
    • -
  • 可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。
    • -
  • リソースに対して正しくコンテンツセキュリティポリシーを適用できます。
    • -
  • 正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。
    • -
- -

先読みできるコンテンツの種類

- -

さまざまな種類のコンテンツが先読みできます。 as 属性で使用できる値は以下の通りです。

- -
    -
  • audio: 通常は {{htmlelement("audio")}} で使用される音声ファイル。
    • -
  • document: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。
    • -
  • embed: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。
    • -
  • fetch: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
    • -
  • font: フォントファイル。
    • -
  • image: 画像ファイル。
    • -
  • object: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。
    • -
  • script: JavaScript ファイル。
    • -
  • style: CSS スタイルシート。
    • -
  • track: WebVTT ファイル。
    • -
  • worker: JavaScript ウェブワーカーまたは共有ワーカー。
    • -
  • video: 通常は {{htmlelement("video")}} で使用される動画ファイル。
    • -
- -
-

メモ: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — link element extensions を参照してください。また、フェッチの仕様書で管理されている as 属性の値の完全な一覧は、 request destinations を参照してください。

-
- -

MIME タイプを含める

- -

<link> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは type 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。

- -

この例を動画のデモで見ることができます (ソースコード全体とデモ版もご覧ください。)。

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

この場合、MP4 をサポートしているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 をサポートしていない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。

- -

オリジンをまたいだフェッチ

- -

CORSを有効にしてフェッチ（例えば、fetch(), XMLHttpRequest or fonts）されたリソースをプリロードするとき、<link>要素に{{htmlattrxref("crossorigin", "link")}}属性を設定する場合には特別な注意が必要です。

- -

上記のように、これが当てはまる興味深いケースの1つは、フォントファイルです。さまざまな理由により、これらは匿名モードのCORSを使用してフェッチする必要があります（Font fetching requirements参照）。

- -

このケースを例として使用してみましょう。完全なサンプルソースコードは example source code on GitHub (also see it live):

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  …
-</body>
- -

type属性にMIMEタイプヒントを提供するだけでなく、プリロードのCORSモードが最終的なフォントリソースリクエストと一致することを確認するために、crossorigin属性も提供しています。

- -

media を含める

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Let's look at an example (see it on GitHub — source code, live example):

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if (mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

We include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see Testing media queries for more).

- -

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

- -

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

- -

スクリプトと先読み

- -

これらのプリロードに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

これは、ブラウザは myscript.js ファイルをプリロードしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

これは、スクリプトをプリロードしたいが、必要なときまで実行を延期する場合に便利です。

- -

他のリソースの先読み機構

- -

Other preloading features exist, but none are quite as fit for purpose as <link rel="preload">:

- -
    -
  • <link rel="prefetch"> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the next navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give prefetch resources a lower priority than preload ones — the current page is more important than the next. See Link prefetching FAQ for more details.
    • -
  • <link rel="prerender"> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats prerender as a NoState prefetch instead.
    • -
  • <link rel="subresource"> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist back then), so they all got fetched with fairly low priority.
    • -
  • There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.
    • -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}preload の詳細
{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}preload の定義
- -

ブラウザーの対応

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

関連情報

- - - -

{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}

-- cgit v1.2.3-54-g00ecf