diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
| commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
| tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip | |
unslug ja: move
Diffstat (limited to 'files/ja/web')
254 files changed, 1824 insertions, 14844 deletions
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html b/files/ja/web/accessibility/aria/roles/button_role/index.html index b17fe32b00..b17fe32b00 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html +++ b/files/ja/web/accessibility/aria/roles/button_role/index.html diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html index 13f3fa4b10..13f3fa4b10 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html +++ b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html diff --git a/files/ja/web/accessibility/accessibility_faq/index.html b/files/ja/web/accessibility/faq/index.html index 75086f73e4..75086f73e4 100644 --- a/files/ja/web/accessibility/accessibility_faq/index.html +++ b/files/ja/web/accessibility/faq/index.html diff --git a/files/ja/web/api/ambient_light_events/index.html b/files/ja/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..be70ad2612 --- /dev/null +++ b/files/ja/web/api/ambient_light_events/index.html @@ -0,0 +1,68 @@ +--- +title: Ambient Light Events +slug: WebAPI/Using_Light_Events +tags: + - Ambient Light +translation_of: Web/API/Ambient_Light_Events +--- +<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> + +<p>ambient light event は、光の強さの変化をウェブページやアプリケーションに気づかせるのに便利な手段です。これによりユーザーインターフェイスのコントラストを変えたり写真を撮るために必要な露出時間を変えたりするなど、ウェブページやアプリケーションが光量の変化に対応できるようになります。</p> + +<h2 id="Light_Events" name="Light_Events">Light Event</h2> + +<p>端末の光センサーが光量の変化を検出すると、それをブラウザーに通知します。ブラウザーがその通知を受け取ると、正確な光の強度に関する情報を提供する {{domxref("DeviceLightEvent")}} イベントを発生させます。</p> + +<p>このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("devicelight")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondevicelight")}} プロパティに接続することにより、 <code>window</code> オブジェクトレベルで取得できます。</p> + +<p>イベントを取得するとイベントオブジェクトの {{domxref("DeviceLightEvent.value")}} プロパティを通して、{{interwiki("wikipedia", "ルクス")}}で表した照度にアクセスできます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">if ('ondevicelight' in window) { + window.addEventListener('devicelight', function(event) { + var body = document.querySelector('body'); + if (event.value < 50) { + body.classList.add('darklight'); + body.classList.remove('brightlight'); + } else { + body.classList.add('brightlight'); + body.classList.remove('darklight'); + } + }); +} else { + console.log('devicelight event not supported'); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> + <td>{{Spec2("AmbientLight")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.DeviceLightEvent")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{event("devicelight")}}</li> +</ul> diff --git a/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html b/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html deleted file mode 100644 index 62f6879ebe..0000000000 --- a/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: AudioContext.mozAudioChannelType -slug: Web/API/AudioContext/mozAudioChannelType -translation_of: Web/API/AudioContext/mozAudioChannelType ---- -<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p> - -<p>{{domxref("AudioContext")}}インターフェースの<code>mozAudioChannelType</code>読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。</p> - -<p>これは<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>に定義された非標準のプロパティです。詳細は<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>を参照してください。</p> - -<h2 id="構文">構文</h2> - -<pre class="brush: js">var audioCtx = new AudioContext(); -var myAudioChannelType = audioCtx.mozAudioChannelType; -</pre> - -<p><code>AudioContext</code>のオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。</p> - -<pre class="brush: js">var audioCtx = new AudioContext('ringer');</pre> - -<h3 id="値">値</h3> - -<p>{{domxref("DOMString")}}</p> - -<h2 id="例">例</h2> - -<p>TBD</p> - -<h2 id="仕様">仕様</h2> - -<p>現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細は<a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>を参照してください。</p> - -<h2 id="ブラウザ互換性">ブラウザ互換性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>General support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>General support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参考">参考</h2> - -<ul> - <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li> - <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li> - <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li> - <li>{{domxref("AudioContext")}}</li> -</ul> diff --git a/files/ja/web/api/audiobuffersourcenode/onended/index.html b/files/ja/web/api/audioscheduledsourcenode/onended/index.html index 22f8b05ba3..22f8b05ba3 100644 --- a/files/ja/web/api/audiobuffersourcenode/onended/index.html +++ b/files/ja/web/api/audioscheduledsourcenode/onended/index.html diff --git a/files/ja/web/api/audiobuffersourcenode/stop/index.html b/files/ja/web/api/audioscheduledsourcenode/stop/index.html index 2163d86379..2163d86379 100644 --- a/files/ja/web/api/audiobuffersourcenode/stop/index.html +++ b/files/ja/web/api/audioscheduledsourcenode/stop/index.html diff --git a/files/ja/web/api/audiocontext/createanalyser/index.html b/files/ja/web/api/baseaudiocontext/createanalyser/index.html index c186d1029c..c186d1029c 100644 --- a/files/ja/web/api/audiocontext/createanalyser/index.html +++ b/files/ja/web/api/baseaudiocontext/createanalyser/index.html diff --git a/files/ja/web/api/audiocontext/createbiquadfilter/index.html b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html index 136557bea5..136557bea5 100644 --- a/files/ja/web/api/audiocontext/createbiquadfilter/index.html +++ b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html diff --git a/files/ja/web/api/audiocontext/createbuffer/index.html b/files/ja/web/api/baseaudiocontext/createbuffer/index.html index e94a5a18be..e94a5a18be 100644 --- a/files/ja/web/api/audiocontext/createbuffer/index.html +++ b/files/ja/web/api/baseaudiocontext/createbuffer/index.html diff --git a/files/ja/web/api/audiocontext/createbuffersource/index.html b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html index 24f65061c6..24f65061c6 100644 --- a/files/ja/web/api/audiocontext/createbuffersource/index.html +++ b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html diff --git a/files/ja/web/api/audiocontext/createchannelmerger/index.html b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html index e79b116642..e79b116642 100644 --- a/files/ja/web/api/audiocontext/createchannelmerger/index.html +++ b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html diff --git a/files/ja/web/api/audiocontext/createchannelsplitter/index.html b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html index 07444c49d0..07444c49d0 100644 --- a/files/ja/web/api/audiocontext/createchannelsplitter/index.html +++ b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html diff --git a/files/ja/web/api/audiocontext/createconvolver/index.html b/files/ja/web/api/baseaudiocontext/createconvolver/index.html index ae5acf59c8..ae5acf59c8 100644 --- a/files/ja/web/api/audiocontext/createconvolver/index.html +++ b/files/ja/web/api/baseaudiocontext/createconvolver/index.html diff --git a/files/ja/web/api/audiocontext/createdelay/index.html b/files/ja/web/api/baseaudiocontext/createdelay/index.html index 709a8a375b..709a8a375b 100644 --- a/files/ja/web/api/audiocontext/createdelay/index.html +++ b/files/ja/web/api/baseaudiocontext/createdelay/index.html diff --git a/files/ja/web/api/audiocontext/createdynamicscompressor/index.html b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html index 2fa5ca43ed..2fa5ca43ed 100644 --- a/files/ja/web/api/audiocontext/createdynamicscompressor/index.html +++ b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html diff --git a/files/ja/web/api/audiocontext/creategain/index.html b/files/ja/web/api/baseaudiocontext/creategain/index.html index c536a0621c..c536a0621c 100644 --- a/files/ja/web/api/audiocontext/creategain/index.html +++ b/files/ja/web/api/baseaudiocontext/creategain/index.html diff --git a/files/ja/web/api/audiocontext/createoscillator/index.html b/files/ja/web/api/baseaudiocontext/createoscillator/index.html index e971400f5d..e971400f5d 100644 --- a/files/ja/web/api/audiocontext/createoscillator/index.html +++ b/files/ja/web/api/baseaudiocontext/createoscillator/index.html diff --git a/files/ja/web/api/audiocontext/createpanner/index.html b/files/ja/web/api/baseaudiocontext/createpanner/index.html index 1b30c60a03..1b30c60a03 100644 --- a/files/ja/web/api/audiocontext/createpanner/index.html +++ b/files/ja/web/api/baseaudiocontext/createpanner/index.html diff --git a/files/ja/web/api/audiocontext/createperiodicwave/index.html b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html index 825a1a8de5..825a1a8de5 100644 --- a/files/ja/web/api/audiocontext/createperiodicwave/index.html +++ b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html diff --git a/files/ja/web/api/audiocontext/createscriptprocessor/index.html b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html index d3c80ae2cb..d3c80ae2cb 100644 --- a/files/ja/web/api/audiocontext/createscriptprocessor/index.html +++ b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html diff --git a/files/ja/web/api/audiocontext/createstereopanner/index.html b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html index c77689aa90..c77689aa90 100644 --- a/files/ja/web/api/audiocontext/createstereopanner/index.html +++ b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html diff --git a/files/ja/web/api/audiocontext/currenttime/index.html b/files/ja/web/api/baseaudiocontext/currenttime/index.html index 0d2a92b3ea..0d2a92b3ea 100644 --- a/files/ja/web/api/audiocontext/currenttime/index.html +++ b/files/ja/web/api/baseaudiocontext/currenttime/index.html diff --git a/files/ja/web/api/audiocontext/decodeaudiodata/index.html b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html index db9c106e52..db9c106e52 100644 --- a/files/ja/web/api/audiocontext/decodeaudiodata/index.html +++ b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html diff --git a/files/ja/web/api/audiocontext/destination/index.html b/files/ja/web/api/baseaudiocontext/destination/index.html index f93e8682f1..f93e8682f1 100644 --- a/files/ja/web/api/audiocontext/destination/index.html +++ b/files/ja/web/api/baseaudiocontext/destination/index.html diff --git a/files/ja/web/api/audiocontext/listener/index.html b/files/ja/web/api/baseaudiocontext/listener/index.html index 7b4f394727..7b4f394727 100644 --- a/files/ja/web/api/audiocontext/listener/index.html +++ b/files/ja/web/api/baseaudiocontext/listener/index.html diff --git a/files/ja/web/api/audiocontext/onstatechange/index.html b/files/ja/web/api/baseaudiocontext/onstatechange/index.html index 5ce3ecaf26..5ce3ecaf26 100644 --- a/files/ja/web/api/audiocontext/onstatechange/index.html +++ b/files/ja/web/api/baseaudiocontext/onstatechange/index.html diff --git a/files/ja/web/api/audiocontext/samplerate/index.html b/files/ja/web/api/baseaudiocontext/samplerate/index.html index 8715d8ae39..8715d8ae39 100644 --- a/files/ja/web/api/audiocontext/samplerate/index.html +++ b/files/ja/web/api/baseaudiocontext/samplerate/index.html diff --git a/files/ja/web/api/audiocontext/state/index.html b/files/ja/web/api/baseaudiocontext/state/index.html index a19d03f9af..a19d03f9af 100644 --- a/files/ja/web/api/audiocontext/state/index.html +++ b/files/ja/web/api/baseaudiocontext/state/index.html diff --git a/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html deleted file mode 100644 index be09a119f7..0000000000 --- a/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: canvas に絵を描く -slug: Web/API/Canvas_API/Drawing_graphics_with_canvas -tags: - - HTML - - HTML5 - - 'HTML:Canvas' -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -<div class="note"> -<p>このページには、一部古い内容が含まれています。</p> -</div> - -<h2 id="Introduction" name="Introduction">イントロダクション</h2> - -<p><a href="ja/Firefox_1.5">Firefox 1.5</a> より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<code><canvas></code> は <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG の canvas の仕様</a>を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <code><canvas></code> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。</p> - -<p><code><canvas></code> は 1 つ以上の<em>描画コンテクスト</em> を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 <a href="/ja/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL レンダリングコンテクスト</a>を用いると良いでしょう。</p> - -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">2 次元描画コンテクスト</h2> - -<h3 id="A_Simple_Example" name="A_Simple_Example">初歩的な例</h3> - -<p>始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。</p> - -<pre class="brush: js">function draw() { - var myCanvas = document.getElementById('canvas'); - var ctx = myCanvas.getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</div> - -<p><code>draw</code> 関数は、まず <code>canvas</code> 要素を取得し、次にその <code>canvas</code> 要素 の 2 次元レンダリングコンテクストを取得しています。 <code>ctx</code> オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を <code>fillStyle</code> プロパティで設定し、<code>fillRect</code> メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の <code>fillStyle</code> は色と一緒に透明度を定義するために <code>rgba()</code> を使っています。</p> - -<p><code>fillRect()</code> は矩形状の塗りつぶし、<code>strokeRect()</code> は矩形状の輪郭線の描画、 <code>clearRect()</code> はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。</p> - -<h3 id="Using_Paths" name="Using_Paths">パスの利用</h3> - -<p><code>beginPath</code> メソッドは新しいパスの作成を開始します。そして <code>moveTo</code>、<code>lineTo</code>、<code>arcTo</code>、<code>arc</code> などのメソッドはパスにセグメントを加えるのに使われます。パスは <code>closePath</code> メソッドによって閉じることが可能です。パスの作成後、<code>fill</code> か <code>stroke</code> を使って <code>canvas</code> コンテクストにパスを描画します。</p> - -<pre class="brush: js">function draw() { - var myCanvas = document.getElementById('canvas'); - var ctx = myCanvas.getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - - // was: ctx.quadraticCurveTo(60, 70, 70, 150); これは間違い - - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- これが正しい書式 -> - - ctx.lineTo(30, 30); - - ctx.fill(); -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</div> - -<p><code>fill()</code> か <code>stroke()</code> を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。</p> - -<h3 id="Graphics_State" name="Graphics_State">レンダリングコンテクストの状態</h3> - -<p><code>fillStyle</code> 、<code>strokeStyle</code> 、<code>lineWidth</code> 、 <code>lineJoin</code> のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために <code>save()</code> と <code>restore()</code> という 2 つのメソッドを提供してます。</p> - -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">より複雑な例</h3> - -<p>パス、状態、変換行列を用いた少し複雑な例を紹介します。 <code>translate()</code> 、<code>scale()</code> 、<code>rotate()</code> のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。</p> - -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "black"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // 以後の全て変換はこの変換から相対的であることに注意 - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // 不要 - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<div>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</div> - -<p><code>drawBotie</code> 関数及び <code>dot</code> 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、<code>translate()</code> 及び <code>rotate()</code> を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 <code>dot</code> 関数は <code>(0, 0)</code> を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 <code>drawBowtie</code> は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。</p> - -<p>行列の操作は累積されるので、<code>save()</code> 及び <code>restore()</code> はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って <code>translate() rotate() translate() </code> の連続は <code>translate() translate() rotate()</code> の連続実行とは異なった結果を生みます。</p> - -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Apple の <canvas> との互換性</h2> - -<p><code><canvas></code> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。</p> - -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">必須の <code></canvas></code> タグ <span style="font-size: smaller; font-weight: normal;">このセクションの内容には古い情報が含まれます</span></h3> - -<p>Apple の Safari の実装においては、<code><canvas></code> は <code><img></code> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<code><canvas></code> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。</p> - -<p>代替内容が必要無い場合、単純に <code><canvas id="foo" ...></canvas></code> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。</p> - -<p>もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。</p> - -<p>現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。</p> - -<h2 id="Additional_Features" name="Additional_Features">その他の機能</h2> - -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">canvas への Web コンテンツの描画</h3> - -<div class="note">この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。<a class="external" href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2345">理由についてはソースをお読みください</a>。</div> - -<p>Mozilla の <code>canvas</code> は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM <code>window</code> の中身のスナップショットを canvas に描画します。以下に例を示します。</p> - -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> - -<p>上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。</p> - -<p>このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。</p> - -<p>Ted Mielczarek の <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。</p> - -<div class="note"><strong>注記:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/ja/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas">Canvas トピックページ</a></li> - <li><a href="/ja/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas チュートリアル</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG 仕様</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li><a href="/ja/docs/tag/canvas_examples">いくつかの使用例</a> : - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/ja/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/ja/docs/tag/canvas">その他...</a></li> -</ul> diff --git a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html index d8cf43a362..d8cf43a362 100644 --- a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index c23a5e1ce1..c23a5e1ce1 100644 --- a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.html index 1690518a7d..1690518a7d 100644 --- a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html +++ b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html index c9bc6c17f4..c9bc6c17f4 100644 --- a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html +++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html index 99e2c55b69..99e2c55b69 100644 --- a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html +++ b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..d99101e457 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,174 @@ +--- +title: 文字を描く +slug: Drawing_text_using_a_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>前の章で<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルや色を適用する</a>方法を見た後は、canvas にテキストを描画する方法を見ていきます。</p> +</div> + +<h2 id="Drawing_text" name="Drawing_text">テキストを描く</h2> + +<p>canvas のレンダリングコンテキストでは、2 種類のテキスト描画方法を提供します:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>(x,y) で指定した位置にテキストを塗りつぶして描画します。任意で最大描画幅を指定できます。</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>(x,y) で指定した位置にテキストの輪郭を描画します。任意で最大描画幅を指定できます。</dd> +</dl> + +<h3 id="A_fillText_example" name="A_fillText_example"><code>fillText</code> の例</h3> + +<p>現在の <code>fillStyle</code> を使用して、テキストを塗りつぶして描画します。</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = "48px serif"; + ctx.fillText("Hello world", 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="A_strokeText_example" name="A_strokeText_example"><code>strokeText</code> の例</h3> + +<p>現在の <code>strokeStyle</code> を使用して、テキストの輪郭を描画します。</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = "48px serif"; + ctx.strokeText("Hello world", 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Styling_text" name="Styling_text">テキストのスタイルを設定する</h2> + +<p>上記の例ではテキストをデフォルトのサイズより若干大きくするため、すでに <code>font</code> プロパティを使用していました。canvas にテキストを表示する形式を調整できるプロパティは、さらにいくつかあります:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>テキストを描画する際に使用するテキストのスタイルです。<a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("font")}} プロパティと同じ構文にのっとった文字列です。デフォルトのフォントは 10px sans-serif です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>テキストの配置を設定します。使用できる値は <code>start</code>、<code>end</code>、<code>left</code>、<code>right</code>、<code>center</code> です。デフォルト値は <code>start</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>ベースラインの位置ぞろえを設定します。使用できる値は <code>top</code>、<code>hanging</code>、<code>middle</code>、<code>alphabetic</code>、<code>ideographic</code>、<code>bottom</code> です。デフォルト値は <code>alphabetic</code> です。</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>書字方向を設定します。使用できる値は <code>ltr</code>、<code>rtl</code>、<code>inherit</code> です。デフォルト値は <code>inherit</code> です。</dd> +</dl> + +<p>以前に CSS を扱ったことがあれば、これらのプロパティも見慣れているでしょう。</p> + +<p>以下は <a href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> 提供の、<code>textBaseline</code> 属性によってサポートされている様々なベースラインを示した図です。<img alt="The top of the em square is + +roughly at the top of the glyphs in a font, the hanging baseline is + +where some glyphs like आ are anchored, the middle is half-way + +between the top of the em square and the bottom of the em square, + +the alphabetic baseline is where characters like Á, ÿ, + +f, and Ω are anchored, the ideographic baseline is + +where glyphs like 私 and 達 are anchored, and the bottom + +of the em square is roughly at the bottom of the glyphs in a + +font. The top and bottom of the bounding box can be far from these + +baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="A_textBaseline_example" name="A_textBaseline_example">textBaseline の例</h3> + +<p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> + +<pre class="brush: js;highlight[2]">ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="編集" /> + <input id="reset" type="button" value="リセット" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p> + +<h2 id="Advanced_text_measurements" name="Advanced_text_measurements">高度なテキスト測定</h2> + +<p>テキストのより詳細な情報を得る必要がある場合は、以下のメソッドでそれを測定できます。</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、{{domxref("TextMetrics")}} オブジェクトを返します。</dd> +</dl> + +<p>以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText("foo"); // TextMetrics オブジェクト + text.width; // 16; +} +</pre> + +<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko 固有の注意事項</h2> + +<p>Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の<a href="/ja/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">接頭辞付き API</a> で、早期バージョンのテキスト描画法を実装しています。これらは非推奨化または削除されており、動作を保証しません。</p> + +<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> diff --git a/files/ja/web/guide/html/canvas_tutorial/finale/index.html b/files/ja/web/api/canvas_api/tutorial/finale/index.html index e28beb611e..e28beb611e 100644 --- a/files/ja/web/guide/html/canvas_tutorial/finale/index.html +++ b/files/ja/web/api/canvas_api/tutorial/finale/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 0975cec653..0975cec653 100644 --- a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html +++ b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index 33e9ef3e21..33e9ef3e21 100644 --- a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html +++ b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html b/files/ja/web/api/canvas_api/tutorial/transformations/index.html index 066b5d2b84..066b5d2b84 100644 --- a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html +++ b/files/ja/web/api/canvas_api/tutorial/transformations/index.html diff --git a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html b/files/ja/web/api/canvas_api/tutorial/using_images/index.html index 588a662e5b..588a662e5b 100644 --- a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html +++ b/files/ja/web/api/canvas_api/tutorial/using_images/index.html diff --git a/files/ja/web/api/css_painting_api/ガイド/index.html b/files/ja/web/api/css_painting_api/guide/index.html index af90696aac..af90696aac 100644 --- a/files/ja/web/api/css_painting_api/ガイド/index.html +++ b/files/ja/web/api/css_painting_api/guide/index.html diff --git a/files/ja/web/api/deviceacceleration/index.html b/files/ja/web/api/devicemotioneventacceleration/index.html index 982499c4a8..982499c4a8 100644 --- a/files/ja/web/api/deviceacceleration/index.html +++ b/files/ja/web/api/devicemotioneventacceleration/index.html diff --git a/files/ja/web/api/document/getselection/index.html b/files/ja/web/api/document/getselection/index.html deleted file mode 100644 index 740d006c66..0000000000 --- a/files/ja/web/api/document/getselection/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: document.getSelection -slug: Web/API/Document/getSelection -tags: - - DOM - - Document - - Reference - - Selection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -<p>DOM の <code>getSelection()</code> メソッドは、 {{domxref("Window")}} インタフェース及び {{domxref("Document")}} インタフェースで利用可能です。<br> - 詳細については {{domxref("window.getSelection()")}} の頁を参照して下さい。</p> diff --git a/files/ja/web/api/document/inputencoding/index.html b/files/ja/web/api/document/inputencoding/index.html deleted file mode 100644 index bc128b09e8..0000000000 --- a/files/ja/web/api/document/inputencoding/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: document.inputEncoding -slug: Web/API/Document/inputEncoding -tags: - - DOM - - Document - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Document/characterSet -translation_of_original: Web/API/Document/inputEncoding ---- -<p>{{ApiRef}} {{deprecated_header}}</p> -<h2 id="Summary" name="Summary">概要</h2> -<p>文書パース時のエンコーディングを表す文字列（※ <code>ISO-8859-1</code> 等）を返します。</p> -<div class="warning"> - <strong>注記:</strong> このメソッドは DOM 4 仕様書ドラフトから削除されており、Gecko の実装からも削除される可能性があります。使用しないようにしてください。</div> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code><var>encoding</var> = document.inputEncoding;</code></pre> -<ul> - <li><code>inputEncoding</code> : {{readOnlyInline}}</li> -</ul> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> - <li>※ {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています。</li> -</ul> diff --git a/files/ja/web/api/document_object_model/preface/index.html b/files/ja/web/api/document_object_model/preface/index.html deleted file mode 100644 index 4a390b9177..0000000000 --- a/files/ja/web/api/document_object_model/preface/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 序文 -slug: Web/API/Document_Object_Model/Preface -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -<div> - {{ApiRef}}</div> -<h2 id="About_This_Reference" name="About_This_Reference">この資料について</h2> -<p>この節では、このガイドそのものについて説明します。誰のための資料で、どんな情報があって、あなた独自の DOM 開発を行うにあたってこの資料のなかの例をどのように使えるのか、について説明します。</p> -<p>この文書は書きかけなので、Gecko に実装されている DOM 関数と属性がきれいにまとめられてはいません。ただし、資料に含まれる各オブジェクトに関する文書 (<a href="/ja/docs/DOM/document" title="DOM/document">DOM Document リファレンス</a> など） は完結しています。多数の API に含まれるさまざまな資料が準備でき次第、この資料に追加します。</p> -<h2 id="Who_Should_Read_This_Guide" name="Who_Should_Read_This_Guide">この資料の対象となる読者</h2> -<p><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">Gecko DOM リファレンス</a> の読者は web 開発者や web ページの仕組みを知っている web の利用者です。この資料では、読者の専門知識を前提とはしていません。DOM、<a href="/ja/docs/XML" title="XML">XML</a>、web サーバ、web 標準、読者が DOM にアクセスするための言語である <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> に関する知識があるとは限らないものとしています。ですが、web ページの基本である <a href="/ja/docs/HTML" title="HTML">HTML</a> とブラウザとスタイルシートなどは押さえているものとして書かれています。</p> -<p>「導入の記述がある」 「例が多様」 「説明が詳しい」 という点では、「初心者向け」 のハッキングガイドと言うこともできます。ただし、一般的に言って、技術資料というものは web 開発の経験があっても無くても、その人たちにとって有用な資料である必要があります。</p> -<h2 id="What_is_Gecko.3F" name="What_is_Gecko.3F">Gecko とは？</h2> -<p>Mozilla と Firefox、Netscape 6 以上、そのほかの Mozilla をもとにしたブラウザの DOM 実装は同一のものです。というのも、これらのブラウザは同じ技術を使用しているからです。<span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> -<p>Gecko はこれらのブラウザの中にあるソフトウェアコンポーネントのことで、HTML の解析、ページのレイアウト、ドキュメント・オブジェクト・モデル、そしてアプリケーション・インタフェースの描画も処理しています。Gecko は、速く、標準に準拠した描画エンジンで、W3C の DOM 標準や DOM に類似した（しかし標準化されていない）ブラウザ・オブジェクト・モデル（例：<a href="/ja/docs/DOM/window" title="DOM/window"><code>window</code></a> など）を、web ページやブラウザのアプリケーション・インタフェース（<em>chrome</em>）において、実装します。</p> -<p>ブラウザによって表示されるアプリケーション・インタフェースやコンテントは実際には異なりますが、DOM はこれらを一律にノードの階層として提示します。<span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p> -<h2 id="API_Syntax" name="API_Syntax">API 構文</h2> -<p>各資料には、構文、入出力の引数 (return 型が与えられている return 型の場所) 、例、補足、該当仕様へのリンクがあります。</p> -<p>とくに読みとり専用属性の文法は基本的に一行だけです。なぜなら、それらのプロパティは設定できずアクセスしかできないからです。例えば、<code>screen</code> オブジェクトの <code>availHeight</code> は読取専用の属性なので、次のような構文で書かれています。</p> -<pre class="brush:js">iAvail = window.screen.availHeight -</pre> -<p>つまり、式の右辺の属性だけが利用できるということです。それに対して、読み書き可能な属性の場合は、次の例でも分かるように、値を設定することもできます。</p> -<pre class="brush:js">msg = window.status -window.status = msg -</pre> -<p>一般に、メンバの記述があるオブジェクトの場合、その構文は簡潔な型になります。例えば、要素ならなんでも <code>element</code> ですし、document オブジェクトなら <code>document</code> ですし、TABLE オブジェクトなら <code>TABLE</code> といった具合です (データ型について詳しくは<a href="/ja/docs/DOM/DOM_Reference/Introduction#Important_Data_Types" title="DOM/DOM_Reference/Introduction#Important_Data_Types">重要なデータ型</a> を参照してください)。</p> -<h2 id="Using_the_Examples" name="Using_the_Examples">例の使い方</h2> -<p>資料にある例のうち、その多くは単独のファイルとして完結しているものです。新しいファイルにコピーしてブラウザで開くと、きちんと動作します。コード断片もあります。断片の場合は、その断片を JavaScript コールバック関数内で使うことができます。例えば、 <a href="/ja/docs/DOM/window.document" title="DOM/window.document">window.document</a> 属性の資料にある例を次のように関数内に入れて、ボタンが押されたら呼ばれるような確認コードを書くことができます。</p> -<pre class="brush:html"><!DOCTYPE html> -<html> -<head> -<title>Test Page</title> -<script> -function testWinDoc() { - doc = window.document; - alert(doc.title); -} -</script> -</head> - -<body> - <button onclick="testWinDoc();">test document property</button> -</body> -</html> -</pre> -<p>すぐに利用できるように梱包されていないオブジェクトのメンバーについても、上記のような関数やページを作り出すことができます。「テスト実行環境」 の導入部分にある <a href="/ja/docs/DOM/DOM_Reference/Introduction#Testing_the_DOM_API" title="DOM/DOM_Reference/Introduction#Testing_the_DOM_API">DOM API のテスト</a> の節を参照してください。それを使うと、一度に、たくさんの API の動作を確認できます。</p> diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/documentorshadowroot/activeelement/index.html index 31c1b2bc7f..31c1b2bc7f 100644 --- a/files/ja/web/api/document/activeelement/index.html +++ b/files/ja/web/api/documentorshadowroot/activeelement/index.html diff --git a/files/ja/web/api/document/elementfrompoint/index.html b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html index a24f1ce63a..a24f1ce63a 100644 --- a/files/ja/web/api/document/elementfrompoint/index.html +++ b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html diff --git a/files/ja/web/api/document/getanimations/index.html b/files/ja/web/api/documentorshadowroot/getanimations/index.html index eeb45f404e..eeb45f404e 100644 --- a/files/ja/web/api/document/getanimations/index.html +++ b/files/ja/web/api/documentorshadowroot/getanimations/index.html diff --git a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html deleted file mode 100644 index a7953136e6..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DocumentOrShadowRoot.nodeFromPoint() -slug: Web/API/DocumentOrShadowRoot/nodeFromPoint -tags: - - API - - DocumentOrShadowRoot - - Method - - Non-standard - - Reference - - nodeFromPoint - - メソッド - - 標準外 -translation_of: Web/API/DocumentOrShadowRoot -translation_of_original: Web/API/DocumentOrShadowRoot/nodeFromPoint ---- -<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> - -<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodeFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標にある最上位のノードを返します。</span></p> - -<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var node = document.nodeFromPoint(x, y);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>x</code></dt> - <dd>点の水平座標を表す倍精度浮動小数値。</dd> - <dt><code>y</code></dt> - <dd>点の垂直座標を表す倍精度浮動小数値。</dd> -</dl> - -<h3 id="Returns" name="Returns">返値</h3> - -<p>{{domxref('Node')}} オブジェクト。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Top node at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); -if (document.nodeFromPoint) { - var node = document.nodeFromPoint(30, 20); - output.textContent += node.localName; -} else { - output.innerHTML = "<span style=\"color: red;\">" + - "Browser does not support <code>document.nodeFromPoint()</code>" + - "</span>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>現在はどの仕様書にも含まれていません。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("api.DocumentOrShadowRoot.nodeFromPoint")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}}</li> - <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li> -</ul> diff --git a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html deleted file mode 100644 index d3f79b8d11..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: DocumentOrShadowRoot.nodesFromPoint() -slug: Web/API/DocumentOrShadowRoot/nodesFromPoint -tags: - - API - - DocumentOrShadowRoot - - Method - - Non-standard - - Reference - - nodesFromPoint - - メソッド -translation_of: Web/API/DocumentOrShadowRoot -translation_of_original: Web/API/DocumentOrShadowRoot/nodesFromPoint ---- -<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> - -<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodesFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標のすべてのノードの配列を返します。</span></p> - -<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var nodes = document.nodesFromPoint(x, y);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt>x</dt> - <dd>点の水平座標。</dd> - <dt>y</dt> - <dd>点の垂直座標。</dd> -</dl> - -<h3 id="Returns" name="Returns">返値</h3> - -<p>{{domxref('Node')}} オブジェクトの配列。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Nodes at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> - -<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); -if (document.nodesFromPoint) { - var nodes = document.nodesFromPoint(30, 20); - for(var i = 0; i < nodes.length; i++) { - output.textContent += nodes[i].localName; - if (i < nodes.length - 1) { - output.textContent += " < "; - } - } -} else { - output.innerHTML = "<span style=\"color: red;\">" + - "Browser does not support <code>document.nodesFromPoint()</code>" + - "</span>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>現在はどの仕様書にも含まれていません。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("api.DocumentOrShadowRoot.nodesFromPoint")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}}</li> - <li>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</li> -</ul> diff --git a/files/ja/web/api/cssmatrix/index.html b/files/ja/web/api/dommatrix/index.html index 756a3c4cb2..756a3c4cb2 100644 --- a/files/ja/web/api/cssmatrix/index.html +++ b/files/ja/web/api/dommatrix/index.html diff --git a/files/ja/web/api/element/name/index.html b/files/ja/web/api/element/name/index.html deleted file mode 100644 index e069431e6e..0000000000 --- a/files/ja/web/api/element/name/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: element.name -slug: Web/API/Element/name -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ ApiRef() }}</p> -<h3 class="editable" id="概要" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>概要</span></h3> -<p><strong>name</strong> はDOM オブジェクトの<code>name</code> 属性を取得または設定します。</p> -<p>ただし、この属性が適用されるのは次の要素に限られます。</p> -<p>{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, {{ HTMLelement("textarea") }}.</p> -<p>name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> と <a href="/en/DOM/form.elements" title="en/DOM/form.elements">form.elements</a> のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。</p> -<h3 class="editable" id="構文" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>構文</span></h3> -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> -<h3 class="editable" id="例" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>例</span></h3> -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // form の最初の要素の参照を取得します。 - var formElement = document.forms['formA'].elements[0]; - - // name 属性を設定します。 - formElement.name = 'inputA'; - - // input の value を表示します。 - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> -<h3 class="editable" id="注記" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>注記</span></h3> -<p>Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。</p> -<h3 class="editable" id="仕様" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>仕様</span></h3> -<p>W3C DOM 2 HTML Specification:</p> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> -<p>{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}</p> diff --git a/files/ja/web/api/event/button/index.html b/files/ja/web/api/event/button/index.html deleted file mode 100644 index 572f611ebc..0000000000 --- a/files/ja/web/api/event/button/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: event.button -slug: Web/API/Event/button -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/MouseEvent/button -translation_of_original: Web/API/event.button ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Summary</h3> -<p>イベントを発生させたマウスのボタンを示しています。</p> -<h3 id="Syntax" name="Syntax">Syntax</h3> -<pre>var buttonCode = event.button; -</pre> -<p>state を変えたボタンを示す整数値を返します。</p> -<ul> - <li>0 は普通の'クリック'であり、通常は左クリック</li> - <li>1 は中ボタンであり、通常はホイールのクリック</li> - <li>2 は右ボタンであり、通常は右クリック</li> -</ul> -<p>ボタンの順序はどのようにポインティングデバイスが設定されているかによります。</p> -<h3 id="Example" name="Example">Example</h3> -<pre><script type="text/javascript"> - -function whichButton(e) -{ - // Handle different event models - var e = e || window.event; - var btnCode; - - if ('object' == typeof e){ - btnCode = e.button; - - switch (btnCode){ - case 0 : alert('Left button clicked'); - break; - case 1 : alert('Middle button clicked'); - break; - case 2 : alert('Right button clicked'); - break; - default : alert('Unexpected code: ' + btnCode); - } - } -} - -</script> - -<p onclick="whichButton(event);">Click with mouse...</p> - -</pre> -<h3 id="Notes" name="Notes">Notes</h3> -<p>マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック（通常は左クリック）でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。</p> -<p>ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。</p> -<h3 id="Specification" name="Specification">Specification</h3> -<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p> diff --git a/files/ja/web/api/event/createevent/index.html b/files/ja/web/api/event/createevent/index.html deleted file mode 100644 index d9dc6aef3f..0000000000 --- a/files/ja/web/api/event/createevent/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -<p>{{APIRef("DOM")}}</p> - -<p>新規イベントを生成します。生成されたイベントは初期化処理が必須です。</p> - -<h3 id="構文">構文</h3> - -<pre><code>document.createEvent(type) </code></pre> - -<dl> - <dt><code>type</code></dt> - <dd>生成するイベントタイプ名</dd> -</dl> - -<p>このメソッドは指定されたイベントタイプの新規DOM {{ domxref("Event") }} オブジェクトを返り値として返します。</p> - -<p>オブジェクトには初期化処理が必須です。</p> - -<h3 id="例">例</h3> - -<pre>var newEvent = document.createEvent("UIEvents");</pre> - -<h3 id="仕様書">仕様書</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> -</ul> diff --git a/files/ja/web/guide/api/gamepad/index.html b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.html index 1cd391adb2..1cd391adb2 100644 --- a/files/ja/web/guide/api/gamepad/index.html +++ b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.html diff --git a/files/ja/web/api/window/onreset/index.html b/files/ja/web/api/globaleventhandlers/onreset/index.html index c9862667e8..c9862667e8 100644 --- a/files/ja/web/api/window/onreset/index.html +++ b/files/ja/web/api/globaleventhandlers/onreset/index.html diff --git a/files/ja/web/api/window/onresize/index.html b/files/ja/web/api/globaleventhandlers/onresize/index.html index db2b2bbae9..db2b2bbae9 100644 --- a/files/ja/web/api/window/onresize/index.html +++ b/files/ja/web/api/globaleventhandlers/onresize/index.html diff --git a/files/ja/web/api/document/onselectionchange/index.html b/files/ja/web/api/globaleventhandlers/onselectionchange/index.html index 9793bde3fa..9793bde3fa 100644 --- a/files/ja/web/api/document/onselectionchange/index.html +++ b/files/ja/web/api/globaleventhandlers/onselectionchange/index.html diff --git a/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..4739714e52 --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,350 @@ +--- +title: ドラッグ操作 +slug: DragDrop/Drag_Operations +tags: + - Advanced + - Guide + - HTML + - HTML5 + - XUL + - ドラッグ＆ドロップ +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>以下は、ドラッグ＆ドロップ操作が行われる時の各段階についての解説です。</p> + +<p class="note">この文書で記述されているドラッグ操作は {{domxref("DataTransfer")}} インターフェイスを使用します。この文書では {{domxref("DataTransferItem")}} インターフェイスや {{domxref("DataTransferItemList")}} インターフェイスは説明<em>しません</em>。</p> + +<h2 id="draggableattribute" name="draggableattribute">draggable 属性</h2> + +<p>ウェブページにおいては、既定のドラッグ＆ドロップの挙動が使われる場合がいくつかあります。文字列の選択範囲、画像、リンクなどのドラッグなどがこれにあたります。画像かリンクがドラッグされた時は、画像もしくはリンク先の URL がドラッグデータとして設定され、ドラッグ操作が始まります。その他の要素は、既定のドラッグ操作が行われるためには選択範囲に含まれていなければなりません。実際の様子を確認するには、ウェブページの一部を選択して、その上でマウスのボタンを押下し、そのまま選択範囲をドラッグしてください。ドラッグ中、選択範囲の内容を半透明で描画した物がマウスポインターに伴って表示されるでしょう。ただしこの挙動は、ドラッグされたデータを加工するイベントリスナーが存在しない場合の、既定のドラッグの挙動によるものです。</p> + +<p>HTML では、画像、リンク、選択範囲の上での既定の動作を除くと、他の要素は初期状態ではドラッグできません。 <a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> では、すべての要素がドラッグ可能です。</p> + +<p>上記以外の他の HTML 要素をドラッグできるようにするには、以下の3つの事をしなくてはなりません。</p> + +<ul> + <li>ドラッグできるようにしたい要素の <code>{{htmlattrxref("draggable")}}</code> 属性の値を <code>true</code> に設定する。</li> + <li><code>{{event("dragstart")}}</code> イベントにリスナーを設定し、そのリスナーの中でドラッグデータを設定する。</li> + <li>上記で定義されたリスナーの中で{{domxref("DataTransfer.setData","ドラッグデータを設定する")}}。</li> +</ul> + +<p>以下は、コンテンツの一部がドラッグできるようにする例です。</p> + +<pre class="brush: html"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')"> + この文字列はドラッグが<strong>できます</strong>。 +</div> +</pre> + +<p><code>{{htmlattrxref("draggable")}}</code> 属性を true に設定すると、その要素はドラッグできるようになります。この属性が設定されていない、あるいは false に設定されている場合、その要素をドラッグする事はできず、代わりにテキストが選択されるでしょう。 <code>{{htmlattrxref("draggable")}}</code> 属性は画像やリンクを含めてあらゆる要素に設定できます。ただし、画像とリンクについてだけは初期値がtrueとなっていますので、実際にこれらの要素で使う場合は、要素をドラッグできないようにするために <code>{{htmlattrxref("draggable")}}</code> 属性に <code>false</code> を設定するという場合がほとんどでしょう。</p> + +<p>要素がドラッグ可能になった場合、文字列やその要素に含まれている他の要素が、マウスによるクリックやドラッグなどの通常の操作では選択する事ができなくなることに注意してください。ユーザーが文字列を選択するには、通常の操作の代わりに、 Alt キーを押しながらマウスで選択するか、キーボードで操作を行う必要があります。</p> + +<p>XUL 要素では、 <code>{{htmlattrxref("draggable")}}</code> 属性を使う必要はありません。全ての XUL 要素はドラッグ可能です。</p> + +<pre class="brush: html"><button label="ドラッグしてください" ondragstart="event.dataTransfer.setData('text/plain', '「ドラッグしてください」ボタン');"> +</pre> + +<h2 id="dragstart" name="dragstart">ドラッグ操作の開始</h2> + +<p>この例では、 <code>{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}</code> 属性を使って、 {{event("dragstart")}} イベントのためのリスナーが追加されています。</p> + +<pre class="brush: html"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')"> + この文字列はドラッグが<strong>できます</strong>。 +</div> +</pre> + +<p>ユーザーがドラッグを開始しようとした時、 {{event("dragstart")}} イベントが発行されます。この例では {{event("dragstart")}} のリスナーは、ドラッグされる要素自身に追加されていますが、他の多くのイベントがそうであるようにドラッグイベントもバブリングしますので、より上位の祖先要素でイベントを監視することもできます。 {{event("dragstart")}} イベントでは、以下で解説している「ドラッグデータ」「フィードバック画像」「ドラッグの種類」を設定することができます。ドラッグデータの指定は必須ですが、多くの状況では、フィードバック画像とドラッグの種類は既定のもので問題ありません。</p> + +<h2 id="dragdata" name="dragdata">ドラッグデータ</h2> + +<p>全ての{{domxref("DragEvent","ドラッグイベント")}}は、ドラッグデータを保持するための {{domxref("DragEvent.dataTransfer","dataTransfer")}} と呼ばれるプロパティを持っています（<code>dataTransfer</code> は {{domxref("DataTransfer")}} オブジェクトの一つです）。</p> + +<p>ドラッグが行われた時には、何がドラッグされているのかを識別するデータが、そのドラッグに対して関連付けられなくてはなりません。例えば、テキストボックスの中の選択された文字列がドラッグされた時は、ドラッグに関連付けられたデータは、文字列それ自体となります。同様に、ウェブページの中のリンクがドラッグされた時は、リンク先の URL がドラッグデータとなります。</p> + +<p>ドラッグデータは、データの型（データの形式）と、データの値の、2つの情報を含んでいます。データの形式はタイプ文字列（テキストデータを示す<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#text" title="Ja/DragDrop/Recommended Drag Types#text">text/plain</a>などのような）で指定し、データの値は文字列で指定します。ドラッグが開始された時、あなたはデータを型と値の設定で指定するでしょう。ドラッグが行われている間、<font face="Courier New">dragenter</font>および<font face="Courier New">dragover</font>イベントのイベントリスナーにおいて、あなたはデータの型を、ドロップが許可されているかどうかの判定に使うでしょう。具体例としては、リンクのドロップを受け付けるドロップターゲットは、リンクの型である <a href="/ja/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> かどうかを確認するでしょう。dropイベントにおいてはリスナーは、この型の情報を元にドラッグされたデータを取得して、ドロップ位置に挿入するでしょう。</p> + +<p>型は、 <a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#text" title="Ja/DragDrop/Recommended Drag Types#text">text/plain</a> や <a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#image" title="Ja/DragDrop/Recommended Drag Types#image">image/jpeg</a> などのような、 MIME-type に似た形式の文字列で、独自の型を作ることもできます。広く一般的に使われている型の一覧が<a class="internal" href="/Ja/DragDrop/DataTypes" title="Ja/DragDrop/DataTypes">ドラッグ型</a>のページにあります。</p> + +<p>一つのドラッグ操作で、複数の異なる形式のデータを提供できます。この仕組みにより、独自の形式や、その形式のデータを受け取れない要素向けのフォールバック用の形式など、データをより適切な形式で引き渡すことができます。通常、最後のフォールバック先として使われる形式は、 <a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#text" title="Ja/DragDrop/Recommended Drag Types#text">text/plain</a> 型として表される普通のテキストデータです。このデータは元のテキストの単純な文字列となるでしょう。</p> + +<p>データを {{domxref("DragEvent.dataTransfer","dataTransfer")}} に設定するには、 {{domxref("DataTransfer.setData","setData()")}} メソッドを使います。このメソッドは、データの型とデータの値の、2つの引数を取ります。例：</p> + +<pre class="brush: js">event.dataTransfer.setData("text/plain", "ドラッグされたテキスト"); +</pre> + +<p>この例では、データの値は「ドラッグされたテキスト」で、形式は <a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#text" title="Ja/DragDrop/Recommended Drag Types#text">text/plain</a> です。</p> + +<p>データは複数の形式で提供できます。これを実現するには、異なる形式を指定して {{domxref("DataTransfer.setData","setData()")}} メソッドを複数回呼び出します。最も具体的な形式から、具体的でない形式に向けて呼び出します。</p> + +<pre class="brush: js">var dt = event.dataTransfer; +dt.setData("application/x-bookmark", bookmarkString); +dt.setData("text/uri-list", "http://www.mozilla.org"); +dt.setData("text/plain", "http://www.mozilla.org"); +</pre> + +<p>これは、3つの異なる型のデータを追加する例です。最初の型の「application/x-bookmark」は独自の形式です。他のアプリケーションはこの形式をサポートしていないでしょうが、同じウェブサイトやアプリケーションの中の領域同士でのドラッグでは、このような独自の形式を利用できます。また、他の型でもデータを提供することで、このような独自形式をサポートしていない他のアプリケーション向けにも、代替の形式でドラッグできるようになります。「application/x-bookmark」型はそのアプリケーションの中ではより使いやすく詳細な情報を提供できますが、他の型で渡されるデータは、単純な1つの URL もしくは文字列となります。</p> + +<p>なお、この例では <a href="/ja/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> も <a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#text" title="Ja/DragDrop/Recommended Drag Types#text">text/plain</a> も同じデータを含んでいます。このようにすることが多いのですが、こうしなければならない訳ではありません。</p> + +<p>同じ形式で2回データを登録すると、古いデータは新しいデータによって置き換えられますが、データの形式の登録の順番自体は古いデータを登録した時のままになります。</p> + +<p>登録したデータは {{domxref("DataTransfer.clearData","clearData()")}} メソッドによって削除できます。このメソッドは、削除するデータの形式を引数として求めます。</p> + +<pre class="brush: js">event.dataTransfer.clearData("text/uri-list"); +</pre> + +<p>{{domxref("DataTransfer.clearData","clearData()")}} メソッドの引数によるデータ形式の指定は省略可能です。データの形式が指定されなかった時は、全ての型のデータが削除されます。ドラッグ開始時にデータが1つも登録されなかった場合、もしくは後の処理で全てのデータが削除された場合、ドラッグ操作は発生しません。</p> + +<h2 id="dragfeedback" name="dragfeedback">ドラッグフィードバック画像の設定</h2> + +<p>ドラッグが行われた時、ドラッグ元（dragstartイベントが発行された要素）を元にして OS によって画像が生成され（例えば Windows では半透明の画像になります）、ドラッグしている間マウスポインターに伴って表示されます。この画像は自動的に生成されるため、あなたが用意する必要はありません。しかし、 {{domxref("DataTransfer.setDragImage","setDragImage()")}} によって、独自のドラッグ中のフィードバック画像を指定することができます。</p> + +<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset); +</pre> + +<p>このメソッドは3つの引数を要求します。第1引数は一般的には画像の要素ですが、 canvas 要素やその他の要素を指定することもできます。フィードバック画像は、その画像が画面上で表示される場合と同じ形・原寸大で生成されます。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} の第2、第3引数は画像を表示するマウスポインターからの相対オフセットです。</p> + +<p>文書中に存在しないものをフィードバック画像として使うために、以下の例のようにして、画像や canvas を利用することもできます。</p> + +<pre class="brush: js">function dragWithCustomImage(event) { + var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas"); + canvas.width = canvas.height = 50; + + var ctx = canvas.getContext("2d"); + ctx.lineWidth = 4; + ctx.moveTo(0, 0); + ctx.lineTo(50, 50); + ctx.moveTo(0, 50); + ctx.lineTo(50, 0); + ctx.stroke(); + + var dt = event.dataTransfer; + dt.setData('text/plain', 'ドラッグされるデータ'); + dt.setDragImage(canvas, 25, 25); +} +</pre> + +<p>この例では、 canvas の大きさは幅50ピクセル・高さ50ピクセルで、オフセット値はそれぞれの半分の値（各25ピクセル）となっており、画像はマウスポインターの中央に表示されます（マウスポインターが画像の中央に表示されます）。</p> + +<p>{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}</p> + +<p>Gecko の開発者（アドオンまたは Mozilla アプリケーションコードのどちらかを開発している人）の場合、 Gecko 9.0 {{geckoRelease("9.0")}} は XUL {{XULElem("panel")}} 要素をドラッグフィードバック画像として使用することの対応を追加します。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} に {{XULElem("panel")}} 要素に渡すだけです。</p> + +<p>この XUL {{XULElem("panel")}} を考えてみてください。</p> + +<pre class="brush: xml"><<span class="start-tag">panel</span><span class="attribute-name"> id</span>=<span class="attribute-value">"panel" </span><span class="attribute-name">style</span>=<span class="attribute-value">"opacity: 0.6</span><span class="attribute-value">"</span>> + <<span class="start-tag">description</span><span class="attribute-name"> id</span>=<span class="attribute-value">"pb"</span>>Drag Me</<span class="end-tag">description</span>> +</<span class="end-tag">panel</span>> + +<<span class="start-tag">vbox</span><span class="attribute-name"> align</span>=<span class="attribute-value">"start" </span><span class="attribute-name">style</span>=<span class="attribute-value">"border: 1px solid black;" </span><span class="attribute-name">ondragstart</span>=<span class="attribute-value">"startDrag(event)"</span>> + <<span class="start-tag">description</span>>Drag Me</<span class="end-tag">description</span>> +</<span class="end-tag">vbox</span>> +</pre> + +<p>ユーザーが上記の {{XULElem("vbox")}} をクリックしてドラッグを始めると、以下の <code>startDrag()</code> 関数が呼び出されます。</p> + +<pre class="brush: js"><span class="cdata">function startDrag(event) { + event.dataTransfer.setData("text/plain", "<strong>Body</strong>"); + event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20); +}</span> +</pre> + +<p>これは "<strong>Body</strong>" という文字列が HTML 形式で入った panel をドラッグ画像として使用します。パネルをテキストエディタ―にドロップすると、 "<strong>Body</strong>" という文字列がテキスト中のドロップした場所に挿入されます。</p> + +<h2 id="drageffects" name="drageffects">ドラッグの種類</h2> + +<p>ドラッグを行う時の操作には、いくつかの種類があります。 <code>copy</code> （コピー）はドラッグされているデータが現在の場所からドロップ先の場所にコピーされることを示します。 <code>move</code> （移動）はドラッグされているデータがドロップ先に移動されることを示し、 <code>link</code> （リンク）はドラッグ元とドロップ先の場所との間に何らかの形での関連付けや繋がりが作られることを示します。</p> + +<p><code>{{event("dragstart")}}</code> イベントのリスナーにおいて、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティに値を設定することで、 ドラッグ元について上記の3つの操作のうちどれが許可されているのかを示すことができます。</p> + +<pre class="brush: js">event.dataTransfer.effectAllowed = "copy"; +</pre> + +<p>この例では、コピーのみが許可されています。複数の種類の操作を組み合わせることもできます。</p> + +<dl> + <dt>none</dt> + <dd>どの操作も許可されていない（ドロップを禁止）。</dd> + <dt>copy</dt> + <dd>コピーのみが許可されている。</dd> + <dt>move</dt> + <dd>移動のみが許可されている。</dd> + <dt>link</dt> + <dd>リンクのみが許可されている。</dd> + <dt>copyMove</dt> + <dd>コピーまたは移動のみが許可されている。</dd> + <dt>copyLink</dt> + <dd>コピーまたはリンクのみが許可されている。</dd> + <dt>linkMove</dt> + <dd>リンクまたは移動のみが許可されている。</dd> + <dt>all</dt> + <dd>コピー、移行、リンクの全ての操作が許可されている。</dd> +</dl> + +<p>上に列挙されている値のいずれかと全く等しい値だけが利用可能であることに注意してください。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを <code>copyMove</code> に設定すると、コピーや移動の操作を許可しますが、ユーザーがリンク操作を行うことを防ぐことができます。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを変更しない場合、「all」が指定された時と同様に、全ての操作が許可されます。ですので、特定の種類の操作を除外したい場合を除いて、プロパティの値を手動で設定する必要はありません。</p> + +<p>ドラッグ操作の間、 <code>{{event("dragenter")}}</code> または <code>{{event("dragover")}}</code> イベントのリスナーは、操作が許可されているかどうかを確かめるために {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを参照できます。これらのイベントにおいて、関連するプロパティである {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティへ、実際に行われる操作の種類1つだけが指定されるべきです。 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値として妥当な物は、<code>none</code>、<code>copy</code>、<code>move</code>、または<code>link</code>のみです。このプロパティへは、複数の操作を組み合わせた値は指定できません。</p> + +<p>{{event("dragenter")}} および {{event("dragover")}} イベントにおいて、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはユーザーが要求している操作に初期化されます。ユーザーは操作の種類を修飾キーを押すことにより変更することができます。実際に使用されるキーはプラットフォームごとに異なりますが、大抵の場合は Shift キーと Control キーが、コピー・移動・リンクの各操作の切り替えに使われるでしょう。マウスポインターはどの操作が望まれているのかを示すために、例えばコピーならカーソルの横に「＋」記号が表示される、といった風に変化するでしょう。</p> + +<p>{{event("dragenter")}} または {{event("dragover")}} イベントの間に {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値を変更すると、ユーザーが選択した操作の種類を上書きし、特定のドロップ操作を強制することができます。この時に指定できる操作の種類は、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティの値として列挙されている操作に含まれていなくてはならないことに注意してください。それ以外の値を設定した場合は、許可されている操作の中から代わりの値が設定されます。</p> + +<pre class="brush: js">event.dataTransfer.dropEffect = "copy"; +</pre> + +<p>この例では、「コピー」が行なわれる効果です。</p> + +<p>その場所へのドロップが禁止されていることを示すために、値として <code>none</code> を設定することもできます。</p> + +<p>{{event("drop")}} および {{event("dragend")}} イベントの中では、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティをチェックすることで最終的に選択されている効果を特定できます。選択された効果が「move」であれば、 {{event("dragend")}} イベントの中でドラッグ元から元のデータを削除するべきです。</p> + +<h2 id="droptargets" name="droptargets">ドロップ先の指定</h2> + +<p>{{event("dragenter")}} および {{event("dragover")}} イベントのリスナーは、ドラッグされている項目がどの場所にドロップされようとしているのかを正確に示す働きをすることが多いです。ウェブページやアプリケーションのほとんどの領域は、ドロップデータを受け取る場所としては不適切です。従って、これらのイベントに対する既定の動作はドロップを禁止する働きをします。</p> + +<p>ドロップを許可したい場合、イベントをキャンセルして既定の動作を無効化する必要があります。属性値として定義されたイベントリスナーで <code>false</code> を返すか、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼ぶことで、既定の動作を無効にできます。別のファイルに分けられたスクリプトで機能を定義する場合は、後者の方が便利でしょう。</p> + +<pre class="brush: html"><div ondragover="return false"> +<div ondragover="event.preventDefault()"> +</pre> + +<p>{{event("dragenter")}} および {{event("dragover")}} イベントのどちらにおいても、 {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すと、その場所がドロップ可能な場所であるということを示します。多くの場合は、例えばリンクがドラッグされている時だけなど、特定の状況でのみ {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出したいと思うでしょう。これを実現するには、条件を確かめて、条件が満たされている時だけイベントをキャンセルするような関数を使って下さい。条件が満たされていない時はイベントをキャンセルしないでおけば、ユーザーがマウスのボタンを放してもその場所へのドロップは行われません。</p> + +<p>ドロップを受け付けるか拒絶するかを決める最も一般的な方法は、データ転送の仕組みに含まれているドラッグデータの型を判別するものです。例えば、画像やリンク、もしくはその両方のみを受け付けるといった事ができます。これを実現するには、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} （プロパティ）の {{domxref("DataTransfer.types","types")}} プロパティを確認します。 {{domxref("DataTransfer.types","types")}} プロパティはドラッグが開始された時に登録されたタイプ文字列のリストで、最も適切なものから最も適切でないものの順で並んでいます。</p> + +<pre class="brush: js">function contains(list, value) { + for( var i = 0; i < list.length; ++i ) { + if(list[i] === value) return true; + } + return false; +} + +function doDragOver(event) { + var isLink = contains( event.dataTransfer.types, "text/uri-list"); + if (isLink) { + event.preventDefault(); + } +}</pre> + +<p>この例では、型のリストの中に <a href="/ja/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> 型があるかどうかを確認するために <code>contains</code> メソッドを使用しています。もし条件が真であれば、イベントはキャンセルされて、ドロップが許可されるでしょう。もしドラッグデータがリンクを含んでいなければ、イベントはキャンセルされず、その場所でのドロップも行われません。</p> + +<p>実際に行われる処理の種類をより適切に示すために、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} や {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティのいずれか、あるいはその両方に値を指定したいと思う事もあるでしょう。当然ですが、イベントをキャンセルするのを忘れると、これらのプロパティの値を変えても何も起こりません。</p> + +<h3 id="Updates_to_DataTransfer.types" name="Updates_to_DataTransfer.types">DataTransfer.types の更新</h3> + +<p>なお、最新の仕様書では {{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく {{domxref("DOMString")}} の凍結した配列を返すべきだとしています（Firefox 52 以降で対応されました）。</p> + +<p>結果として、 <a href="/ja/docs/Web/API/Node/contains">contains</a> メソッドはこのプロパティでは動作しなくなりました。特定の種類のデータが提供されているかをチェックするためには、代わりに <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> メソッドを使用してください。以下のようなコードを使用します。</p> + +<pre class="brush: js">if ([...event.dataTransfer.types].includes('text/html')) { + // Do something +}</pre> + +<p><code>types</code> がどちらのメソッドに対応しているかを判別する機能を使用すれば、適切なコードを実行できます。</p> + +<h2 id="dropfeedback" name="dropfeedback">ドロップのフィードバック</h2> + +<p>その場所へのドロップが許可されていることをユーザーに示す方法はいくつかあります。マウスポインターは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値に応じて適切なものに変化します。実際の正確な表示のされ方はユーザーのプラットフォームに依存しますが、通常は例えば「コピー」に対しては「＋」記号が表示され、また、ドロップが許可されていない時は「ここにはドロップできません」という意味のアイコンが表示されるでしょう。多くの場合において、このポインターによるフィードバックは十分に役立ちます。</p> + +<p>それ以外にも必要に応じて、ユーザーインターフェースを更新して挿入箇所を示したりハイライト表示したりすることもできます。単にハイライト表示するだけであれば、ドロップ対象においてCSSの<code>-moz-drag-over</code>疑似クラスが利用できます。</p> + +<pre class="brush: css">.droparea:-moz-drag-over { + border: 1px solid black; +} +</pre> + +<p>この例において<code>droparea</code>クラスの要素は、 {{event("dragenter")}} イベントの中で {{domxref("Event.preventDefault","preventDefault()")}} メソッドが呼ばれて有効なドロップ対象となっている間、1ピクセルの黒い枠が表示されます。この疑似クラスは {{event("dragover")}} イベントでの状態の変化には反応しませんので、この疑似クラスでの指定を適用させるには {{event("dragenter")}} イベントをキャンセルしなくてはならない事に注意してください。</p> + +<p>より凝った視覚効果のために、例えばドロップが行われる位置に要素を挿入するなど、 {{event("dragenter")}} イベントの間に他の操作をすることもできます。この例なら、挿入される要素は、挿入箇所を示すマーカーあるいはドラッグされている要素が新しい位置に挿入された時の状態のプレビューなどとして利用できるでしょう。このような効果は、例えば <a class="internal" href="/ja/XUL/image" title="ja/XUL/image">image</a> や <a class="internal" href="/ja/XUL/separator" title="ja/XUL/separator">separator</a> を生成して、 {{event("dragenter")}} イベントの処理中にドキュメント中に単に挿入するだけで実現できます。</p> + +<p>{{event("dragover")}} イベントは、マウスポインターが現在指している要素において発行されます。挿入点のマーカーを {{event("dragover")}} イベントの発行に応じて移動させたいと思うのは自然な欲求でしょう。そのような場合には、他のマウスイベントでマウスポインターの位置を取得するために使われるのと同じ要領で、イベントの {{domxref("MouseEvent.clientX","clientX")}} と {{domxref("MouseEvent.clientY","clientY")}} プロパティを利用できます。</p> + +<p>最後に、ドラッグ中にマウスポインターが要素の上を離れる時、 {{event("dragleave")}} イベントが発行されます。これは挿入点のマーカーやハイライト表示を消すのにちょうどいいタイミングです。このイベントをキャンセルする必要はありません。 <code>-moz-drag-over</code> 疑似クラスを使って指定されたハイライト表示やその他の視覚効果は、すべて自動的に消去されます。 {{event("dragleave")}} イベントは、ドラッグがキャンセルされた時でも常に発行されますので、このイベントによって、挿入点の消去などを確実に行うことができます。</p> + +<h2 id="drop" name="drop">ドロップの実行</h2> + +<p>ユーザーがマウスのボタンを放した時、ドラッグ＆ドロップの操作は終了します。有効なドロップ対象となっている要素の上でマウスのボタンが放された場合、最後の {{event("dragenter")}} と {{event("dragover")}} イベントはキャンセルされて、ドロップが成功し、 {{event("drop")}} イベントがそのドロップ対象において発行されます。それ以外の場所でボタンが放された場合は、ドラッグ操作はキャンセルされ、 {{event("drop")}} イベントは発行されません。</p> + +<p>{{event("drop")}} イベントの間、あなたはドロップされたデータをイベントから取得して、ドロップ位置に挿入することになります。どのドラッグ＆ドロップ操作が望まれていたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティで判別することができます。</p> + +<p>すべてのドラッグ＆ドロップ関連のイベントにおいて、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティはドラッグされた対象に関するデータを保持しています。データの取得には {{domxref("DataTransfer.getData","getData()")}} メソッドを利用することになるでしょう。</p> + +<pre class="brush: js">function onDrop(event) { + var data = event.dataTransfer.getData("text/plain"); + event.target.textContent = data; + event.preventDefault(); +} +</pre> + +<p>{{domxref("DataTransfer.getData","getData()")}} メソッドは、取得したいデータの型を引数として取ります。実行すると、ドラッグ操作の開始時に {{domxref("DataTransfer.setData","setData()")}} メソッドによって登録された値が文字列として返されます。その型に対するデータが存在しない場合は、空文字が返されます。当然ながら、直前の {{event("dragover")}} イベントでの処理においてチェックした時と同様に、あなたはデータの正しい形式が利用可能かどうかを知りたいと思うでしょう。</p> + +<p>上記の例では、まずデータを取得し、ドロップ対象の内容テキストとしてそれを挿入しています。これは <code>p</code> 要素や <code>div</code> 要素がドロップ対象の領域として使われる事を想定しており、ドラッグされたテキストをドロップ位置に挿入するという効果をもたらします。</p> + +<p>ウェブページにおいては、ドロップを受け付けた場合、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すべきです。これによって、ブラウザ内でのドロップ時の既定の挙動がキャンセルされます。例えば、リンクがウェブページにドロップされた場合、 Firefox はそのリンク先を読み込もうとします。イベントをキャンセルすることで、この動作は抑止されます。</p> + +<p>他の形式でデータを取得することもできます。データがリンクであった場合、そのデータは <a href="/ja/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> 型でも提供されているでしょう。その場合、リンクを内容に挿入することができます。</p> + +<pre class="brush: js">function doDrop(event) { + var lines = event.dataTransfer.getData("text/uri-list").split("\n"); + for (let line of lines) { + if (line.startsWith("#")) + continue; + + let link = document.createElement("a"); + link.href = line; + link.textContent = line; + event.target.appendChild(link); + } + event.preventDefault(); +} +</pre> + +<p>この例は、ドラッグされたデータからリンクを挿入します。名前から想像できる通り、 <a href="/ja/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> 型は実際に複数のURLの改行区切りのリストを含んでいる場合があります。このコードでは、 <a class="internal" href="/ja/JavaScript/Reference/Global_Objects/String/split" title="Ja/Core JavaScript 1.5 Reference/Global Objects/String/split">split</a> を使って文字列を行ごとに分割し、各行に繰り返し処理を行って、それぞれをリンクとして文書中に挿入しています。ナンバー記号（#）で始まる物はコメントとして除外していることに注意してください。</p> + +<p>単純な使い方として、リストの中の最初の有効なURLを取得するために、特別な型 <code>URL</code> も利用できます。例：</p> + +<pre class="brush: js">var link = event.dataTransfer.getData("URL"); +</pre> + +<p>これによって、コメントの除外などの処理は一切不要になります。しかし、これはリストの中の最初の URL だけしか取得できないという制限があります。</p> + +<p><code>URL</code> 型は特別な省略表記用の型で、 {{domxref("DataTransfer.types","types")}} プロパティで取得できる型のリストには列挙されません。</p> + +<p>時には、複数の形式をサポートして、そのうち最も適切な形式で提供されたデータを取得したいと思う事もあるでしょう。以下の例では、3つの形式がドロップ対象によってサポートされています。</p> + +<p>以下の例は、提供されたデータの中で最も適切なデータを返す例です。</p> + +<pre class="brush: js">function doDrop(event) { + var types = event.dataTransfer.types; + var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"]; + types = supportedTypes.filter((value) => types.includes(value)); + if (types.length) + var data = event.dataTransfer.getData(types[0]); + event.preventDefault(); +} +</pre> + +<p>この例は Firefox 3 で利用可能な JavaScript の拡張された機能を使って書かれていますが、他の環境でも動作する様に書き換えることもできます。</p> + +<h2 id="dragend" name="dragend">ドラッグの終了</h2> + +<p>1回のドラッグ操作が終了すると、 {{event("dragend")}} イベントがドラッグ元（<code> {{event("dragstart")}} </code>イベントが発行されるのと同じ要素）において発行されます。このイベントは、ドラッグ操作が成功したかキャンセルされたかに関わらず発行されます。どの操作が行われたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティを参照して知ることができます。</p> + +<p>{{event("dragend")}} イベントにおいて {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値が<code>none</code>である場合、ドラッグ操作がキャンセルされたことを意味します。それ以外の場合は、プロパティの値は実際に行われた操作の種類を示します。ドラッグ元はこの情報に基づいて、ドラッグされた項目を「移動」の操作の後に元の場所から削除することができます。 {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} プロパティの値は、ユーザーが（Escapeキーを押すなどして）ドラッグ操作をキャンセルした場合は true となり、不正なドロップ先だった場合などの他の理由でドラッグ操作がキャンセルされた場合や、ドロップに成功した場合はfalseとなります。</p> + +<p>ドロップ操作は同じウィンドウの中または他のアプリケーションの上で行われ得ます。いずれの場合も常に {{event("dragend")}} イベントは発行されます。このイベントの {{domxref("MouseEvent.screenX","screenX")}} および {{domxref("MouseEvent.screenY","screenY")}} プロパティの値には、ドロップが行われたときの画面上での座標が設定されます。</p> + +<p>{{event("dragend")}} イベントの伝搬が終了した後、ドラッグ＆ドロップの操作は完了します。</p> + +<p>[1] Gecko では、元のノードがドラッグ中（例えばドロップ中や {{event("dragover")}}）に移動したり削除されたりした場合、 {{event("dragend")}} が発行されません。 <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&D API: dragend is not dispatched if the source node was moved or removed during the drag session">bug 460801</a></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML ドラッグ＆ドロップ API （概要）</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">複数の項目のドラッグ＆ドロップ</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">推奨されるドラッグタイプ</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> +</ul> diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html new file mode 100644 index 0000000000..aadaeb095d --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -0,0 +1,108 @@ +--- +title: 複数の項目のドラッグ＆ドロップ +slug: DragDrop/Dragging_and_Dropping_Multiple_Items +translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items +--- +<p>{{ Fx_minversion_header(3.5) }} Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29" title="Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> +<pre>var dt = event.dataTransfer; +dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0); +dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1); +</pre> +<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> +<pre>event.dataTransfer.mozClearDataAt("text/plain", 1); +</pre> +<p>あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、</p> +<pre>var dt = event.dataTransfer; +dt.mozSetDataAt("text/uri-list", "URL1", 0); +dt.mozSetDataAt("text/plain", "URL1", 0); +dt.mozSetDataAt("text/uri-list", "URL2", 1); +dt.mozSetDataAt("text/plain", "URL2", 1); +dt.mozSetDataAt("text/uri-list", "URL3", 2); +dt.mozSetDataAt("text/plain", "URL3", 2); +// [item1] data=URL1, index=0 +// [item2] data=URL2, index=1 +// [item3] data=URL3, index=2 +</pre> +<p>このように2つの形式で提供されたデータを持つ3つの項目を登録した後で、</p> +<pre>dt.mozClearDataAt("text/uri-list", 1); +dt.mozClearDataAt("text/plain", 1); +</pre> +<p>このように2番目の項目についてすべての形式のデータを削除すると、3番目だった項目が繰り上がって2番目の項目になり、インデックスが2から1に変わります。</p> +<pre>// [item1] data=URL1, index=0 +// [item2] data=URL3, index=1 +</pre> +<p>幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。</p> +<p>複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。</p> +<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29" title="Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> +<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> +<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> +<pre>function onDrop(event) +{ + var files = []; + var dt = event.dataTransfer; + for (var i = 0; i < dt.mozItemCount; i++) + files.push(dt.mozGetDataAt("application/x-moz-file", i)); +} +</pre> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> +<pre>var types = event.dataTransfer.mozTypesAt(1); +</pre> +<h2 id="文字列でないデータのドラッグ">文字列でないデータのドラッグ</h2> +<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file" title="Ja/DragDrop/Recommended Drag Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile" title="ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> +<pre>dt.mozSetDataAt("application/x-moz-file", file, 0); +</pre> +<p>複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。</p> +<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> +<h2 id="複数項目のドロップの例">複数項目のドロップの例</h2> +<p>以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。</p> +<pre><html> +<head> +<script> + +function dodrop(event) +{ + var dt = event.dataTransfer; + var count = dt.mozItemCount; + output("Items: " + count + "\n"); + + for (var i = 0; i < count; i++) { + output(" Item " + i + ":\n"); + var types = dt.mozTypesAt(i); + for (var t = 0; t < types.length; t++) { + output(" " + types[t] + ": "); + try { + var data = dt.mozGetDataAt(types[t], i); + output("(" + (typeof data) + ") : <" + data + " >\n"); + } catch (ex) { + output("<<error>>\n"); + dump(ex); + } + } + } +} + +function output(text) +{ + document.getElementById("output").textContent += text; + dump(text); +} + +</script> +</head> +<body> + +<div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" + ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();" + ondragover="event.stopPropagation(); event.preventDefault();" + ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);"> +<div> + +</body> +</html> +</pre> +<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault" title="ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> +<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> +<p>この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。</p> +<p>{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}</p> diff --git a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html new file mode 100644 index 0000000000..eb8487d158 --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -0,0 +1,228 @@ +--- +title: 推奨されるドラッグのデータ型 +slug: DragDrop/Recommended_Drag_Types +tags: + - Guide + - drag and drop +translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>HTML Drag and Drop API は、プレーンテキスト、URL、HTML コード、ファイルなど、さまざまな形式のデータのドラッグをサポートしています。このドキュメントでは、一般的なドラッグ可能なデータ形式のベストプラクティスについて説明しています。</p> + +<div class="overheadIndicator nonStandard nonStandardHeader"> +<p><strong>注意事項:</strong><br> + <code>mozSetDataAt()</code> のような <code>moz</code> プレフィックスを持つこのドキュメントのすべてのメソッドとプロパティは、Gecko ベースのブラウザでのみ動作します。</p> +</div> + +<h2 id="text" name="text">テキストのドラッグ</h2> + +<p>テキストをドラッグする時は、<code>text/plain</code> 型を使用します。2番目の引数には、ドラッグした文字列を指定します。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです"); +</pre> + +<p>Web ページのテキストボックスや選択範囲の文字列のドラッグは、ブラウザが自動的に処理を行うので、自分で処理する必要はありません。</p> + +<p>そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常に <code>text/plain</code> 型のデータを提供することをおすすめします。そのために、データを追加する時には最後に <code>text/plain</code> 型のデータを登録しておいてください。</p> + +<p class="note">注: 古いコードにおいて、<code>text/unicode</code> や <code>text</code> といった型の記述を見かけることがあるかもしれません。これらはどちらも <code>text/plain</code> と等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。</p> + +<h2 id="link" name="link">リンクのドラッグ</h2> + +<p>ドラッグされたハイパーリンクには、<code>text/uri-list</code> と <code>text/plain</code> の<em>2種類</em>のデータを含める必要があります。どちらの形式もリンクの URL をデータに使用しなければなりません。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">var dt = event.dataTransfer; +dt.setData("text/uri-list", "https://www.mozilla.org"); +dt.setData("text/plain", "https://www.mozilla.org"); +</pre> + +<p><code>text/uri-list</code> 型のフォールバックとして、<code>text/plain</code> 型を最後に設定します。</p> + +<p class="note">注:URL 用の型は <code>ur<em><strong>i</strong></em>-list-list</code> で、L ではなく I であることに注意してください。</p> + +<p>複数のリンクをドラッグするには、それぞれのリンクを <code>text/uri-list</code> データ内で CRLF 改行で区切ってください。ナンバー記号 (<code>#</code>) で始まる行はコメントで、有効な URL として扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます</p> + +<div class="blockIndicator warning"> +<p>複数のリンクのための <code>text/plain</code> 型のフォールバックは、すべての URL を含むべきですが、コメントを含めるべきではありません。</p> +</div> + +<p>例えば、以下のサンプル <code>text/uri-list</code> データには、2つのリンクと1つのコメントが含まれています。</p> + +<pre class="notranslate">http://www.mozilla.org +#2つ目のリンク +http://www.example.com +</pre> + +<p>ドロップされたリンクを取得する時は、コメントを含めて複数のリンクをドラッグした場合の処理を確実に行ってください。便宜上、<code>text/uri-list</code> 型のデータ内の最初の有効なリンクを参照するために、特別な型として <code>URL</code> を使用することができます。</p> + +<div class="blockIndicator warning"> +<p><code>URL</code> 型でデータを追加しないでください - それを行うと、代わりに <code>text/uri-list</code> 型のデータとして登録されます。</p> +</div> + +<pre class="brush: js notranslate">var url = event.dataTransfer.getData("URL"); +</pre> + +<p>Mozilla 特有の型として、<code>text/x-moz-url</code> 型のデータを見かけることがあるかもしれません。この型が表示される場合は、<code>text/uri-list</code> 型の前に表示されるはずです。この型のデータは、リンクの URL に続いてリンクのタイトルが保持されており。例えば、以下のようになります。</p> + +<pre class="notranslate">http://www.mozilla.org +Mozilla +http://www.example.com +Example +</pre> + +<h2 id="html" name="html">HTMLとXMLのドラッグ</h2> + +<p>HTML の内容は <code>text/html</code> 型を使用します。この型のデータはドラッグされる HTML をシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素の <code>{{domxref("Element.innerHTML","innerHTML")}}</code> プロパティの値です。</p> + +<p>XML の内容は <code>text/xml</code> 型を使用することができますが、内容は整形式の XML に変換しておくべきです。</p> + +<p>また、<code>text/plain</code> 型を使用して、HTML または XML のプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">var dt = event.dataTransfer; +dt.setData("text/html", "こんにちは、<strong>見知らぬ人</strong>"); +dt.setData("text/plain", "こんにちは、見知らぬ人"); +</pre> + +<h2 id="file" name="file">ファイルのドラッグ</h2> + +<p>ローカルのファイルは <code>application/x-moz-file</code> 型で、 <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。</p> + +<p>ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。</p> + +<pre class="brush: js notranslate">event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0); +</pre> + +<p>可能であれば、<code>text/uri-list</code> 型と <code>text/plain</code> 型の両方を使ってファイルの URL を含めてください。これらの型は最後に登録されるべきで、それによって、 <code>application/x-moz-file</code> 型は優先度の高い、より適切な型となります。</p> + +<p>複数のファイルは、データ転送中に複数のアイテムとしてドロップ中に受信されます。これについての詳細は、<a href="/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">複数の項目のドラッグ＆ドロップ</a>を参照してください。</p> + +<p>以下の例は、ドロップしたファイルを受信するための領域を作成する方法を示しています。</p> + +<pre class="brush: xml notranslate"><listbox ondragenter="return checkDrag(event)" + ondragover="return checkDrag(event)" + ondrop="doDrop(event)"/> + +<script> +function checkDrag(event) { + return event.dataTransfer.types.contains("application/x-moz-file"); +} + +function doDrop(event) { + var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0); + if (file instanceof Components.interfaces.nsIFile) { + event.currentTarget.appendItem(file.leafName); + } +} +</script> +</pre> + +<p>この例では、データ転送に <code>application/x-moz-file</code> 型が含まれている場合にのみ、イベントが false を返します。ドロップイベントの間、ファイル型に関連付けられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、<code>nsISupports</code> を返すので、nsIFile 型に変換するために、ここでは <code>instanceof</code> 演算子を使用していることに注意してください。これは、誤ってファイルではない型のデータを登録した場合のためのチェックとしても有効です。</p> + +<h3 id="DataTransfer.types_の更新">DataTransfer.types の更新</h3> + +<p>最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。</p> + +<p>その結果、<a href="/docs/Web/API/Node/contains">contains</a> メソッドはもう機能しません。代わりに <a href="/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。</p> + +<pre class="brush: js notranslate">if ([...event.dataTransfer.types].includes('text/html')) { + // 実行するコード +}</pre> + +<p>特徴検出を使用して、どのメソッドがサポートされている<code>型</code>なのかを判断し、適切なコードを実行することができます。</p> + +<h2 id="image" name="image">画像のドラッグ</h2> + +<p>画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に <code>text/uri-list</code> 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は <a href="/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> である必要があります。</p> + +<p>リンクと同様に、<code>text/plain</code> 型のデータには URL も含まれている必要があります。しかし、<a href="/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">データ URL</a> は通常のテキストの内容には有用ではないので、このような状況では <code>text/plain</code> 型のデータを除外した方がよいでしょう。</p> + +<p>Chrome などの特権的なコードでは、画像の種類に応じて、<code>image/jpeg</code>、<code>image/png</code>、<code>image/gif</code> のいずれかの形式を使用することもできます。データは、<a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。</p> + +<p>画像がディスク上にある場合は、<code>application/x-moz-file</code> 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。</p> + +<p>最も適切なデータ形式からそうでない形式まで、正しい順序でデータを登録することが重要です。最初に <code>image/jpeg</code> のような標準的な画像型を設定し、次に <code>application/x-moz-file</code> 型を設定します。次に、<code>text/uri-list</code> 型を設定し、最後に <code>text/plain</code> 型を設定します。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">var dt = event.dataTransfer; +dt.mozSetDataAt("image/png", stream, 0); +dt.mozSetDataAt("application/x-moz-file", file, 0); +dt.setData("text/uri-list", imageurl); +dt.setData("text/plain", imageurl); +</pre> + +<p>{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、テキスト以外のデータに使用されることに注意してください。内容によっては、これらの型の一部しか含まれていない場合があるので、ドロップされた画像を受信する時には、どの型が利用可能になっているかを確認することが重要です。</p> + +<h2 id="node" name="node">ノードのドラッグ</h2> + +<p>ドキュメント内のノードや要素は、<code>application/x-moz-node</code> 型を使ってドラッグすることができます。型のデータは DOM ノードでなければなりません。これにより、ドロップ対象はドラッグが開始された実際のノードを受け取ることができます。ノードがドロップされていても、異なるドメインからの呼び出し元はそのノードにアクセスできないことに注意してください。</p> + +<p>ノードの内容は常に <code>text/plain</code> 型の代替文字列で提供するべきです。</p> + +<h2 id="custom" name="custom">独自データのドラッグ</h2> + +<p>独自の目的のために、他の型を使うこともできます。そのデータが特定のサイトやアプリケーションに固有のものでない限り、常に <code>text/plain</code> 型の代替文字列を含めるようにしてください。代替テキストを用意しなかった場合は、他の場所にドロップできなくなります。</p> + +<h2 id="filestoos" name="filestoos">OS のフォルダにファイルをドラッグ</h2> + +<p>既存のドラッグイベントセッションにファイルを追加したり、コードが対象フォルダーの場所の通知を受信したときに、オペレーティングシステム内のフォルダーに対してのドロップ操作だった場合、ファイルをディスクに書き出したい場合があります。これは拡張機能（またはその他の特権コード）でのみ動作し、<code>application/moz-file-promise</code> 型を使用する必要があります。次のサンプルでは、この高度なケースの概要を説明します。</p> + +<pre class="brush: js notranslate">// currentEvent is an existing drag operation event + +currentEvent.dataTransfer.setData("text/x-moz-url", URL); +currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL); +currentEvent.dataTransfer.setData("<span class="p">application/x-moz-file-promise-dest-filename</span>", leafName); +currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise', + new dataProvider(success,error), + 0, Components.interfaces.nsISupports); + +function dataProvider(){} + +dataProvider.prototype = { + QueryInterface : function(iid) { + if (iid.equals(Components.interfaces.nsIFlavorDataProvider) + || iid.equals(Components.interfaces.nsISupports)) + return this; + throw Components.results.NS_NOINTERFACE; + }, + getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) { + if (aFlavor == 'application/x-moz-file-promise') { + + var urlPrimitive = {}; + var dataSize = {}; + + aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize); + var url = urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data; + console.log("URL file orignal is = " + url); + + var namePrimitive = {}; + aTransferable.getTransferData('<span class="p">application/x-moz-file-promise-dest-filename</span>', namePrimitive, dataSize); + var name = namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data; + + console.log("target filename is = " + name); + + var dirPrimitive = {}; + aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize); + var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile); + + console.log("target folder is = " + dir.path); + + var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile); + file.initWithPath(dir.path); + file.appendRelativePath(name); + + console.log("output final path is =" + file.path); + + // now you can write or copy the file yourself… + } + } +} +</pre> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li> + <li><a class="internal" href="Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> +</ul> diff --git a/files/ja/web/api/element/accesskey/index.html b/files/ja/web/api/htmlelement/accesskey/index.html index 82738c792f..82738c792f 100644 --- a/files/ja/web/api/element/accesskey/index.html +++ b/files/ja/web/api/htmlelement/accesskey/index.html diff --git a/files/ja/web/api/installtrigger/index.html b/files/ja/web/api/installtrigger/index.html new file mode 100644 index 0000000000..6b2353e403 --- /dev/null +++ b/files/ja/web/api/installtrigger/index.html @@ -0,0 +1,15 @@ +--- +title: InstallTrigger オブジェクト +slug: XPInstall_API_Reference/InstallTrigger_Object +--- +<p> </p> +<h2 id="InstallTrigger" name="InstallTrigger">InstallTrigger</h2> +<p>ソフトウェアのダウンロードとインストールをする引き金となる Web ページ上のスクリプトには、<code>InstallTrigger</code> オブジェクトを使用します。</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>とても簡単なインストール方法は、インストールスクリプトに必要な InstallTrigger オブジェクトを使用するだけです。</p> +<p>複雑なインストール方法では、<a href="ja/XPInstall_API_Reference/Install_Object"> Install</a> オブジェクトや <a href="ja/XPInstall_API_Reference/File_Object"> File</a> オブジェクトを使用する必要があります。どちらの場合も Web ページスクリプトを作成してインストール処理の引き金にします。そのページ内の InstallTrigger メソッドが、指定した XPI ファイルをダウンロードし、その XPI ファイルのトップレベルに置かれた install.js スクリプトを起動する "引き金" になります。</p> +<p>InstallTrigger オブジェクト上の最初のメソッドは <a href="ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> です。これは、XPI ファイル形式にまとめられた一つまたはそれ以上のソフトウェアパッケージをダウンロードし、インストールします。以下は、Web ページ上からインストールする引き金の基本的な例です:</p> +<pre>xpi={'XPInstall Dialog Display Name':'simple.xpi'}; +InstallTrigger.install(xpi); +</pre> +<p>また、InstallTrigger オブジェクトをソフトウェアのバージョンチェックに使用したり、Netscape 6 や Mozilla のテーマ、言語パックをインストールしたり、<a href="ja/XPInstall_API_Reference/InstallTrigger_Object/Methods/install"> install</a> オブジェクトを使用して複数のパッケージをインストールすることもできます。</p> diff --git a/files/ja/web/api/mediarecorder_api/index.html b/files/ja/web/api/mediarecorder_api/index.html deleted file mode 100644 index a2e3ec8eaf..0000000000 --- a/files/ja/web/api/mediarecorder_api/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: MediaRecorder API -slug: Web/API/MediaRecorder_API -translation_of: Web/API/MediaStream_Recording_API -translation_of_original: Web/API/MediaRecorder_API ---- -<div class="summary"> -<p><span class="seoSummary">MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 {{ domxref("Navigator.getUserMedia()") }} を単体で利用する際の利用が想定されています。</span></p> -</div> - -<h2 id="キーコンセプトと利用例">キーコンセプトと利用例</h2> - -<p>MediaRecorder を {{ domxref("Navigator.getUserMedia()") }} とともに利用することで、メディアデータを記録できます。単純には、 {{ domxref("MediaRecorder.start()") }} メソッドを呼ぶことで記録を開始できます。MediaStream の終了、もしくは {{ domxref("MediaRecorder.stop()") }} や{{ domxref("MediaRecorder.requestData()") }}<code> の呼び出しによって記録用のデータが準備できた際には、dataavailable</code> イベントが発生します。現在のところ、データはプラットホームの標準でエンコードされ、 <code>dataavailable</code>の data 属性に {{ domxref("Blob") }} として配置されます。</p> - -<p>アプリは利用可能なエンコード方式を問い合わせ、その中から利用するものを選択することも可能です。またデータをより小さなバッファとして一定間隔で受け取ることもできます。間隔は {{ domxref("MediaRecorder.start()") }} を呼ぶ際に指定できます。</p> - -<div class="note"> -<p><strong>注意</strong>: MediaRecorder API の基本的な利用方法については <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a> をご覧ください。</p> -</div> - -<h2 id="MediaRecorder_インタフェース">MediaRecorder インタフェース</h2> - -<dl> - <dt>{{ domxref("MediaRecorder") }}</dt> - <dd>MediaRecorder API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 <code>MediaRecorder()</code> コンストラクタによって作成される。</dd> - <dt>{{ domxref("BlobEvent") }}</dt> - <dd>{{ domxref("MediaRecorder") }} によって記録されたメディアデータを保持する {{ domxref("Blob") }} オブジェクトへのアクセス手段を提供する。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js; highlight:[11,14,19,23] notranslate">if (navigator.getUserMedia) { - console.log('getUserMedia supported.'); - navigator.getUserMedia ( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function(stream) { - var mediaRecorder = new MediaRecorder(stream); - - record.onclick = function() { - mediaRecorder.start(); - console.log("recorder started"); - } - - stop.onclick = function() { - mediaRecorder.stop(); - console.log("recorder stopped"); - } - - mediaRecorder.ondataavailable = function(e) { - console.log("data available after MediaRecorder.stop() called."); - - var audio = document.createElement('audio'); - audio.setAttribute('controls', ''); - var audioURL = window.URL.createObjectURL(e.data); - audio.src = audioURL; - } - }, - - // Error callback - function(err) { - console.log('The following gUM error occured: ' + err); - } - ); -} else { - console.log('getUserMedia not supported on your browser!'); -}</pre> - -<div class="note"> -<p><strong>注意</strong>: このサンプルコードはWeb Dictaphoneのデモを参考にしています。コードを簡単にする為にいくつかの行は省略されています。完全なコードは <a href="https://github.com/mdn/web-dictaphone/">元ソース</a> を参照して下さい。</p> -</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{ CompatChrome(47.0) }}</p> - </td> - <td>{{ CompatGeckoDesktop("25.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(47.0) }}</td> - <td>{{ CompatGeckoDesktop("25.0") }}</td> - <td>1.3</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The initial Firefox OS implementation only supported audio recording.</p> - -<p>[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable <strong>experimental Web Platform features</strong> from the <code>chrome://flags</code> page.</p> - -<p>[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('MediaStream Recording', '#MediaRecorderAPI')}}</td> - <td>{{Spec2('MediaStream Recording')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用 </a></li> - <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li> - <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> - <li>{{ domxref("Navigator.getUserMedia") }}</li> -</ul> - -<section id="Quick_Links"> -<h3 id="クイックリンク">クイックリンク</h3> - -<ol> - <li data-default-state="open"><strong><a href="#">ガイド</a></strong> - - <ol> - <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a></li> - <li><a href="/en-US/docs/WebRTC/Taking_webcam_photos">getUserMedia を利用して webcam から写真を撮影する</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">インタフェース</a></strong> - <ol> - <li>{{ domxref("MediaRecorder") }}</li> - <li>{{ domxref("BlobEvent") }}</li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">例</a></strong> - <ol> - <li><a href="http://mdn.github.io/web-dictaphone">Web Dictaphone</a></li> - <li><a href="http://simpl.info/mediarecorder/">MediaStream の記録例</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/ja/web/api/node/baseuriobject/index.html b/files/ja/web/api/node/baseuriobject/index.html deleted file mode 100644 index 1de7600c48..0000000000 --- a/files/ja/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -tags: - - DOM - - DOM 3 - - Gecko - - Node -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -<div>{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>baseURIObject</code> は、文書の基底 URL (base URL) を示す {{Interface("nsIURI")}} オブジェクトを返します。</p> - -<p>このプロパティは、HTML 、 XUL、 SVG、 MathML 等のノード全てに存在します。但し、このプロパティの使用を試みるスクリプトが UniversalXPConnect 特権を持つ場合に限ります。</p> - -<p>基底 URL の詳細については {{domxref("Node.baseURI")}} の頁をご覧下さい。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>uriObj</var> = element.baseURIObject -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>このプロパティは読取専用です。書込を試みた場合、例外がスローされます。また、このプロパティには、特権を持つコードからのみアクセス可能です。</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<p>標準仕様書には含まれません。</p> diff --git a/files/ja/web/api/node/nodeprincipal/index.html b/files/ja/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 41547615f2..0000000000 --- a/files/ja/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -<div> - {{ApiRef}}{{Fx_minversion_header("3")}}{{Non-standard_header}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><code>nodePrincipal</code> は、ノードの現在のセキュリティ・コンテキストを表す {{interface("nsIPrincipal")}} オブジェクトを返します</p> -<p>{{note("このプロパティは、HTML 、XUL 、SVG 、MathML などの全てのノードに存在しますが、スクリプトが使用を試みた場合にのみ、 UniversalXPConnect 特権を持ちます。")}}</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>principalObj</var> = element.nodePrincipal</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>このプロパティは読取専用です。書込みを試みた場合、例外がスローされます。また、このプロパティには特権コードからのみアクセス可能です。</p> -<h2 id="Specification" name="Specification">仕様書</h2> -<p>仕様書はありません。</p> diff --git a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html b/files/ja/web/api/page_visibility_api/index.html index 524153a17e..524153a17e 100644 --- a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html +++ b/files/ja/web/api/page_visibility_api/index.html diff --git a/files/ja/web/api/proximity_events/index.html b/files/ja/web/api/proximity_events/index.html new file mode 100644 index 0000000000..633d2a7cfb --- /dev/null +++ b/files/ja/web/api/proximity_events/index.html @@ -0,0 +1,84 @@ +--- +title: Proximity Events +slug: WebAPI/Proximity +tags: + - API + - Experimental + - Proximity Events + - Reference +translation_of: Web/API/Proximity_Events +--- +<p>{{DefaultAPISidebar("Proximity Events")}}{{ SeeCompatTable }}</p> + +<p><strong>proximity events</strong> は、ユーザーが端末の近くにいるときを知るのに便利な手段です。これらのイベントは近接度の変化への対応、例えばユーザーがスマートフォンを耳の近くに持ってきて電話をしているときにスクリーンを休止することを可能にします。</p> + +<div class="note"> +<p><strong>メモ:</strong> この API は端末に近接センサーを必要とすることが明らかです。近接センサーは、たいていモバイル端末のみで使用できます。センサーを搭載していない端末もイベントをサポートするかもしれませんが、イベントは発生しません。</p> +</div> + +<h2 id="Proximity_Events" name="Proximity_Events">Proximity Event</h2> + +<p>端末の近接センサーが端末と物体との距離の変化を検出すると、それをブラウザーに通知します。ブラウザーが通知を受けると、あらゆる変化について {{domxref("DeviceProximityEvent")}} イベントが、またよりおおざっぱな変化の場合に {{domxref("UserProximityEvent")}} イベントが発生します。</p> + +<p>このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("deviceproximity")}} または {{event("userproximity")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondeviceproximity")}} プロパティまたは {{domxref("window.onuserproximity")}} プロパティに接続することにより、<code>window</code> オブジェクトレベルで取得できます。</p> + +<p>イベントを取得すると、イベントオブジェクトでさまざまな種類の情報にアクセスできます。</p> + +<ul> + <li>{{domxref("DeviceProximityEvent")}} イベントは、端末と物体との距離に一致する値を {{domxref("DeviceProximityEvent.value","value")}} プロパティで提供します。また、端末が何らかの物体を検出できる最短距離および最長距離を、{{domxref("DeviceProximityEvent.min","min")}} プロパティおよび {{domxref("DeviceProximityEvent.max","max")}} プロパティで提供します。</li> + <li>{{domxref("UserProximityEvent")}} イベントは、距離の大まかな近さを真偽値で表します。{{domxref("UserProximityEvent.near")}} は物体が近いときに <code>true</code> に、また物体が遠いときに <code>false</code> になります。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">window.addEventListener('userproximity', function(event) { + if (event.near) { + // スクリーンの電源を切る + navigator.mozPower.screenEnabled = false; + } else { + // スクリーンの電源を入れる + navigator.mozPower.screenEnabled = true; + } +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Proximity Events', '', 'Proximity Events')}}</td> + <td>{{Spec2('Proximity Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<h3 id="DeviceProximityEvent"><code>DeviceProximityEvent</code></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.DeviceProximityEvent")}}</p> + +<h3 id="UserProximityEvent"><code>UserProximityEvent</code></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.UserProximityEvent")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{event("deviceproximity")}}</li> + <li>{{event("userproximity")}}</li> +</ul> diff --git a/files/ja/web/api/randomsource/index.html b/files/ja/web/api/randomsource/index.html deleted file mode 100644 index 5972564d98..0000000000 --- a/files/ja/web/api/randomsource/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - RandomSource - - Reference - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> は、暗号的に安全な乱数値のソースを表します。これは、グローバルオブジェクトの {{domxref("Crypto")}} オブジェクトを通して利用可能です。ウェブページ上では {{domxref("Window.crypto")}}、Worker 内では {{domxref("WorkerGlobalScope.crypto")}} が利用できます。</p> - -<p><code>RandomSource</code> は、インターフェイスでも、作成できるこの種類のオブジェクトでもありません。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em><code>RandomSource</code> はどのプロパティも定義または継承しません。</em></p> - -<dl> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>渡された {{ domxref("ArrayBufferView") }} を意味不明の乱数値で埋めます。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基本サポート</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>RandomSource</code> は Firefox 26 からのみ利用可能ですが、機能は Firefox 21 から利用可能でした。</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{domxref("Crypto")}} オブジェクトを取得する {{ domxref("Window.crypto") }}。</li> - <li>{{jsxref("Math.random")}}、意味不明ではない乱数値。</li> -</ul> diff --git a/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html b/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html deleted file mode 100644 index 16574bebce..0000000000 --- a/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ReadableStreamDefaultController.ReadableStreamDefaultController() -slug: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController -tags: - - API - - Constructor - - ReadableStreamDefaultController - - Reference - - Streams -translation_of: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController ---- -<div>{{APIRef("Streams")}}</div> - -<p class="summary"><span class="seoSummary"><strong><code>ReadableStreamDefaultController()</code></strong> コンストラクターは、<code>ReadableStreamDefaultController</code> オブジェクトのインスタンスを作成して返します。</span></p> - -<div class="note"> -<p><strong>注</strong>: このコンストラクターを手動で使用することはありません — これは、{{domxref("ReadableStream")}} オブジェクトの構築中に使用されます。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>readableStreamDefaultController</em> = new ReadableStreamDefaultController(<em>stream</em>, <em>underlyingSource</em>, <em>size</em>, <em>highWaterMark</em>);</pre> - -<h3 id="Parameters" name="Parameters">パラメーター</h3> - -<dl> - <dt>stream</dt> - <dd>制御される {{domxref("ReadableStream")}}。</dd> - <dt>underlyingSource</dt> - <dd>構築されたストリームインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 詳細については、<a href="/ja/docs/Web/API/ReadableStream/ReadableStream#Parameters"><code>ReadableStream()</code> コンストラクターのパラメーター定義</a>を参照してください。</dd> - <dt>size</dt> - <dd> パラメーター <code>chunk</code> を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。</dd> - <dt>highWaterMark</dt> - <dd>負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>{{domxref("ReadableStreamDefaultController")}} オブジェクトのインスタンス。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<dl> - <dt>TypeError</dt> - <dd>指定された <code>stream</code> パラメーターは {{domxref("ReadableStream")}} ではないか、既にコントローラーが関連付けられています。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の単純な例では、コンストラクターを使用してカスタムの <code>ReadableStream</code> を作成します（完全なコードについては、<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">単純なランダムストリームの例</a>を参照）。 <code>start()</code> 関数は、1秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための <code>cancel()</code> 関数も提供します。</p> - -<p>{{domxref("ReadableStreamDefaultController")}} オブジェクトは、<code>start()</code> 関数および <code>pull()</code> 関数のパラメーターとして提供されることに注意してください。</p> - -<p>ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。</p> - -<pre class="brush: js">const stream = new ReadableStream({ - start(controller) { - interval = setInterval(() => { - let string = randomChars(); - - // ストリームに文字列を追加 - controller.enqueue(string); - - // それを画面に表示 - let listItem = document.createElement('li'); - listItem.textContent = string; - list1.appendChild(listItem); - }, 1000); - - button.addEventListener('click', function() { - clearInterval(interval); - fetchStream(); - controller.close(); - }) - }, - pull(controller) { - // この例では実際には pull は必要ありません - }, - cancel() { - // リーダーがキャンセルされた場合に呼び出されるため、 - // 文字列の生成を停止する必要があります - clearInterval(interval); - } -});</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName("Streams","#rs-default-controller-constructor","ReadableStreamDefaultController()")}}</td> - <td>{{Spec2('Streams')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.ReadableStreamDefaultController.ReadableStreamDefaultController")}}</p> diff --git a/files/ja/web/api/slotable/index.html b/files/ja/web/api/slotable/index.html deleted file mode 100644 index 859be5e107..0000000000 --- a/files/ja/web/api/slotable/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Slotable -slug: Web/API/Slotable -tags: - - API - - Interface - - Reference - - Slotable - - Web Components - - shadow dom -translation_of: Web/API/Slottable -translation_of_original: Web/API/Slotable ---- -<p>{{APIRef("Shadow DOM")}}</p> - -<p><code>Slotable</code> mixin は、ノードを {{htmlelement("slot")}} 要素のコンテンツにする機能を定義します。— 次の機能が {{domxref("Element")}} と {{domxref("Text")}} の両方に含まれています。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> - <dd>ノードが挿入されている {{htmlelement("slot")}} を返します。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p>なし。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.Slotable")}}</p> diff --git a/files/ja/web/guide/api/vibration/index.html b/files/ja/web/api/vibration_api/index.html index 49ab486128..49ab486128 100644 --- a/files/ja/web/guide/api/vibration/index.html +++ b/files/ja/web/api/vibration_api/index.html diff --git a/files/ja/web/api/vrdevice/cancelanimationframe/index.html b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html index 51d0f31164..51d0f31164 100644 --- a/files/ja/web/api/vrdevice/cancelanimationframe/index.html +++ b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html diff --git a/files/ja/web/api/vrdevice/capabilities/index.html b/files/ja/web/api/vrdisplay/capabilities/index.html index 8aa2d49549..8aa2d49549 100644 --- a/files/ja/web/api/vrdevice/capabilities/index.html +++ b/files/ja/web/api/vrdisplay/capabilities/index.html diff --git a/files/ja/web/api/vrdevice/depthfar/index.html b/files/ja/web/api/vrdisplay/depthfar/index.html index dc1c8a44e2..dc1c8a44e2 100644 --- a/files/ja/web/api/vrdevice/depthfar/index.html +++ b/files/ja/web/api/vrdisplay/depthfar/index.html diff --git a/files/ja/web/api/vrdevice/depthnear/index.html b/files/ja/web/api/vrdisplay/depthnear/index.html index bbb4e9f739..bbb4e9f739 100644 --- a/files/ja/web/api/vrdevice/depthnear/index.html +++ b/files/ja/web/api/vrdisplay/depthnear/index.html diff --git a/files/ja/web/api/vrdevice/displayid/index.html b/files/ja/web/api/vrdisplay/displayid/index.html index 8b1dd9b244..8b1dd9b244 100644 --- a/files/ja/web/api/vrdevice/displayid/index.html +++ b/files/ja/web/api/vrdisplay/displayid/index.html diff --git a/files/ja/web/api/vrdevice/geteyeparameters/index.html b/files/ja/web/api/vrdisplay/geteyeparameters/index.html index 1f7240d523..1f7240d523 100644 --- a/files/ja/web/api/vrdevice/geteyeparameters/index.html +++ b/files/ja/web/api/vrdisplay/geteyeparameters/index.html diff --git a/files/ja/web/api/vrdevice/getimmediatepose/index.html b/files/ja/web/api/vrdisplay/getimmediatepose/index.html index c0a11c9363..c0a11c9363 100644 --- a/files/ja/web/api/vrdevice/getimmediatepose/index.html +++ b/files/ja/web/api/vrdisplay/getimmediatepose/index.html diff --git a/files/ja/web/api/vrdevice/getlayers/index.html b/files/ja/web/api/vrdisplay/getlayers/index.html index 01062a2e52..01062a2e52 100644 --- a/files/ja/web/api/vrdevice/getlayers/index.html +++ b/files/ja/web/api/vrdisplay/getlayers/index.html diff --git a/files/ja/web/api/vrdevice/getpose/index.html b/files/ja/web/api/vrdisplay/getpose/index.html index d0457edd10..d0457edd10 100644 --- a/files/ja/web/api/vrdevice/getpose/index.html +++ b/files/ja/web/api/vrdisplay/getpose/index.html diff --git a/files/ja/web/api/vrdevice/index.html b/files/ja/web/api/vrdisplay/index.html index 7bf154bccf..7bf154bccf 100644 --- a/files/ja/web/api/vrdevice/index.html +++ b/files/ja/web/api/vrdisplay/index.html diff --git a/files/ja/web/api/vrdevice/isconnected/index.html b/files/ja/web/api/vrdisplay/isconnected/index.html index c8739dc720..c8739dc720 100644 --- a/files/ja/web/api/vrdevice/isconnected/index.html +++ b/files/ja/web/api/vrdisplay/isconnected/index.html diff --git a/files/ja/web/api/vrdevice/ispresenting/index.html b/files/ja/web/api/vrdisplay/ispresenting/index.html index 4fe6132069..4fe6132069 100644 --- a/files/ja/web/api/vrdevice/ispresenting/index.html +++ b/files/ja/web/api/vrdisplay/ispresenting/index.html diff --git a/files/ja/web/api/vrdevice/requestanimationframe/index.html b/files/ja/web/api/vrdisplay/requestanimationframe/index.html index 0865966016..0865966016 100644 --- a/files/ja/web/api/vrdevice/requestanimationframe/index.html +++ b/files/ja/web/api/vrdisplay/requestanimationframe/index.html diff --git a/files/ja/web/api/vrdevice/requestpresent/index.html b/files/ja/web/api/vrdisplay/requestpresent/index.html index 3429a3e6a8..3429a3e6a8 100644 --- a/files/ja/web/api/vrdevice/requestpresent/index.html +++ b/files/ja/web/api/vrdisplay/requestpresent/index.html diff --git a/files/ja/web/api/vrdevice/resetpose/index.html b/files/ja/web/api/vrdisplay/resetpose/index.html index ae067cf0db..ae067cf0db 100644 --- a/files/ja/web/api/vrdevice/resetpose/index.html +++ b/files/ja/web/api/vrdisplay/resetpose/index.html diff --git a/files/ja/web/api/vrdevice/stageparameters/index.html b/files/ja/web/api/vrdisplay/stageparameters/index.html index dcd10d86b6..dcd10d86b6 100644 --- a/files/ja/web/api/vrdevice/stageparameters/index.html +++ b/files/ja/web/api/vrdisplay/stageparameters/index.html diff --git a/files/ja/web/api/vrdevice/submitframe/index.html b/files/ja/web/api/vrdisplay/submitframe/index.html index 28eea26910..28eea26910 100644 --- a/files/ja/web/api/vrdevice/submitframe/index.html +++ b/files/ja/web/api/vrdisplay/submitframe/index.html diff --git a/files/ja/web/api/vrlayer/index.html b/files/ja/web/api/vrlayerinit/index.html index b0edd0d577..b0edd0d577 100644 --- a/files/ja/web/api/vrlayer/index.html +++ b/files/ja/web/api/vrlayerinit/index.html diff --git a/files/ja/web/api/vrlayer/rightbounds/index.html b/files/ja/web/api/vrlayerinit/rightbounds/index.html index 944013d6d7..944013d6d7 100644 --- a/files/ja/web/api/vrlayer/rightbounds/index.html +++ b/files/ja/web/api/vrlayerinit/rightbounds/index.html diff --git a/files/ja/web/api/vrlayer/source/index.html b/files/ja/web/api/vrlayerinit/source/index.html index 94ab4eaa39..94ab4eaa39 100644 --- a/files/ja/web/api/vrlayer/source/index.html +++ b/files/ja/web/api/vrlayerinit/source/index.html diff --git a/files/ja/web/api/webgl_api/cross-domain_textures/index.html b/files/ja/web/api/webgl_api/cross-domain_textures/index.html deleted file mode 100644 index 15dcbf30e3..0000000000 --- a/files/ja/web/api/webgl_api/cross-domain_textures/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Cross-Domain Textures -slug: Web/API/WebGL_API/Cross-Domain_Textures -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures -translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures ---- -<p>WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得る必要があります。CORS について詳しくは、<a href="/Ja/HTTP_access_control" title="ja/HTTP access control">HTTP access control</a> をご覧ください。</p> -<p>CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を <a class="external" href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/" title="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">こちらの hacks.mozilla.org の記事</a> に掲載していますので、<a class="external" href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html" title="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">サンプル</a> と合わせてご覧ください。</p> -<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("8.0") }}</p> <p>WebGL テクスチャ向けの CORS サポートと、画像要素の <code>crossOrigin</code> 属性が Gecko 8 {{ geckoRelease("8.0") }} で実装されました。</p> -</div> -<p>汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{ HTMLElement("canvas") }} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。</p> -<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("9.0") }}</p> <p>Canvas 2D <code>drawImage</code> 向けの CORS サポートが Gecko 9 {{ geckoRelease("9.0") }} で実装されました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として使用することが可能であり続けることを意味します。</p> -</div> -<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("12.0") }}</p> <p>クロスドメインの動画に対する CORS サポートと、{{ HTMLElement("video") }} 要素の<code>crossorigin</code> 属性を Gecko 12 {{ geckoRelease("12.0") }} で実装しました。</p> -</div> -<p>{{ languages( { "en": "en/WebGL/Cross-Domain_Textures"} ) }}</p> diff --git a/files/ja/web/api/websockets_api/websockets_reference/index.html b/files/ja/web/api/websockets_api/websockets_reference/index.html deleted file mode 100644 index d924ac2328..0000000000 --- a/files/ja/web/api/websockets_api/websockets_reference/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: WebSockets リファレンス -slug: Web/API/WebSockets_API/WebSockets_reference -tags: - - WebSocket - - WebSockets -translation_of: Web/API/WebSockets_API -translation_of_original: Web/API/WebSockets_API/WebSockets_reference ---- -<div>{{draft}}</div> -<p>以下のページは、WebSocket API のインタフェースに関する文書です。</p> - - -<dl> - <dt><a href="/ja/docs/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a></dt> - <dd>WebSocket のサーバに接続し、その接続上でデータを送受信するためのプライマリインターフェイス</dd> - - <dt><a href="/ja/docs/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a></dt> - <dd>接続を閉じる際に <code>WebSocket</code> オブジェクトによって送信されるイベント</dd> - - <dt><a href="/ja/docs/WebSockets/WebSockets_reference/MessageEvent"><code>MessageEvent</code></a></dt> - <dd>サーバからのメッセージの受信時に <code>Websocket</code> オブジェクトによって送出されるイベント</dd> -</dl> diff --git a/files/ja/web/api/window/arguments/index.html b/files/ja/web/api/window/arguments/index.html deleted file mode 100644 index f026024047..0000000000 --- a/files/ja/web/api/window/arguments/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: window.arguments -slug: Web/API/Window/arguments -translation_of: Working_with_windows_in_chrome_code#Passing_data_between_windows -translation_of_original: Web/API/Window.arguments ---- -<p><a href="/ja/docs/Working_with_windows_in_chrome_code#Passing_data_between_windows">『chrome コードでウィンドウを取り扱う』の頁の『ウィンドウ間でのデータのやり取り』の章</a>をご覧下さい。</p> diff --git a/files/ja/web/api/window/escape/index.html b/files/ja/web/api/window/escape/index.html deleted file mode 100644 index 48ab4cab3b..0000000000 --- a/files/ja/web/api/window/escape/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: window.escape -slug: Web/API/Window/escape -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/JavaScript/Reference/Global_Objects/escape -translation_of_original: Web/API/Window.escape ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>文字列をエンコードし、16 進エスケープシーケンスで表された特定の文字に置換します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>escaped</var> = escape(<i>regular</i>); -</pre> -<ul> - <li><code>escaped</code> は、エンコードされた文字列です。</li> - <li><code>regular</code> は、通常の文字列です。</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">alert( escape("http://www.cnn.com") ); // 表示結果: http%3A//www.cnn.com -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>escape()</code> メソッドは、特別な文字（通常のテキストや数字ではない文字）を 16 進文字にエンコードします。これは、特に、クッキーの値を設定するために必要となります。また、GET リクエストや AJAX GET/POST リクエストの URL で - <i> - name=value</i> - のような組のデータを渡すときにも役立ちます。</p> -<p>{{domxref("window.unescape")}} 、<a href="/ja/docs/JavaScript/Reference/Global_Objects/encodeURIComponent"><code>encodeURIComponent</code></a> も参照してください。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> diff --git a/files/ja/web/api/window/getattention/index.html b/files/ja/web/api/window/getattention/index.html deleted file mode 100644 index 4376715018..0000000000 --- a/files/ja/web/api/window/getattention/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: window.getAttention -slug: Web/API/Window/getAttention -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/Window/getAttention ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.getAttention(); -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。</p> -<p>Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。</p> -<p>Macintosh では、デスクトップの右上端のアイコンが点滅します。</p> -<p>この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。<code>getAttention</code> は、Gecko アプリケーションでの <a href="/ja/docs/Chrome">chrome</a> から利用したときには、いまだに動作します。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/oninstall/index.html b/files/ja/web/api/window/onappinstalled/index.html index 40c22b7cec..40c22b7cec 100644 --- a/files/ja/web/api/window/oninstall/index.html +++ b/files/ja/web/api/window/onappinstalled/index.html diff --git a/files/ja/web/api/window/onclick/index.html b/files/ja/web/api/window/onclick/index.html deleted file mode 100644 index ac36968fa6..0000000000 --- a/files/ja/web/api/window/onclick/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: window.onclick -slug: Web/API/Window/onclick -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/GlobalEventHandlers/onclick -translation_of_original: Web/API/Window/onclick ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>カーソルがウィンドウ内にある時にユーザがマウスボタンをクリックした場合に呼び出されます。このイベントはどのマウスボタンを押下した場合でも発生します。イベントが発生した地点はイベントのプロパティから取得する事が出来ます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.onclick =<i>funcRef</i>; -</pre> -<ul> - <li><code>funcRef</code>: 関数への参照</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:html"><!DOCTYPE html> -<html> -<head> -<meta charset="UTF-8" /> -<title>onclick のテスト</title> -<script> -function clickPage () { - alert("click event detected!"); -} - -window.onclick = clickPage; -</script> -</head> - -<body> - -<p>このページ上でマウスボタンをクリックしてみてください。</p> - -</body> -</html></pre> -<p>ユーザが Window 内をクリックすると <code>click</code> イベントが発生します。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>どの仕様書にも含まれていません。</p> diff --git a/files/ja/web/api/window/onmousedown/index.html b/files/ja/web/api/window/onmousedown/index.html deleted file mode 100644 index b5f947f8be..0000000000 --- a/files/ja/web/api/window/onmousedown/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: window.onmousedown -slug: Web/API/Window/onmousedown -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/GlobalEventHandlers/onmousedown -translation_of_original: Web/API/Window/onmousedown ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>{{domxref("window")}} 上での mousedown イベントに対応するイベントハンドラです。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.onmousedown = <em>funcRef</em>; -</pre> -<ul> - <li><code>funcRef</code> : 関数への参照、または関数式</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">window.onmousedown = doFunc; -</pre> -<pre class="brush:html"><!DOCTYPE html> -<html lang="ja"> -<head> -<meta charset="UTF-8" /> -<title>onmousedown のテスト</title> - -<script> -window.onmousedown = mousedown; - -function mousedown() { - alert("mousedown イベントが発生しました。"); -} -</script> - -</head> -<body> -<p>ページ上でのマウスクリック（右クリック、左クリック、中ボタン）で mousedown イベントが発生します。</p> -</body> -</html> -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>ページ上の任意の場所でマウスボタンをクリックすると mousedown イベントが発生し、アラートを表示する関数が呼び出されます。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/web/api/window/onmouseup/index.html b/files/ja/web/api/window/onmouseup/index.html deleted file mode 100644 index f7133126a9..0000000000 --- a/files/ja/web/api/window/onmouseup/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: window.onmouseup -slug: Web/API/Window/onmouseup -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/GlobalEventHandlers/onmouseup -translation_of_original: Web/API/Window/onmouseup ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>{{domxref("window")}} 上の <code>mouseup</code> イベントに対応するイベントハンドラです。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.onmouseup = <var>funcRef</var>; -</pre> -<ul> - <li><code>funcRef</code> : 関数への参照、または関数式</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">function doFunc() { - alert("こんにちは！"); -} - -window.onmouseup = doFunc; -</pre> -<pre class="brush:js">window.onmouseup = function() { - alert("こんばんは！"); -}; -</pre> -<pre class="brush:html"><!DOCTYPE html> -<html lang="ja"> -<head> -<meta charset="UTF-8" /> -<title>onmouseup のテスト</title> - -<script> -window.onmouseup = mouseup; - -function mouseup() { - alert("mouseup イベントを検出!"); -} -</script> - -</head> -<body> -<p>ページ上をマウスのボタンでクリックし、数秒押し続け、ボタンを放します。 -マウスのボタンを放すことで、 mouseup イベントが発生します。</p> -</body> -</html> -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>mouseup</code> イベントは、ドキュメント内のどこででも、ユーザがマウスの左ボタンを放すことによって発生します。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/web/api/window.opener/index.html b/files/ja/web/api/window/opener/index.html index c1f7152c9c..c1f7152c9c 100644 --- a/files/ja/web/api/window.opener/index.html +++ b/files/ja/web/api/window/opener/index.html diff --git a/files/ja/web/api/window/restore/index.html b/files/ja/web/api/window/restore/index.html deleted file mode 100644 index 1510d2870e..0000000000 --- a/files/ja/web/api/window/restore/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Window.restore() -slug: Web/API/Window/restore -translation_of: Web/API/Window/moveTo -translation_of_original: Web/API/Window/restore ---- -<p>{{APIRef}}</p> - -<p>このメソッドは現在動作していませんが、代わりに次のメソッドを利用することができます:</p> - -<p>window.moveTo(window.screenX, window.screenY);</p> diff --git a/files/ja/web/api/window.stop/index.html b/files/ja/web/api/window/stop/index.html index a32bbd359a..a32bbd359a 100644 --- a/files/ja/web/api/window.stop/index.html +++ b/files/ja/web/api/window/stop/index.html diff --git a/files/ja/web/api/window/unescape/index.html b/files/ja/web/api/window/unescape/index.html deleted file mode 100644 index 07564a02ee..0000000000 --- a/files/ja/web/api/window/unescape/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: window.unescape -slug: Web/API/Window/unescape -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/JavaScript/Reference/Global_Objects/unescape -translation_of_original: Web/API/Window.unescape ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>16 進でエンコードされた値（例えば、クッキー）をデコードします。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>regular</var> = window.unescape(<i>escaped</i>)</pre> -<ul> - <li><code>regular</code> : 通常の文字列</li> - <li><code>encoded</code> : エンコードされた文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">alert( unescape("%5C") ); // 表示結果: "\" - -alert( unescape("https%3A//developer.mozilla.org") ); // 表示結果: "https://developer.mozilla.org" -</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("window.escape")}}</li> - <li><a href="/ja/docs/JavaScript/Reference/Global_Functions/encodeURIComponent"><code>decodeURIComponent</code></a></li> -</ul> diff --git a/files/ja/web/api/window/url/index.html b/files/ja/web/api/window/url/index.html deleted file mode 100644 index ac758d1b3b..0000000000 --- a/files/ja/web/api/window/url/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: window.URL -slug: Web/API/Window/URL -tags: - - API - - DOM - - Property - - Reference - - Window -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p><strong><code>Window.URL</code></strong> プロパティは、オブジェクト URL の作成や操作に用いる静的なメソッドを提供します。</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="構文">構文</h2> - -<p>静的なメソッドの呼び出し:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>新しいオブジェクトの構築:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基本サポート</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko 2 (Firefox 4) から Gecko 18 まで、Gecko は非標準の <code>nsIDOMMozURLProperty</code> 内部型を返していました。 実際には、何の違いもありません。</p> - -<p>[2] 非標準の <code>webkitURL</code> という名前で実装されています。</p> diff --git a/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html deleted file mode 100644 index 6e0e4f28db..0000000000 --- a/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html +++ /dev/null @@ -1,558 +0,0 @@ ---- -title: Base64 のエンコードとデコード -slug: Web/API/WindowBase64/Base64_encoding_and_decoding -tags: - - Advanced - - Base64 - - JavaScript - - Typed Arrays - - URI - - URL - - Unicode Problem - - atob() - - btoa() -translation_of: Glossary/Base64 ---- -<p><strong>Base64</strong> とは、<a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">バイナリーからテキストへの符号化</a>を行う手法のグループであり、64 を基数とする表現に変換することで、バイナリーデータを ASCII 文字列で表すことができます。<em>Base64</em> という呼び方は、<a href="https://ja.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME の Content-Transfer-Encoding</a> における特定の符号化方式の名前に由来します。</p> - -<p>Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、<a href="https://ja.wikipedia.org/wiki/MIME">MIME</a> による電子メールや <a href="/ja/docs/XML">XML</a> における複合型データの格納など、多くのアプリケーションで幅広く使われています。</p> - -<p>JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。</p> - -<ul> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> -</ul> - -<p><code>atob()</code> 関数は、Base64 符号化方式によりエンコードされている文字列をデコードしてバイナリー文字列を作ります。逆に <code>btoa()</code> 関数は、バイナリー文字列から Base64 でエンコードされた ASCII 文字列を作ります。</p> - -<p><code>atob()</code> と <code>btoa()</code> のどちらも、文字列に対して動作します。もし <a href="/ja/docs/Web/API/ArrayBuffer"><code>ArrayBuffer</code></a> に対して動作させたい場合は、<a href="/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_5">この段落</a> を読んでください。</p> - -<h4 id="Encoded_size_increase" name="Encoded_size_increase">符号化によるサイズ増加</h4> - -<p>Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト (3×8 ビット = 24 ビット) は、4 桁の Base64 で表されます (4×6 = 24 ビット)。</p> - -<p>このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます (33% の増加)。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、<code>length === 1</code> である文字列 <code>"a"</code> は、エンコードされて <code>length === 4</code> の文字列 <code>"YQ=="</code> になり、これは 300% の増加です。</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">参考文書</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/ja/docs/data_URIs">データ URL</a></dt> - <dd><small>データ URL は、<a class="external" href="http://tools.ietf.org/html/rfc2397">RFC 2397</a> により定義されており、 これにより文書中に小さなファイルを埋め込むことができます。</small></dd> - <dt><a href="https://ja.wikipedia.org/wiki/Base64">Base64</a></dt> - <dd><small>ウィキペディアの Base64 符号化方式に関する記事です。</small></dd> - <dt><a href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope-mixin">WindowOrWorkerGlobalScope ミックスイン</a></dt> - <dd><code>atob</code> と <code>btoa</code> を規定し、これらは <a href="https://tools.ietf.org/html/rfc4648">RFC 4648</a> により規定された Base64 にエンコードすると定めています。</dd> - <dt><a href="https://tools.ietf.org/html/rfc4648">RFC 4648</a></dt> - <dd>セクション 4 で Base64 のアルゴリズムを規定し、またセクション 5 で URL 向けの "base64url" アルゴリズム (こちらは <code>atob</code> や <code>btoa</code> では使われない) も定義しています。</dd> - <dt>{{domxref("WindowBase64.atob","atob()")}}</dt> - <dd><small>Base64 によりエンコードされている ASCII 文字列をデコードして、バイナリー文字列を作ります。</small></dd> - <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt> - <dd><small>バイナリー文字列から、Base64 によりエンコードされた ASCII 文字列を作ります。</small></dd> - <dt><a href="#The_Unicode_Problem">あの「Unicode の問題」</a></dt> - <dd><small>ほとんどのブラウザーでは、Unicode 文字列を使って <code>btoa()</code> を実行すると、<code>Character Out Of Range</code> 例外が発生します。この段落では、これに対するいくつかの対策を説明しています。</small></dd> - <dt><a href="/ja/docs/URIScheme">URIScheme</a></dt> - <dd><small>Mozilla のサポートした URI スキームのリスト</small></dd> - <dt><a href="/ja/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt> - <dd>この記事では、次を狙いとしたライブラリーを公開しています - <ul> - <li>文字列に対する <a href="https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E">C 言語</a>に似たインターフェイス (すなわち文字のコードの配列であり、JavaScript では <a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a>) を JavaScript の <a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> インターフェイスを使って作ること</li> - <li>文字列に似たオブジェクト (これからは <code>stringView</code>) 向けの、不変である JavaScript 文字列に対してではなく<strong>必ず数値の配列に対して</strong>働く、メソッドのコレクションを作ること</li> - <li>JavaScript デフォルトである UTF-16 の <a href="/ja/docs/Web/API/DOMString"><code>DOMString</code></a> 以外の Unicode でも動作すること</li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/ja/docs/tag/Base64">全て表示...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">ツール</h2> - - <ul> - <li><a href="#Solution_5_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">atob() and btoa() を TypedArrays および UTF-8 で書き直す</a></li> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – 型付き配列に基づく C 言語に似た文字列表現</a></li> - </ul> - - <p><span class="alllinks"><a href="/ja/docs/tag/Base64">全て表示...</a></span></p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連するトピックス</h2> - - <ul> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">JavaScript 型付き配列</a></li> - <li><code><a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></code></li> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – 型付き配列に基づく C 言語に似た文字列表現</a></li> - <li><a href="/ja/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/ja/docs/Glossary/URI"><code>URI</code></a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="The_Unicode_Problem" name="The_Unicode_Problem">あの「Unicode の問題」</h2> - -<p><a href="/ja/docs/Web/API/DOMString"><code>DOMString</code></a> は 16 ビットで符号化された文字列であるので、Unicode 文字列を使って <code>window.btoa</code> を実行すると、8 ビットの範囲 (0x00~0xFF) を超えた文字がある場合に、ほとんどのブラウザーで <code>Character Out Of Range</code> 例外が発生します。以下は、この問題を解決するための 5 つの方法です。</p> - -<ul> - <li><a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">最初の方法</a>は、JavaScript のネイティブ UTF-16 文字列を直接 Base64 にエンコードします (高速で、移植性があり、クリーン)</li> - <li><a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">2 番目の方法</a>は、JavaScript のネイティブ UTF-16 文字列を UTF-8 に変換し、その後 Base64 にエンコードします (比較的高速で、移植性があり、クリーン)</li> - <li><a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">3 番目の方法</a>は、JavaScript のネイティブ UTF-16 文字列を、バイナリー文字列経由で、Base64 にエンコードします (非常に高速で、比較的移植性があり、非常にコンパクト)</li> - <li><a href="#Solution_4_–_escaping_the_string_before_encoding_it">4 番目の方法</a>は、文字列全体をエスケープし (UTF-8 を使う。{{jsxref("encodeURIComponent")}} を参照)、そしてエンコードします (移植性はあるが、非標準的)</li> - <li><a href="#Solution_5_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">5 番目の方法</a>は、2 番目の方法と似ていますが、サードパーティのライブラリを使います</li> -</ul> - -<h3 id="Solution_1_–_JavaScripts_UTF-16_>_base64" name="Solution_1_–_JavaScripts_UTF-16_>_base64">方法 1 – JavaScript の UTF-16 => Base64</h3> - -<p>Unicode 問題を解決する、非常に高速で幅広く使われている方法は、JavaScript のネイティブ UTF-16 文字列を直接 Base64 にエンコードすることです。デモのために URL <code>data:text/plain;charset=utf-16;base64,OCY5JjomOyY8Jj4mPyY=</code> を開いてください (このデータ URL をコピーし、新しいタブを開き、データ URL をアドレスバーに貼り付け、エンターをを押す)。この方法は、文字列を配列に割り当てるところを除き、どのような種類の変換も必要としないため、特に効率的です。次のコードは、Base64 文字列から <a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> に変換したり、その逆変換をするのにも便利です (<a href="#Appendix_to_Solution_1">下記参照</a>)。</p> - -<pre class="brush: js">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#1) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -/* Array of bytes to base64 string decoding */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlockSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - } - } - - return aBytes; -} - -/* Base64 string to array encoding */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = ""; - - for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - /* Uncomment the following line in order to split the output in lines 76-character long: */ - /* - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - */ - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return eqLen === 0 ? - sB64Enc - : - sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "=="); - -} -</pre> - -<h4 id="Tests" name="Tests">テスト</h4> - -<pre class="brush: js">var myString = "☸☹☺☻☼☾☿"; - -/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */ - -var aUTF16CodeUnits = new Uint16Array(myString.length); -Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = myString.charCodeAt(idx); }); -var sUTF16Base64 = base64EncArr(new Uint8Array(aUTF16CodeUnits.buffer)); - -/* 出力を表示する */ - -alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY=" - -/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */ - -var sDecodedString = String.fromCharCode.apply(null, new Uint16Array(base64DecToArr(sUTF16Base64, 2).buffer)); - -/* 出力を表示する */ - -alert(sDecodedString); // "☸☹☺☻☼☾☿"</pre> - -<p>生成された Base64 文字列はどこでも使えますが、UTF-16 で表現されています。もし UTF-8 を望む場合は<a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">次の方法</a>を参照してください。</p> - -<h4 id="Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" name="Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer"><a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">方法 1</a> に対する補足: <em>Base64</em> 文字列を <a href="/ja/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a> や <a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> にデコードする</h4> - -<p>上記の関数を使って、<em>Base64</em> でエンコードされた文字列から <a href="/ja/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a> や <a href="/ja/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> を作ることもできます。</p> - -<pre class="brush: js">var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8) - -var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8) - -alert(myBuffer.byteLength);</pre> - -<div class="note"><strong>注意:</strong> 関数 <code>base64DecToArr(sBase64[, <em>nBlockSize</em>])</code> は、8 ビットの <a href="/ja/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> を返します。もし 16 ビット / 32 ビット / 64 ビットの生データのバッファを作ることが目的であれば、引数 <code>nBlockSize</code> を使ってください。これはバイト数であり、<code>Uint8Array.buffer.bytesLength</code> プロパティはその倍数になります (<code>1</code> や省略された場合は ASCII、バイナリーデータ、<a href="https://developer.mozilla.org/ja/docs/Web/API/DOMString/Binary">バイナリー文字列</a>、UTF-8 文字列向けです。<code>2</code> は UTF-16 文字列向け、<code>4</code> は UTF-32 文字列向けです)。</div> - -<p>完全なライブラリーは <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – 型付き配列に基づく C 言語に似た文字列表現</a> を参照してください (ソースコードは <a href="https://github.com/madmurphy/stringview.js">GitHub で利用できます</a>)。</p> - -<h3 id="Solution_2_–_JavaScripts_UTF-16_>_UTF-8_>_base64" name="Solution_2_–_JavaScripts_UTF-16_>_UTF-8_>_base64">方法 2 – JavaScript の UTF-16 => UTF-8 => Base64</h3> - -<p>この方法は、JavaScript ネイティブの UTF-16 文字列を UTF-8 文字列に変換し、それを Base64 でエンコードします。これにより、純粋な ASCII 文字列から Base64 への変換は、ネイティブの <code><a href="https://developer.mozilla.org/ja/docs/Web/API/WindowBase64/btoa">btoa()</a></code> のように、常に同じ結果を出力します。</p> - -<pre class="brush: js">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#2) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -/* Array of bytes to base64 string decoding */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlockSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - } - } - - return aBytes; -} - -/* Base64 string to array encoding */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = ""; - - for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - /* Uncomment the following line in order to split the output in lines 76-character long: */ - /* - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - */ - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return eqLen === 0 ? - sB64Enc - : - sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "=="); - -} - -/* UTF-8 array to DOMString and vice versa */ - -function UTF8ArrToStr (aBytes) { - - var sView = ""; - - for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart - ); - } - - return sView; - -} - -function strToUTF8Arr (sDOMStr) { - - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; - - /* mapping... */ - - for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription... */ - - for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { - nChr = sDOMStr.charCodeAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* six bytes */ - aBytes[nIdx++] = 252 + (nChr >>> 30); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } - } - - return aBytes; - -}</pre> - -<h4 id="Tests_2" name="Tests_2">テスト</h4> - -<pre class="brush: js">/* テスト */ - -var sMyInput = "Base 64 \u2014 Mozilla Developer Network"; - -var aMyUTF8Input = strToUTF8Arr(sMyInput); - -var sMyBase64 = base64EncArr(aMyUTF8Input); - -alert(sMyBase64); // "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==" - -var aMyUTF8Output = base64DecToArr(sMyBase64); - -var sMyOutput = UTF8ArrToStr(aMyUTF8Output); - -alert(sMyOutput); // "Base 64 — Mozilla Developer Network"</pre> - -<h3 id="Solution_3_–_JavaScripts_UTF-16_>_binary_string_>_base64" name="Solution_3_–_JavaScripts_UTF-16_>_binary_string_>_base64">方法 3 – JavaScript の UTF-16 => バイナリー文字列 => Base64</h3> - -<p>これは、最も速く最もコンパクトな方法です。出力は<a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">方法 1</a> (UTF-16 ででエンコードされた文字列) のものと全く同じですが、{{domxref("WindowBase64.atob","atob()")}} と {{domxref("WindowBase64.btoa","btoa()")}} を書き直すのではなく、ネイティブのものを使います。この方法はエンコードまたはデコードの入力として、型付き配列の代わりに、中間フォーマットである<a href="/ja/docs/Web/API/DOMString/Binary">バイナリー文字列</a>を使います。<a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">方法 1</a> (<a href="/ja/docs/Web/API/DOMString/Binary">バイナリー文字列</a> は灰色の領域です) に比べると、これは「汚い」回避策ではありますが、問題なく動作し、必要なコードはわずか数行です。</p> - -<pre class="brush: js">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#3) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -function btoaUTF16 (sString) { - - var aUTF16CodeUnits = new Uint16Array(sString.length); - Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = sString.charCodeAt(idx); }); - return btoa(String.fromCharCode.apply(null, new Uint8Array(aUTF16CodeUnits.buffer))); - -} - -function atobUTF16 (sBase64) { - - var sBinaryString = atob(sBase64), aBinaryView = new Uint8Array(sBinaryString.length); - Array.prototype.forEach.call(aBinaryView, function (el, idx, arr) { arr[idx] = sBinaryString.charCodeAt(idx); }); - return String.fromCharCode.apply(null, new Uint16Array(aBinaryView.buffer)); - -}</pre> - -<h4 id="Tests_3" name="Tests_3">テスト</h4> - -<pre class="brush: js">var myString = "☸☹☺☻☼☾☿"; - -/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */ - -var sUTF16Base64 = btoaUTF16(myString); - -/* 出力を表示する */ - -alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY=" - -/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */ - -var sDecodedString = atobUTF16(sUTF16Base64); - -/* 出力を表示する */ - -alert(sDecodedString); // "☸☹☺☻☼☾☿" -</pre> - -<p>バイナリー文字列の代わりに型付き配列を使う、よりクリーンな方法については、<a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">方法 1</a> と<a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">方法 2</a> を参照してください。</p> - -<h3 id="Solution_4_–_escaping_the_string_before_encoding_it" name="Solution_4_–_escaping_the_string_before_encoding_it">方法 4 – エンコード前に文字列をエスケープ処理する</h3> - -<pre class="brush:js">function b64EncodeUnicode(str) { - // 最初に encodeURIComponent を使って "%" でエンコードされた UTF-8 文字列を取得し、 - // 次に "%" でエンコードされた文字列をバイナリー文字列に変換し、 - // それを btoa に与えます。 - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, - function toSolidBytes(match, p1) { - return String.fromCharCode('0x' + p1); - })); -} - -b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64EncodeUnicode('\n'); // "Cg==" -</pre> - -<p>Base64 でエンコードされた値を元の文字列に戻すには、次のようにします。</p> - -<pre class="brush: js">function b64DecodeUnicode(str) { - // 逆変換: バイナリー文字列から "%" エンコードへ、そしてオリジナルの文字列へ。 - return decodeURIComponent(atob(str).split('').map(function(c) { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); -} - -b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -b64DecodeUnicode('Cg=='); // "\n" -</pre> - -<p><a href="https://git.daplie.com/Daplie/unibabel-js">Unibabel</a> は、この方法を使った共通の変換を実装しています。</p> - -<h3 id="Solution_5_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8" name="Solution_5_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">方法 5 – DOM の <code>atob()</code> や <code>btoa()</code> を JavaScript の <code>TypedArray</code> と UTF-8 を使って書き換える</h3> - -<p><a href="/ja/docs/Web/API/TextEncoder">TextEncoder</a> のポリフィル、例えば <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (レガシーの Windows、Mac、ISO のエンコーディングも含む) や <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> を、モダンブラウザーと Node.js の両方で使える <a href="https://github.com/feross/buffer">Buffer</a> または <a href="https://github.com/beatgammit/base64-js">base64-js</a> や <a href="https://github.com/waitingsong/base64">TypeScript 版の </a>base64-js のような Base64 実装とを、組み合わせて使います。</p> - -<p>ネイティブの TextEncoder 実装がない場合、最も軽量な方法は <a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">方法 3</a> でしょう。なぜなら、とても高速であることに加え、<a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">方法 3</a> は標準状態の IE9 でも動作するからです。 もう一つの方法は、<a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> と <a href="https://github.com/beatgammit/base64-js">base64-js</a> を使うことです。可能な場合はブラウザーの実装を使ってください。</p> - -<p>次の関数は、この考えを実装したものです。これは、base64-js が <code><script type="text/javascript" src="base64js.min.js"/></code> のようにインポートされていることを前提にしています。TextEncoderLite は UTF-8 でのみ機能することに注意してください。</p> - -<pre class="brush: js">function Base64Encode(str, encoding = 'utf-8') { - var bytes = new (typeof TextEncoder === "undefined" ? TextEncoderLite : TextEncoder)(encoding).encode(str); - return base64js.fromByteArray(bytes); -} - -function Base64Decode(str, encoding = 'utf-8') { - var bytes = base64js.toByteArray(str); - return new (typeof TextDecoder === "undefined" ? TextDecoderLite : TextDecoder)(encoding).decode(bytes); -} -</pre> - -<p><strong>Note</strong>: <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> は、4 バイトの UTF-8 文字、つまり '\uD842\uDFB7' や '\u{20BB7}' のような文字を誤って解釈します。この <a href="https://github.com/solderjs/TextEncoderLite/issues/16">Issue</a> を参照してください。<br> - あるいは、代わりに <a href="https://github.com/inexorabletash/text-encoding">text-encoding</a> を使ってください。</p> - -<p>いくつかの場合には、UTF-8 に変換した後 Base64 にする上記の方法は、記憶領域に対してとても非効率的です。U+0800 から U+FFFF の範囲にある文字は、UTF-8 では 3 バイトにエンコードされますが UTF-16 では 2 バイトであり、これらがテキストの大部分を占める場合、UTF-8 の出力長は UTF-16 よりも長くなります。均等に分散した UTF-16 コードポイントを含む JavaScript 文字列の場合、Base64 の変換の前のエンコードを UTF-8 ではなく UTF-16 にすることで、サイズを 40% 減少できます。</p> diff --git a/files/ja/web/api/windowbase64/index.html b/files/ja/web/api/windowbase64/index.html deleted file mode 100644 index 760541b9c5..0000000000 --- a/files/ja/web/api/windowbase64/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ja/web/api/window/onafterprint/index.html b/files/ja/web/api/windoweventhandlers/onafterprint/index.html index 162c81e8c6..162c81e8c6 100644 --- a/files/ja/web/api/window/onafterprint/index.html +++ b/files/ja/web/api/windoweventhandlers/onafterprint/index.html diff --git a/files/ja/web/api/windowbase64/atob/index.html b/files/ja/web/api/windoworworkerglobalscope/atob/index.html index e36c89b054..e36c89b054 100644 --- a/files/ja/web/api/windowbase64/atob/index.html +++ b/files/ja/web/api/windoworworkerglobalscope/atob/index.html diff --git a/files/ja/web/api/workerglobalscope/caches/index.html b/files/ja/web/api/windoworworkerglobalscope/caches/index.html index 5d4002bd19..5d4002bd19 100644 --- a/files/ja/web/api/workerglobalscope/caches/index.html +++ b/files/ja/web/api/windoworworkerglobalscope/caches/index.html diff --git a/files/ja/web/api/windowtimers/clearinterval/index.html b/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html index ceb7c2ebbe..ceb7c2ebbe 100644 --- a/files/ja/web/api/windowtimers/clearinterval/index.html +++ b/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html diff --git a/files/ja/web/api/windowtimers/index.html b/files/ja/web/api/windowtimers/index.html deleted file mode 100644 index 549969232f..0000000000 --- a/files/ja/web/api/windowtimers/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/ja/web/api/document/async/index.html b/files/ja/web/api/xmldocument/async/index.html index 00d0b0724c..00d0b0724c 100644 --- a/files/ja/web/api/document/async/index.html +++ b/files/ja/web/api/xmldocument/async/index.html diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..685fdcc100 --- /dev/null +++ b/files/ja/web/api/xmlserializer/index.html @@ -0,0 +1,101 @@ +--- +title: XMLSerializer +slug: XMLSerializer +tags: + - Converting + - DOM Parsing + - Interface + - Parsing + - Reference + - Serialization + - Serializing + - XML + - XML Serializer + - conversion +translation_of: Web/API/XMLSerializer +--- +<div>{{APIRef("XMLSerializer")}}</div> + +<p><span class="seoSummary"><code>XMLSerializer</code> インターフェースは、{{Glossary("DOM")}} ツリーを表す XML 文字列を構築するための {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} メソッドを提供します。</span></p> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt id="serializeToString">{{domxref("XMLSerializer.serializeToString", "serializeToString()")}}</dt> + <dd>文字列の形にシリアライズされたサブツリーを返します。</dd> + <dt id="serializeToStream">{{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}</dt> + <dd>指定した要素をルートとするサブツリーが、指定した文字セットを使ったバイトストリームにシリアライズされます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Serializing_XML_into_a_string" name="Serializing_XML_into_a_string">XML を文字列にシリアライズ</h3> + +<p>最初の基本的な例は、ドキュメント全体を XML を含む文字列にシリアライズするだけです。</p> + +<pre class="brush: js notranslate"> var s = new XMLSerializer(); + var d = document; + var str = s.serializeToString(d); + saveXML(str);</pre> + +<p>このコードは、新しい <code>XMLSerializer</code> オブジェクトを作成し、シリアライズされる {{domxref("Document")}} を {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} に渡します。これは、渡した document と同等の XML を返します。</p> + +<h3 id="Inserting_nodes_into_a_DOM_based_on_XML" name="Inserting_nodes_into_a_DOM_based_on_XML">XML を基にした DOM にノードを挿入する</h3> + +<p>この例は、{{domxref("Element.insertAdjacentHTML()")}} メソッドを使用して新しい DOM {{domxref("Node")}} を {{domxref("Document")}} の body に挿入します。これは、{{domxref("Element")}} オブジェクトをシリアライズすることにより作成された XML を基にしています。</p> + +<div class="note"> +<p><strong>注記:</strong> 実際は、{{domxref("Document.importNode", "importNode()")}} メソッドを呼び出して新しいノードを DOM に挿入する代わりに、以下のいずれかのメソッドを呼び出して DOM ツリーに追加することになるでしょう:</p> + +<ul> + <li>{{domxref("Document")}} および {{domxref("Element")}} メソッド {{domxref("ParentNode.append", "append()")}} および {{domxref("ParentNode.prepend", "prepend()")}}</li> + <li>{{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} メソッド (既存のノードを新しいノードと置き換えるため)</li> + <li>{{domxref("Document.insertAdjacentElement()")}} および {{domxref("Element.insertAdjacentElement()")}} メソッド</li> +</ul> +</div> + +<p><code>insertAdjacentHTML()</code> は文字列を受け入れるが、2 番目の引数として <code>Node</code> を受け入れないため、<code>XMLSerializer</code> を使用して先にノードを文字列に変換します。</p> + +<pre class="brush: js notranslate">var inp = document.createElement('input'); +var XMLS = new XMLSerializer(); +var inp_xmls = XMLS.serializeToString(inp); // まず DOM ノードを文字列に変換 + +// 新たに作成されたノードを document の body に挿入 +document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre> + +<p>このコードは、{{domxref("Document.createElement()")}} を呼び出して新しい {{HTMLElement("input")}} 要素を作成し、{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} を使用して XML にシリアライズします。</p> + +<p>完了したら、<code>insertAdjacentHTML()</code> を使用して <code><input></code> 要素を DOM に挿入します。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#the-xmlserializer-interface', 'XMLSerializer')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<div> + + +<p>{{Compat("api.XMLSerializer")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="/ja/Parsing_and_serializing_XML" title="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{domxref("DOMParser")}}</li> +</ul> diff --git a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/web/compatibility_faq/broken_table_layout.html/index.html deleted file mode 100644 index 32dc4a39a4..0000000000 --- a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: テーブルのレイアウトが崩れている -slug: Web/Compatibility_FAQ/Broken_Table_Layout.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。</p> - -<div style=""><img alt="" src="https://mdn.mozillademos.org/files/9963/0107_1.jpg" style="width: 266px; height: 500px; margin-right: 10px; margin-left: 10px;"> <img alt="" src="https://mdn.mozillademos.org/files/9965/0107_2.jpg" style="width: 271px; height: 500px; margin-right: 10px; margin-left: 10px;"></div> - -<p>左：Firefox 右：他ブラウザ</p> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>テーブルのセル幅の未指定</strong></p> - - <p> テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。</p> - - <pre><code><font size="3"> #maincontent section.category .list div{ - display: table; - width: 100%; - border-top: #b2b2b2 1px solid; - } </font></code></pre> - - <p> 上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。<br> - </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>テーブルのセル幅の未指定</strong></p> - - <p>テーブルの配置指定に <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; を適用させます。<br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; の指定により、横並びのセル幅が左右均等になります。</p> - - <pre><code><font size="3"> #maincontent section.category .list div{ - display: table; - <font>table-layout</font>: <b>fixed</b>; - width: 100%; - border-top: #b2b2b2 1px solid; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・細かいpxの指定をせずにテーブルの見た目を整えることができます。<br> - ・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、<br> - 発生したセルに対して<a href="https://developer.mozilla.org/ja/docs/Web/CSS/overflow">overflow</a>プロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。</p> - -<p><br> - <a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/cut_off_text.html/index.html b/files/ja/web/compatibility_faq/cut_off_text.html/index.html deleted file mode 100644 index 9824d3d62d..0000000000 --- a/files/ja/web/compatibility_faq/cut_off_text.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 文字列の一部が表示されずに見切れる -slug: Web/Compatibility_FAQ/Cut_Off_Text.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> 検索等のテキストボックス内のプレースホルダーが見切れています。<br> - プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。</p> - -<p> 表示画面</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9967/0108.png" style="width: 289px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>表示領域が足りていない </strong><br> - 表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。<br> - テキストを全て表示させるには、テキストよりも大きな<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値を設定する必要があります。</p> - - <pre><code><font size="3"> input[type=text] { - margin:0 6px; - <font>width</font>:165px; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>表示領域が足りていない</strong><br> - 表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティを要素のテキストに合わせて、再設定することで正しく表示されます。<br> - 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。</p> - - <pre><code><font size="3"> input[type=text] { - margin:0 6px; - <font>width</font>: <strong>200px;</strong> - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・少ない調整で正しく表示を行えるようになります。<br> - ・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/empty_background_color.html/index.html b/files/ja/web/compatibility_faq/empty_background_color.html/index.html deleted file mode 100644 index 0574ed49ff..0000000000 --- a/files/ja/web/compatibility_faq/empty_background_color.html/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'アイコン,バナーの色が抜けている' -slug: Web/Compatibility_FAQ/Empty_Background_Color.html -tags: - - Compatibility - - Decoration ---- -<h2 id="概要">概要</h2> - -<p> 他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。<br> - 領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。</p> - -<div> -<p><img alt="" src="https://mdn.mozillademos.org/files/9969/0202.jpg" style="width: 493px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> -</div> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。</p> - - <pre><code><font size="3"> a.button_hoge { - background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); - } </font></code></pre> - - <p>上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。<br> - また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。</p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - CSS3準拠の backgound: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient</a>(); を追記します。</p> - - <pre><code><font size="3"> a.button_hoge { - background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); - <font>background</font>: <strong>linear-gradient(to bottom, #ff4466 90%, #ffffff);</strong> - } </font></code></pre> - - <p>注意：<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。</p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・追記のみで対応可能です。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/index.html b/files/ja/web/compatibility_faq/index.html deleted file mode 100644 index 752ad7c6ff..0000000000 --- a/files/ja/web/compatibility_faq/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: サイト表示互換性に関するノウハウ -slug: Web/Compatibility_FAQ -tags: - - Compatibility ---- -<hr> -<p>モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。<br> - 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。</p> - -<h2 id="目次">目次</h2> - -<hr> -<h3 id="1._画面レイアウトが崩れる"><strong>1. 画面レイアウトが崩れる</strong></h3> - -<ul> - <li> - <h4 id="画面外に不要な空白が発生する"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Wrap.html">画面外に不要な空白が発生する</a></code></strong></h4> - </li> - <li> - <h4 id="ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Overwrapped_Navigation.html">ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう</a></code></strong></h4> - </li> - <li> - <h4 id="アイコンの中身が外側にはみ出すなどして形が壊れている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html">アイコンの中身が外側にはみ出すなどして形が壊れている</a></code></strong></h4> - </li> - <li> - <h4 id="アイコン画像の表示位置がずれる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Icon.html">アイコン,画像の表示位置がずれる</a></code></strong></h4> - </li> - <li> - <h4 id="アイコン画像が期待と異なるサイズで表示される"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Invalid_Icon_Size.html">アイコン,画像が期待と異なるサイズで表示される</a></code></strong></h4> - </li> - <li> - <h4 id="アイコンが隣接する他のアイコンと重なってしまう"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Overwrapped_Icon.html">アイコンが隣接する他のアイコンと重なってしまう</a></code></strong></h4> - </li> - <li> - <h4 id="テーブルのレイアウトが崩れている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Broken_Table_Layout.html">テーブルのレイアウトが崩れている</a></code></strong></h4> - </li> - <li> - <h4 id="文字列の一部が表示されずに見切れる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Cut_Off_Text.html">文字列の一部が表示されずに見切れる</a></code></strong></h4> - </li> - <li> - <h4 id="文字列の表示位置がずれる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Text.html">文字列の表示位置がずれる</a></code></strong></h4> - </li> -</ul> - -<h3 id="2._装飾が抜ける"><strong>2. 装飾が抜ける</strong></h3> - -<ul> - <li> - <h4 id="ページの背景色が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Background_Shown.html">ページの背景色が抜けている</a></code></strong></h4> - </li> - <li> - <h4 id="アイコンバナーの色が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Empty_Background_Color.html">アイコン,バナーの色が抜けている</a></code></strong></h4> - </li> - <li> - <h4 id="mobile版Firefoxと他ブラウザで下線の色が相違している"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Underline_Color_Diffrence.html">mobile版Firefoxと他ブラウザで下線の色が相違している</a></code></strong></h4> - </li> - <li> - <h4 id="枠のシャドウや角丸が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Decoreation_Shown.html">枠のシャドウや角丸が抜けている</a></code></strong></h4> - </li> -</ul> - -<h3 id="3._画面要素の一部が表示されない"><strong>3. 画面要素の一部が表示されない</strong></h3> - -<ul> - <li> - <h4 id="アイコンが表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Icon_Shown.html">アイコンが表示されない</a></code></strong></h4> - </li> - <li> - <h4 id="罫線が表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Border_Line_Shown.html">罫線が表示されない</a></code></strong></h4> - </li> - <li> - <h4 id="チェックボックスのレ点が表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html">チェックボックスのレ点が表示されない</a></code></strong></h4> - </li> -</ul> - -<hr> -<h3 id="TIPS"><strong>TIPS</strong></h3> - -<ul> - <li> - <h4 id="mobile版Firefox向けベンダープレフィックス対処方法まとめ"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Tips_Vendor_Prefix.html">mobile版Firefox向けベンダープレフィックス対処方法まとめ</a></code></strong></h4> - </li> - <li> - <h4 id="ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Tips_Default_Style_Difference.html">ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)</a></code></strong></h4> - - <p> </p> - </li> -</ul> - -<hr> diff --git a/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html b/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html deleted file mode 100644 index 520c573e75..0000000000 --- a/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: アイコン、画像が期待と異なるサイズで表示される -slug: Web/Compatibility_FAQ/Invalid_Icon_Size.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> アイコンや画像が期待と異なるサイズで表示されます。<br> - 他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。<br> - 結果、他の要素と並んだ場合に不自然な表示となってしまいます。</p> - -<div> -<p> 表示画面</p> -<img alt="" src="https://mdn.mozillademos.org/files/9971/0105.jpg" style="width: 481px; height: 80px; margin-right: 50px; margin-left: 50px;"> -<p> </p> -</div> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス </strong><br> - 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。<br> - -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。</p> - - - <pre><code><font size="3"> input[type="submit"] { - position: absolute; - right: 15px; - width: 40px; - border-radius: 5px; - padding: 6px 19px; - margin-top: 10px; - background: url(../images/icon_serach.png) no-repeat center center, <strong>-webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>各アイコンの配置指定方法が統一されていない</strong><br> - 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。<br> - インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。</p> - - - <pre><code><font size="3"> インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;} - インライン {float: right; clear: both;} </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。<br> - -webkit-linear-gradient()関数の場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を追記することでFirefoxでも指定を行うことができます。<br> - ただし、-webkit-linear-gradient()関数と<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数は、伴う引数が異なる為、例に従って記載してください。</p> - - <pre><code><font size="3"> input[type="submit"] { - position: absolute; - right: 15px; - width: 40px; - border-radius: 5px; - padding: 6px 19px; - margin-top: 10px; - background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026); - <font>background</font>: <strong>url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>各アイコンの配置指定方法が統一されていない</strong><br> - 各アイコンの配置指定方法を統一することで解消されます。<br> - インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。</p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/misaligned_icon.html/index.html b/files/ja/web/compatibility_faq/misaligned_icon.html/index.html deleted file mode 100644 index f3fbfffcca..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_icon.html/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: アイコン、画像の表示位置がずれる -slug: Web/Compatibility_FAQ/Misaligned_Icon.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> アイコンや画像の表示位置がずれて表示されてしまいます。<br> - 他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。</p> - -<p> <img alt="" src="https://mdn.mozillademos.org/files/9973/0104_1.png" style="width: 500px; height: 240px;"> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9975/0104_2.png" style="width: 621px; height: 240px; margin-right: 0px; margin-left: 0px;"></p> - -<div style="float: left;"> </div> - -<p> </p> - -<h2 id="要因">要因</h2> - -<p> 複数の要因が考えられますが、代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br> - span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。<br> - ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても<br> - Firefoxで表示すると折り返され、縦並びに表示されてしまいます。</p> - - - <pre><code><font size="3"> .btn-pulldown-main { - box-sizing: border-box; - <font>width</font>: <strong>49.2%;</strong> - display: inline-block; - padding: 9px 0; - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>zoomプロパティが使用されている</strong><br> - zoomプロパティが使用されている場合、Firefoxでは適応されません。<br> - 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。<br> - よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。</p> - - - <pre><code><font size="3"> .menu { - display: block; - position: absolute; - top: 0px; - right: 0px; - <font>zoom</font>: <strong>0.5;</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>ブラウザの解像度の違いによる表示差異</strong><br> - ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。<br> - 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。</p> - - - <pre><code><font size="3"> img.message { - position: relative; - margin-top: -52px; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br> - 各ブロックの横幅を調整することで解消されます。<br> - ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。</p> - - <pre><code><font size="3"> .btn-pulldown-main { - box-sizing: border-box; - <font>width</font>: <strong>49.0%;</strong> - display: inline-block; - padding: 9px 0; - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>zoomプロパティが使用されている</strong><br> - zoomプロパティはFirefoxでは適応されないため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/height">height</a>プロパティで位置を指定するのがよいです。<br> - その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。</p> - - <pre><code><font size="3"> インライン { <font>height</font>: <strong>80px;</strong>} - - .menu { - display: block; - position: absolute; - <font>top</font>: <strong>-15px;</strong> - <font>right</font>: <strong>-10px;</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>ブラウザの解像度の違いによる表示差異</strong><br> - アイコンの位置を<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティで再調整することで正しく表示させることが可能となります。</p> - - - <pre><code><font size="3"> img.message { - position: relative; - margin-top: -52px; - <font>padding</font>:<strong> 0 0 6px 0;</strong> - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/misaligned_text.html/index.html b/files/ja/web/compatibility_faq/misaligned_text.html/index.html deleted file mode 100644 index fe57d3e89a..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_text.html/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 文字列の表示位置がずれる -slug: Web/Compatibility_FAQ/Misaligned_Text.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> 文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。<br> - その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。</p> - -<div style="margin-left: 50px;">表示画面</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9977/0109.jpg" style="height: 320px; margin-left: 50px; margin-right: 50px; width: 567px;"></p> - -<h2 id="要因">要因</h2> - -<p> 複数の要因が考えられますが、代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ブラウザ間でのデフォルト値の差異</strong><br> - ブラウザ毎でデフォルト値を持っています。 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/line-height">line-height</a>: normal; 等で指定するとデフォルト値で表示されます。<br> - しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。</p> - - <pre class="notranslate"><code><font size="3"> .recommended { - text-decoration: none; - display: inline; - width: auto; - height: auto; - <font>line-height</font>: <strong>normal;</strong> - vertical-align: baseline; - } </font></code></pre> - - - </li> - <li> - <p><strong>ベンダープレフィックス</strong><br> - 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。<br> - -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。</p> - - <pre class="notranslate"><code><font size="3"> #button-06 { - display: table; - width: 99.9%; - <font>-webkit-box-sizing</font>: <strong>border-box;</strong> - } </font></code></pre> - - - </li> - <li> - <p><strong>ブラウザ間でのpx指定の差異</strong><br> - 様々なアイコン上の文字列をCSSの<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。<br> - これは、ブラウザ間でpx指定の差異があるために発生しています。</p> - - <pre class="notranslate"><code><font size="3"> .gender-type { - <font>padding-top</font>: <strong>3px;</strong> - } </font></code></pre> - - - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ブラウザ間でのデフォルト値の差異</strong><br> - デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、<br> - 明示的に値を指定することで正しく表示できます。</p> - - <pre class="notranslate"><code><font size="3"> .recommended { - text-decoration: none; display: inline; - width: auto; - height: auto; - <font>line-height</font>: <strong>1;</strong> - vertical-align: baseline; - } </font></code></pre> - - - </li> - <li> - <p><strong>ベンダープレフィックス</strong><br> - webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。<br> - -webkit-box-sizingプロパティの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing">box-sizing</a>プロパティを追記することでFirefoxでも指定を行うことができます。</p> - - <pre class="notranslate"><code><font size="3"> #button-06 { - display: table; - width: 99.9%; - -webkit-box-sizing: border-box; - <font>box-sizing</font>: <strong>border-box;</strong> - } </font></code></pre> - - - </li> - <li> - <p><strong>ブラウザ間でのpx指定の差異</strong><br> - 指定に差異が出てしまっているものに関しては、個々の要素に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティ指定を追記し、<br> - それぞれで調整を行うことで、想定の表示を行うことが可能となります。</p> - - <pre class="notranslate"><code><font size="3"> .gender-type.blc-hdr-rgt { - float: right; - <font>padding</font>: <strong>1.5px;</strong> - } </font></code></pre> - - - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html deleted file mode 100644 index bb9afac07e..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: アイコンの中身が外側にはみ出すなどして形が壊れている -slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> アイコンの中身が外にはみ出して形が崩れてしまいます。</p> - -<div style="margin-left: 50px;">表示画面</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9979/0103.jpg" style="width: 318px; height: 180px; margin-right: 50px; margin-left: 50px;"></p> - -<h2 id="要因">要因</h2> - -<p> 複数の要因が考えられますが、代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンの横幅指定が誤っている</strong><br> - アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。<br> - 横幅に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>プロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。</p> - - - <pre><code><font size="3"> img { - <font>max-width</font>: <strong>100%;</strong> - height: auto; - vertical-align: middle; - border: 0px none; - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>ベンダープレフィックス</strong><br> - 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。<br> - -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。</p> - - - <pre><code><font size="3"> h3 { - padding: 10px 40px 10px 10px; - background: url(/images/open.gif) no-repeat 98% 50%; - <font>-webkit-background-size</font>: <strong>21px 21px;</strong> - font-weight: bold; - font-size: 12px; - cursor: pointer; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンの横幅指定が誤っている</strong><br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>: 100%; に修正することで縦画面表示のサイズにも対応できます。</p> - - - <pre><code><font size="3"> img { - <font>width</font>: <strong>100%;</strong> - height: auto; - vertical-align: middle; - border: 0px none; - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>ベンダープレフィックス </strong><br> - webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。<br> - -webkit-background-sizeプロパティの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size">background-size</a>プロパティを追記することでFirefoxでも指定を行うことができます。<br> - 引数は同様のものが使用可能です。</p> - - - <pre><code><font size="3"> h3 { - padding: 10px 40px 10px 10px; - background: url(/images/open.gif) no-repeat 98% 50%; - -webkit-background-size: 21px 21px; - <font>background-size</font>: <strong>21px 21px;</strong> - font-weight: bold; - font-size: 12px; - cursor: pointer; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・画面サイズの可変に対応可能となります。<br> - ・他のブラウザでも互換性を維持することができます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_background_shown.html/index.html b/files/ja/web/compatibility_faq/no_background_shown.html/index.html deleted file mode 100644 index a89fb50986..0000000000 --- a/files/ja/web/compatibility_faq/no_background_shown.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ページの背景色が抜けている -slug: Web/Compatibility_FAQ/No_Background_Shown.html -tags: - - Compatibility - - Decoration ---- -<h2 id="概要">概要</h2> - -<p> 他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。<br> - 領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。</p> - -<div> -<div style="margin-left: 50px;">表示画面</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9981/0201.jpg" style="width: 493px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> -</div> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。</p> - - <pre><code><font size="3"> .bg_hoge { - background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); - } </font></code></pre> - - <p>上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。<br> - また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。</p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - CSS3準拠の backgound: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient</a>(); を追記します。</p> - - <pre><code><font size="3"> .bg_hoge { - background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); - <font>background</font>: <strong>linear-gradient(to bottom, #ff4466 90%, #ffffff);</strong> - } </font></code></pre> - - <p>注意：<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。</p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・追記のみの対応のため改修が容易です。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html b/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html deleted file mode 100644 index 2a00bcebe7..0000000000 --- a/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 罫線が表示されない -slug: Web/Compatibility_FAQ/No_Border_Line_Shown.html -tags: - - Compatibility - - Invisible element ---- -<h2 id="概要">概要</h2> - -<p> 他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9983/0302.jpg" style="width: 468px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>他ブラウザで独自のCSSが適応されている</strong><br> - 例えば、Chromeではブラウザ独自のCSSにて、hr要素に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a>プロパティを指定することができます。<br> - そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。<br> - 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。</p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>他ブラウザで独自のCSSが適応されている</strong><br> - Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。<br> - まず、表示させたい要素のインラインに罫線(<a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-top">border-top</a>: thin solid;)を指定します。<br> - そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a>プロパティを利用)にて非表示にします。</p> - - - <pre><code><font size="3"> インライン { - <font>border-top</font>: <strong>thin solid;</strong> - } - - hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #cccccc; - margin: 1em 0; - padding: 0; - <font>background-color</font>: <strong>rgb(255,255,255);</strong> - } </font></code></pre> - 上記の修正にて、他ブラウザとの互換がとれるようになります。</li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html b/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html deleted file mode 100644 index df2f8d3625..0000000000 --- a/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: チェックボックスのレ点が表示されない -slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html -tags: - - Compatibility - - Invisible element ---- -<h2 id="概要">概要</h2> - -<p> チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9985/0303.jpg" style="width: 520px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。<br> - または、Firefox用に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。</p> - - <pre><code><font size="3"> input[type="checkbox"]:checked { - background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); - background-image: url(../contents/bg_08.png), <strong>linear-gradient(top, #00397b 0%, #01afeb 100%)</strong>; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するために<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を使用します。<br> - その場合、第一引数には例のように「to top」を指定することで正しく表示されます。</p> - - <pre><code><font size="3"> input[type="checkbox"]:checked { - background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); - background-image: url(../contents/bg_08.png), <strong>linear-gradient(to top, #00397b 0%, #01afeb 100%)</strong>; - } </font></code></pre> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html b/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html deleted file mode 100644 index e41d42f33d..0000000000 --- a/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 枠のシャドウや角丸が抜けている -slug: Web/Compatibility_FAQ/No_Decoreation_Shown.html -tags: - - Compatibility - - Decoration ---- -<h2 id="概要">概要</h2> - -<p> 枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。</p> - -<div> -<p><img alt="" src="https://mdn.mozillademos.org/files/9987/0204.jpg" style="width: 497px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> -</div> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - webkitブラウザ向けの記述がされている場合、この現象が発生します。<br> - 例えば、以下のような場合です。</p> - - <ul> - <li> - <p><strong>シャドウの場合</strong></p> - - <pre><code><font size="3"> .hoge { - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); - } </font></code></pre> - </li> - <li> - <p><strong>角丸の場合</strong></p> - - <pre><code><font size="3"> .hoge { - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - } </font></code></pre> - </li> - </ul> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス</strong><br> - 他ブラウザで互換性を維持する為に、以下のような<a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow">box-shadow</a>プロパティ、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-radius">border-radius</a>プロパティの記述を追加します。</p> - - <ul> - <li> - <p><strong>シャドウの場合</strong></p> - - <pre><code><font size="3"> .hoge { - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); - <font>box-shadow</font>: <strong>0 1px 2px rgba(0,0,0,.4);</strong> - } </font></code></pre> - </li> - <li> - <p><strong>角丸の場合</strong></p> - - <pre><code><font size="3"> .hoge { - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - <font>border-radius</font>: <strong>6px;</strong> - } </font></code></pre> - </li> - </ul> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・追記のみの対応のため改修が容易です。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_icon_shown.html/index.html b/files/ja/web/compatibility_faq/no_icon_shown.html/index.html deleted file mode 100644 index 5845f90804..0000000000 --- a/files/ja/web/compatibility_faq/no_icon_shown.html/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: アイコンが表示されない -slug: Web/Compatibility_FAQ/No_Icon_Shown.html -tags: - - Compatibility - - Invisible element ---- -<h2 id="概要">概要</h2> - -<p> 一部のアイコンやバナーが表示されません。<br> - メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。</p> - -<div> -<p><img alt="" src="https://mdn.mozillademos.org/files/9989/0301.jpg" style="width: 439px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> -</div> - -<h2 id="要因">要因</h2> - -<p> 複数要因がありますが、代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス </strong><br> - 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。<br> - また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。<br> - 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。</p> - 下記は、描画指定の例になります。 - - <pre><code><font size="3"> top li{ - font-size: 90%; - <font>-webkit-border-radius</font>: <strong>3px;</strong> - border: 1px solid #e5e5e5; - background-color: #ffffff; - <font>background</font>: <strong>-webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));</strong> - <font>-webkit-box-shadow</font>: <strong>0 1px 1px rgba(0, 0, 0, 0.05);</strong> - margin: 0 0 0 5px; - position: relative; - bottom: 15px; - } - - .icn_search a:before { - content: "" ""; - width: 7px; - height: 7px; - border: 2px solid #e4006f; - background: transparent; - <font>-webkit-border-radius</font>: <strong>12px;</strong> - } - - .icn_search a:after { - content: "" ""; - left: 18px; - width: 2px; - height: 7px; - margin-top: 0; - <font>-webkit-transform</font>: <strong>rotate(-45deg);</strong> - } </font></code></pre> - - <p>下記は、サイズ指定の例になります。</p> - - <pre><code><font size="3"> single_02 { - background: url(http://common/icon.png) no-repeat 0 -625px; - <font>-webkit-background-size</font>: <strong>26px auto;</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>全体のレイアウトに誤りがある</strong><br> - 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。<br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/float">float</a>プロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。</p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>ベンダープレフィックス </strong><br> - webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。</p> - - <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-radius">border-radius</a>プロパティ</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow">box-shadow</a>プロパティ</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform">transform</a>プロパティ</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size">background-size</a>プロパティ</li> - </ul> - - <p>詳しくは、「<a href="./Tips_Vendor_Prefix.html">mobile版Firefox向けベンダープレフィックス対処方法まとめ</a>」をご覧ください。</p> - - <p>下記は、描画指定の例になります。</p> - - <pre><code><font size="3"> navtop li { - font-size:90%; - <font>border-radius</font>: <strong>3px;</strong> - border: 1px solid #e5e5e5; - background-color: #ffffff; - <font>background</font>: <strong>linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);</strong> - <font>box-shadow</font>: <strong>0 1px 1px rgba(0, 0, 0, 0.05);</strong> - margin: 0 0 0 5px; - position: relative; - bottom: 15px; - } - - .icn_search a:before { - content: "" ""; - width: 7px; - height: 7px; - border: 2px solid #e4006f; - background: transparent; - <font>border-radius</font>: <strong>12px;</strong> - } - - .icn_search a:after { - content: "" ""; - left: 18px; - width: 2px; - height: 7px; - margin-top: 0; - <font>transform</font>: <strong>rotate(-45deg);</strong> - } </font></code></pre> - - <p>下記は、サイズ指定の例になります。</p> - - <pre><code><font size="3"> single_02 { - background: url(http://common/icon.png) no-repeat 0 -625px; - -webkit-background-size: 26px auto; - <font>background-size</font>: <strong>26px auto;</strong> - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>全体のレイアウトに誤りがある</strong><br> - 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。</p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。<br> - ・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/no_wrap.html/index.html b/files/ja/web/compatibility_faq/no_wrap.html/index.html deleted file mode 100644 index c36f167bfe..0000000000 --- a/files/ja/web/compatibility_faq/no_wrap.html/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 画面外に不要な空白が発生する -slug: Web/Compatibility_FAQ/No_Wrap.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> 一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。<br> - その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。</p> - -<div> -<div style="margin-left: 50px;">表示画面</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9991/0101.jpg" style="width: 421px; height: 522px;"></p> -</div> - -<p> </p> - -<h2 id="要因">要因</h2> - -<p> 複数要因がありますが、代表例として以下があります。</p> - -<ol> - <li> - <p><strong>テーブルの列幅指定がされていない </strong><br> - テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。<br> - よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。</p> - - <p>なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。<br> - 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。</p> - </li> - <li> - <p><strong>アイテムの横幅指定が誤っている</strong><br> - アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。<br> - アイテムの横幅指定は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。</p> - - <p>下記の指定方法は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>プロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。<br> - その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。</p> - - - <pre><code><font size="3"> img { - <font>max-width</font>: <strong>100%;</strong> - height: auto; - vertical-align: middle; - border: 0px none; - } </font></code></pre> - - <p>なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。</p> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>テーブルの列幅指定がされていない</strong><br> - 画面全体に <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; を指定します。<br> - この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。</p> - - - <pre><code><font size="3"> html, body, div, span... { - margin: 0; - padding: 0; - border: 0; - outline: 0; - vertical-align: top; - <font>table-layout</font>: <strong>fixed;</strong> - } </font></code></pre> - - <p> </p> - - <p>また、テーブルの幅指定を <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; で行っている場合、Firefoxでは認識できません。<br> - 他ブラウザ互換のために <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; を追記することで、画面幅に指定することができます。</p> - - - <pre><code><font size="3"> #navigation ul { - display: table; - <font>display</font>: <strong>inline-block;</strong> - width: 99.9%; - } </font></code></pre> - - <p> </p> - </li> - <li> - <p><strong>アイテムの横幅指定が誤っている</strong><br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>: 100%; に修正することで縦画面表示時のサイズにも対応できます。</p> - - - <pre><code><font size="3"> img { - <font>width</font>: <strong>100%;</strong> - height: auto; - vertical-align: middle; - border: 0px none; - } </font></code></pre> - - <p> </p> - - <p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; に修正することで指定できます。</p> - - - <pre><code><font size="3"> box li { - width: 100%; - display: box; - <font>display</font>: <strong>inline-block;</strong> - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。<br> - ・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html b/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html deleted file mode 100644 index d6ccdc4655..0000000000 --- a/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: アイコンが隣接する他のアイコンと重なってしまう -slug: Web/Compatibility_FAQ/Overwrapped_Icon.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。<br> - 隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。</p> - -<div> -<div style="margin-left: 50px;">表示画面</div> -<img alt="" src="https://mdn.mozillademos.org/files/9993/0106.jpg" style="width: 291px; height: 270px;"> -<p> </p> -</div> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンの表示領域が足りていない</strong><br> - アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。<br> - 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。</p> - - - <pre><code><font size="3"> .icon {<font>width</font>: <strong>100px !important;</strong>} </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>アイコンの表示領域が足りていない</strong><br> - アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。<br> - その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。</p> - - <pre><code><font size="3"> .icon {<font>width</font>: <strong>120px !important;</strong>} </font></code></pre> - - <p>また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。<br> - ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンを<a href="https://developer.mozilla.org/ja/docs/Web/CSS/margin">margin</a>プロパティ等で表示位置を調整する必要があります。</p> - - <pre><code><font size="3"> .icon {<font>width</font>: <strong>auto;</strong>} </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。<br> - ・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html b/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html deleted file mode 100644 index 4e8a4bd9c5..0000000000 --- a/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう -slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html -tags: - - Compatibility - - Layout ---- -<h2 id="概要">概要</h2> - -<p> 他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。<br> - 一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。<br> - <br> - <br> - <img alt="" src="https://mdn.mozillademos.org/files/9995/0102.jpg" style="width: 258px; height: 320px; margin-right: 50px; margin-left: 50px;"><br> - </p> - -<h2 id="要因">要因</h2> - -<p> 要因の代表例としては以下があります。</p> - -<ol> - <li> - <p><strong>テーブルの列幅が指定されていない</strong><br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。<br> - 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。</p> - - <pre><code><font size="3"> navigation ul { - <font>display</font>: <strong>table;</strong> - width: 99.9%; - } </font></code></pre> - - <p>また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。</p> - - <pre><code><font size="3"> .go_contents_btn { - display: -webkit-box !important; - <font>display</font>: <strong>-moz-box !important;</strong> - -webkit-box-pack: center !important; - <font>-moz-box-pack</font>: <strong>center !important;</strong> - width: 100%; - } </font></code></pre> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>テーブルの列幅が指定されていない</strong><br> - Firefoxでは、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: flex; を追記します。</p> - - <p>display: inline-block; の場合</p> - - <pre><code><font size="3"> navigation ul{ - display: table; - <font>display</font>: <strong>inline-block;</strong> - width: 99.9%; - } </font></code></pre> - - <p>また、親要素を<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>設定にした場合、自動的に子要素は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>アイテムになります。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>アイテム用に横方向寄せを設定しているプロパティを<a href="https://developer.mozilla.org/ja/docs/Web/CSS/justify-content">justify-content</a>プロパティに変更します。<br> - 縦方向寄せを設定しているプロパティも<a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-items">align-items</a>プロパティに変更します。</p> - - <p>display: flex; の場合</p> - - <pre><code><font size="3"> .go_contents_btn { - display: -webkit-box !important; - display: -moz-box !important; - <font>display</font>: <strong>flex !important;</strong> - -webkit-box-pack: center !important; - <font>justify-content</font>: <strong>center !important;</strong> - width: 100%; - } </font></code></pre> - - <p> </p> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・少ない修正で他ブラウザとの互換性が取れます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html b/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html deleted file mode 100644 index 4285cff266..0000000000 --- a/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異) -slug: Web/Compatibility_FAQ/Tips_Default_Style_Difference.html -tags: - - Compatibility - - StyleSheet ---- -<h2 id="概要">概要</h2> - -<p> ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。<br> - 多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。</p> - -<h2 id="例">例</h2> - -<ol> - <li> - <p><strong>デフォルトのフォントが異なる</strong><br> - ブラウザ毎でデフォルトのフォントが異なる場合があります。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font-style">font-style</a>プロパティを明示的に指定すると統一できますが、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font-style">font-style</a>: normal; で指定した場合は、表示が多少異なります。<br> - 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。</p> - - <pre><code><font size="3"> body { - margin: 0; - padding: 0; - <font>font-style</font>: <strong>normal</strong>; - } </font></code></pre> - - <p><img alt="" src="https://mdn.mozillademos.org/files/10007/ex2_3.png" style="width: 336px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> - </li> - <li> - <p><strong>テキストの太さが異なる</strong><br> - 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。</p> - - <p><img alt="" src="https://mdn.mozillademos.org/files/9997/ex2_1.png" style="width: 286px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> - </li> - <li> - <p><strong>チェックボックスのデザインが異なる</strong><br> - チェックボックスの表示がブラウザ間で異なる場合があります。<br> - チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。<br> - 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。</p> - - <p class="attention">注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットする<a href="https://developer.mozilla.org/ja/docs/Web/CSS/-moz-appearance">appearance</a>プロパティが使用できない不具合があります。</p> - - <p><img alt="" src="https://mdn.mozillademos.org/files/9999/ex2_2.png" style="width: 385px; height: 150px; margin-right: 50px; margin-left: 50px;"></p> - </li> - <li> - <p><strong>プルダウンメニューのデザインが異なる</strong><br> - プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。</p> - - <p><img alt="" src="https://mdn.mozillademos.org/files/10003/ex2_4.png" style="width: 453px; height: 80px; margin-right: 50px; margin-left: 50px;"></p> - </li> -</ol> - -<p>ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。</p> - -<pre><code><font size="3"> .ipt_select_01 { - width: 100%; - <font>color</font>: <strong>#000;</strong> - <font>background-color</font>: <strong>ButtonFase;</strong> - <font>border-color</font>: <strong>#A9A9A9;</strong> - } </font></code></pre> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html deleted file mode 100644 index cb1475537f..0000000000 --- a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: mobile版Firefox向けベンダープレフィックス対処方法まとめ -slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html -tags: - - Compatibility - - Vendor prefix ---- -<h2 id="概要">概要</h2> - -<p> ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。<br> - 例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。<br> - 本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。</p> - -<p> 以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。</p> - -<hr> -<h3 id="Mozilla_CSS_拡張仕様_(-moz-)">Mozilla CSS 拡張仕様 (-moz-)</h3> - -<p>詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla 独自の CSS 拡張</a> をご覧ください。</p> - -<p>＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞</p> - -<table> - <thead> - <tr> - </tr> - <tr> - <th><strong>プロパティ・値</strong></th> - <th><strong>意味</strong></th> - <th><strong>PC版Firefox向け記述例</strong></th> - <th><strong>mobile版Firefox向け対処法</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>-moz-box</td> - <td>要素をボックス配置する</td> - <td>display: -moz-box;</td> - <td>display: inline-block;</td> - </tr> - <tr> - <td>-moz-border-radius</td> - <td>枠線の角丸を設定する</td> - <td>-moz-border-radius: 10px;</td> - <td>border-radius: 10px;</td> - </tr> - <tr> - <td>-moz-linear-gradient</td> - <td>グラデーション装飾を付与する</td> - <td>background: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);</td> - <td>background: linear-gradient(to top, #F0F0F0 0%, #ccc);</td> - </tr> - </tbody> -</table> - -<hr> -<h3 id="Webkit_CSS_拡張仕様_(-webkit-)">Webkit CSS 拡張仕様 (-webkit-)</h3> - -<p>詳細は、<a class="new" href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Webkit_Extensions" style="color: rgb(153, 0, 0); text-decoration: underline;">WebKit 独自の CSS 拡張</a> をご覧ください。</p> - -<p>＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞</p> - -<table> - <thead> - <tr> - </tr> - <tr> - <th><strong>プロパティ・値</strong></th> - <th><strong>意味</strong></th> - <th><strong>mobile版Chrome向け記述例</strong></th> - <th><strong>mobile版Firefox向け対処法</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>-webkit-appearance</td> - <td>ブラウザデフォルトの装飾設定を適用する</td> - <td>-webkit-appearance: none;</td> - <td>代替指定が存在しないため、明示的にスタイル指定する</td> - </tr> - <tr> - <td>-webkit-background-size</td> - <td>背景サイズを指定する</td> - <td>-webkit-background-size: 26px auto;</td> - <td>background-size: 26px auto;</td> - </tr> - <tr> - <td>-webkit-border-radius</td> - <td>枠線の角丸を設定する</td> - <td>-webkit-border-radius: 5px;</td> - <td>border-radius: 5px;</td> - </tr> - <tr> - <td>-webkit-box-shadow</td> - <td>領域のシャドーを設定する</td> - <td>-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td> - <td>box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td> - </tr> - <tr> - <td>-webkit-box-sizing</td> - <td>領域のサイズを設定する</td> - <td>-webkit-box-sizing: border-box;</td> - <td>box-sizing: border-box;</td> - </tr> - <tr> - <td>-webkit-gradient</td> - <td>グラデーション装飾を付与する</td> - <td>background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));</td> - <td>background: linear-gradient(to bottom, #ffffff, #f6f6f6);</td> - </tr> - <tr> - <td>-webkit-linear-gradient</td> - <td>グラデーション装飾を付与する</td> - <td>background: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);</td> - <td>background: linear-gradient(to top, #00397b 0%, #01afeb 100%);</td> - </tr> - <tr> - <td>-webkit-transform</td> - <td>要素を移動、回転、スケーリング、傾斜させる</td> - <td>-webkit-transform: rotate(-45deg);</td> - <td>transform: rotate(-45deg);</td> - </tr> - <tr> - <td>-webkit-transition-duration</td> - <td>トランジションによるアニメーションが完了するまでの所要時間を指定する</td> - <td>-webkit-transition-duration: 100ms;</td> - <td>JavaScriptで実装する</td> - </tr> - <tr> - <td>-webkit-transition-property</td> - <td>トランジションさせるプロパティを指定する</td> - <td>-webkit-transition-property: opacity;</td> - <td>JavaScriptで実装する</td> - </tr> - <tr> - <td>-webkit-transition-timing-function</td> - <td>トランジション実行中の値の変更速度を操作する</td> - <td>-webkit-transition-timing-function: ease-in-out;</td> - <td>JavaScriptで実装する</td> - </tr> - </tbody> -</table> - -<hr> -<h2 id="考察">考察</h2> - -<p> ・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。<br> - そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。</p> - -<p> ・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。</p> - -<p class="attention">注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。<br> - 以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。</p> - -<p><br> - ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞</p> - -<table> - <thead> - <tr> - </tr> - <tr> - <th><strong>ブラウザ/バージョン</strong></th> - <th><strong>構文</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td>Chrome/3-9</td> - <td>-webkit-gradient();</td> - </tr> - <tr> - <td>Chrome/10-25</td> - <td>-webkit-linear-gradient();</td> - </tr> - <tr> - <td>Chrome/26以降</td> - <td>linear-gradient();</td> - </tr> - <tr> - <td>Firefox/3.6-15</td> - <td>-moz-linear-gradient();</td> - </tr> - <tr> - <td>Firefox/16(2012.10リリース)以降</td> - <td>linear-gradient();</td> - </tr> - </tbody> -</table> - -<p> mobile版FirefoxはCSS3準拠のため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">MDN</a>等のリファレンスを参照し、適正な設定を行うことが必要です。</p> - -<h2 id="参考">参考</h2> - -<p> ・CSS グラデーションの利用 - Web developer guide | MDN<br> - <a href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients">https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients</a></p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html b/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html deleted file mode 100644 index 2df04e427d..0000000000 --- a/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 下線の色が相違している -slug: Web/Compatibility_FAQ/Underline_Color_Diffrence.html -tags: - - Compatibility - - Decoration ---- -<h2 id="概要">概要</h2> - -<p> mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。</p> - -<div> -<p><img alt="" src="https://mdn.mozillademos.org/files/10005/0203.jpg" style="width: 401px; height: 50px; margin-right: 50px; margin-left: 50px;"></p> -</div> - -<h2 id="要因">要因</h2> - -<p> 以下のような要因が考えられます。</p> - -<ol> - <li> - <p><strong>mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合</strong><br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>, <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-line">text-decoration-line</a>, <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style">text-decoration-style</a>に相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。</p> - - <pre><code><font size="3"> インライン { - text-decoration: underline; - <font>-moz-text-decoration-color</font>: -moz-use-text-color; - <font>-moz-text-decoration-line</font>: underline; - <font>-moz-text-decoration-style</font>: solid; - } </font></code></pre> - </li> - <li> - <p><strong>色指定の方法に間違えている場合 </strong><br> - 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。<br> - なお、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>は非推奨APIですのでCSS3準拠に書き替えが必要です。</p> - - <pre><code><font size="3"> <font>text-decoration-color</font>: -moz-use-text-color; </font></code></pre> - </li> -</ol> - -<h2 id="解決策">解決策</h2> - -<p> 各要因の解決策の代表例として以下があります。</p> - -<ol> - <li> - <p><strong>mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合</strong></p> - - <p>例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。<br> - そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。</p> - - <pre><code><font size="3"> インライン { - <font>text-decoration</font>: underline; - -moz-text-decoration-color: -moz-use-text-color; - -moz-text-decoration-line: underline; - -moz-text-decoration-style: solid; - } </font></code></pre> - </li> - <li> - <p><strong>色指定の方法に間違えている場合</strong><br> - <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>: -moz-use-text-color; を <a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-color">border-color</a>: currentColor; に書き換えます。<br> - なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。</p> - - <pre><code><font size="3"> インライン { - text-decoration: underline; - <font>border-color</font>: <b>currentColor</b>; - -moz-text-decoration-line: underline; - -moz-text-decoration-style: solid; - } </font></code></pre> - </li> -</ol> - -<h2 id="メリット">メリット</h2> - -<p> ・他のブラウザでも互換性を維持することができます。</p> - -<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/web/css/-moz-box-ordinal-group/index.html b/files/ja/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 147bdbd9b4..0000000000 --- a/files/ja/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - Mozilla 拡張 - - Non-standard - - Reference - - フレックスボックス -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -<p>{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}</p> - -<p>このプロパティの代わりに何を使用するべきかについての詳細情報は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>をご覧ください。</p> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。</p> - -<h2 id="Values" name="Values">値</h2> - -<p>値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: html"><style type="text/css"> - #Flexbox { - display: -ms-box; - display: -moz-box; - display: -webkit-box; - } - - #text1 { - background: red; - -ms-box-ordinal-group: 4; - -moz-box-ordinal-group: 4; - -webkit-box-ordinal-group: 4; - } - - #text2 { - background: green; - -ms-box-ordinal-group: 3; - -moz-box-ordinal-group: 3; - -webkit-box-ordinal-group: 3; - } - - #text3 { - background: blue; - -ms-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -webkit-box-ordinal-group: 2; - } - - #text4 { - background: orange; - } -</style> - -<div id="Flexbox"> - <div id="text1">text 1</div> - <div id="text2">text 2</div> - <div id="text3">text 3</div> - <div id="text4">text 4</div> -</div> -</pre> diff --git a/files/ja/web/css/-ms-high-contrast/index.html b/files/ja/web/css/@media/-ms-high-contrast/index.html index f98c01bc68..f98c01bc68 100644 --- a/files/ja/web/css/-ms-high-contrast/index.html +++ b/files/ja/web/css/@media/-ms-high-contrast/index.html diff --git a/files/ja/web/css/aural/index.html b/files/ja/web/css/@media/aural/index.html index ac66215e3c..ac66215e3c 100644 --- a/files/ja/web/css/aural/index.html +++ b/files/ja/web/css/@media/aural/index.html diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html deleted file mode 100644 index b8b8d56198..0000000000 --- a/files/ja/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 索引 -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - 索引 -translation_of: Web/CSS/@media/Index ---- -<p>{{CSSRef}}</p> - -<p>{{Index("/ja/docs/Web/CSS/@media")}}</p> diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html deleted file mode 100644 index 38f093896b..0000000000 --- a/files/ja/web/css/@viewport/height/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p> - -<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* 1つの値 */ -height: auto; -height: 320px; -height: 15em; - -/* Two values */ -height: 320px 200px; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負の数ではない絶対的または相対的な長さです。</dd> - <dt><code><percentage></code></dt> - <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3> - -<pre class="brush: css notranslate">@viewport { - height: 500px; -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.height")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html deleted file mode 100644 index 0e9f9079f0..0000000000 --- a/files/ja/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: max-height -slug: Web/CSS/@viewport/max-height -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height ---- -<div>{{CSSRef}}</div> - -<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p> - -<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* Keyword value */ -max-height: auto; - -/* <length> values */ -max-height: 400px; -max-height: 50em; -max-height: 20cm; - -/* <percentage> value */ -max-height: 75%;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用する値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負ではない絶対値または相対値。</dd> - <dt><code><percentage></code></dt> - <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@viewport { - max-height: 600px; -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/ja/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index 483e5c214f..0000000000 --- a/files/ja/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: max-zoom -slug: Web/CSS/@viewport/max-zoom -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -max-zoom: auto; - -/* <number> 値 */ -max-zoom: 0.8; -max-zoom: 2.0; - -/* <percentage> 値 */ -max-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の上限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の上限です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3> - -<pre class="notranslate"><code>@viewport { - max-zoom: 1.5; -}</code> -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 01b0ae54b2..0000000000 --- a/files/ja/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: min-zoom -slug: Web/CSS/@viewport/min-zoom -tags: - - '@viewport' - - CSS - - CSS 記述子 - - リファレンス -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ -min-zoom: auto; - -/* <number> 値 */ -min-zoom: 0.8; -min-zoom: 2.0; - -/* <percentage> 値 */ -min-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の下限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の下限です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> - -<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/ja/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 97814ca702..0000000000 --- a/files/ja/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -tags: - - '@viewport' - - CSS - - CSS 記述子 - - Experimental - - Reference - - モバイル - - 画面レイアウト -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css; no-line-numbers">/* キーワード値 */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd> - <dt><code>contain</code></dt> - <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd> - <dt><code>cover</code></dt> - <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html deleted file mode 100644 index f05447a501..0000000000 --- a/files/ja/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Graphics - - Layout - - Reference - - Web -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -zoom: auto; - -/* <number> 値 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 値 */ -zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>表示倍率として使われる非負の数値です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>表示倍率として使われる非負のパーセント値です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3> - -<pre class="notranslate"><code>@viewport { - zoom: 2.0; -}</code></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_-moz-alt-text/index.html b/files/ja/web/css/_colon_-moz-alt-text/index.html deleted file mode 100644 index be215a2997..0000000000 --- a/files/ja/web/css/_colon_-moz-alt-text/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: ':-moz-alt-text' -slug: 'Web/CSS/:-moz-alt-text' -tags: - - CSS - - CSS Reference - - Non-standard ---- -<p>{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}</p> - -<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> - -<p><code>:-moz-alt-text</code> は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。</p> - -<p>このセレクタは主にテーマ開発者によって使用されるものです。</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(11011) }}</p> diff --git a/files/ja/web/css/_colon_-moz-placeholder/index.html b/files/ja/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index f9e7367a09..0000000000 --- a/files/ja/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -tags: - - CSS - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' ---- -<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p> - -<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div> - -<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p> - -<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>この例はプレースホルダの文字色を緑色に変更しています。</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Placeholder demo</title> - <style type="text/css"> - input:-moz-placeholder { - color: green; - } - </style> -</head> -<body> - <input id="test" placeholder="Placeholder text!"> -</body> -</html> -</pre> - -<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(457801) }}</p> - -<h2 id="Notes" name="Notes">注記</h2> - -<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div> - -<h3 id="SeeAlso" name="SeeAlso">参考</h3> - -<ul> - <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_-webkit-autofill/index.html b/files/ja/web/css/_colon_autofill/index.html index 2e8ba6c793..2e8ba6c793 100644 --- a/files/ja/web/css/_colon_-webkit-autofill/index.html +++ b/files/ja/web/css/_colon_autofill/index.html diff --git a/files/ja/web/css/auto/index.html b/files/ja/web/css/auto/index.html deleted file mode 100644 index cae634e45a..0000000000 --- a/files/ja/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -<div> - {{CSSRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ユーザエージェントによって自動的に計算される値です。その具体的な効果は <code>auto</code> が適用されたプロパティ毎にそれぞれ異なります。</p> -<h2 id="Used_in" name="Used_in">auto 値の使用が可能なプロパティ</h2> -<ul> - <li>{{Cssxref("overflow")}}</li> - <li>{{Cssxref("overflow-x")}}</li> - <li>{{Cssxref("overflow-y")}}</li> - <li>{{Cssxref("cursor")}}</li> - <li>{{Cssxref("width")}}</li> - <li>{{Cssxref("marker-offset")}}</li> - <li>{{Cssxref("margin")}}</li> - <li>margin-* (left|bottom|top|right|start|end)</li> - <li>{{Cssxref("bottom")}}</li> - <li>{{Cssxref("left")}}</li> - <li>{{Cssxref("table-layout")}}</li> - <li>{{Cssxref("z-index")}}</li> - <li>{{Cssxref("column-width")}}</li> -</ul> diff --git a/files/ja/web/css/common_css_questions/index.html b/files/ja/web/css/common_css_questions/index.html deleted file mode 100644 index 4307266923..0000000000 --- a/files/ja/web/css/common_css_questions/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: CSS の一般的な質問 -slug: Web/CSS/Common_CSS_Questions -tags: - - CSS - - FAQ - - Web - - questions - - ガイド - - 例 -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<p><span class="seoSummary">この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。</span></p> - -<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly" name="Why_doesn't_my_CSS_which_is_valid_render_correctly">なぜ CSS が妥当なのに正しくレンダリングされないのか？</h2> - -<p>ブラウザーは <code>DOCTYPE</code> 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい <code>DOCTYPE</code> 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。</p> - -<p>現代のブラウザーは、2つの主要なレンダリングモードを備えています。</p> - -<ul> - <li><em>Quirks Mode</em>: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 <code>DOCTYPE</code> 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の <code>DOCTYPE</code> 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。</li> - <li><em>Standards Mode</em>: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい <code>DOCTYPE</code> 宣言を持つページは Standards Mode でレンダリングされます。</li> -</ul> - -<p>Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードであります<em><a href="/ja/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> があります。</p> - -<p>以下は Standards Mode または Almost Standards Mode になる <code>DOCTYPE</code> 宣言で、もっとも一般的に使用されるものの一覧です:</p> - -<pre><!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、 - この doctype が推奨されます */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<p>可能な限り、 HTML5 の doctype を使用するべきです。</p> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">なぜ CSS が妥当なのにまったくレンダリングされないのか?</h2> - -<p>以下のような可能性があります。</p> - -<ul> - <li>CSS ファイルへのパスが間違っている。</li> - <li>適用されるためには、 CSS スタイルシートを MIME タイプ <code>text/css</code> で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。</li> -</ul> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><code>id</code> と <code>class</code> の違いは何か?</h2> - -<p>HTML の要素は、 <code>id</code> 属性と <code>class</code> 属性の片方または両方を持つことができます。 <code>id</code> 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 <code>class</code> 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の <code>id</code> または <code>class</code> 名に対してスタイルを設定できます。</p> - -<ul> - <li>ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。</li> - <li>適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。</li> -</ul> - -<p>一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。</p> - -<ul> - <li>class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります</li> - <li>class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です</li> - <li>class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です</li> -</ul> - -<div class="note"> -<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p> -</div> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2> - -<p>当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。</p> - -<pre class="brush: css">/* 見出しの既定の色は黒 */ -h1 { color: red; } -h1 { color: black; }</pre> - -<p>これは CSS 2 で変わり、<a href="/ja/docs/CSS/initial" title="initial">initial</a> キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。</p> - -<pre class="brush: css">/* 見出しの既定の色は黒 */ -h1 { color: red; } -h1 { color: initial; }</pre> - -<h2 id="Derived_styles" name="Derived_styles">スタイルを他のスタイルから派生させるにはどうすればよいか?</h2> - -<p>CSS では、あるスタイルが他の表現で定義されることを許可していません (<a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Working Group のスタンスに関する、Eric Meyer 氏のコメント</a>をご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a> が導入されました。</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">ひとつの要素に複数のクラスを割り当てる方法は?</h2> - -<p>HTML の要素は <code>class</code> 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。<code>class</code> 属性内のクラスの順序は関係がありません。</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">なぜ私のスタイル規則は正しく動作しないのか?</h2> - -<p>構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために <a href="/ja/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> の <em>CSS Style Rules</em> ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 要素の階層</h3> - -<p>CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">明示的に再定義されたスタイル規則</h3> - -<p>CSS スタイルシートでは、順序<strong>こそが</strong>重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* 他の規則 */ -/* 他の規則 */ -/* 他の規則 */ -.stockSymbol { font-weight: normal; } - -<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">ショートハンドプロパティの使用</h3> - -<p>ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序<strong>こそが</strong>重要であるためです。</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now set to normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><code>*</code> セレクタの使用</h3> - -<p>ワイルドカードセレクタ <code>*</code> はすべての要素を参照するものであり、特に注意して使用しなければなりません。</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>この例では、<code>body *</code> セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した <code>font-weight: bold;</code> は、body 内の全要素に適用した <code>font-weight: normal;</code> にオーバーライドされます。</p> - -<p>特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS の詳細度</h3> - -<p>ある要素に複数の規則を適用すると、スタイルの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">詳細さ</a>に従って規則が選ばれます。インラインスタイル（HTML の <code>style</code> 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> でご覧いただけます。</p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?</h2> - -<p>これらのプロパティは<em>接頭辞付きプロパティ</em>と呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。</p> - -<p>本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの <code>-webkit-</code> 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが <code>-webkit-</code> プレフィックスエイリアスを実装し始めました。</p> - -<p>実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。</p> - -<p>作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：</p> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div class="note"> -<p><strong>メモ</strong>: 接頭辞付きプロパティの処理の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザテスト</a>モジュールの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理</a>を参照してください。</p> -</div> - -<div class="note"> -<p><strong>メモ</strong>: Mozilla をプレフィックスとする CSS プロパティの詳細については、<a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a>ページを参照してください。</p> -</div> - -<h2 id="How_does_z-index_relate_to_positioning.3F" name="How_does_z-index_relate_to_positioning.3F">z-index は位置指定へどのように関係するのか?</h2> - -<p>z-index プロパティは、要素を積み重ねる順序を指定します。</p> - -<p>z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (<code>position:absolute</code>、<code>position:relative</code>、または <code>position:fixed</code>) を持つ要素に対してのみ機能します。</p> - -<div class="note"> -<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">ポジショニング</a>学習の記事、特に <a href="/ja/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">z-index の紹介</a>セクションを参照してください。</p> -</div> diff --git a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 4c7327f6c1..0000000000 --- a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: CSS での複数の背景の利用方法 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p id="Summary">{{CSSRef}}</p> - -<p>CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。</p> - -<p>複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。</p> - -<pre class="syntaxbox">.myclass { - background: 背景1, 背景2, ..., 背景N; -}</pre> - -<p>この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>次の例では、上位レイヤーから</p> - -<ol> - <li>Firefox のロゴ</li> - <li><a href="/ja/CSS/linear-gradient" title="linear-gradient">線形グラデーション</a></li> - <li>花の画像</li> -</ol> - -<p>の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。</p> - -<pre class="brush: css">.multi_bg_example { - background-image: - url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */ - linear-gradient( to right, rgba(255,255,255,0), #fff ), - url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg"); - - background-repeat: - no-repeat, /* 最前面の背景レイヤーに対応 */ - no-repeat, - repeat; - - background-position: - bottom right, /* 最前面の背景レイヤーに対応 */ - left, - right; -}</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">スクリーンショット</td> - </tr> - <tr> - <td><img alt="css_multibg.png" src="/@api/deki/files/4028/=css_multibg.png"></td> - </tr> - </tbody> -</table> - -<p>スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ <code>background-image</code> で記述した各値に対し、同じ順番で適用されます。つまり、<code>background-image</code> の最初の値として指定した FireFox のアイコンの画像に対し、<br> - {{cssxref("background-repeat")}} は "<code>bottom left</code>"、<br> - {{cssxref("background-position")}} は "<code>no-repeat</code>"<br> - が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの<em>右下に</em>、<em>ひとつだけ</em> 表示されるのです。</p> - -<h2 id="See_also" name="See_also">関連記事</h2> - -<ul> - <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="グラデーションの利用">グラデーションの利用</a></li> -</ul> diff --git a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index dde72afbab..dde72afbab 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 42426babe4..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: クロスブラウザのフレックスボックスのミックスイン -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - CSS フレックスボックス - - ミックスイン - - リファレンス -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -<div>{{cssref}}</div> - -<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p> - -<p>このセットは次のものを使用します。</p> - -<ul> - <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li> - <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li> -</ul> - -<p>原文:</p> - -<ul> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> -</ul> - -<p>参考文献:</p> - -<ul> - <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> - <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> - <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> - <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li> - <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li> -</ul> - -<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div> - -<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3> - -<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p> - -<ul> - <li>値: <code>flex</code> | <code>inline-flex</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li> -</ul> - -<pre class="brush: css">@mixin flexbox { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -//Using this mixin -%flexbox { @include flexbox; }</pre> - -<div> -<pre class="brush: css">@mixin inline-flex { - display: -webkit-inline-box; - display: -moz-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%inline-flex { @include inline-flex; }</pre> -</div> - -<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3> - -<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p> - -<ul> - <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - -moz-box-direction: reverse; - -moz-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - -moz-box-direction: normal; - -moz-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - -moz-box-direction: reverse; - -moz-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - -moz-box-direction: normal; - -moz-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} - -// Shorter version: -@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> - -<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3> - -<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p> - -<ul> - <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-wrap($value: nowrap) { - // No Webkit/FF Box fallback. - -webkit-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -}</pre> -</div> - -<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3> - -<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p> - -<ul> - <li>値: <code>row</code> (default) | <code>nowrap</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { - // No Webkit/FF Box fallback. - -webkit-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -}</pre> -</div> - -<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3> - -<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin order($int: 0) { - -webkit-box-ordinal-group: $int + 1; - -moz-box-ordinal-group: $int + 1; - -webkit-order: $int; - -ms-flex-order: $int; - order: $int; -}</pre> -</div> - -<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3> - -<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-grow($int: 1) { - -webkit-box-flex: $int; - -moz-box-flex: $int; - -webkit-flex-grow: $int; - -ms-flex: $int; - flex-grow: $int; -}</pre> -</div> - -<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3> - -<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p> - -<ul> - <li>Value: any integer (0 is the default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-shrink($int: 0) { - -webkit-flex-shrink: $int; - -moz-flex-shrink: $int; - -ms-flex: $int; - flex-shrink: $int; -}</pre> -</div> - -<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3> - -<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p> - -<ul> - <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex-basis($value: auto) { - -webkit-flex-basis: $value; - flex-basis: $value; -}</pre> -</div> - -<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3> - -<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p> - -<ul> - <li>値: See the {{cssxref("flex")}} reference for values and default</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { - - // Set a variable to be used by box-flex properties - $fg-boxflex: $fg; - - // Box-Flex only supports a flex-grow value so lets grab the - // first item in the list and just return that. - @if type-of($fg) == 'list' { - $fg-boxflex: nth($fg, 1); - } - - -webkit-box: $fg-boxflex; - -moz-box: $fg-boxflex; - -webkit-flex: $fg $fs $fb; - -ms-flexbox: $fg $fs $fb; - flex: $fg $fs $fb; -}</pre> -</div> - -<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3> - -<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p> - -<div class="note"> -<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p> -</div> - -<ul> - <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -moz-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -moz-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -moz-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -moz-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - justify-content: $value; -} - // Shorter version: - @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> - -<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3> - -<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p> - -<ul> - <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -moz-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -moz-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -moz-box-align: $value; - -ms-flex-align: $value; - } - -webkit-align-items: $value; - align-items: $value; -}</pre> -</div> - -<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3> - -<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p> - -<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p> - -<div> -<pre class="brush: css">@mixin align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -}</pre> -</div> - -<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3> - -<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p> - -<ul> - <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li> - <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li> -</ul> - -<div> -<pre class="brush: css">@mixin align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -}</pre> -</div> diff --git a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html deleted file mode 100644 index 4458dddff2..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Web アプリケーションのレイアウトに flexbox を使用する -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -tags: - - Advanced - - CSS - - CSS Flexible Boxes - - Example - - Guide - - Web -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p> - -<ul> - <li>ページの中央に要素を置きたい場合。</li> - <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li> - <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li> -</ul> - -<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p> - -<h2 id="Basics" name="Basics">基本</h2> - -<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p> - -<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p> - -<ul> - <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li> - <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li> - <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li> -</ul> - -<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p> - -<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2> - -<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p> - -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p> - -<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2> - -<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p> - -<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3> - -<pre class="brush: css;highlight:[8,14]">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Increase container size</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> -</div> -</pre> - -<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="Result_2" name="Result_2">結果</h3> - -<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p> - -<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p> - -<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2> - -<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p> - -<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Element 1</div> - <div class="fixed-size">Element 2</div> - <div class="fixed-size">Element 3</div> -</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> -</pre> - -<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="Result_3" name="Result_3">結果</h3> - -<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li> -</ul> diff --git a/files/ja/web/css/index/index.html b/files/ja/web/css/index/index.html deleted file mode 100644 index 20ef75d74b..0000000000 --- a/files/ja/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: CSS 関連ドキュメントの索引 -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -<p>{{Index("/ja/docs/Web/CSS")}}</p> diff --git a/files/ja/web/css/media/index.html b/files/ja/web/css/media/index.html deleted file mode 100644 index 5bf2140f1d..0000000000 --- a/files/ja/web/css/media/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Media -slug: Web/CSS/Media ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/web/css/media/visual/index.html b/files/ja/web/css/media/visual/index.html deleted file mode 100644 index 87ca6f864c..0000000000 --- a/files/ja/web/css/media/visual/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Visual -slug: Web/CSS/Media/Visual -tags: - - CSS - - CSS Reference - - MDC Project - - NeedsContent -translation_of: Web/CSS/@media -translation_of_original: Web/CSS/media/visual ---- -<div>{{ CSSRef() }}</div> -<p><a href="/ja/CSS" title="ja/CSS">CSS</a> 標準で定義された<a href="/ja/CSS/@media#Media_groups" title="ja/CSS/@media#Media_groups">メディアグループ</a>。</p> -<h2 id="英語版章題(See_also)_参照">{{ 英語版章題("See also") }}参照</h2> -<p><a class="external" href="http://www.w3.org/TR/CSS2/media.html" title="W3C Media Types Spec">W3C Media Types Spec</a></p> -<p><span class="comment">Interwiki Languages Links</span></p> -<div>{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}</div> diff --git a/files/ja/web/css/none/index.html b/files/ja/web/css/none/index.html deleted file mode 100644 index 562347725e..0000000000 --- a/files/ja/web/css/none/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: none -slug: Web/CSS/none -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -<div> - {{CSSRef()}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong><code>none</code></strong> キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。</p> -<h2 id="Used_in" name="Used_in">none 値が使用可能な CSS プロパティ</h2> -<ul> - <li>{{ Cssxref("float") }}<br> - 要素はフロートしません。</li> - <li>{{ Cssxref("text-decoration") }}<br> - 要素の装飾を行いません。</li> - <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}<br> - 高さ・幅を特定値で制限しません。</li> - <li>{{ Cssxref("background-image") }}</li> - <li>{{ Cssxref("border-style") }}</li> - <li>{{ Cssxref("clear") }}</li> - <li>{{ Cssxref("content") }}</li> - <li>{{ Cssxref("counter-increment") }}</li> - <li>{{ Cssxref("counter-reset") }}</li> - <li>{{ Cssxref("display") }}</li> - <li>{{ Cssxref("list-style-type") }}</li> - <li>{{ Cssxref("quotes") }}</li> - <li>{{ Cssxref("text-transform") }}</li> -</ul> diff --git a/files/ja/web/css/normal/index.html b/files/ja/web/css/normal/index.html deleted file mode 100644 index 4f1a3acf6b..0000000000 --- a/files/ja/web/css/normal/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -tags: - - CSS Reference -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -<div> - {{CSSRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong><code>normal</code></strong> は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。</p> -<h2 id="Used_in" name="Used_in">normal が使用可能な CSS プロパティ</h2> -<dl> - <dt> - {{Cssxref("font-weight")}}</dt> - <dd> - <code>normal</code> を指定した場合、font-weight プロパティの基準値（<code>400</code>）と同等となります。太字にも細字にもなりません。</dd> - <dt> - {{Cssxref("font-style")}}</dt> - <dd> - <code>normal</code> を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。</dd> - <dt> - {{Cssxref("word-spacing")}}</dt> - <dd> - <code>normal</code> を指定した場合、フォントの標準的な字間で文字がレンダリングされます。</dd> -</dl> -<p>他にも、以下の様なプロパティ等で <code>normal</code> が指定可能です。</p> -<ul> - <li>{{Cssxref("font-variant")}}</li> - <li>{{Cssxref("letter-spacing")}}</li> - <li>{{Cssxref("white-space")}}</li> - <li>{{Cssxref("speak")}}</li> - <li>{{Cssxref("unicode-bidi")}}</li> - <li>{{Cssxref("line-height")}}</li> - <li>{{Cssxref("content")}}</li> -</ul> diff --git a/files/ja/web/css/other_resources/index.html b/files/ja/web/css/other_resources/index.html deleted file mode 100644 index fe471649c2..0000000000 --- a/files/ja/web/css/other_resources/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Other Resources -slug: Web/CSS/Other_Resources -tags: - - CSS -translation_of: Web/CSS -translation_of_original: Web/CSS/Other_Resources ---- -<h2 id="W3C_Documents" name="W3C_Documents">W3C の文書</h2> -<ul> - <li><a class="external" href="http://www.w3.org/Style/CSS/">CSS メインページ</a></li> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 仕様</a></li> - <li><a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 仕様</a></li> - <li><a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C での基本スタイルシート</a></li> - <li><a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 テストスイート</a></li> - <li><a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 テストスイート</a></li> -</ul> - - -<h2 id="Other_Resources" name="Other_Resources">その他の資料</h2> -<ul> - <li><a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a></li> - <li><a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a></li> - <li><a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a></li> - <li><a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a></li> - <li>css-discuss: <a class="external" href="http://archivist.incutio.com/css-discuss/">archives</a>, <a class="external" href="http://css-discuss.incutio.com/">wiki</a></li> - <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a></li> -</ul> diff --git a/files/ja/web/css/scaling_background_images/index.html b/files/ja/web/css/scaling_background_images/index.html deleted file mode 100644 index fa7ce58677..0000000000 --- a/files/ja/web/css/scaling_background_images/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: Web/CSS/Scaling_background_images -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -<p>CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。</p> - -<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">大きな画像をタイル状に配置する</h2> - -<p>1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。</p> - -<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> - -<p>これは以下の CSS を使うことで達成されます。</p> - -<pre class="brush: css; highlight:[8]">.square { - width: 300px; - height: 300px; - background-image: url(fxlogo.png); - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; - background-size: 150px; -} -</pre> - -<p>もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。</p> - -<h2 id="Stretching_an_image" name="Stretching_an_image">画像を引き伸ばす</h2> - -<p>以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。</p> - -<pre class="brush:css">background-size: 300px 150px; -</pre> - -<p>その結果はこのようになります。</p> - -<p><img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> - -<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像を拡大する</h2> - -<p>この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。</p> - -<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> - -<pre class="brush: css; highlight:[5]">.square2 { - width: 300px; - height: 300px; - background-image: url(favicon.png); - background-size: 300px; - border: solid 2px; - text-shadow: white 0px 0px 2px; - font-size: 16px; -} -</pre> - -<p>ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。</p> - -<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特別な値の「contain」と「cover」</h2> - -<p>CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 <code>contain</code> と <code>cover</code> の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。</p> - -<h3 id="contain" name="contain">contain</h3> - -<p>contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。</p> - -<div style="width: 100%; height: 200px; border: solid 2px;"> -<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> -</div> - -<p>上の例の CSS は以下のようなものです。</p> - -<pre class="brush: css; highlight:[4]">width: 100%; -height: 200px; -background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); -background-size: contain; -border: solid 2px; -</pre> - -<h3 id="cover" name="cover">cover</h3> - -<p>cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。</p> - -<div style="width: 100%; height: 200px; border: solid 2px;"> -<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> -</div> - -<p>この例では以下の CSS を使用しています。</p> - -<pre class="brush: css; highlight:[4]">width: 100%; -height: 200px; -background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); -background-size: cover; -border: solid 2px; -</pre> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("background")}}</li> -</ul> diff --git a/files/ja/web/css/url/index.html b/files/ja/web/css/url/index.html deleted file mode 100644 index 2ca334be5a..0000000000 --- a/files/ja/web/css/url/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - CSS - - CSS データ型 - - Reference - - URI - - URL - - urn - - レイアウト -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CssRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p> - -<div class="note"> -<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p> - -<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code><uri></code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code><url></code> のみを記述します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><url></code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p> - -<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") -<a_css_property>: url('http://mysite.example.com/mycursor.png') -<a_css_property>: url(http://mysite.example.com/mycursor.png) -</pre> - -<div class="note"> -<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">.topbanner { - background: url("topbanner.png") #00D no-repeat fixed; -} -</pre> - -<pre class="brush: css">ul { - list-style: square url(http://www.example.com/redball.png); -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>CSS Level 2 (Revision 1) から重要な変更なし</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>CSS Level 1 から重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<div>{{Compat("css.types.url")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/events/compositionstart/index.html b/files/ja/web/events/compositionstart/index.html deleted file mode 100644 index e02e6c35ef..0000000000 --- a/files/ja/web/events/compositionstart/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: compositionstart -slug: Web/Events/compositionstart -tags: - - DOM - - Event - - Gecko DOM Reference - - events - - 要更新 -translation_of: Web/API/Element/compositionstart_event -translation_of_original: DOM/DOM_event_reference/compositionstart ---- -<p>DOM <code>compositionstart</code> イベントはユーザがIMEで未確定文字列の入力を開始した時のように、間接的なテキスト入力を開始した時に同期的に発生します。このイベントは {{ domxref("CompositionEvent") }} インターフェースを持ちます。</p> -<div class="note"> - <strong>注釈:</strong> このイベントはテキストが編集が始まる前に発生すべきではあるのですが、Gecko では編集を始めた直後に発生します。</div> -<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>インターフェース:</dfn>{{ domxref('CompositionEvent') }}</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>同期・非同期 :</dfn>同期</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>バブルフェーズ :</dfn>有り</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>ターゲット :</dfn> {{ domxref('Element') }}</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>キャンセル :</dfn> 可能 (ただし、下記のブラウザ固有の事情を参照)</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>既定動作 :</dfn> 無し</li> -</ul> -<h2 id="仕様書">仕様書</h2> -<p><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart">DOM Level3 Events</a></p> -<h2 id="ブラウザ間の互換性">ブラウザ間の互換性</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基本的なサポート</td> - <td> - <p>{{ CompatVersionUnknown() }}</p> - <p>data 属性値は仕様と違っています。</p> - </td> - <td>{{ CompatGeckoDesktop("9.0") }}</td> - <td> - <p>{{ CompatVersionUnknown() }}</p> - <p>data 属性値は常に空です。</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本的なサポート</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoMobile("9.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<h3 id="Gecko_の動作メモ">Gecko の動作メモ</h3> -<p>DOM Level 3 仕様書では <code>compositionstart</code> はキャンセル可能と定義されています。しかし、 Gecko では現在のところ、キャンセルをできないようにしています。</p> -<p>Gecko はこのイベントをIMEが編集を開始した時に発生させます。また、プラットフォームによっては開始された編集を取り消すAPIがありません。さらに、Gecko は IME が実際に編集を開始するまで各キーイベントがそのきっかけとなるかどうか知ることができません。これらの理由から、<code>compositionstart</code> イベントの {{ domxref("event.preventDefault()") }} は Gecko では機能しません。</p> diff --git a/files/ja/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html deleted file mode 100644 index 1475956d30..0000000000 --- a/files/ja/web/guide/ajax/other_resources/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: AJAX に関するその他の資料 -slug: Web/Guide/AJAX/Other_Resources -tags: - - AJAX -translation_of: Web/Guide/AJAX/Other_Resources ---- -<ul> - <li><a href="http://www.ajaxreview.com/">AJAX Review</a></li> - <li><a href="http://www.maxkiesler.com/index.php/mhub/">mHub : Ajax and rails examples & how-to's</a></li> - <li><a href="http://www.maxkiesler.com/">AJAX Blog at maxkiesler.com</a></li> - <li><a href="http://ajaxblog.com/">AJAX Blog</a></li> - <li><a href="http://www.ajaxian.com/">Ajaxian Blog</a></li> - <li><a href="http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest">AJAX Blog at fiftyfoureleven.com</a></li> - <li><a href="http://www.ajaxmatters.com/">AJAX Matters</a></li> - <li><a href="http://www.ajaxpatterns.org/Main_Page">AJAX Patterns</a></li> - <li><a href="http://www.ajaxtoday.com">AJAX Today Your ajax tutorials, articles, patterns, blogs</a></li> - <li><a href="http://www.ajaxlines.com/">AJAX Lines</a></li> - <li><a href="http://explash.com/" title="http://explash.com/">eXplash - Ajax and Web 2.0 applications directory</a></li> - <li><a href="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/" title="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/">XMLHttpRequest Object</a></li> -</ul> diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html deleted file mode 100644 index 379b38949d..0000000000 --- a/files/ja/web/guide/css/getting_started/boxes/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Boxes -slug: Web/Guide/CSS/Getting_started/Boxes -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<div>{{CSSTutorialTOC}}</div> - -<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p> - -<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2> - -<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p> - -<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">マージン</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">パディング</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> - </div> - </div> - </div> - - <p><em>薄い灰色がレイアウトの部品を示します。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> - </div> - </div> - </div> - - <p><em>ブラウザではこう見えます。</em></p> - </td> - </tr> - </tbody> -</table> - -<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p> - -<h3 id="Coloring" name="Coloring">彩色</h3> - -<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">マージン</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">パディング</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> - </div> - </div> - </div> - - <p><em>要素の背景色は緑です。</em></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> - </div> - </div> - </div> - - <p><em>ブラウザではこう見えます</em>。</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Borders" name="Borders">ボーダー</h3> - -<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p> - -<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p> - -<p>選べるスタイル:</p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p> - -<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ -}</pre> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p> - </td> - </tr> - </tbody> -</table> - -<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> -</div> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td>画像:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> - -<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3> - -<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p> - -<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p> - -<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p> - -<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p> - -<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p> - -<div class="tuto_example"> -<div class="tuto_type">例</div> - -<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p> - -<p>パディングで囲むことで、テキストから枠が少し離れます。</p> - -<p>左マージンは段落を他のテキストからインデントします:</p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p>結果は次のようになります:</p> - -<table> - <tbody> - <tr> - <td> - <p>ここは通常の段落です。</p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">さらに詳しく</div> - -<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p> - -<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p> - -<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p> - -<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p> -</div> - -<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2> - -<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p>ブラウザを更新すると次の結果になります:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">チャレンジ</div> - -<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p>（幅や色を正確に同じにする必要はありません。）</p> -</div> - -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p> - -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> - -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p> diff --git a/files/ja/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html deleted file mode 100644 index 4d080bc3a4..0000000000 --- a/files/ja/web/guide/css/getting_started/color/index.html +++ /dev/null @@ -1,349 +0,0 @@ ---- -title: 色 -slug: Web/Guide/CSS/Getting_started/Color -tags: - - CSS - - 'CSS:Getting_Started' - - Getting_Started -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -<p>この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。</p> - -<p>サンプルスタイルシートに、背景色を指定出来るようになります。</p> - -<p>{{ 英語版章題("Information: Color") }}</p> - -<h3 id=".E8.A7.A3.E8.AA.AC:_.E8.89.B2" name=".E8.A7.A3.E8.AA.AC:_.E8.89.B2">解説: 色</h3> - -<p>このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。</p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>プライマリー</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>セカンダリー</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>詳細情報</caption> - <tbody> - <tr> - <td>ブラウザが上記以上の名前付きの色をサポートしている可能性もあります - <table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> - </table> - - <p>拡張された色の名前リストについては、CSS 3 カラーモジュールの <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG 色キーワード</a> を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。</p> - </td> - </tr> - </tbody> -</table> - -<p>より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の<em>16 進数</em> 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p>完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p>これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Examples</caption> - <tbody> - <tr> - <td>少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>赤から始めます</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>桃色に近づけるため、緑・青を追加</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>橙に近づけるため、緑を追加</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>暗くするため、全ての色を減らす</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>飽和を減らすため、色の値を近づける</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>色同士を完全に同じにすると、灰色</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>空色のようなパステル調を出すには: - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>白から始めます:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>他の色の値を少し減らします:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>More details</caption> - <tbody> - <tr> - <td>色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 - <p>たとえば、次の色はマロン (濃い赤) になります :</p> - - <div style="width: 24em;"> - <pre> -rgb(128, 0, 0) -</pre> - </div> - - <p><br> - 色指定の詳細については、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">色</a> をご覧ください。</p> - - <p>メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 システム色</a> があります。</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("Color properties") }}</p> - -<h4 id=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC">色のプロパティー</h4> - -<p><code>color</code> プロパティーをすでに利用しました。</p> - -<p>同様に <code>background-color</code> プロパティーを指定することで、要素の背景色を変えることができます。</p> - -<p>背景色には <code>transparent</code> を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Example</caption> - <tbody> - <tr> - <td>このチュートリアルの <strong>サンプル</strong> ボックスは、このような 淡黄色を背景色にしています。 - <div style="width: 24em;"> - <pre> -background-color: #fffff4; -</pre> - </div> - - <p><strong>より詳細は</strong> のボックスは淡灰色を使っています。</p> - - <div style="width: 24em;"> - <pre> -background-color: #f4f4f4; -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>{{ 英語版章題("Action: Using color codes") }}</p> - -<h3 id=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">試してみましょう: カラーコードを利用する</h3> - -<p>CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)</p> - -<div style="width: 32em;"> -<pre class="eval">/*** CSS Tutorial: Color page ***/ - -/* page font */ -body {font: 16px "Comic Sans MS", cursive;} - -/* paragraphs */ -p {color: blue;} -#first {font-style: italic;} - -/* initial letters */ -strong { - color: red; - <strong>background-color: #ddf;</strong> - font: 200% serif; - } - -.carrot {color: red;} -.spinach {color: green;} -</pre> -</div> - -<p>ブラウザを再読み込みして結果を見てみましょう。</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em; width: 100%;"> - <caption>Challenge</caption> - <tbody> - <tr> - <td>結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 - <p>(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("What next?") }}</p> - -<h4 id=".E6.AC.A1.E3.81.AF_.3F" name=".E6.AC.A1.E3.81.AF_.3F">次は ?</h4> - -<p>あなたのサンプルは完全にスタイルと中身に分離されました。</p> - -<p>次のページでは、この完全分離の状態に例外を作る方法を説明します。 <strong><a href="Content">Content</a></strong></p> diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html deleted file mode 100644 index fc2fa7a3b4..0000000000 --- a/files/ja/web/guide/css/getting_started/javascript/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: JavaScript and CSS -slug: Web/Guide/CSS/Getting_started/JavaScript -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<div> - {{CSSTutorialTOC}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">CSS チュートリアル</a> 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。</p> -<p>第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。</p> -<p>代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。</p> -<p>前の章（第 1 部）: <a href="/ja/docs/CSS/Getting_Started/Media" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Media">メディア</a><br> - 次の章: <a href="/ja/docs/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/ja/CSS/Getting_Started/SVG_graphics">SVG</a></p> -<h2 id="Information:_JavaScript" name="Information:_JavaScript">JavaScriptについて</h2> -<p>JavaScript は<em>プログラミング言語</em> です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。</p> -<p>JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。</p> -<p>3 つの方法があります:</p> -<ul> - <li>文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集</li> - <li>スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集</li> - <li>DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - さらに詳しく</caption> - <tbody> - <tr> - <td>JavaScript, についてのさらに詳しい情報は、この wiki の <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> のページをご覧ください。</td> - </tr> - </tbody> -</table> -<h2 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">実習: JavaScript の実演</h2> -<p>新規 HTML 文書 <code>doc5.html</code> を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:</p> -<div style="width: 48em;"> - <pre class="brush:html;"><!DOCTYPE html> -<html> - -<head> -<title>Mozilla CSS Getting Started - JavaScript demonstration</title> -<link rel="stylesheet" type="text/css" href="style5.css" /> -<script type="text/javascript" src="script5.js"></script> -</head> - -<body> -<h1>JavaScript sample</h1> - -<div id="square"></div> - -<button type="button" onclick="doDemo(this);">Click Me</button> - -</body> -</html> -</pre> -</div> -<p>新規 CSS ファイル <code>style5.css</code> を作り、次の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush:css;">/*** JavaScript demonstration ***/ -#square { - width: 20em; - height: 20em; - border: 2px inset gray; - margin-bottom: 1em; -} - -button { - padding: .5em 2em; -} -</pre> -</div> -<p>新規テキストファイル <code>script5.js</code> を作り、以下の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush:js;">// JavaScript demonstration -function doDemo (button) { - var square = document.getElementById("square"); - square.style.backgroundColor = "#fa4"; - button.setAttribute("disabled", "true"); - setTimeout(clearDemo, 2000, button); -} - -function clearDemo (button) { - var square = document.getElementById("square"); - square.style.backgroundColor = "transparent"; - button.removeAttribute("disabled"); -} -</pre> -</div> -<p>ブラウザで HTML 文書を開いて、ボタンを押してください。</p> -<p>この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:</p> -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td> </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td style="background: #fa4;"> </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<div class="note"> - この実演についての<strong>重要な補足</strong>: - <ul> - <li>HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています</li> - <li>スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。</li> - <li>JavaScript では、<code>document.getElementById("square")</code> は CSS セレクタ <code>#square</code> と、機能的に同義です。</li> - <li>JavaScript では、<code>backgroundColor</code> は CSSのプロパティ <code>background-color</code> に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。</li> - <li>ブラウザ内蔵の CSS ルールには<br> - <code>button{{mediawiki.external('disabled=\"true\"')}}</code> に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。</li> - </ul> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> - <caption> - チャレンジ</caption> - <tbody> - <tr> - <td>スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。</td> - </tr> - </tbody> -</table> -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#JavaScript">チャレンジの解答を見る。</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>このページにわかりづらいところやご意見があれば <a href="/Talk:ja/CSS/Getting_Started/JavaScript" title="Talk:ja/CSS/Getting_Started/JavaScript">Discussion</a> ページに参加してください。</p> -<p>この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: <strong><a href="/ja/docs/CSS/Getting_Started/XBL_bindings" title="CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html deleted file mode 100644 index e8bd18d944..0000000000 --- a/files/ja/web/guide/css/getting_started/layout/index.html +++ /dev/null @@ -1,285 +0,0 @@ ---- -title: Layout -slug: Web/Guide/CSS/Getting_started/Layout -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -<div> - {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p> -<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2> -<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p> -<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p> -<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p> -<h3 id="Document_structure" name="Document_structure">文書の構造</h3> -<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p> -<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p> - <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p> - <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p> - <pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> -<div id="numbered"> - <p>Lorem ipsum</p> - <p>Dolor sit</p> - <p>Amet consectetuer</p> - <p>Magna aliquam</p> - <p>Autem veleum</p> -</div> -</pre> - <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p> - <pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - <p>結果は次のようになります:</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3> -<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p> -<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p> - <p>右辺のボーダーは ems 単位のサイズで定義されています。</p> - <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div style=""> - 僕の大きさを変えてお願い</div> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>その他のデバイスには、これ以外の長さの単位が適しています。</p> - <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p> - <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p> -</div> -<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3> -<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p> -<dl> - <dt> - {{cssxref("text-align")}}</dt> - <dd> - 文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> - <dt> - {{cssxref("text-indent")}}</dt> - <dd> - 指定した幅でインデントを行います。</dd> -</dl> -<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例: 見出しを中央寄せする</div> - <pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - <p>表示結果:</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> - </table> - <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p> -</div> -<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3> -<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p> -<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p> - <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p> - <pre class="brush:css">ul, -#numbered { float: left; } -h3 { clear: left; } -</pre> -</div> -<p>結果は次のようになります:</p> -<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p> -<h3 id="Positioning" name="Positioning">位置取り</h3> -<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p> -<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p> -<dl> - <dt> - <code>relative</code></dt> - <dd> - 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd> - <dt> - <code>fixed</code></dt> - <dd> - 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd> - <dt> - <code>absolute</code></dt> - <dd> - 絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd> - <dt> - <code>static</code></dt> - <dd> - 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd> -</dl> -<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例: 複数の要素を重ねる</div> - <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p> - <pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p> - <pre class="brush:css">#parent-div { - position: relative; - font: bold 200% sans-serif; -} - -#forward, #back { - position: absolute; - margin: 0; /* 要素の周囲のマージンを 0 に */ - top: 0; /* 上部からの距離 */ - left: 0; /* 左部からの距離 */ -} - -#forward { - color: blue; -} - -#back { - color: red; -} -</pre> - <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p> - <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> - <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p> - <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p> - </div> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p> - <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p> -</div> -<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2> -<ol> - <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li> - <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code></body> の直前に次のタグを追加します。</code></p> - <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p> - <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p> - <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p> - <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p> - <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p> - <div style="position: relative; width: 29.5em; height: 18em;"> - <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </div> - <p style=""> </p> - <div style="position: absolute; top: 2px; right: 0px;"> - <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> - </div> - </div> -</div> -<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p> diff --git a/files/ja/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html deleted file mode 100644 index 212947f4f6..0000000000 --- a/files/ja/web/guide/css/getting_started/lists/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Lists -slug: Web/Guide/CSS/Getting_started/Lists -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。</p> -<h2 class="clearLeft" id="リストについて">リストについて</h2> -<p><a href="/ja/docs/CSS/Getting_Started/Content" title="/ja/docs/CSS/Getting_Started/Content">前章</a> のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。</p> -<p>CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。</p> -<p>リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。</p> -<p>CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。</p> -<h3 id="箇条書きリスト（unordered_list）">箇条書きリスト（unordered list）</h3> -<p><em>箇条書きリスト</em>では、すべてのリスト項目に同じ方法でマーカーがつきます。</p> -<p>CSS には3種類のマーカーがあり、ブラウザは次のように表示します:</p> -<ul style="padding-left: 2em;"> - <li style="list-style-type: disc;"><code>disc</code></li> - <li style="list-style-type: circle;"><code>circle</code></li> - <li style="list-style-type: square;"><code>square</code></li> -</ul> -<p>もしくは、画像の URL を指定できます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のルールはリスト項目のクラス別に異なったマーカーを定義します:</p> - <pre class="brush:css">li.open {list-style: circle;} -li.closed {list-style: disc;} -</pre> - <p>リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):</p> - <pre class="brush:css"><ul> - <li class="open">Lorem ipsum</li> - <li class="closed">Dolor sit</li> - <li class="closed">Amet consectetuer</li> - <li class="open">Magna aliquam</li> - <li class="closed">Autem veleum</li> -</ul> -</pre> - <p>結果は次のようになるでしょう:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="list-style-type: circle;">Lorem ipsum</li> - <li style="list-style-type: disc;">Dolor sit</li> - <li style="list-style-type: disc;">Amet consectetuer</li> - <li style="list-style-type: circle;">Magna aliquam</li> - <li style="list-style-type: disc;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="番号順リスト（ordered_lists）">番号順リスト（ordered lists）</h3> -<p><em>番号順リスト</em>では、リスト項目は各々違ったマーカーをつけられ、順番を表します。</p> -<p>マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:</p> -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code></li> - <li style=""><code>lower-roman</code></li> - <li style=""><code>upper-roman</code></li> - <li style=""><code>lower-latin</code></li> - <li style=""><code>upper-latin</code></li> -</ul> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>これは <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: inherit;">info クラスの </span><span style="line-height: inherit;">{{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベット</span><span style="line-height: inherit;">で識別されます。</span></p> - <pre class="brush:css">ol.info {list-style: upper-latin;} -</pre> - <p>リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul> - <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> - <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。</p> - <p>箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。</p> - <p>リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。</p> -</div> -<h3 id="カウンター">カウンター</h3> -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> - <p><strong>注: </strong> 一部のブラウザーはカウンターをサポートしていません。<a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site</a> の <a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: inherit;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: inherit;"> ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの </span><a href="/ja/CSS_Reference" style="line-height: inherit;" title="https://developer.mozilla.org/ja/CSS_Reference">CSS Reference</a><span style="line-height: inherit;"> の各ページにもブラウザ実装状況の表があります。</span></p> -</div> -<p>カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。</p> -<p>通し番号を定義するには、独自に名前をつけた <em>counter</em> が必要です。</p> -<p>カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。</p> -<p>番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。</p> -<p>カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、<code>content</code> プロパティを使います（前のページ <strong><a href="/ja/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">コンテンツ</a></strong> で行った要領です）。</p> -<p><code>content</code> プロパティの値として、<code>counter()</code> とカウンター名を記述します。オプションとして種類を記述します。種類は上の <strong>番号順リスト</strong> の欄にあるものと同じです。</p> -<p>通常、カウンターを表示する要素もまたカウンターを増やします。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のルールは <code>numbered</code> クラスを持つ <span style="line-height: inherit;">{{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:</span></p> - <pre class="brush:css">h3.numbered {counter-reset: mynum;} -</pre> - <p> </p> - <p>次のルールは<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">numbered クラスを持つ </code><span style="line-height: inherit;">{{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:</span></p> - <pre class="brush:css">p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold;} -</pre> - <p>結果は次のようになります:</p> - <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> - <tbody> - <tr> - <td><strong>Heading</strong><br> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - さらに詳しく</div> - <p>読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。</p> - <p>カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。</p> - <p>もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> をご覧ください。</p> -</div> -<h2 id="実習_スタイルづけされたリスト">実習: スタイルづけされたリスト</h2> -<p>新しいHTML文書、<code>doc2.html</code> を作成してください。次の内容をコピー＆ペーストします:</p> -<pre class="brush:html;"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document 2</title> - <link rel="stylesheet" href="style2.css"> - </head> - <body> - - <h3 id="oceans">The oceans</h3> - <ul> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - - <h3 class="numbered">Numbered paragraphs</h3> - <p class="numbered">Lorem ipsum</p> - <p class="numbered">Dolor sit</p> - <p class="numbered">Amet consectetuer</p> - <p class="numbered">Magna aliquam</p> - <p class="numbered">Autem veleum</p> - - </body> -</html> -</pre> -<p>新しいスタイルシート、<code>style2.css を作成してください。次の内容をコピー＆ペーストします</code>:</p> -<pre class="brush:css;">/* numbered paragraphs */ -h3.numbered {counter-reset: mynum;} - -p.numbered:before { - content: counter(mynum) ": "; - counter-increment: mynum; - font-weight: bold; -} -</pre> -<p>レイアウトやコメントが気に入らなければ変えてください。</p> -<p>ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:</p> -<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> - <p><strong>1: </strong>Lorem ipsum</p> - <p><strong>2: </strong>Dolor sit</p> - <p><strong>3: </strong>Amet consectetuer</p> - <p><strong>4: </strong>Magna aliquam</p> - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </td> - </tr> - </tbody> - </table> - <p> </p> - <p>次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> - <p><strong>. . .</strong></p> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> - </table> -</div> -<p><a href="/ja/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">チャレンジの解答を見る。</a></p> -<h2 id="さて次は？">さて次は？</h2> -<p>{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である <a href="/ja/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">ボックス（boxes）</a>を CSS で扱う方法について述べます。</p> diff --git a/files/ja/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html deleted file mode 100644 index 1f0905d1ec..0000000000 --- a/files/ja/web/guide/css/getting_started/tables/index.html +++ /dev/null @@ -1,478 +0,0 @@ ---- -title: Tables -slug: Web/Guide/CSS/Getting_started/Tables -tags: - - CSS - - 'CSS:Getting_Started' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -<div> - {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p> -<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2> -<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p> -<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p> -<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p> -<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3> -<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p> -<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p> -<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p> -<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p> - <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p> - <p>列は 2 つあります。</p> -</div> -<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p> -<h3 id="Borders" name="Borders">ボーダー</h3> -<p>セルにはマージンがありません。</p> -<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>テーブルが 3 つあります。</p> - <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br> - （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> - <table style="border: 2px outset #36b ; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Clubs</td> - <td style="border: 1px solid #c00; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> - <td style="border: 1px solid #c00; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Captions" name="Captions">キャプション</h3> -<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p> -<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p> -<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>このテーブルは底部にキャプションがあります</p> - <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> - <pre class="brush: css">#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; -} -</pre> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table> - <caption> - Suits</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Clubs</td> - <td style="border: 1px solid gray; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Diamonds</td> - <td style="border: 1px solid gray; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<h3 id="Empty_cells" name="Empty_cells">空のセル</h3> -<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p> -<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p> -<div class="tuto_example"> - <div class="tuto_type"> - 例</div> - <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p> - <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border-collapse: separate; background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: separate; background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> -</div> -<div class="tuto_details"> - <div class="tuto_type"> - 詳細</div> - <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p> - <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p> -</div> -<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2> -<ol> - <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: - <div style="height: 36em; overflow: auto;"> - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Sample document 3</title> - <link rel="stylesheet" href="style3.css"> - </head> - <body> - <table id="demo-table"> - <caption>Oceans</caption> - <thead> - <tr> - <th></th> - <th>Area</th> - <th>Mean depth</th> - </tr> - <tr> - <th></th> - <th>million km<sup>2</sup></th> - <th>m</th> - </tr> - </thead> - <tbody> - <tr> - <th>Arctic</th> - <td>13,000</td> - <td>1,200</td> - </tr> - <tr> - <th>Atlantic</th> - <td>87,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Pacific</th> - <td>180,000</td> - <td>4,000</td> - </tr> - <tr> - <th>Indian</th> - <td>75,000</td> - <td>3,900</td> - </tr> - <tr> - <th>Southern</th> - <td>20,000</td> - <td>4,500</td> - </tr> - </tbody> - <tfoot> - <tr> - <th>Total</th> - <td>361,000</td> - <td></td> - </tr> - <tr> - <th>Mean</th> - <td>72,000</td> - <td>3,800</td> - </tr> - </tfoot> - </table> - </body> -</html> -</pre> - </div> - </li> - <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: - <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; -} - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; -} - - -/* basic shared rules */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; -} - -#demo-table th { - font-weight: bold; - padding-left: .5em; -} - - -/* header */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; -} - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; -} - -/* fix size of superscript */ -#demo-table sup { - font-size: 75%; -} - -/* body */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; -} - -#demo-table tbody th:after { - content: ":"; -} - - -/* footer */ -#demo-table tfoot { - font-weight: bold; -} - -#demo-table tfoot th { - color: blue; -} - -#demo-table tfoot th:after { - content: ":"; -} - -#demo-table > tfoot td { - background-color: #cee; -} - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; -} -</pre> - </li> - <li>文書をブラウザで開きます。次の内容に似たものになるでしょう: - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </li> - <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: - <ul> - <li>キャプションはテーブルのボーダーより外側に置かれています。</li> - <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li> - <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li> - <li>コロンはスタイルシートで追加しています。</li> - </ul> - </li> -</ol> -<div class="tuto_example"> - <div class="tuto_type"> - チャレンジ</div> - <p>スタイルシートを、テーブルが次のようになるように変えてください:</p> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Area</th> - <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantic:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacific:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indian:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Mean:</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> - </tr> - </tbody> - </table> - </div> - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> - </div> - </td> - </tr> - </tbody> - </table> -</div> -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p> -<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p> diff --git a/files/ja/web/guide/css/media_queries/index.html b/files/ja/web/guide/css/media_queries/index.html deleted file mode 100644 index 961536b070..0000000000 --- a/files/ja/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: メディアクエリ -slug: Web/Guide/CSS/Media_queries -tags: - - CSS - - CSS Reference ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> - -<p>CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>メディアクエリは、<a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">メディアタイプ</a>と、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、<strong>さらに</strong>メディアクエリのすべての式が true のとき、true になります。</p> - -<h3 id="Logical operators" name="Logical operators">論理演算子</h3> - -<p>論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、<code>not</code> および <code>and</code>, <code>only</code> があります。</p> - -<p>また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。</p> - -<p><code>not</code> キーワードは、クエリの結果を否定します。例えば、"<span style="font-family: monospace;">all</span><code> and (not color)</code>" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。</p> - -<p><code>only</code> キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:</p> - -<pre><link rel="stylesheet" media="only screen and (color)" href="example.css" /> -</pre> - -<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)" name="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">擬似 BNF (この表記を好む方のために)</h3> - -<pre>media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | aspect-ratio | min-aspect-ratio | max-aspect-ratio - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid</pre> - -<p>メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。</p> - -<div class="note"><strong>注記:</strong> 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。</div> - -<h2 id="Media features" name="Media features">メディア特性</h2> - -<p>ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。</p> - -<div class="note"><strong>注記:</strong> メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。</div> - -<h3 id="color">color</h3> - -<p><strong>値:</strong> {{cssxref("<color>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。</p> - -<div class="note"><strong>注記:</strong> カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。</div> - -<h4 id="Examples" name="Examples">例</h4> - -<p>すべてのカラー表示可能なデバイスにスタイルシートを適用するには:</p> - -<pre>@media all and (color) { ... } -</pre> - -<p>カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:</p> - -<pre>@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスのカラー検索テーブルのエントリ数を指示します。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:</p> - -<pre>@media all and (color-index) { ... } -</pre> - -<p>最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:</p> - -<pre><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="aspect-ratio">aspect-ratio</h3> - -<p><strong>値:</strong> 整数 / 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。</p> - -<pre>@media screen and (min-aspect-ratio: 1/1) { ... }</pre> - -<p>これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。</p> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>値:</strong> 整数 / 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。</p> - -<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>値:</strong> {{cssxref("<length>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:</p> - -<pre><link rel="stylesheet" media="screen and (max-device-width: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>値:</strong> {{cssxref("<length>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> - -<h3 id="grid">grid</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> all<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。</p> - -<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。</div> - -<h4 id="Examples" name="Examples">例</h4> - -<p>ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:</p> - -<pre>@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>注記:</strong> "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。</div> - -<h3 id="height">height</h3> - -<p><strong>値:</strong> {{cssxref("<length>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p><code>height</code> メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。</p> - -<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>すべてのモノクロデバイスにスタイルシートを適用するには:</p> - -<pre>@media all and (monochrome) { ... } -</pre> - -<p>ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:</p> - -<pre>@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>値:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>縦置き方向のときにだけスタイルシートを適用するには:</p> - -<pre>@media all and (orientation: portrait) { ... }</pre> - -<h3 id="resolution">resolution</h3> - -<p><strong>値:</strong> {{cssxref("<resolution>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p>出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:</p> - -<pre>@media print and (min-resolution: 300dpi) { ... } -</pre> - -<h3 id="scan">scan</h3> - -<p><strong>値:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong>メディア:</strong> {{cssxref("Media/TV", "tv")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>テレビ出力デバイスの走査方式を記述します。</p> - -<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在 <code>tv</code> メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。</div> - -<h4 id="Examples" name="Examples">例</h4> - -<p>プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:</p> - -<pre>@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>値:</strong> {{cssxref("<length>")}}<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> - <strong>min/max 前置詞の使用:</strong> 可</p> - -<p><code>width</code> メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。</p> - -<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> - -<h4 id="Examples" name="Examples">例</h4> - -<p>幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:</p> - -<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:</p> - -<pre><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:</p> - -<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Mozilla-specific media features" name="Mozilla-specific media features">Mozilla 独自のメディア特性</h2> - -<p>{{ gecko_minversion_header("1.9.2") }}</p> - -<p>Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。</p> - -<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。</p> - -<h4 id="Examples" name="Examples">例</h4> - -<p>例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。</p> - -<h3 id="-moz-windows-classic">-moz-windows-classic</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。</p> - -<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3> - -<p><strong>値:</strong> 整数<br> - <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> - <strong>min/max 前置詞の使用:</strong> 不可</p> - -<p>ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> - -<p>これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。</p> - -<h2 id="See_also" name="See_also">参照</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> - <li><a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">Media types</a></li> -</ul> diff --git a/files/ja/web/guide/dom/index.html b/files/ja/web/guide/dom/index.html deleted file mode 100644 index dcee4acf84..0000000000 --- a/files/ja/web/guide/dom/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -<p>{{draft}}</p> - -<p><a href="/docs/DOM">Document Object Model</a> は<a href="/en-US/docs/HTML">HTML</a> と <a href="/en-US/docs/XML">XML</a> ドキュメントのための API です。 DOM はドキュメントの構造的表現を提供しており、開発者がコンテンツ自身や、ドキュメントの表示を変更することができるようになります。基本的に、スクリプトやプログラミング言語を通して、ページを繋げています。</p> - -<p>obuject（例、ドキュメントオブジェクトはドキュメント自身を表したり、テーブルオブジェクトはhtmlのテーブル要素を表す、など）内に組み込まれているウェブページを作成したり、操作するためのすべてのプロパティやメソッド、イベントはweb開発者が使用可能です。これらのオブジェクトにはjavascript等のスクリプト言語でアクセス可能です。</p> - -<p> </p> - -<p>DOMはほぼ大抵 <a href="/en-US/docs/JavaScript">JavaScript</a> と合わせて使用されます。しかし、DOMはどんなプログラミング言語にも非依存なものとして設計されました。 <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API </a>を使用してドキュメントの構造的な表現を作ることが可能です。このサイトでは私たちはJavaScriptにフォーカスを当てていますが、DOMを実装するのはどのような言語でも可能です。</p> - -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API</a>. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> - -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> - -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">DOMはなぜ重要なのか?</h2> - -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> - -<p>As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="https://developer.mozilla.org/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> - -<p> </p> - -<h2 id="DOMについてもっと知る">DOMについてもっと知る</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/ja/web/guide/html/canvas_tutorial/index.html b/files/ja/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index b84af866ef..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: canvas チュートリアル -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -<div>{{CanvasSidebar}}</div> - -<div><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> - -<div class="summary"> -<p><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> 要素は、スクリプト (一般的に <a href="/ja/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/Web/HTML" title="HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な (または<a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">あまり簡単ではない</a>) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> を実際に使った例です。</p> -</div> - -<p><span class="seoSummary">このチュートリアルでは、2D グラフィックスを描画するために <code><canvas></code> 要素を使用する方法を、基礎から説明します。提供する例は、<code><canvas></code> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。</span></p> - -<p><code><canvas></code> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。</p> - -<h2 id="Before_you_start" name="Before_you_start">始める前に</h2> - -<p><code><canvas></code> を使うことはそれほど難しくはありませんが、<a href="/ja/docs/Web/HTML">HTML</a> と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の基本的な理解が必要です。一部の古いブラウザーは <code><canvas></code> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の <code>height</code> および <code>width</code> プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p> - -<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="HTML/Canvas/Tutorial/Basic_usage">基本的な使い方</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="HTML/Canvas/Tutorial/Drawing_shapes">図形を描く</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="HTML/Canvas/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">文字の描画</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Using_images" title="HTML/Canvas/Tutorial/Using_images">画像を使う</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations" title="HTML/Canvas/Tutorial/Transformations">変形</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="HTML/Canvas/Tutorial/Compositing">合成とクリッピング</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="HTML/Canvas/Tutorial/Basic_animations">基本的なアニメーション</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高度なアニメーション</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">ピクセル操作</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">ヒット領域とアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML/Canvas/Tutorial/Optimizing_canvas">canvas を最適化する</a></li> - <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Finale">最後に</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas トピックのページ</a></li> - <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> - <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> -</ul> - -<h2 id="A_note_to_contributors" name="A_note_to_contributors">貢献者への注記</h2> - -<p>2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。</p> - -<div>{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}</div> diff --git a/files/ja/web/guide/html/event_attributes/index.html b/files/ja/web/guide/html/event_attributes/index.html deleted file mode 100644 index 0c2047bce5..0000000000 --- a/files/ja/web/guide/html/event_attributes/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Event 属性 -slug: Web/Guide/HTML/Event_attributes -tags: - - Beginner - - Guide - - HTML - - Intermediate - - JavaScript -translation_of: >- - Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these -translation_of_original: Web/Guide/HTML/Event_attributes ---- -<p><span class="seoSummary">すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。</span>例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を <code>onclick</code> 属性の中に書きます。</p> - -<p>イベントの応答として JavaScript のコードが実行された場合、<code>this</code> スコープは HTML 要素となり、このスコープ内にある <code>event</code> 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。</p> - -<div class="warning"> -<p><strong>警告:</strong> これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。</p> -</div> - -<p>これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。</p> - -<p>この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックする<a href="/docs/Security/CSP/Introducing_Content_Security_Policy">コンテンツ・セキュリティ・ポリシー</a>を使うことよって ブロックされる可能性があります。</p> - -<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Event 属性の使用例</h2> - -<p>この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。</p> - -<div class="note"> -<p><strong>注意:</strong> これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。</p> -</div> - -<pre class="brush: html"><!doctype html> -<html> - <head> - <title>Event 属性の例</title> - <script> - function doSomething() { - document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; - } - </script> - </head> - <body> - <div onclick="doSomething();">クリック!</div> - <div id="thanks"></div> - </body> -</html> -</pre> - -<p>この例を実行してみてください:</p> - -<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> - -<h2 id="Example_using_event_listeners" name="Example_using_event_listeners">イベントリスナーの使用例</h2> - -<p>代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。</p> - -<pre class="brush: html"><!doctype html> -<html> - <head> - <title>Event 属性の例</title> - <script> - function doSomething() { - document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; - } - - // ページのロードが完了した時に呼ばれる; - // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。 - - function setup() { - document.getElementById("click").addEventListener("click", doSomething, true); - } - // ウィンドウ内のドキュメントのロードが完了したことを知る為の、 - // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する - - window.addEventListener("load", setup, true); - </script> - </head> - <body> - <div id="click">クリック!</div> - <div id="thanks"></div> - </body> -</html></pre> - -<p>この動作を以下の例から確認できます:</p> - -<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> -<section id="Quick_Links"><ol><li><a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。">Event</a></li><li><a href="/ja/docs/Web/API/EventTarget" title="EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。">EventTarget</a></li><li><a href="/ja/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/ja/web/guide/html/html5/html5_element_list/index.html b/files/ja/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index b5da7466db..0000000000 --- a/files/ja/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: HTML5 の要素 -slug: Web/Guide/HTML/HTML5/HTML5_element_list -tags: - - HTML - - HTML5 -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -<p>This page list all <strong>standard HTML5 elements</strong>, described by their opening tag and grouped by function. Contrary to the <a href="/ja/docs/HTML/Element" title="HTML/Element">HTML Element index</a> which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only those should be used in new Web sites.</p> - -<p>The symbol <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a> indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification.</p> - -<h2 id="Root_element" name="Root_element">ルート要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("html")}}</td> - <td>HTML 文書、XHTML 文書のルート（基点）要素。他の全ての要素はこの要素の子孫要素として配置しなくてはなりません。</td> - </tr> - </tbody> -</table> - -<h2 id="Document_metadata" name="Document_metadata">文書メタデータ要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("head")}}</td> - <td>Represents a collection of metadata about the document, including links to or definitions of scripts and style sheets.</td> - </tr> - <tr> - <td>{{HTMLElement("title")}}</td> - <td>Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.</td> - </tr> - <tr> - <td>{{HTMLElement("base")}}</td> - <td>Defines the base URL for relative URL in the page.</td> - </tr> - <tr> - <td>{{HTMLElement("link")}}</td> - <td>Used to link JavaScript and external CSS with the current HTML document.</td> - </tr> - <tr> - <td>{{HTMLElement("meta")}}</td> - <td>Defines metadata that can't be defined using other HTML element.</td> - </tr> - <tr> - <td>{{HTMLElement("style")}}</td> - <td>Style tag is used to write inline CSS.</td> - </tr> - </tbody> -</table> - -<h2 id="Scripting" name="Scripting">スクリプティング要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("script")}}</td> - <td>Defines either an internal script or link to an external script. The script language is JavaScript</td> - </tr> - <tr> - <td>{{HTMLElement("noscript")}}</td> - <td>Defines an alternative content to display when the browser doesn't support scripting.</td> - </tr> - </tbody> -</table> - -<h2 id="Sections" name="Sections">セクショニング要素と見出し要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("body")}}</td> - <td> - <div>Represents the main content of an HTML document. There is only one <code><body></code> element in a document.</div> - </td> - </tr> - <tr> - <td>{{HTMLElement("section")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines a section in a document</td> - </tr> - <tr> - <td>{{HTMLElement("nav")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines a section that contains only navigation links</td> - </tr> - <tr> - <td>{{HTMLElement("article")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines self-contained content that could exist independantly of the rest of the content</td> - </tr> - <tr> - <td>{{HTMLElement("aside")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sence.</td> - </tr> - <tr> - <td><a href="/ja/docs/HTML/Element/Heading_Elements" title="Elementy blokowe"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td>Heading elements implement six levels of document headings, <code><h1></code> is the most important and <code><h6></code> is the least. A heading element briefly describes the topic of the section it introduces.</td> - </tr> - <tr> - <td>{{HTMLElement("hgroup")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Groups a set of <code><h1></code> to <code><h6></code> elements when a heading has multiple levels</td> - </tr> - <tr> - <td>{{HTMLElement("header")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.</td> - </tr> - <tr> - <td>{{HTMLElement("footer")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.</td> - </tr> - <tr> - <td>{{HTMLElement("address")}}</td> - <td>Defines a section containing contact information.</td> - </tr> - </tbody> -</table> - -<h2 id="Grouping_content" name="Grouping_content">グループ化要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("p")}}</td> - <td>Defines a portion that should be displayed as a paragrah.</td> - </tr> - <tr> - <td>{{HTMLElement("hr")}}</td> - <td>Represents a thematic break between paragraphs of a section or article or any longer content.</td> - </tr> - <tr> - <td>{{HTMLElement("pre")}}</td> - <td>Indicates that its content is preformatted and that this format must be preserved.</td> - </tr> - <tr> - <td>{{HTMLElement("blockquote")}}</td> - <td>Represents a citation.</td> - </tr> - <tr> - <td>{{HTMLElement("ol")}}</td> - <td>Defines an ordered list of items, that is a list which change its meaning if we change the order of its elements</td> - </tr> - <tr> - <td>{{HTMLElement("ul")}}</td> - <td>Defines an unordered list of items.</td> - </tr> - <tr> - <td>{{HTMLElement("li")}}</td> - <td>Defines a item of a enumeration list often preceded by a bullet in English.</td> - </tr> - <tr> - <td>{{HTMLElement("dl")}}</td> - <td>Defines a definition list, that is a list of terms and their associated definitions.</td> - </tr> - <tr> - <td>{{HTMLElement("dt")}}</td> - <td>Represents a term defined by the next <code><dd></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("dd")}}</td> - <td>Represents the definition of the terms immediately listed before it.</td> - </tr> - <tr> - <td>{{HTMLElement("figure")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a figure illustrated a part of the document.</td> - </tr> - <tr> - <td>{{HTMLElement("figcaption")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents the legend of a figure.</td> - </tr> - <tr> - <td>{{HTMLElement("div")}}</td> - <td>Represents a generic container with no special meaning.</td> - </tr> - </tbody> -</table> - -<h2 id="Text-level_semantics" name="Text-level_semantics">テキストレベル・セマンティクス要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("a")}}</td> - <td>ハイパーリンク。他の文書などへのリンク機能を提供します。</td> - </tr> - <tr> - <td>{{HTMLElement("em")}}</td> - <td>Represents<em>emphasized</em> text, like a stress accent.</td> - </tr> - <tr> - <td>{{HTMLElement("strong")}}</td> - <td>Represents especially<em>important</em> text.</td> - </tr> - <tr> - <td>{{HTMLElement("small")}}</td> - <td>Represents a<em>side comment</em>, that is text like a disclaimer, a copyright which is not essential to the comprehension of the document.<code> </code></td> - </tr> - <tr> - <td>{{HTMLElement("s")}}</td> - <td>Represents content that is no<em>longer accurate or relevant</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("cite")}}</td> - <td>Represents the<em>title of a work</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("q")}}</td> - <td>インラインの短い引用。段落をまたぐ様な引用には <code>blockquote</code> 要素を用います。</td> - </tr> - <tr> - <td>{{HTMLElement("dfn")}}</td> - <td>Represents a term whose<em>definition</em> is contained in its nearest ancestor content.</td> - </tr> - <tr> - <td>{{HTMLElement("abbr")}}</td> - <td>Represents an<em>abbreviation</em> or an<em>acronym</em>, eventually with its meaning.</td> - </tr> - <tr> - <td>{{HTMLElement("data")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Associates to its content a<em>machine-readable equivalent</em>. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).</td> - </tr> - <tr> - <td>{{HTMLElement("time")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>date</em> and<em>time</em> value, eventually with a machine-readable equivalent.</td> - </tr> - <tr> - <td>{{HTMLElement("code")}}</td> - <td>コンピューターのコード</td> - </tr> - <tr> - <td>{{HTMLElement("var")}}</td> - <td>Represents a<em>variable, that is an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.</em></td> - </tr> - <tr> - <td>{{HTMLElement("samp")}}</td> - <td>Represents the<em>output</em> of a program or a computer.</td> - </tr> - <tr> - <td>{{HTMLElement("kbd")}}</td> - <td>キーボードのキーコマンドや音声コマンドなどのユーザ入力を表します（※名称が「キーボード要素」であるにも関わらず、キーボード以外のユーザ入力も表せる点に注意が必要です）</td> - </tr> - <tr> - <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> - <td>Represents a<em>subscript</em>, respectively a<em>superscript.</em></td> - </tr> - <tr> - <td>{{HTMLElement("i")}}</td> - <td>Represents some text in an<em>alternate</em> voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.</td> - </tr> - <tr> - <td>{{HTMLElement("b")}}</td> - <td>Represents a text which to which attention is drawn for<em>utilitarian purposes</em>. It doesn't convey extra importance and doesn't implicate an alternate voice.</td> - </tr> - <tr> - <td>{{HTMLElement("u")}}</td> - <td>Represents<em>unarticulate</em> non-textual annoatation, such labeling the text as being misspelt or labeling a proper name in Chinese text.</td> - </tr> - <tr> - <td>{{HTMLElement("mark")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents text highlighted for<em>reference</em> purposes, that is for its relevance in another context.</td> - </tr> - <tr> - <td>{{HTMLElement("ruby")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents content to be marked with<em>ruby annotations</em>, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese<em>furigana</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("rt")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents the<em>text of a ruby annotation</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("rp")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents<em>parenthesis</em> around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.</td> - </tr> - <tr> - <td>{{HTMLElement("bdi")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents text that must be<em>isolated</em> from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.</td> - </tr> - <tr> - <td>{{HTMLElement("bdo")}}</td> - <td>Represents the<em>directionality</em> of its children, in order to explicitly override the Unicode bidirectional algorithm.</td> - </tr> - <tr> - <td>{{HTMLElement("span")}}</td> - <td>Represents text with no specific meaning. This has to be used when no<em>other</em> text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like <code>class</code>, <code>lang</code>, or <code>dir</code>.</td> - </tr> - <tr> - <td>{{HTMLElement("br")}}</td> - <td>改行（ HTML のソースコード内での改行コードは、特定の要素内のもの、或いは特定のスタイルが指定された要素内のものしか表示される文書に改行として反映されません ）</td> - </tr> - <tr> - <td>{{HTMLElement("wbr")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>line break opportunity</em>, that is a suggested wrapping point in order to improve readability of text split on several lines.</td> - </tr> - </tbody> -</table> - -<h2 id="Edits" name="Edits">変更要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("ins")}}</td> - <td>文書に追加された内容である事を示す</td> - </tr> - <tr> - <td>{{HTMLElement("del")}}</td> - <td>文書から削除された内容である事を示す</td> - </tr> - </tbody> -</table> - -<h2 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("img")}}</td> - <td>画像</td> - </tr> - <tr> - <td>{{HTMLElement("iframe")}}</td> - <td>Represents a<em>nested browsing context</em>, that is an embedded HTML document.</td> - </tr> - <tr> - <td>{{HTMLElement("embed")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>integration point</em> for an external, often non_HTML, application or interactive content.</td> - </tr> - <tr> - <td>{{HTMLElement("object")}}</td> - <td>Represents an<em>external resource</em>, which will be treated as an image, an HTML sub-document or an external resource to be processed by a plugin.</td> - </tr> - <tr> - <td>{{HTMLElement("param")}}</td> - <td>Defines<em>parameters</em> for use by plugins invoked by <code><object></code> elements.</td> - </tr> - <tr> - <td>{{HTMLElement("video")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>video</em>, and its associated audio files and captions, with the necessary interface to play it.</td> - </tr> - <tr> - <td>{{HTMLElement("audio")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>sound</em>, or an<em>audio stream</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("source")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Allows authors to specify alternative media resources for media elements like <code><video></code> or <code><audio></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("track")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Allows authors to specify timed<em>text track</em> for media elements like <code><video></code><em>or <code><audio></code>.</em></td> - </tr> - <tr> - <td>{{HTMLElement("canvas")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>bitmap area</em> that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.</td> - </tr> - <tr> - <td>{{HTMLElement("map")}}</td> - <td>In conjunction with <code><area></code>, defines an<em>image map</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("area")}}</td> - <td>In conjunction with <code><map></code>, defines an<em>image map</em>.</td> - </tr> - <tr> - <td>{{SVGElement("svg")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines an embedded<em>vectorial image</em>.</td> - </tr> - <tr> - <td>{{MathMLElement("math")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Defines a<em>mathematical formula</em>.</td> - </tr> - </tbody> -</table> - -<h2 id="Tabular_data" name="Tabular_data">テーブルデータ要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("table")}}</td> - <td>行と列を持つ図表。テーブル。</td> - </tr> - <tr> - <td>{{HTMLElement("caption")}}</td> - <td>テーブルのキャプション</td> - </tr> - <tr> - <td>{{HTMLElement("colgroup")}}</td> - <td>テーブルの、一つ以上の列グループを表す</td> - </tr> - <tr> - <td>{{HTMLElement("col")}}</td> - <td>テーブルの列を表す</td> - </tr> - <tr> - <td>{{HTMLElement("tbody")}}</td> - <td>Represents the block of rows that describes the<em>concrete data</em> of a table.</td> - </tr> - <tr> - <td>{{HTMLElement("thead")}}</td> - <td>Represents the block of rows that describes the<em>column labels</em> of a table.</td> - </tr> - <tr> - <td>{{HTMLElement("tfoot")}}</td> - <td>Represents the block of rows that describes the<em>column summaries</em> of a table.</td> - </tr> - <tr> - <td>{{HTMLElement("tr")}}</td> - <td>Represents a<em>row of cells</em> in a table.</td> - </tr> - <tr> - <td>{{HTMLElement("td")}}</td> - <td>Represents a<em>data cell</em> in a table.</td> - </tr> - <tr> - <td>{{HTMLElement("th")}}</td> - <td>Represents a<em>header cell</em> in a table.</td> - </tr> - </tbody> -</table> - -<h2 id="Forms" name="Forms">フォーム関連要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("form")}}</td> - <td>Represents a<em>formular</em>, consisting of controls, that can be submitted to a server for processing.</td> - </tr> - <tr> - <td>{{HTMLElement("fieldset")}}</td> - <td>フォームコントロール要素のグループ化に用いる</td> - </tr> - <tr> - <td>{{HTMLElement("legend")}}</td> - <td><code><fieldset></code> のキャプション</td> - </tr> - <tr> - <td>{{HTMLElement("label")}}</td> - <td>フォームコントロールのキャプション</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}</td> - <td>Represents a<em>typed data field</em> allowing the user to edit the data.</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>Represents a<em>button</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>Represents a control allowing the<em>selection among a set of options</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("datalist")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>set of predefined options</em> for other controls.</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>Represents a<em>set of options</em>, logically grouped.</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>Represents an<em>option</em> in a <code><select></code> element, or a suggestion of a <code><datalist></code> element.</td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>Represents a<em>multiline text edit control</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("keygen")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>key pair generator control</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("output")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents the<em>result of a calculation</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("progress")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents the<em>completion progress</em> of a task.</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a scalar<em>measurement</em> (or a fractional value), within a known range</td> - </tr> - </tbody> -</table> - -<h2 id="Interactive_elements" name="Interactive_elements">インタラクティブコンテンツ要素</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">要素</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("details")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>widget</em> from which the user can obtain additional information or controls.</td> - </tr> - <tr> - <td>{{HTMLElement("summary")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>summary</em>,<em>caption</em>, or<em>legend</em> for a given <code><details></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("command")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>command</em> that the user can invoke.</td> - </tr> - <tr> - <td>{{HTMLElement("menu")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> - <td>Represents a<em>list of commands</em>.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></li> - <li><a href="/ja/docs/HTML/Element" title="HTML/Element">HTML 要素リファレンス</a> (HTML5 に含まれない要素も含まれています)</li> - <li>Another way of listing the tags: the <a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">Periodic table of HTML5 elements</a> by Josh Duck.</li> -</ul> diff --git a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html b/files/ja/web/guide/html/obsolete_things_to_avoid/index.html deleted file mode 100644 index 1c8a7cc261..0000000000 --- a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Historical artifacts to avoid -slug: Web/Guide/HTML/Obsolete_things_to_avoid -tags: - - HTML - - NeedsContent - - NeedsTechnicalReview -translation_of: Learn/HTML/Introduction_to_HTML -translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid ---- -<h2 id="導入">導入</h2> - -<p>多くの人々はページのソースを見てコピー & ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。</p> - -<h2 id="Doctype">Doctype</h2> - -<p>(X)HTML には 10 種類ほどの <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">doctype</a> があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。</p> - -<pre><!DOCTYPE html></pre> - -<p>これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。</p> - -<h2 id="<meta>_要素と_charset_属性"><meta> 要素と <code>charset</code> 属性</h2> - -<p>以下の記述を含むソースコードを見ることがよくあります:</p> - -<pre><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -</pre> - -<p>ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:</p> - -<pre><meta charset="UTF-8" /> -</pre> - -<p>すばらしい <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">リバースエンジニアリング</a> や <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">プラグマティズム</a> によってこの知識を獲得しました。これを使用してください。</p> - -<ul> - <li>HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。</li> - <li>Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。</li> -</ul> - -<h2 id="Non-existing_<meta>_elements" name="Non-existing_<meta>_elements">存在しない <code><meta></code> 要素</h2> - -<p>多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:</p> - -<ul> - <li><code><meta name="MSSmartTagsPreventParsing" content="true"></code>。これは Internet Explorer 6 の<em>ベータ</em>版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。</li> - <li><code><meta name="robots" content="all"></code>。robots 値が存在して、また正当であれば、<code>all</code> のような存在しない値を使用してはいけません。既定値は <code>index, follow</code> であり、これは基本的に、存在しない値 <code>all</code> で想定される動作です。<code><meta></code> 全体を削除してください。</li> - <li><code><meta name="copyright" content="</code><code>…</code><code>"></code>。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに <code>rel="copyright"</code> 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。</li> - <li><code><meta name="rating" content="</code><code>…</code><code>">。</code>この meta は存在しません。<code><meta></code> 全体を削除してください。</li> -</ul> - -<h2 id="スクリプト内の_HTML_コメント">スクリプト内の HTML コメント</h2> - -<p>かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。</p> - -<p>そのような時期から、我々は以下のような記述を受け継いできました:</p> - -<pre><script><!-- -var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); -document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); -//--> -</script> -</pre> - -<p>または以下のような記述:</p> - -<pre><script type="text/javascript"> -<!--//--><![CDATA[//><!-- -Blabla.extend(MyFramework.settings, { "basePath": "/" }); -//--><!]]> -</script> -</pre> - -<p>このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。</p> - -<h2 id="もはや使用すべきではない要素">もはや使用すべきではない要素</h2> - -<h3 id="font">font</h3> - -<p><font> タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。</p> - -<h3 id="b_i_u">b, i, u</h3> - -<p>これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (<code>text-decoration:underline</code>) を適用した {{ HTMLElement("span") }} を用いるようにしてください。</p> - -<p>これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。<strong>このアドバイスに従うことは悪い考えです。</strong> {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で <code>font-style:italic</code> を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。</p> diff --git a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index 08f5330b89..0000000000 --- a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: 読み込みが速い HTML ページを作成するための Tips -slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages -tags: - - Advanced - - Guide - - HTML - - NeedsUpdate - - Performance - - Web - - Web Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -<p>これらの豆知識は、一般の知識や実験に基づくものです。</p> - -<p>ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。</p> - -<p>ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。</p> - -<h2 id="Tips" name="Tips">豆知識</h2> - -<h3 id="Reduce_page_weight" name="Reduce_page_weight">ページの量の削減</h3> - -<p>ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。</p> - -<p>最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。</p> - -<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「{{原語併記("圧縮", "compress")}}」するツールもあります。</p> - -<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">ファイル数の最少化</h3> - -<p>ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な <a href="/ja/docs/HTTP" title="ja/docs/HTTP">HTTP</a> コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。</p> - -<p>ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの <code><a href="/ja/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a></code> ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。</p> - -<p>CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。</p> - -<h3 id="コンテンツ配信ネットワーク_(CDN)_を使用する">コンテンツ配信ネットワーク (CDN) を使用する</h3> - -<p>この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。</p> - -<p>CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、<a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">待ち時間</a>が短縮されます。</p> - -<p>参考文献:</p> - -<ul> - <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> -</ul> - -<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">ドメイン検索の削減</h3> - -<p>ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。</p> - -<p>現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。</p> - -<h3 id="Cache_reused_content" name="Cache_reused_content">再利用されるコンテンツのキャッシュ</h3> - -<p>どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。</p> - -<p>特に、<code>Last-Modified</code> ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (<code>.html</code>、<code>.css</code> など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に <code>Last-Modified</code> ヘッダーを追加します。もちろん、動的なページ (<code>.php</code>、<code>.aspx</code> など) については取得できないので、ヘッダーを送信しません。</p> - -<p>そのため、特に動的に生成されるページについては、この件について調べてみると有益です。よって特に、動的に生成されるページのためにこの問題について調べることは有益です。少し厄介ですが、通常キャッシュできないページのリクエストを大幅に節約できるでしょう。</p> - -<p>詳細情報:</p> - -<ol> - <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> - <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> - <li><a class="external" href="https://ja.wikipedia.org/wiki/HTTP_ETag">Wikipedia の HTTP ETag の記事</a></li> - <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> -</ol> - -<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">ページのコンポーネントの最適な順序</h3> - -<p>最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。</p> - -<p>使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。</p> - -<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">インラインスクリプト数の削減</h3> - -<p>インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に <code>document.write()</code> を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 <code>document.write()</code> に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である <a href="/ja/docs/AJAX" title="ja/docs/AJAX">AJAX</a> を使用してください。</p> - -<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">最新の CSS と正しいマークアップの使用</h3> - -<p>最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。</p> - -<p>正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)</p> - -<p>さらに、正しいマークアップをすることによって、ウェブページを<em>プリプロセス</em>ができる他のツールが自由に利用できるようになります。例えば、<a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。</p> - -<h3 id="Chunk_your_content" name="Chunk_your_content">コンテンツをまとめる</h3> - -<p>テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに <a href="/ja/docs/Learn/CSS/CSS_layout/Floats">floats</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>を使用してください。</p> - -<p>テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。</p> - -<p>以下のように深い入れ子のテーブルを使用する代わりに、</p> - -<pre><table> - <table> - <table> - ... - </table> - </table> -</table></pre> - -<p>以下のように入れ子にしないテーブルや div を用いてください。</p> - -<pre><table>...</table> -<table>...</table> -<table>...</table> -</pre> - -<p><a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> と <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> の仕様書も参照してください。</p> - -<h3 id="Minify_and_compress_SVG_assets" name="Minify_and_compress_SVG_assets">SVG の資産を最小化し圧縮する</h3> - -<p>多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。</p> - -<h3 id="Minify_and_compress_your_images" name="Minify_and_compress_your_images">画像を縮小して圧縮する</h3> - -<p>画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 <a href="https://compressjpeg.com/">Compress Jpeg</a>、<a href="https://tinypng.com">Tiny PNG</a>、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。</p> - -<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">画像やテーブルのサイズ指定</h3> - -<p>ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には <code>height</code> と <code>width</code> を指定するべきです。</p> - -<p>テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:</p> - -<pre> table-layout: fixed; -</pre> - -<p>そして、 <code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code> 要素および <code><a href="/ja/docs/Web/HTML/Element/colgroup"><colgroup></a></code> 要素を用いて列の幅を指定しましょう。</p> - -<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">ユーザーエージェント要件の賢い選択</h3> - -<p>ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。</p> - -<p>理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。</p> - -<p>ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。</p> - -<h3 id="Example_page_structure" name="Example_page_structure">可能なら async や defer を使用する</h3> - -<p><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> と <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> 属性の両方と互換性のある JavaScript を使用し、特に、複数の script タグがある場合、可能ならば <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> をいつでも使用してください。<br> - <br> - これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。</p> - -<p>注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。</p> - -<h2 id="Example_page_structure" name="Example_page_structure">ページ構造の例</h2> - -<p>· <code>HTML</code></p> - -<dl> - <dd>· <code>HEAD</code></dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>LINK </code>...<br> - ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...<br> - ページの読み込み中に<strong>必要な</strong>機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。</dd> - <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> - </dl> - </dd> -</dl> - -<dl> - <dd>· <code>BODY</code></dd> - <dd>· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。</dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...<br> - DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。</dd> - <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> - <dd>ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。</dd> - </dl> - </dd> -</dl> - -<h2 id="Related_Links" name="Related_Links">関連リンク</h2> - -<ul> - <li>書籍: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a> (英語)</li> - <li>Yahoo! によるすばらしい完成された <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">ウェブサイト高速化のためのベストプラクティス</a> (英語)</li> - <li>パフォーマンス解析・最適化向けツール: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> - <li><a href="/ja/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> -</ul> diff --git a/files/ja/web/guide/using_formdata_objects/index.html b/files/ja/web/guide/using_formdata_objects/index.html deleted file mode 100644 index 605885878f..0000000000 --- a/files/ja/web/guide/using_formdata_objects/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: FormData オブジェクトの利用 -slug: Web/Guide/Using_FormData_Objects -tags: - - Advanced - - Example - - Forms - - Guide - - HTML - - Web -translation_of: Web/API/FormData/Using_FormData_Objects -translation_of_original: Web/Guide/Using_FormData_Objects ---- -<p class="summary"><code><a href="/ja/docs/Web/API/FormData">FormData</a></code> オブジェクトは、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが <code>multipart/form-data</code> に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。</p> - -<h2 id="Creating_a_FormData_object_from_scratch" name="Creating_a_FormData_object_from_scratch">スクラッチから FormData オブジェクトを作成する</h2> - -<p>以下のように <code>FormData</code> オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:</p> - -<pre class="brush: js">var formData = new FormData(); - -formData.append("username", "Groucho"); -formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます - -// HTML の file input でユーザが選択したファイル -formData.append("userfile", fileInputElement.files[0]); - -// ファイルのような JavaScript オブジェクト -var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルのボディ... -var blob = new Blob([content], { type: "text/xml"}); - -formData.append("webmasterfile", blob); - -var request = new XMLHttpRequest(); -request.open("POST", "http://foo.com/submitform.php"); -request.send(formData); -</pre> - -<div class="note"><strong>注記:</strong> フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は <a href="/ja/docs/DOM/XMLHttpRequest/FormData#append()" title="XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: <strong>値が Blob でもファイルでもない場合は、文字列に変換されます</strong>)。</div> - -<p>このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ <code>FormData</code> のインスタンスを作成しており、またフォームのデータを送信するために <code>XMLHttpRequest</code> の <a href="/ja/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> メソッドを使用しています。フィールド "webmasterfile" は {{domxref("Blob")}} です。<code>Blob</code> オブジェクトはファイルに似たオブジェクトで、イミュータブルな生デーです。Blob は必ずしも JavaScript ネイティブ形式のデータを表すとは限りません。{{domxref("File")}} インターフェイスは <code>Blob</code> を基にしており、blob の機能性を継承しつつユーザのシステムにあるファイル向けのサポートを拡張しています。<code>Blob</code> を作成するために、{{domxref("Blob.Blob","Blob()")}} コンストラクタを呼び出すことができます。</p> - -<h2 id="Retrieving_a_FormData_object_from_an_HTML_form" name="Retrieving_a_FormData_object_from_an_HTML_form">HTML フォームから FormData オブジェクトを取り出す</h2> - -<p>既存の {{HTMLElement("form")}} のデータを含む <code>FormData</code> オブジェクトを構築するために、<code>FormData</code> オブジェクトを作成する際にその form 要素を指定します:</p> - -<pre class="brush: js">var formData = new FormData(someFormElement); -</pre> - -<p>例:</p> - -<pre class="brush: js">var formElement = document.querySelector("form"); -var request = new XMLHttpRequest(); -request.open("POST", "submitform.php"); -request.send(new FormData(formElement)); -</pre> - -<p>以下のように、<code>FormData</code> オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:</p> - -<pre class="brush: js">var formElement = document.querySelector("form"); -var formData = new FormData(formElement); -var request = new XMLHttpRequest(); -request.open("POST", "submitform.php"); -formData.append("serialnumber", serialNumber++); -request.send(formData);</pre> - -<p>これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。</p> - -<h2 id="Sending_files_using_a_FormData_object" name="Sending_files_using_a_FormData_object">FormData オブジェクトを使用してファイルを送信する</h2> - -<p><code>FormData</code> を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:</p> - -<pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Your email address:</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Custom file label:</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>File to stash:</label> - <input type="file" name="file" required /> - <input type="submit" value="Stash the file!" /> -</form> -<div></div> -</pre> - -<p>そして、以下のようなコードを使用して送信できます:</p> - -<pre class="brush: js">var form = document.forms.namedItem("fileinfo"); -form.addEventListener('submit', function(ev) { - - var oOutput = document.querySelector("div"), - oData = new FormData(form); - - oData.append("CustomField", "This is some extra data"); - - var oReq = new XMLHttpRequest(); - oReq.open("POST", "stash.php", true); - oReq.onload = function(oEvent) { - if (oReq.status == 200) { - oOutput.innerHTML = "Uploaded!"; - } else { - oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; - } - }; - - oReq.send(oData); - ev.preventDefault(); -}, false); -</pre> - -<div class="note"> -<p><strong>注記</strong>: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。</p> -</div> - -<p>以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:</p> - -<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); -</pre> - -<p>{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、<code>Content-Disposition</code> ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。</p> - -<p>正しいオプションを設定することで、jQuery と共に <code>FormData</code> を使用することもできます:</p> - -<pre class="brush: js">var fd = new FormData(document.querySelector("form")); -fd.append("CustomField", "This is some extra data"); -$.ajax({ - url: "stash.php", - type: "POST", - data: fd, - processData: false, // jQuery がデータを処理しないよう指定 - contentType: false // jQuery が contentType を設定しないよう指定 -}); -</pre> - -<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects" name="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects"><code>FormData</code> オブジェクトを<em>使用せずに</em> AJAX でフォームやファイルを送信する</h2> - -<p>FormData オブジェクトを<em>使用せず</em>に、<a href="/ja/docs/AJAX" title="AJAX">AJAX</a> でシリアライズや送信する方法を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">こちらの節</a>をご覧ください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("Blob")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> -</ul> diff --git a/files/ja/web/guide/writing_forward-compatible_websites/index.html b/files/ja/web/guide/writing_forward-compatible_websites/index.html new file mode 100644 index 0000000000..aa0e54539d --- /dev/null +++ b/files/ja/web/guide/writing_forward-compatible_websites/index.html @@ -0,0 +1,81 @@ +--- +title: Writing forward-compatible websites +slug: Web_Development/Writing_forward-compatible_websites +tags: + - CSS + - Compatibility + - DOM + - HTML + - JavaScript + - Web Development +translation_of: Web/Guide/Writing_forward-compatible_websites +--- +<p>このページでは、新しいバージョンのブラウザが公開されても壊れることのない Web サイトを記述する方法を説明します。<br> + <br> + これはイントラネットや公衆向けでない Web サイトで特に重要です。私たちがあなたのコードを見ることができないので、それが壊れていることを確認できないのです。これらのすべてに従うことができない場合もありますが、可能な限り多くの事項に従うことで、Web サイトを将来にわたって有用な状態にすることの助けになります。</p> +<h2 id="JavaScript">JavaScript</h2> +<h3 id="onfoo_属性でグローバル変数へアクセスする際に_window._接頭辞を付加する"><code>onfoo</code> 属性でグローバル変数へアクセスする際に "<code>window</code>." 接頭辞を付加する</h3> +<p>HTML の要素でイベントハンドラのコンテンツ属性 (<code>onclick</code>、 <code>onmouseover</code> など) が使用されているとき、それら属性でのすべての名前探索は始めに要素自身、次にフォームコントロール要素の場合はそのフォーム、そして document、さらに (あなたがグローバル変数を定義した) window の順に行われます。例えば、以下のマークアップがある場合は:</p> +<pre><div onclick="alert(ownerDocument)">Click me</div> +</pre> +<p>文字列をクリックすると <code>div</code> の <code>ownerDocument</code> をアラートで表示します。これは、<code>var ownerDocument</code> がグローバルスコープで宣言されている場合でも動作します。</p> +<p>これが意味することは、イベントハンドラのコンテンツ属性でグローバル変数にアクセスするときやグローバルに宣言された任意の関数を呼び出すとき、あなたの関数や変数と同じ名前の新たな DOM プロパティが仕様書で要素やドキュメントに追加され、またそれをブラウザが実装した場合に、常に名前が衝突した時点で探索が終わってしまいます。これが起きると、突如関数が呼び出されなくなります。この現象は HTML5 の進展に伴い、さまざまなサイトで何度も発生しています。</p> +<p>これを防ぐには、以下のように "window." を用いてグローバル変数にアクセスするのが最適です:</p> +<pre><script> + function localName() { + alert('Function localName has been called'); + } +</script> +<div onclick="<strong>window.</strong>localName()">Clicking me should show an alert<div> +</pre> +<h3 id="自身で管理しないスクリプトを連結しない">自身で管理しないスクリプトを連結しない</h3> +<p>ファイルレベルで使用される ECMAScript の <code>"use strict;"</code> ディレクティブは、ファイル全体に適用されます。このため、非 Strict モードの動作に依存するスクリプトを Strict モードのスクリプトに付加すると、スクリプトが動作しなくなります。</p> +<h3 id="使用する_JavaScript_ライブラリの作者に、上記のガイドラインに従っているかを確認する">使用する JavaScript ライブラリの作者に、上記のガイドラインに従っているかを確認する</h3> +<p>好みのライブラリの開発者に、上記のガイドラインに従うことを提案しましょう。彼らが従わない場合、ライブラリが将来も問題を起こさないとは信頼できません。残念ながら、ライブラリはこれらのガイドラインに逆らっています。</p> +<h2 id="検出">検出</h2> +<h3 id="特定の機能の検出">特定の機能の検出</h3> +<p>ある機能を用いようとするとき、可能であればその機能を見つけるためにオブジェクト検出を行ってください。簡単な例として、<code>body.style</code> に <code>"filter"</code> があるかのテストが真になるブラウザは必ず Microsoft Internet Explorer であり、それゆえ例えばイベントハンドラで <code>window.event</code> オブジェクトが利用できるとは考えないでください。また、ある一定の DOM 機能をサポートしているブラウザは他の機能、特に非標準の DOM 機能もサポートしているとは考えないでください。あるいは逆に、他の機能をサポート<em>しない</em>とも考えないでください。例えば、script 要素で <code>onload</code> をサポートするブラウザは <code>onreadystatechange</code> をサポートしないと考えてはいけません。各ブラウザの動作が収束することにより、機能は追加や削除されます。また、不具合の修正も行います。これら 3 点は過去に発生しており、また今後も発生するでしょう。</p> +<p>従ってある機能の存在有無と別の機能の存在有無に関連はありませんので、ある機能やオブジェクトの検出結果から別のことを予測しないでください。</p> +<h3 id="UA_検出を行わない">UA 検出を行わない</h3> +<p>これはある機能 (ユーザエージェント (UA) 文字列内に特定の文字列が含まれていること) が別の機能の有無を暗に示すと考えられている、特に一般的な実例です。</p> +<h4 id="UA_検出が必要な場合は、過去のブラウザのバージョンにのみ行う">UA 検出が必要な場合は、過去のブラウザのバージョンにのみ行う</h4> +<p>UA 検出に頼る必要がある場合は、特定のブラウザの過去のバージョンに対して用いてください。始めに、未知のブラウザおよびあなたがテストで用いているブラウザの現行バージョンと将来のバージョン向けのデフォルトのコードパスがあります。そして、デフォルトのコードパスが特定のブラウザの過去のバージョンで動作せず、またそのコードパスで機能の欠落を検出することで問題点を発見できないときは、該当する過去のバージョンのブラウザを検出することでそのブラウザ向けのハックを追加してかまいません。</p> +<p>この提案において、"現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。例えばあなたのデフォルトのコードパスが Firefox Aurora で適切に動作するが、Firefox Beta や最新の release 版では不具合があるためにコードが動作しない場合は、テストを行った Aurora の Firefox バージョン番号を "現行" とみなし、一般向けに公開されていないものであっても Beta のバージョンを "過去" のバージョンと考えてください。</p> +<h3 id="異なるブラウザ向けに分離したコードパスはむやみに作成しない">異なるブラウザ向けに分離したコードパスはむやみに作成しない</h3> +<p>関係のあるコードパスの一つがすべてのブラウザで正しく動作するのに、わざわざオブジェクト検出や UA 検出に基づいて異なるコードを実行することは行わないでください。各ブラウザの動作がお互い収束するように変更され、そのために代替のコードパスを設定していたあなたのサイトが正常に動作しなくなってしまう可能性があります。</p> +<h2 id="テストの実施">テストの実施</h2> +<h3 id="すべての主要なエンジンについてテストを行う">すべての主要なエンジンについてテストを行う</h3> +<p>コードは少なくとも Firefox、Chrome または Safari (これらは同じ WebKit エンジンを基にしているため)、Opera、Internet Explorer でテストを行ってください。すべての現行ブラウザや未知のブラウザ向けに単一のコードパスを持つためこの提案に従えば、そのコードパスがすべての主要なエンジンで動作することをテストすることで、コードが将来にわたって動作する可能性がとても高くなります。</p> +<p>時々、各ブラウザがある機能を若干異なる形で実装します。主要なエンジンすべてで動作する単一のコードパスが得られた場合は、あなたが使用している機能の動作は各ブラウザ間で既に収束していることを意味します。一方、各ブラウザの動作が完全には収束していない場合は、どのエンジンの標準動作を支持するかが判明することに関係なくコードが動作します。</p> +<h2 id="ブラウザ独自の機能や接頭辞">ブラウザ独自の機能や接頭辞</h2> +<h3 id="現行あるいは将来のバージョンのブラウザを目標にするハックを行わない">現行あるいは将来のバージョンのブラウザを目標にするハックを行わない</h3> +<p>これは、現在ある不具合間の相関関係が将来の不具合間の相関関係を暗に示すと考えられている一般的な事例です。現行バージョンでは解決している不具合に関するハックを、過去のバージョンのブラウザに対して適用することは問題ありません。ブラウザが不具合 X を修正すると、不具合 X が存在するリリースすべてには不具合 Y もあることが確実にわかり、不具合 X が存在することを不具合 Y の回避策の適用基準として用いることができます。</p> +<p>この提案において、前出の UA 検出でのアドバイスのように "現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。</p> +<h3 id="最新の非標準機能に依存することを避ける">最新の非標準機能に依存することを避ける</h3> +<p>接頭辞ありの機能であっても、それを使用することは危険です。仕様書の進展に伴い、ブラウザの接頭辞ありの実装が仕様書に追随して変更されることがあります。またその機能が標準化されると、接頭辞ありのバージョンは削除されるでしょう。</p> +<p>接頭辞が付加された非標準の機能は、実験やフィードバックを行うためにブラウザの開発者が提供しているものであり、一般に展開することを意味していません。これらの機能を使うことを選択した場合は、機能の変更に伴って頻繁にサイトの更新が必要であることを覚悟してください。</p> +<h3 id="(標準化されていても)_広く実装されていない最新機能を用いる際は縮退処理のテストを行う">(標準化されていても) 広く実装されていない最新機能を用いる際は縮退処理のテストを行う</h3> +<p>あなたが用いている機能を実装していないブラウザ でどう動作するか (そのようなブラウザを Web サイトの業務で日常使用していない場合は特に)、必ずテストを行ってください。</p> +<h3 id="ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない">ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない</h3> +<p>ベンダー接頭辞が付加されている機能は、その動作が将来変更されるかもしれません。ブラウザがある機能を接頭辞なしで公開しても、利用可能であれば接頭辞なし版を常に使用するようにすることで、過去のリリース向けに接頭辞あり版を使用することができます。良い例として、<code>make-it-pretty</code> プロパティの <code>"sometimes"</code> 値について接頭辞あり版とは異なる動作を接頭辞なし版に実装して公開した、<code>-vnd</code> CSS 接頭辞を用いるブラウザベンダー向けの記述を示します:</p> +<pre class="brush: html"><style> + .pretty-element { + -vnd-make-it-pretty: sometimes; + make-it-pretty: sometimes; + } +</style> +</pre> +<p>上記の例で、規則中の宣言の順番は重要です。接頭辞のないものは、最後に置くことが必要です。</p> +<h3 id="少なくとも一つのブラウザがサポートするまで、接頭辞のない_CSS_プロパティや_API_は使用しない">少なくとも一つのブラウザがサポートするまで、接頭辞のない CSS プロパティや API は使用しない</h3> +<p>何らかの機能について接頭辞なし版がある程度広くサポートされるまでは、その動作が突然変更されることがあります。特に、実際に接頭辞なし版をサポートしているブラウザがない機能は使用しないでください。接頭辞あり版の文法と完成版の文法が同じであると考えてはいけません。</p> +<h2 id="良好なコード">良好なコード</h2> +<h3 id=">_の欠落を防ぐ"><code>></code> の欠落を防ぐ</h3> +<p>検証ツールを用いることがこれを確実にする方法の一つですが、あなたの Web サイト全体を検証しないとしてもすべての <code>></code> 文字が置かれていることを確認してください。<code>></code> が欠落していると、後ろのタグの名前が前のタグの属性であると判断されて予期せぬ状況に陥る場合があります。これはしばらくの間は動作するかもしれませんが、仕様書でその属性に意味が与えられると動作しなくなります。以下の例は HTML5 をサポートしないブラウザでは動作しますが、HTML5 をサポートするブラウザでは動作しません:</p> +<pre class="brush: html"><form action="http://www.example.com"> + <input type="submit" value="Submit the form" +</form> +</pre> +<p>これは <code>input</code> タグで <code>></code> が欠落しているためです。</p> +<h3 id="コード中で動作しない実験的な部分は残さない">コード中で動作しない実験的な部分は残さない</h3> +<p>何か行いたいことがあって CSS プロパティを使用してみたが効果がなかった場合、そのプロパティは削除してください。将来、予期しない動作が発生する可能性があります。</p> +<p>{{ languages( { "en": "en/Web_development/Writing_forward-compatible_websites"} ) }}</p> diff --git a/files/ja/web/html/element/command/index.html b/files/ja/web/html/element/command/index.html deleted file mode 100644 index ff02ae0e96..0000000000 --- a/files/ja/web/html/element/command/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: '<command>: HTML コマンド要素' -slug: Web/HTML/Element/command -tags: - - Command - - HTML - - HTML commands - - HTML5 - - 'HTML:Element' - - 'HTML:Element Reference' - - Obsolete -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<p><span class="seoSummary"><strong>HTML のコマンド要素</strong> (<strong><code><command></code></strong>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。</span>しかし、ページ上のどこでも使用できます。</p> - -<div class="note"> -<p><code><command></code> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, メタデータコンテンツ</td> - </tr> - <tr> - <th scope="row">許可されている内容</th> - <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> - </tr> - <tr> - <th scope="row">タグの省略</th> - <td>開始タグは必須です。終了タグは、空要素であるため使用できません。</td> - </tr> - <tr> - <th scope="row">許可されている親要素</th> - <td>{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。</td> - </tr> - <tr> - <th scope="row">DOM インターフェイス</th> - <td>{{domxref("HTMLCommandElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>コマンドが選択されているかを示します。 <code>type</code> 属性が <code>checkbox</code> または <code>radio</code> でなければ指定できません。</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>コマンドが使用不可であることを示します。</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>コマンドを表す画像を与えます。</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>ユーザに対して表示する、コマンドの名称です。</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>この属性はコマンド自身を切り替えた時に切り替えられる、 <code>type</code> が <code>radio</code> であるコマンドのグループ名を与えます。この属性は、 <code>type</code> 属性が <code>radio</code> でなければ指定できません。</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 - <ul> - <li> - <p><code>command</code> または空文字列はデフォルトの状態で、通常のコマンドを示します。</p> - </li> - <li> - <p><code>checkbox</code> は、コマンドがチェックボックスで切り替え可能であることを示します。</p> - </li> - <li> - <p><code>radio</code> は、コマンドがラジオボタンで切り替え可能であることを示します。</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: html notranslate"><command type="command" label="Save" - icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> - -<p>{{Compat("html.elements.command")}}</p> - -<p>{{ HTMLRef }}</p> diff --git a/files/ja/web/html/element/element/index.html b/files/ja/web/html/element/element/index.html deleted file mode 100644 index 5bc66fccb6..0000000000 --- a/files/ja/web/html/element/element/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: '<element>: カスタム要素 (廃止)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Web Components - - custom elements - - shadow dom -translation_of: Web/HTML/Element/element ---- -<div>{{HTMLRef}}{{obsolete_header}}</div> - -<p><span class="seoSummary">廃止された <strong>HTML の <code><element></code> 要素</strong>は、<a href="/en-US/docs/Web/Web_Components">ウェブコンポーネント</a>の仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。</span>これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。</p> - -<div class="warning"> -<p><strong>メモ:</strong> この要素は仕様書から削除されました。仕様書の編集者からの情報は<a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">こちら</a>を参照してください。</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリー</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">透過的コンテンツ</a></td> - </tr> - <tr> - <th scope="row">許可されているコンテンツ</th> - <td>???</td> - </tr> - <tr> - <th scope="row">タグの省略</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">許可されている親コンテンツ</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM インターフェイス</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>この要素には<a href="/en-US/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p><code><element></code> 要素は以前、<a href="http://w3c.github.io/webcomponents/spec/custom/">カスタム要素</a>の仕様書の草稿に含まれていましたが、削除されました。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("html.elements.element")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}</li> -</ul> diff --git a/files/ja/web/html/forms_in_html/index.html b/files/ja/web/html/forms_in_html/index.html deleted file mode 100644 index abf99e2af7..0000000000 --- a/files/ja/web/html/forms_in_html/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Forms in HTML5 -slug: Web/HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -<p>{{ gecko_minversion_header("2") }}</p> -<p>HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。</p> -<p>このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。</p> -<h3 id="The_input_element" name="The_input_element"><code><input></code> 要素</h3> -<p><code>{{ HTMLElement("input") }}</code> 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。</p> -<ul> <li><code>search</code>: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。</li> <li><code>tel</code>: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合は {{ htmlattrxref("pattern", "input") }} 属性や {{ htmlattrxref("maxlength", "input") }} 属性を利用できます。</li> <li><code>url</code>: <a class=" external" href="http://ja.wikipedia.org/wiki/URL">URL</a> を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。</li> <li> <p><code>email</code>: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法 <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> を満たさなければなりません（<code>atext</code> は RFC 5322 の section 3.2.3 で、<code>ldh-str</code> は RFC 1034 の section 3.5 で定義されています）。</p> <div class="note"><strong>Note:</strong> {{ htmlattrxref("multiple", "input") }} 属性がこの {{ HTMLElement("input") }} 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。</div> </li> -</ul> -<p>{{ HTMLElement("input") }} 要素には新しい属性も追加されています。</p> -<ul> <li>{{ htmlattrxref("list", "input") }}: {{ HTMLElement("datalist") }} 要素の ID を指定します。<code>datalist</code> 要素の内容は {{ HTMLElement("option") }} 要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。</li> <li>{{ htmlattrxref("pattern", "input") }}: フィールドがとりうる値の入力形式を正規表現で記述します。この属性は {{ htmlattrxref("type", "input") }} 属性が <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>email</code> のいずれかである場合に利用可能です。</li> <li>{{ htmlattrxref("formmethod", "input") }}: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は {{ HTMLElement("form") }} 要素の {{ htmlattrxref("method", "form") }} 属性を上書きします。{{ htmlattrxref("formmethod", "input") }} 属性は {{ htmlattrxref("type", "input") }} 属性が <code>image</code> もしくは <code>submit</code> の場合に利用可能です。</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。</li> -</ul><h3 id="The_form_element" name="The_form_element"><code><form></code> 要素</h3> -<p>{{ HTMLElement("form") }} 要素に新しい属性が追加されました。</p> -<ul> <li>{{ htmlattrxref("novalidate", "form") }}: フォーム送信時に実行される検証機能を無効化します。</li> -</ul> -<h3 id="The_datalist_element" name="The_datalist_element"><code><datalist></code> 要素</h3> -<p>{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。</p> -<p>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。</p> -<h3 id="The_output_element" name="The_output_element"><code><output></code> 要素</h3> -<p><code>{{ HTMLElement("output") }}</code> 要素は計算結果を表示します。</p> -<p>{{ htmlattrxref("for", "output") }} 属性を使って、<code>output</code> 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。</p> -<p>{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。</p> -<h3 id="The_placeholder_attribute" name="The_placeholder_attribute"><code>placeholder</code> 属性</h3> -<p><code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。</p> -<h3 id="The_autofocus_attribute" name="The_autofocus_attribute"><code>autofocus</code> 属性</h3> -<p>{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。<code>autofocus</code> 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、<code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が <code>hidden</code> を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。</p> -<h3 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM プロパティ</h3> -<p><code><a href="/ja/DOM/HTMLLabelElement" title="ja/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM インターフェースは HTML の <code>{{ HTMLElement("label") }}</code> 要素が持つ属性に加えて、新しいプロパティを備えています。<strong><code>control</code></strong> プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。</p> -<h3 id="Constraint_Validation" name="Constraint_Validation">フォーム検証</h3> -<p>HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。</p> -<p>{{ HTMLElement("input") }} 要素に <code>title</code> 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは <code>setCustomValidity()</code> メソッドで指定) が使用されます。</p> -<div class="note"><strong>Note:</strong> フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。</div> -<h4 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">フォーム検証の HTML 構文</h4> -<p>次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。</p> -<ul> <li>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("required", "input") }} 属性は、その要素が入力必須なことを示します。({{ HTMLElement("input") }} 要素の場合、{{ htmlattrxref("type", "input") }} 属性の値によって適用可能かどうかが異なります。)</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("pattern", "input") }} 属性は、入力された値がとりうるべき値の形式を正規表現で指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性は、要素に入力可能な値の最小値/最大値を指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("step", "input") }} 属性は、({{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。</li> <li>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("maxlength", "input") }} 属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。</li> <li>{{ htmlattrxref("type", "input") }} 属性の値 <code>url</code>, <code>email</code> は、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。</li> -</ul> -<p>{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に <code>submit</code> もしくは <code>image</code> を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。</p> -<h4 id="Constraint_Validation_API" name="Constraint_Validation_API">フォーム検証 API</h4> -<p>次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。</p> -<ul> <li><code><a href="/ja/DOM/HTMLFormElement" title="ja/DOM/HTMLFormElement">HTMLFormElement</a></code> オブジェクトの <code>checkValidity()</code> メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に <code>true</code> を、そうでない場合は <code>false</code> を返します。</li> <li><a href="/ja/HTML/Content_categories#form-associated" title="ja/HTML/Content_categories#form-associated">フォーム連携要素</a>に、次のプロパティとメソッドが用意されています。 <ul> <li><code>willValidate</code> プロパティは、要素が制約の設定対象ではない場合に <code>false</code> を返します。</li> <li><code>validity</code> プロパティは、要素の妥当性状態を表す <code><a href="/ja/DOM/ValidityState" title="ja/DOM/ValidityState">ValidityState</a></code> オブジェクトを返します。</li> <li><code>validationMessage</code> プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。</li> <li><code>checkValidity()</code> メソッドは、その要素が制約を満たせない場合に <code>false</code> を、そうでない場合は <code>true</code> を返します。</li> <li><code>setCustomValidity()</code> メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。</li> </ul> </li> -</ul> -<p>{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}</p> -<p>{{ HTML5ArticleTOC() }}</p> diff --git a/files/ja/web/html/global_attributes/dropzone/index.html b/files/ja/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 290b577040..0000000000 --- a/files/ja/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> - -<p><strong><code>dropzone</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、 <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。</p> - -<ul> - <li><code>copy</code>: ドロップにより、ドロップした要素のコピーを生成することを示す</li> - <li><code>move</code>: ドロップされた要素は新しい場所に移動されることを示す</li> - <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("html.global_attributes.dropzone")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> -</ul> diff --git a/files/ja/web/html/html_extensions/index.html b/files/ja/web/html/html_extensions/index.html deleted file mode 100644 index 6e0d715d5d..0000000000 --- a/files/ja/web/html/html_extensions/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: HTML Extensions -slug: Web/HTML/HTML_Extensions -tags: - - HTML ---- -<p>Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。</p> -<ul> <li>BLINK</li> <li><a class="internal" href="/ja/HTML/HTML_Extensions/KEYGEN_Tag" title="ja/HTML/HTML Extensions/KEYGEN Tag">KEYGEN</a></li> -</ul> -<div class="noinclude"> -<p>{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}</p> -</div> diff --git a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html index ccd6c1125f..ccd6c1125f 100644 --- a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html +++ b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html diff --git a/files/ja/web/security/public_key_pinning/index.html b/files/ja/web/http/public_key_pinning/index.html index 4741133a6b..4741133a6b 100644 --- a/files/ja/web/security/public_key_pinning/index.html +++ b/files/ja/web/http/public_key_pinning/index.html diff --git a/files/ja/web/javascript/getting_started/index.html b/files/ja/web/javascript/getting_started/index.html deleted file mode 100644 index b87febbe05..0000000000 --- a/files/ja/web/javascript/getting_started/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Getting Started (Javascript Tutorial) -slug: Web/JavaScript/Getting_Started -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Why JavaScript?</h2> -<p>JavaScript is a powerful, complicated, and often misunderstood computer language. It enables the rapid development of applications in which users can enter data and view results easily.</p> -<p>The primary advantage to JavaScript, which is also known as ECMAScript, centers around the Web browser, thus having the ability to produce the same results on all platforms supported by the browser. The examples on this page, just like Google Maps, run on Linux, Windows, and Mac OS. With the recent growth of numerous JavaScript libraries it is now easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. Unlike the hype around other technologies pushed by various proprietary interests, JavaScript is really the only cross-platform, client-side programming language that is both free and universally adopted.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">What you should already know</h2> -<p>JavaScript is a very easy language to start programming with. All you need is a text editor and a Web browser to get started.</p> -<p>There are many other technologies that can be integrated into and developed along with JavaScript that are beyond the scope of this document. Don't expect to make a whole application like Google Maps all on your first day!</p> -<h2 id="Getting_Started" name="Getting_Started">Getting started</h2> -<p>Getting started with JavaScript is very easy. You don't have to have complicated development programs installed. You don't have to know how to use a shell, program Make, or use a compiler. JavaScript is interpreted by your Web browser. All you have to do is save your program as a text file and then open it up in your Web browser. That's it!</p> -<p>JavaScript is a great programming language for introductory computer languages. It allows instant feedback to the new student and teaches them about tools they will likely find useful in their real life. This is in stark contrast to C, C++, and Java which are really only useful for dedicated software developers.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> -<p>There are variations between what functionality is available in the different browsers. Mozilla, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. We intend on <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> -<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> -<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> -<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> -<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> -<ul> - <li>Click - issued when a user clicks the mouse</li> - <li>DblClick - issued when a user double-clicks the mouse</li> - <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> - <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> - <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> - <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> - <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> - <li>ContextMenu - issued when the user clicks using the right mouse button</li> -</ul> -<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> -<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> -<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script type="text/javascript"> - function clickHandler () { - alert ("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Click Here</span></pre> -<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> -<pre class="brush:js"><script type="text/javascript"> - function clickHandler(event) { - var eType = event.type; - /* the following is for compatibility */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="clickHandler(event);">Click Here</span></pre> -<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> -<pre class="brush:js"><body></body> -<script type="text/javascript"> - function mouseeventHandler(event) { - /* The following is for compatibility */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onloadHandler () { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events - - notice the lowercase of the events but the free choice in the names of the handlers you replace them with. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* display the span on the page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> -<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> -<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> -<ul> - <li>KeyPress - issued when a key is depressed and released</li> - <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> - <li>KeyUp - issued when a key is released</li> - <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> -</ul> -<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> -<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');" /> -</pre> -<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler() { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="keypressHandler();" /> -</pre> -<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Will return "keypress" as the event type - /* here we again need to use a cross browser method - mozilla based browsers return which and others keyCode. - The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> -<pre class="brush:js"><script type="text/javascript"> - document.onkeypress = keypressHandler(event); - document.onkeydown = keypressHandle(event); - document.onkeyup =keypressHandle(event) - -</script></pre> -<p>Here is a complete example that shows key event handling:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which - var keychar = String.fromCharCode(key); - if (key==exampleKey) { metaChar = true; } - if (key!=exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { alert("Key pressed " + key); } - } - } - function metaKeyUp (event) { - var key = event.keyCode || event.which; - if (key==exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Try pressing any key! -</body> -</html></pre> -<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> -<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> -<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> -<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> -<p>The following example allows moving the image of Firefox around the page:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style type='text/css'> -img { position: absolute; } -</style> - -<script type='text/javascript'> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox - // Both properties return the HTML element the event took place on. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64" /> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> -<div> - Example of resizing an image (the actual image is not resized, only the image's rendering.) - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64" /> - <p>Click on the image and drag for resizing.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> -<p><span class="diff_add">{{todo("Need Content. Or, remove headline")}}</span></p> diff --git a/files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 800f222ea4..0000000000 --- a/files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">クラスベース言語とプロトタイプベース言語</h3> -<p>Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。</p> -<ul> <li>クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。</li> <li>一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ja/web/javascript/guide/core_language_features/index.html b/files/ja/web/javascript/guide/core_language_features/index.html deleted file mode 100644 index 2161ec589e..0000000000 --- a/files/ja/web/javascript/guide/core_language_features/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Core Language Features -slug: Web/JavaScript/Guide/Core_Language_Features ---- -<div> -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Values()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Variables()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Constants()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Literals()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Unicode()")}}</div> diff --git a/files/ja/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/web/javascript/guide/creating_a_regular_expression/index.html deleted file mode 100644 index 19935b8b55..0000000000 --- a/files/ja/web/javascript/guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 正規表現の作成 -slug: Web/JavaScript/Guide/Creating_a_Regular_Expression ---- -<h2 id="正規表現の作成">正規表現の作成</h2> -<p>正規表現は 2 つの方法で作ることができます。</p> -<ul> - <li>次のように、正規表現リテラルを使用する。</li> -</ul> -<pre>var re = /ab+c/; </pre> -<dl> - <dd> - <dl> - <dd> - 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。</dd> - </dl> - </dd> -</dl> -<ul> - <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> -</ul> -<pre>var re = new RegExp("ab+c"); </pre> -<dl> - <dd> - <dl> - <dd> - コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。</dd> - </dl> - </dd> -</dl> -<p>{{ PreviousNext("JavaScript/Guide/Operators/Special_Operators", "JavaScript/Guide/Writing_a_Regular_Expression_Pattern") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 8ee9381575..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: ゲッターとセッターの定義 -slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -<h3 id=".E3.82.B2.E3.83.83.E3.82.BF.E3.81.A8.E3.82.BB.E3.83.83.E3.82.BF.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.B2.E3.83.83.E3.82.BF.E3.81.A8.E3.82.BB.E3.83.83.E3.82.BF.E3.81.AE.E5.AE.9A.E7.BE.A9">ゲッターとセッターの定義</h3> - -<p>ゲッターはある属性の値を取得するメソッドです。セッターは属性に値を設定するメソッドです。全ての定義済みコアオブジェクトと、新しいプロパティの追加をサポートしているユーザ定義オブジェクトに対してゲッターとセッターを定義できます。ゲッターとセッターの定義にはオブジェクトリテラル構文を使用します。</p> - -<p>以下の例では、ユーザ定義オブジェクト o についてゲッターとセッターがどのように機能するかを説明します。<a href="/ja/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript シェル</a> とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。</p> - -<p><code>o</code> オブジェクトのプロパティは以下のとおりです。</p> - -<ul> - <li>o.a - 数値</li> - <li>o.b - o.a に 1 を加えて返すゲッター</li> - <li>o.c - o.a の値にその値の 1/2 の値をセットするセッター</li> -</ul> - -<pre>js> o = new Object; -[object Object] -js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; -[object Object] -js> o.a -7 -js> o.b -8 -js> o.c = 50 -js> o.a -25 -js> -</pre> - -<p>次の例では、 Date プロトタイプを拡張して定義済み <code>Date</code> クラスの全インスタンスに year プロパティを追加する様子を表しています。<code>Date</code> クラスの既存の <code>getFullYear</code> および <code>setFullYear</code> メソッドを使用して year プロパティのゲッターとセッターを実装します。</p> - -<p>これらの文は year プロパティに対するゲッターとセッターを定義しています。</p> - -<pre>js> var d = Date.prototype; -js> d.__defineGetter__("year", function() { return this.getFullYear(); }); -js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); -</pre> - -<p>これらの文は <code>Date</code> オブジェクトで定義したゲッターとセッターを使用しています。</p> - -<pre>js> var now = new Date; -js> print(now.year); -2000 -js> now.year=2001; -987617605170 -js> print(now); -Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<div class="note">JavaScript 1.5 の開発期間中に <code>getter =</code> や <code>setter =</code> といった式を使用して新しいゲッターやセッターを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください</div> - -<p> </p> - -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> - -<p>原則的にゲッターとセッターは次のどちらかに属します。</p> - -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子</a> を用いて定義されたもの</li> - <li>ゲッターやセッターを追加するメソッドを用いてオブジェクトに後から追加されたもの</li> -</ul> - -<p><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子</a> を用いてゲッターやセッターを定義する際には、ゲッターメソッドの先頭に <code>get</code> を、セッターメソッドの先頭に <code>set</code> をそれぞれ付けなくてはなりません。セッターメソッドはセットする新しい値を受けわたすための引数を 1 つだけ持ちます。ゲッターメソッドはパラメータを受け取るようにしてはいけません。</p> - -<pre class="eval">o = { - a:7, - <strong>get</strong> b() { return this.a+1; }, - <strong>set</strong> c(x) { this.a = x/2; } -}; -</pre> - -<p>ゲッターもセッターも、<code>__defineGetter__</code> および <code>__defineSetter__</code> という 2 つの特別なメソッドを用いて、オブジェクト作成後でも、そのオブジェクトに追加することができます。両メソッドの第 1 引数にはそのゲッターやセッターの名前を文字列で指定します。第 2 引数にはゲッターやセッターとして呼び出す関数を指定します。前の例を別の方法で実装したものを以下に示します。</p> - -<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; }); -o.__defineSetter__("c", function(x) { this.a = x/2; }); -</pre> - -<p>2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルや、目の前の課題次第によります。プロトタイプの定義時にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。ゲッターやセッターを後から追加する必要がある場合は、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表していますが、コードが可読性が下がったり、理解しづらいものとなることがあります。</p> - -<div class="note"> -<p>Firefox 3.0 より前のバージョンではゲッターとセッターが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し <code>(HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)</code>、例外を投げるようにして回避してください。</p> - -<p>Firefox 3.0 では、定義済みのプロパティでゲッターとセッターを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。</p> -</div> - -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References", "JavaScript/Guide/Creating_New_Objects/Deleting_Properties") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index 74731a99d1..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: メソッドの定義 -slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods ---- -<h3 id=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E5.AE.9A.E7.BE.A9">メソッドの定義</h3> -<p><em>メソッド</em>とはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。</p> -<pre>object.methodname = function_name -</pre> -<p>ここで、<code>object</code> は既存のオブジェクトを、<code>methodname</code> はメソッドに割り当てる名前を、<code>function_name</code> は関数の名前をそれぞれ表しています。</p> -<p>すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。</p> -<pre>object.methodname(params); -</pre> -<p>オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。</p> -<pre>function displayCar() { - var result = "A Beautiful " + this.year + " " + this.make - + " " + this.model; - pretty_print(result); -} -</pre> -<p><code>pretty_print</code> は水平方向の罫線と文字列を表示する関数です。<code>this</code> を使用してそのメソッドを抱えているオブジェクトを参照しています。</p> -<p>次の文</p> -<pre>this.displayCar = displayCar; -</pre> -<p>をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、<code>car</code> の完全な定義は次のようになります。</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> -<p>すると、次のようにして各オブジェクトについて <code>displayCar</code> メソッドを呼び出すことができます。</p> -<pre>car1.displayCar() -car2.displayCar() -</pre> -<p>こうすると次の図のような出力が得られます。</p> -<p><img alt="Image:obja.gif" class="internal" src="/@api/deki/files/1941/=Obja.gif"> <small><strong>図 7.1：メソッドの出力の表示</strong></small></p> -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type", "JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index b5136b203e..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -<h3 id=".E3.81.82.E3.82.8B.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.A8.AE.E9.A1.9E.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.81.82.E3.82.8B.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.A8.AE.E9.A1.9E.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E5.AE.9A.E7.BE.A9">あるオブジェクトの種類に対するプロパティの定義</h3> -<p><code>prototype</code> プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは <code>color</code> プロパティを <code>car</code> という種類の全オブジェクトに追加し、値をオブジェクト <code>car1</code> の <code>color</code> プロパティに代入します。</p> -<pre>car.prototype.color=null; -car1.color="black"; -</pre> -<p>詳しくは <a href="/ja/Core_JavaScript_1.5_Reference" title="ja/Core_JavaScript_1.5_Reference">コア JavaScript リファレンス</a> 内の Function オブジェクトの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" title="ja/Core_JavaScript_1.5_Reference/Objects/Function#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3"><code>prototype</code> プロパティ</a> を参照してください。</p> - -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties", "JavaScript/Guide/Creating_New_Objects/Defining_Methods") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html b/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index 749ee722f5..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: プロパティの削除 -slug: Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties ---- -<h2 id="プロパティの削除">プロパティの削除</h2> -<p><code>delete</code> 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。</p> -<pre>// 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。 -myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -// a プロパティを除去。myobj には b プロパティだけが残っている。 -delete myobj.a; -</pre> -<p><code>delete</code> を使用することでグローバル変数を削除することもできます。ただし、これは <code>var</code> キーワードを使用せずにその変数を宣言した場合のみです。</p> -<pre>g = 17; -delete g; -</pre> -<p>さらなる情報については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a> をご覧ください。</p> -<p>{{PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters", "JavaScript/Guide/Predefined_Core_Objects")}}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/index.html b/files/ja/web/javascript/guide/creating_new_objects/index.html deleted file mode 100644 index 0cbbc1753c..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 新しいオブジェクトの作成 -slug: Web/JavaScript/Guide/Creating_New_Objects ---- -<h3 id=".E6.96.B0.E3.81.97.E3.81.84.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90" name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90">新しいオブジェクトの作成</h3> -<p>JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。</p> -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子の使用</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function">コンストラクタ関数の使用</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties">オブジェクトのプロパティのインデックス付け</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type">あるオブジェクトの種類に対するプロパティの定義</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods">メソッドの定義</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References">this を用いたオブジェクト参照</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">ゲッタとセッタの定義</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties">プロパティの削除</a></li> -</ul> -<p>{{ PreviousNext("JavaScript/Guide/Objects_and_Properties", "JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html b/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 024de85654..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: オブジェクトのプロパティに対するインデックス付け -slug: Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties ---- -<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E3.82.A4.E3.83.B3.E3.83.87.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.91" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E3.82.A4.E3.83.B3.E3.83.87.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.91">オブジェクトのプロパティのインデックス付け</h3> -<p>JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。</p> -<p>先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：<code>myCar.color = "red"</code>）に、これは適用されます。そのため、<code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code> のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、<code>myCar{{ mediawiki.external(5) }}</code> のようにそのプロパティを後から参照できるようになります。</p> -<p>このルールの例外は、<code>forms</code> 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <code><FORM></code> タグが "myForm" という <code>NAME</code> 属性を持っている場合、<code>document.forms{{ mediawiki.external(1) }}</code> や <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code> や <code>document.myForm</code> とすることでそのフォームを参照できます。</p> -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function", "JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index f3abc30e89..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: コンストラクタ関数の使用 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -<h3 id=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E9.96.A2.E6.95.B0.E3.81.AE.E4.BD.BF.E7.94.A8" name=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E9.96.A2.E6.95.B0.E3.81.AE.E4.BD.BF.E7.94.A8">コンストラクタ関数の使用</h3> -<p>もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。</p> -<ol> - <li>コンストラクタ関数を書くことでオブジェクトの種類を定義する。</li> - <li>new を用いてそのオブジェクトのインスタンスを作成する。</li> -</ol> -<p>オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに <code>car</code> という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。</p> -<pre>function car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> -<p>関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために <code>this</code> を使用しています。</p> -<p>すると、次のようにして <code>mycar</code> というオブジェクトを作成することができるようになります。</p> -<pre>mycar = new car("Eagle", "Talon TSi", 1993); -</pre> -<p>この文は <code>mycar</code> を作成し、そのプロパティ用に指定した値を代入します。その結果、<code>mycar.make</code> の値は "Eagle" という文字列、<code>mycar.year</code> は 1993 という整数というようになります。</p> -<p><code>new</code> を呼び出すことで <code>car</code> オブジェクトをいくらでも作ることができます。</p> -<pre>kenscar = new car("Nissan", "300ZX", 1992); -vpgscar = new car("Mazda", "Miata", 1990); -</pre> -<p>それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように <code>person</code> というオブジェクトを定義するとします。</p> -<pre>function person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> -<p>そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。</p> -<pre>rand = new person("Rand McKinnon", 33, "M"); -ken = new person("Ken Jones", 39, "M"); -</pre> -<p>次のようにして、car の定義を書き換えて、<code>person</code> オブジェクトをとる owner プロパティを持たせることができます。</p> -<pre>function car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> -<p>新しいオブジェクトのインスタンスを作成するために、次のようにします。</p> -<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); -car2 = new car("Nissan", "300ZX", 1992, ken); -</pre> -<p>新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト <code>rand</code> および <code>ken</code> を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。</p> -<pre>car2.owner.name -</pre> -<p>以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文</p> -<pre>car1.color = "black" -</pre> -<p>はプロパティ <code>color</code> を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。</p> -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers", "JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html deleted file mode 100644 index 0a817b5407..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: オブジェクト初期化子の使用 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers ---- -<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.88.9D.E6.9C.9F.E5.8C.96.E5.AD.90.E3.81.AE.E4.BD.BF.E7.94.A8" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.88.9D.E6.9C.9F.E5.8C.96.E5.AD.90.E3.81.AE.E4.BD.BF.E7.94.A8">オブジェクト初期化子の使用</h3> -<p>コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。</p> -<p>オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。</p> -<pre class="eval">var obj = { property_1: value_1, // property_# は識別子でもよい - 2: value_2, // あるいは数値でもよい - ..., - "property_n": value_n }; // あるいは文字列でもよい -</pre> -<p>ここで、<code>obj</code> は新しいオブジェクトの名前を、各 <code>property_<em>i</em></code> は識別子（名前、数値、文字列リテラルのいずれか）を、各 <code>value_<em>i</em></code> はその値を <code>property_<em>i</em></code> に代入する式をそれぞれ表しています。<code>obj</code> および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。）</p> -<p>トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。</p> -<p>次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 <code>x</code> に代入します。</p> -<pre class="eval">if (cond) x = {hi:"there"}; -</pre> -<p>次の例は 3 つのプロパティを持つ <code>myHonda</code> を作成します。<code>engine</code> プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。</p> -<pre class="eval">myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}; -</pre> -<p>オブジェクト初期化子を使用して配列を作成することもできます。<a href="/ja/Core_JavaScript_1.5_Guide/Literals#.E9.85.8D.E5.88.97.E3.83.AA.E3.83.86.E3.83.A9.E3.83.AB" title="ja/Core_JavaScript_1.5_Guide/Literals#.E9.85.8D.E5.88.97.E3.83.AA.E3.83.86.E3.83.A9.E3.83.AB">配列リテラル</a> を参照してください。</p> -<p>JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。<a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function">コンストラクタ関数の使用</a> をご覧ください。</p> -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects", "JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function") }}</p> diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 5fbd3b8aff..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: this を用いたオブジェクト参照 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References ---- -<h3 id="this_.E3.82.92.E7.94.A8.E3.81.84.E3.81.9F.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.8F.82.E7.85.A7" name="this_.E3.82.92.E7.94.A8.E3.81.84.E3.81.9F.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.8F.82.E7.85.A7">this を用いたオブジェクト参照</h3> -<p>JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する <code>validate</code> という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!"); -} -</pre> -<p>各フォーム要素の <code>onchange</code> イベントハンドラにおいて <code>validate</code> を呼び出します。this を使うことで <code>form</code> 要素を渡すことができます。次の例をご覧ください。</p> -<pre><input type="text" name="age" size="3" - onChange="validate(this, 18, 99)"> -</pre> -<p>一般に <code>this</code> はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。</p> -<p><code>form</code> プロパティと組み合わせることで、<code>this</code> はカレントオブジェクトの親のフォームを参照できます。次の例では、<code>myForm</code> というフォームに <code>Text</code> オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、<code>Text</code> オブジェクトの値にフォーム名がセットされます。ボタンの <code>onclick</code> イベントハンドラは <code>this.form</code> を利用して親のフォームである <code>myForm</code> を参照します。</p> -<pre><form name="myForm"> -<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> -<p><input name="button1" type="button" value="Show Form Name" - onclick="this.form.text1.value=this.form.name"> -</p> -</form> -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Methods", "JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters") }}</p> diff --git a/files/ja/web/javascript/guide/expressions/index.html b/files/ja/web/javascript/guide/expressions/index.html deleted file mode 100644 index 4feb2b1aa8..0000000000 --- a/files/ja/web/javascript/guide/expressions/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Expressions -slug: Web/JavaScript/Guide/Expressions ---- -<div>{{ 英語版章題("Expressions") }}</div> -<h2 id="式">式</h2> -<p><em>式</em>とは、リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです。この値には数値、文字列、論理値が使用できます。</p> -<p>概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、<code>x = 7</code> という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では<em>代入演算子</em>を用います。一方、<code>3 + 4</code> という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に<em>演算子</em>と呼ばれます。</p> -<p>JavaScript には以下の種類の式があります。</p> -<ul> - <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> - <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> - <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> - <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> -</ul> -<p>{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/break_statement/index.html b/files/ja/web/javascript/guide/loop_statements/break_statement/index.html deleted file mode 100644 index 35cc94abdf..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/break_statement/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: break 文 -slug: Web/JavaScript/Guide/Loop_Statements/break_Statement ---- -<h3 id="break_.E6.96.87" name="break_.E6.96.87">break 文</h3> -<p><code>break</code> 文は <code>loop</code> 文や <code>switch</code> 文、<code>label</code> 文から抜け出すために使用します。</p> -<ul> - <li><code>break</code> にラベルを使用しないと、最も内側にある <code>while</code> や <code>do-while</code>、<code>for</code>、<code>switch</code> から抜け、続く文にコントロールを移します。</li> - <li><code>break</code> にラベルを使用すると、指定されたラベルの付いた文から抜けます。</li> -</ul> -<p>break 文は次のように使用します。</p> -<ol> - <li><code>break;</code></li> - <li><code>break label;</code></li> -</ol> -<p>１番目の形式の構文は最も内側のループもしくは <code>switch</code> から抜けます。２番目の形式の構文は指定した label 文から抜けます。</p> -<p><strong>例</strong><br> - 次の例は、その値が <code>theValue</code> である要素のインデックスが見つかるまで、配列の要素について繰り返します。</p> -<pre>for (i = 0; i < a.length; i++) { - if (a[i] == theValue) - break; -} -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/label_Statement", "JavaScript/Guide/Loop_Statements/continue_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html b/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html deleted file mode 100644 index f7a5697eeb..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: continue 文 -slug: Web/JavaScript/Guide/Loop_Statements/continue_Statement ---- -<h3 id="continue_.E6.96.87" name="continue_.E6.96.87">continue 文</h3> -<p><code>continue</code> 文は <code>while</code> 文、<code>do-while</code> 文、<code>for</code> 文、<code>label</code> 文をリスタートさせるために用います。</p> -<ul> - <li>ラベルを用いずに <code>continue</code> を使用した場合、現在繰り返している最も内側にある <code>while</code> 文 <code>do-while</code> 文、<code>for</code> 文を終了し、次の反復の実行に移ります。<code>break</code> 文とは異なり、<code>continue</code> はループ全体の実行を終了しません。<code>while</code> ループでは条件比較部分に戻ります。<code>for</code> ループではインクリメントの式に移ります。</li> - <li>ラベルを用いて <code>continue</code> を使用した場合、<code>label</code> で指定されたループ文に移ります。</li> -</ul> -<p><code>continue</code> 文は次のように使用します。</p> -<ol> - <li><code>continue</code></li> - <li><code>continue label</code></li> -</ol> -<p><strong>例 1</strong><br> - 次の例では、<code>i</code> の値が 3 のときに実行される <code>continue</code> 文を用いた <code>while</code> ループを示します。こうすることで <code>n</code> は順に 1、3、7、12 という値をとります。</p> -<pre class="eval">i = 0; -n = 0; -while (i < 5) { - i++; - if (i == 3) - continue; - n += i; -} -</pre> -<p><strong>例 2</strong><br> - <code>checkiandj</code> というラベルの付いた文の中に <code>checkj</code> というラベルの付いた文があります。<code>continue</code> に出くわすと、プログラムは <code>checkj</code> の現在の反復を終了し、次の反復を始めます。<code>continue</code> に出くわすたびに、条件が false になるまで <code>checkj</code> を繰り返します。false が返されると <code>checkiandj</code> 文の残りを完了し、条件が false を返すまで <code>checkiandj</code> を繰り返します。false が返されると <code>checkiandj</code> に続く文が実行されます。</p> -<p><code>continue</code> が <code>checkiandj</code> というラベルを持っているとプログラムは <code>checkiandj</code> 文の最初から続けます。</p> -<pre>checkiandj : - while (i < 4) { - document.write(i + "<br/>"); - i += 1; - checkj : - while (j > 4) { - document.write(j + "<br/>"); - j -= 1; - if ((j % 2) == 0) - continue checkj; - document.write(j + " is odd.<br/>"); - } - document.write("i = " + i + "<br/>"); - document.write("j = " + j + "<br/>"); - } -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/break_Statement", "JavaScript/Guide/Object_Manipulation_Statements") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html b/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html deleted file mode 100644 index 6e1df1e586..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: do...while 文 -slug: Web/JavaScript/Guide/Loop_Statements/do...while_Statement ---- -<h3 id="do...while_.E6.96.87" name="do...while_.E6.96.87">do...while 文</h3> -<p><code>do...while</code> 文は指定した条件が false に評価されるまで繰り返します。<code>do...while</code> 文は次のように使用します。</p> -<pre class="eval">do - statement -while (condition); -</pre> -<p><code>statement</code> は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 (<code>{ ... }</code>) を使用して文をグループ化してください。<code>condition</code> が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが <code>do...while</code> の後に続く文に渡されます。</p> -<p><strong>例</strong><br> - 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。</p> -<pre class="eval">do { - i += 1; - document.write(i); -} while (i < 5); -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/for_Statement", "JavaScript/Guide/Loop_Statements/while_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/for_statement/index.html b/files/ja/web/javascript/guide/loop_statements/for_statement/index.html deleted file mode 100644 index b2dccec25b..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/for_statement/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: for 文 -slug: Web/JavaScript/Guide/Loop_Statements/for_Statement ---- -<h3 id="for_.E6.96.87" name="for_.E6.96.87">for 文</h3> -<p><code>for</code> ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。<code>for</code> 文は次のように使用します。</p> -<pre class="eval">for ([initialExpression]; [condition]; [incrementExpression]) - statement -</pre> -<p><code>for</code> ループを実行すると以下のことが起こります。</p> -<ol> - <li>初期化式 <code>initialExpression</code> があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。</li> - <li><code>condition</code> 式が評価されます。<code>condition</code> の値が true であればループ文が実行されます。<code>condition</code> が false の場合は <code>for</code> ループは終了します。<code>condition</code> 式が完全に省略されている場合、条件は true であると仮定されます。</li> - <li><code>statement</code> が実行されます。複数の式を実行するにはブロック文 (<code>{ ... }</code>) を使用して文をグループ化してください。</li> - <li>更新式 <code>incrementExpression</code> があれば実行されます。そしてコントロールがステップ 2 に戻ります。</li> -</ol> -<p><strong>例</strong><br> - 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える <code>for</code> 文が含まれています。<code>for</code> 文では変数 <code>i</code> が宣言され、それが 0 に初期化されています。<code>i</code> が <code>Select</code> オブジェクトのオプションの個数より小さいかをチェックし、続く <code>if</code> 文を実行し、ループが 1 回りしたら <code>i</code> を 1 だけ増加させます。</p> -<pre><script type="text/javascript">//<![CDATA[ - -function howMany(selectObject) { - var numberSelected = 0; - for (var i = 0; i < selectObject.options.length; i++) { - if (selectObject.options[i].selected) - numberSelected++; - } - return numberSelected; -} - -//]]></script> -<form name="selectForm"> - <p> - <strong>Choose some music types, then click the button below:</strong> - <br/> - <select name="musicTypes" multiple="multiple"> - <option selected="selected">R&B</option> - <option>Jazz</option> - <option>Blues</option> - <option>New Age</option> - <option>Classical</option> - <option>Opera</option> - </select> - </p> - <p> - <input type="button" value="How many are selected?" - onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/> - </p> -</form> -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements", "JavaScript/Guide/Loop_Statements/do...while_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/index.html b/files/ja/web/javascript/guide/loop_statements/index.html deleted file mode 100644 index 54ef32d2c9..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: ループ文 -slug: Web/JavaScript/Guide/Loop_Statements ---- -<h2 id=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87" name=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87">ループ文</h2> -<p>ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、<code>break</code> および <code>continue</code> 文をループ文の中で使うことができます。</p> -<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements" title="ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> -<p>ループ文は以下のとおりです。</p> -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> -</ul> -<p>{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/label_statement/index.html b/files/ja/web/javascript/guide/loop_statements/label_statement/index.html deleted file mode 100644 index d0b878455b..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/label_statement/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: label 文 -slug: Web/JavaScript/Guide/Loop_Statements/label_Statement ---- -<h3 id="label_.E6.96.87" name="label_.E6.96.87">label 文</h3> -<p><code>label</code> を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、<code>break</code> 文や <code>continue</code> 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。</p> -<p><code>label</code> 文は次のように使用します。</p> -<pre>label : - statement -</pre> -<p><code>label</code> の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける <code>statement</code> はどんな文でも結構です。</p> -<p><strong>例</strong><br> - この例では <code>markLoop</code> というラベルを用いて while ループに名前を付けています。</p> -<pre>markLoop: -while (theMark == true) - doSomething(); -} -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/while_Statement", "JavaScript/Guide/Loop_Statements/break_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/loop_statements/while_statement/index.html b/files/ja/web/javascript/guide/loop_statements/while_statement/index.html deleted file mode 100644 index 77fd191f75..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/while_statement/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: while 文 -slug: Web/JavaScript/Guide/Loop_Statements/while_Statement ---- -<h3 id="while_.E6.96.87" name="while_.E6.96.87">while 文</h3> -<p><code>while</code> 文は、指定した条件が true に評価される限り文を実行します。<code>while</code> 文は次のように使用します。</p> -<pre class="eval">while (condition) - statement -</pre> -<p>条件が false になるとループ内の <code>statement</code> の実行が停止し、ループの後に続く文にコントロールが渡されます。</p> -<p>ループの <code>statement</code> を実行する前に条件がテストされます。条件が true を返すと <code>statement</code> が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、<code>while</code> の後に続く文にコントロールが渡されます。</p> -<p>複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。</p> -<p><strong>例 1</strong><br> - 次の <code>while</code> ループでは <code>n</code> が 3 より小さい限り反復されます。</p> -<pre class="eval">n = 0; -x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> -<p>それぞれの反復で、ループは <code>n</code> をインクリメントし、その値を <code>x</code> に加えています。その結果、<code>x</code> と <code>n</code> は次の値をとります。</p> -<ul> - <li>第 1 段階終了後：<code>n</code> = 1、<code>x</code> = 1</li> - <li>第 2 段階終了後：<code>n</code> = 2、<code>x</code> = 3</li> - <li>第 3 段階終了後：<code>n</code> = 3、<code>x</code> = 6</li> -</ul> -<p>第 3 段階が完了すると条件 <code>n</code> < 3 が true ではなくなっているため、ループは終了します。</p> -<p><strong>例 2</strong><br> - 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の <code>while</code> ループ内の文は永久に実行されます。条件が決して false にならないためです。</p> -<pre class="eval">while (true) { - alert("Hello, world"); -} -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/do...while_Statement", "JavaScript/Guide/Loop_Statements/label_Statement") }}</p> diff --git a/files/ja/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/web/javascript/guide/object_manipulation_statements/index.html deleted file mode 100644 index ddf781e031..0000000000 --- a/files/ja/web/javascript/guide/object_manipulation_statements/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Object Manipulation Statements -slug: Web/JavaScript/Guide/Object_Manipulation_Statements ---- -<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87">オブジェクト操作文</h3> -<p>JavaScript はオブジェクトの操作に <code>for...in</code>、<code>for each...in</code> および <code>with</code> 文を使用します。</p> -<h4 id="for...in_.E6.96.87" name="for...in_.E6.96.87">for...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> -<pre>for (variable in object) { - statements -} -</pre> -<p><strong>例</strong><br> - 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。</p> -<pre>function dump_props(obj, obj_name) { - var result = ""; - for (var i in obj) { - result += obj_name + "." + i + " = " + obj[i] + "<br>"; - } - result += "<hr>"; - return result; -} -</pre> -<p><code>make</code> および <code>model</code> というプロパティを持つ <code>car</code> というオブジェクトでは次のような結果が得られます。</p> -<pre class="eval">car.make = Ford -car.model = Mustang -</pre> -<p><strong>配列</strong><br> - <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for" title="ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> -<h4 id="for_each...in_.E6.96.87" name="for_each...in_.E6.96.87">for each...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6" title="ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> -<h4 id="with_.E6.96.87" name="with_.E6.96.87">with 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> -<p><code>with</code> 文は次のように使用します。</p> -<pre>with (object) { - statements -} -</pre> -<p><strong>例</strong><br> - 次の <code>with</code> 文では <code>Math</code> オブジェクトがデフォルトのオブジェクトに指定されています。<code>with</code> 文内の文は <code>PI</code> プロパティや <code>cos</code> および <code>sin</code> メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は <code>Math</code> オブジェクトへのものであると想定します。</p> -<pre>var a, x, y; -var r = 10; -with (Math) { - a = PI * r * r; - x = r * cos(PI); - y = r * sin(PI/2); -} -</pre> -<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> - -<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}</p> diff --git a/files/ja/web/javascript/guide/objects_and_properties/index.html b/files/ja/web/javascript/guide/objects_and_properties/index.html deleted file mode 100644 index f2679c1d00..0000000000 --- a/files/ja/web/javascript/guide/objects_and_properties/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: オブジェクトとプロパティ -slug: Web/JavaScript/Guide/Objects_and_Properties ---- -<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.A8.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.A8.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトとプロパティ</h3> -<p>JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。</p> -<pre>objectName.propertyName -</pre> -<p>オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、<code>myCar</code> という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに <code>make</code>、<code>model</code>、<code>year</code> という名前のプロパティをそれぞれ作成することができます。</p> -<pre>myCar.make = "Ford"; -myCar.model = "Mustang"; -myCar.year = 1969; -</pre> -<p>配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして <code>myCar</code> オブジェクトのプロパティにアクセスすることができます。</p> -<pre>myCar["make"] = "Ford"; -myCar["model"] = "Mustang"; -myCar["year"] = 1969; -</pre> -<p>この手の配列は<em>連想配列</em>として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。</p> -<pre>function show_props(obj, obj_name) { - var result = ""; - for (var i in obj) - result += obj_name + "." + i + " = " + obj[i] + "\n"; - return result; -} -</pre> -<p>関数 <code>show_props(myCar, "myCar")</code> を呼び出すと以下の結果が返されます。</p> -<pre>myCar.make = Ford -myCar.model = Mustang -myCar.year = 1969 -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions", "JavaScript/Guide/Creating_New_Objects") }}</p> diff --git a/files/ja/web/javascript/guide/obsolete_pages/index.html b/files/ja/web/javascript/guide/obsolete_pages/index.html deleted file mode 100644 index 88bf9acbe7..0000000000 --- a/files/ja/web/javascript/guide/obsolete_pages/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Obsolete Pages -slug: Web/JavaScript/Guide/Obsolete_Pages -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages ---- -<p>This is a list of pages that have been merged into chapters (in alphabetical order):</p> - - -<div>{{tree}}</div> diff --git a/files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html b/files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html deleted file mode 100644 index 79c30b670a..0000000000 --- a/files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Function Object -slug: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object ---- -<p> </p> -<h3 id="Function_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" name="Function_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88">Function オブジェクト</h3> -<p>定義済みの <code>Function</code> オブジェクトは、関数としてコンパイルさせたい JavaScript コードの文字列を指定します。</p> -<p><code>Function</code> オブジェクトを作成するには次のようにします。</p> -<pre>functionObjectName = new Function ([arg1, arg2, ... argn], functionBody) -</pre> -<p><code>functionObjectName</code> は変数名または既存のオブジェクトのプロパティ名です。オブジェクトに小文字のイベントハンドラ名を続けて、<code>window.onerror</code> のようにして指定することもできます。</p> -<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> は関数が仮引数名として使用する引数です。それぞれが JavaScript の識別子として妥当な文字列である必要があります。例えば、"x" や "theForm" などです。</p> -<p><code>functionBody</code> は関数の本体としてコンパイルさせたい JavaScript コードを表す文字列です。</p> -<p><code>Function</code> オブジェクトはそれが使用されるたびに評価されます。これは関数を宣言し、それをコード内で呼び出す方法よりも非効率的です。宣言された関数はコンパイルされるからです。</p> -<p>ここで説明した関数の定義方法に加えて、<code>function</code> 文と関数式を用いることもできます。詳しくは <a href="/ja/Core_JavaScript_1.5_Reference" title="ja/Core_JavaScript_1.5_Reference">コア JavaScript 1.5 リファレンス</a> を参照してください。</p> -<p>次のコードは関数を変数 <code>setBGColor</code> に代入します。この関数は開いている文書の背景色をセットします。</p> -<pre>var setBGColor = new Function("document.bgColor='antiquewhite'") -</pre> -<p><code>Function</code> オブジェクトを呼び出すには、それがあたかも関数であるかのように変数名を指定すればいいのです。次のコードは <code>setBGColor</code> 変数で指定された関数を実行します。</p> -<pre>var colorChoice="antiquewhite" -if (colorChoice=="antiquewhite") {setBGColor()} -</pre> -<p>次のどちらかの方法を使用することでイベントハンドラに関数を代入することができます。</p> -<pre>1. document.form1.colorButton.onclick=setBGColor -2. <INPUT NAME="colorButton" TYPE="button" - VALUE="Change background color" - onClick="setBGColor()"> -</pre> -<p>上記の変数 <code>setBGColor</code> を作成することは次の関数を宣言することと同じようなことです。</p> -<pre>function setBGColor() { - document.bgColor='antiquewhite' -} -</pre> -<p>関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。</p> -<ul> - <li><code>var setBGColor = new Function("...")</code> のようにして関数を変数に代入すると、<code>setBGColor</code> は <code>new Function()</code> を用いて作成した関数への参照がその値であるような変数になります。</li> - <li><code>function setBGColor() {...}</code> のようにして関数を作成すると、<code>setBGColor</code> は変数ではなく関数の名前になります。</li> -</ul> -<p>関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。</p> -<ul> - <li>内側の関数には外側の関数の文からしかアクセスできません。</li> - <li>内側の関数は外側の関数の引数や変数を使用できます。外側の関数は内側の関数の引数や変数を使用できません。</li> -</ul> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Date_Object", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Math_Object") }}</p> diff --git a/files/ja/web/javascript/guide/operators/arithmetic_operators/index.html b/files/ja/web/javascript/guide/operators/arithmetic_operators/index.html deleted file mode 100644 index 4aa9662292..0000000000 --- a/files/ja/web/javascript/guide/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 算術演算子 -slug: Web/JavaScript/Guide/Operators/Arithmetic_Operators ---- -<h3 id=".E7.AE.97.E8.A1.93.E6.BC.94.E7.AE.97.E5.AD.90" name=".E7.AE.97.E8.A1.93.E6.BC.94.E7.AE.97.E5.AD.90">算術演算子</h3> -<p>算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、<a href="/ja/Core_JavaScript_1.5_Reference/Global_Properties/NaN" title="ja/Core_JavaScript_1.5_Reference/Global_Properties/NaN"><code>NaN</code></a> になることにも注意してください）。</p> -<pre>1 / 2 // JavaScript では 0.5 を返す -1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない） - -1.0 / 2.0 // JavaScript でも Java でも 0.5 を返す -</pre> -<p>さらに、JavaScript では以下の表で示された算術演算子も使用できます。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>演算子</th> - <th>説明</th> - <th>例</th> - </tr> - <tr> - <td>%<br> - （モジュロ）</td> - <td>2 項演算子。2 つのオペランドで除算したときの整数の余りを返す。</td> - <td>12 % 5 は 2 を返す。</td> - </tr> - <tr> - <td>++<br> - （インクリメント）</td> - <td>単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。</td> - <td><code>x</code> が 3 のとき、<code>++x</code> は <code>x</code> に 4 をセットし、4 を返す。一方、<code>x++</code> は <code>x</code> に 4 をセットし、3 を返す。</td> - </tr> - <tr> - <td>--<br> - （デクリメント）</td> - <td>単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。</td> - <td><code>x</code> が 3 のとき、<code>--x</code> は <code>x</code> に 2 をセットし、2 を返す。一方、<code>x--</code> は <code>x</code> に 2 をセットし、3 を返す。</td> - </tr> - <tr> - <td>-<br> - （符号反転）</td> - <td>単項演算子。オペランドの符号を反転してその値を返す。</td> - <td><code>x</code> が 3 のとき、<code>-x</code> は -3 を返す。</td> - </tr> - </tbody> -</table> -<p><small><strong>表 3.4：算術演算子</strong></small></p> -<p>{{ PreviousNext("JavaScript/Guide/Operators/Comparison_Operators", "JavaScript/Guide/Operators/Bitwise_Operators") }}</p> diff --git a/files/ja/web/javascript/guide/operators/assignment_operators/index.html b/files/ja/web/javascript/guide/operators/assignment_operators/index.html deleted file mode 100644 index 88a0b0beb7..0000000000 --- a/files/ja/web/javascript/guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 代入演算子 -slug: Web/JavaScript/Guide/Operators/Assignment_Operators ---- -<h3 id=".E4.BB.A3.E5.85.A5.E6.BC.94.E7.AE.97.E5.AD.90" name=".E4.BB.A3.E5.85.A5.E6.BC.94.E7.AE.97.E5.AD.90">代入演算子</h3> -<p>代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。</p> -<p>他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>短縮表記した演算子</th> - <th>意味</th> - </tr> - <tr> - <td>x += y</td> - <td>x = x + y</td> - </tr> - <tr> - <td>x -= y</td> - <td>x = x - y</td> - </tr> - <tr> - <td>x *= y</td> - <td>x = x * y</td> - </tr> - <tr> - <td>x /= y</td> - <td>x = x / y</td> - </tr> - <tr> - <td>x %= y</td> - <td>x = x % y</td> - </tr> - <tr> - <td>x <<= y</td> - <td>x = x << y</td> - </tr> - <tr> - <td>x >>= y</td> - <td>x = x >> y</td> - </tr> - <tr> - <td>x >>>= y</td> - <td>x = x >>> y</td> - </tr> - <tr> - <td>x &= y</td> - <td>x = x & y</td> - </tr> - <tr> - <td>x ^= y</td> - <td>x = x ^ y</td> - </tr> - <tr> - <td>x |= y</td> - <td>x = x | y</td> - </tr> - </tbody> -</table> -<p><small><strong>表 3.2：代入演算子</strong></small></p> -<p>{{ PreviousNext("JavaScript/Guide/Operators", "JavaScript/Guide/Operators/Comparison_Operators") }}</p> diff --git a/files/ja/web/javascript/guide/operators/comparison_operators/index.html b/files/ja/web/javascript/guide/operators/comparison_operators/index.html deleted file mode 100644 index 182802bb5a..0000000000 --- a/files/ja/web/javascript/guide/operators/comparison_operators/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 比較演算子 -slug: Web/JavaScript/Guide/Operators/Comparison_Operators ---- -<h3 id=".E6.AF.94.E8.BC.83.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.AF.94.E8.BC.83.E6.BC.94.E7.AE.97.E5.AD.90">比較演算子</h3> -<p><span class="comment">This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="...</span> 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は <code>===</code> および <code>!==</code> であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。</p> -<pre class="eval">var var1 = 3, var2 = 4; -</pre> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>演算子</th> - <th>説明</th> - <th>true を返す例</th> - </tr> - <tr> - <td>等しい (==)</td> - <td>オペランドが等しい場合に true を返す。</td> - <td><code>3 == var1</code><br> - <p><code>"3" == var1</code></p> - <code>3 == '3'</code></td> - </tr> - <tr> - <td>等しくない (!=)</td> - <td>オペランドが等しくない場合に true を返す。</td> - <td><code>var1 != 4<br> - var2 != "3"</code></td> - </tr> - <tr> - <td>厳密に等しい (===)</td> - <td>オペランドが等しく、かつ同じ型である場合に true を返す。</td> - <td><code>3 === var1</code></td> - </tr> - <tr> - <td>厳密には等しくない (!==)</td> - <td>オペランドが等しくなく、かつ/または同じ型でない場合に true を返す。</td> - <td><code>var1 !== "3"<br> - 3 !== '3'</code></td> - </tr> - <tr> - <td>より大きい (>)</td> - <td>左のオペランドが右のオペランドよりも大きい場合に true を返す。</td> - <td><code>var2 > var1<br> - "12" > 2</code></td> - </tr> - <tr> - <td>以上 (>=)</td> - <td>左のオペランドが右のオペランド以上である場合に true を返す。</td> - <td><code>var2 >= var1<br> - var1 >= 3</code></td> - </tr> - <tr> - <td>より小さい (<)</td> - <td>左のオペランドが右のオペランドよりも小さい場合に true を返す。</td> - <td><code>var1 < var2<br> - "12" < "2"</code></td> - </tr> - <tr> - <td>以下 (<=)</td> - <td>左のオペランドが右のオペランド以下である場合に true を返す。</td> - <td><code>var1 <= var2<br> - var2 <= 5</code></td> - </tr> - </tbody> -</table> -<p><small><strong>表 3.3：比較演算子</strong></small></p> -<p>{{ PreviousNext("JavaScript/Guide/Operators/Assignment_Operators", "JavaScript/Guide/Operators/Arithmetic_Operators")}}</p> diff --git a/files/ja/web/javascript/guide/operators/logical_operators/index.html b/files/ja/web/javascript/guide/operators/logical_operators/index.html deleted file mode 100644 index fa6fa08068..0000000000 --- a/files/ja/web/javascript/guide/operators/logical_operators/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 論理演算子 -slug: Web/JavaScript/Guide/Operators/Logical_Operators ---- -<h3 id=".E8.AB.96.E7.90.86.E6.BC.94.E7.AE.97.E5.AD.90" name=".E8.AB.96.E7.90.86.E6.BC.94.E7.AE.97.E5.AD.90">論理演算子</h3> -<p>論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>演算子</th> - <th>使用法</th> - <th>説明</th> - </tr> - <tr> - <td>&&</td> - <td>expr1 && expr2</td> - <td>（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す。</td> - </tr> - <tr> - <td>||</td> - <td>expr1 || expr2</td> - <td>（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は || は true を返し、両方とも false の場合は false を返す。</td> - </tr> - <tr> - <td>!</td> - <td>!expr</td> - <td>（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す。</td> - </tr> - </tbody> -</table> -<p><small><strong>表 3.7：論理演算子</strong></small></p> -<p>false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。</p> -<p>以下のコードで &&（論理 AND）演算子の例を示します。</p> -<pre>a1=true && true // t && t は true を返す -a2=true && false // t && f は false を返す -a3=false && true // f && t は false を返す -a4=false && (3 == 4) // f && f は false を返す -a5="Cat" && "Dog" // t && t は Dog を返す -a6=false && "Cat" // f && t は false を返す -a7="Cat" && false // t && f は false を返す -</pre> -<p>以下のコードで ||（論理 OR）演算子の例を示します。</p> -<pre>o1=true || true // t || t は true を返す -o2=false || true // f || t は true を返す -o3=true || false // t || f は true を返す -o4=false || (3 == 4) // f || f は false を返す -o5="Cat" || "Dog" // t || t は Cat を返す -o6=false || "Cat" // f || t は Cat を返す -o7="Cat" || false // t || f は Cat を返す -</pre> -<p>以下のコードで !（論理 NOT）演算子の例を示します。</p> -<pre>n1=!true // !t は false を返す -n2=!false // !f は true を返す -n3=!"Cat" // !t は false を返す -</pre> -<h4 id=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1" name=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1">ショートサーキット評価</h4> -<p>論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。</p> -<ul> - <li><code>false</code> && <em>anything</em> は false にショートサーキット評価する。</li> - <li><code>true</code> || <em>anything</em> は true ショートサーキット評価する。</li> -</ul> -<p>論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の <em>anything</em> の部分は評価されないため、何らかの副作用が生じないように注意してください。</p> -<p>{{ PreviousNext("JavaScript/Guide/Operators/Bitwise_Operators", "JavaScript/Guide/Operators/String_Operators") }}</p> diff --git a/files/ja/web/javascript/guide/operators/special_operators/index.html b/files/ja/web/javascript/guide/operators/special_operators/index.html deleted file mode 100644 index 226faf2b3c..0000000000 --- a/files/ja/web/javascript/guide/operators/special_operators/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: 特殊演算子 -slug: Web/JavaScript/Guide/Operators/Special_Operators ---- -<h3 id=".E7.89.B9.E6.AE.8A.E6.BC.94.E7.AE.97.E5.AD.90" name=".E7.89.B9.E6.AE.8A.E6.BC.94.E7.AE.97.E5.AD.90">特殊演算子</h3> -<p>JavaScript は以下の特殊演算子があります。</p> -<ul> - <li>{{ Anch("条件演算子") }}</li> - <li>{{ Anch("コンマ演算子") }}</li> - <li>{{ Anch("delete") }}</li> - <li>{{ Anch("in") }}</li> - <li>{{ Anch("instanceof") }}</li> - <li>{{ Anch("new") }}</li> - <li>{{ Anch("this") }}</li> - <li>{{ Anch("typeof") }}</li> - <li>{{ Anch("void") }}</li> -</ul> -<h4 id=".E6.9D.A1.E4.BB.B6.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.9D.A1.E4.BB.B6.E6.BC.94.E7.AE.97.E5.AD.90">条件演算子</h4> -<p>条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。</p> -<pre>condition ? val1 : val2 -</pre> -<p><code>condition</code> が true の場合、演算子は <code>val1</code> の値を選択します。そうでない場合は <code>val2</code> の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。</p> -<p>例えば、</p> -<pre>status = (age >= 18) ? "adult" : "minor" -</pre> -<p>この文では、<code>age</code> が 18 以上の場合 "adult" という値を変数 <code>status</code> に代入します。そうでない場合は "minor" という値を <code>status</code> に代入します。</p> -<h4 id=".E3.82.B3.E3.83.B3.E3.83.9E.E6.BC.94.E7.AE.97.E5.AD.90" name=".E3.82.B3.E3.83.B3.E3.83.9E.E6.BC.94.E7.AE.97.E5.AD.90">コンマ演算子</h4> -<p>コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に <code>for</code> ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。</p> -<p>例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。</p> -<pre>for (var i=0, j=9; i <= 9; i++, j--) - document.writeln("a["+i+"]["+j+"]= " + a[i][j]) -</pre> -<h4 id="delete" name="delete">delete</h4> -<p>delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。</p> -<pre>delete objectName -delete objectName.property -delete objectName[index] -delete property // with 文内でのみ有効 -</pre> -<p>ここで、<code>objectName</code> はオブジェクトの名前を、<code>property</code> は既存のプロパティを、<code>index</code> は配列の要素の位置を表す整数をそれぞれ表しています。</p> -<p>4 番目の形式は <code>with</code> 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。</p> -<p><code>delete</code> 演算子を使うことで暗黙的に宣言された変数を削除することができますが、<code>var</code> 文を用いて宣言された変数は削除できません。</p> -<p><code>delete</code> 演算子が成功すると、そのプロパティや要素には <code>undefined</code> がセットされます。また、演算が可能な場合は <code>delete</code> 演算子は true を返します。演算が不可能な場合は false を返します。</p> -<pre>x=42 -var y= 43 -myobj=new Number() -myobj.h=4 // プロパティ h を作成 -delete x // true を返す（暗黙的に宣言されているならば削除可能） -delete y // false を返す（var 付きで宣言されているなら削除不可能） -delete Math.PI // false を返す（定義済みプロパティは削除不可能） -delete myobj.h // true を返す（ユーザ定義プロパティは削除可能） -delete myobj // true を返す（暗黙的に宣言されているならば削除可能） -</pre> -<p><strong>配列要素の削除</strong><br> - 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a{{ mediawiki.external(3) }} を削除したとき、a{{ mediawiki.external(4) }} は依然 a{{ mediawiki.external(4) }} のままで、a{{ mediawiki.external(3) }} は undefined になります。</p> -<p><code>delete</code> 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree{{ mediawiki.external(3) }} は <code>delete</code> によって除去されます。</p> -<pre>trees=new Array("redwood","bay","cedar","oak","maple") -delete trees[3] -if (3 in trees) { - // ここは実行されない -} -</pre> -<p>配列要素は存在させたいが、値は未定義にしたいという場合は、<code>delete</code> 演算子の代わりに <code>undefined</code> キーワードを使用してください。次の例では <code>trees{{ mediawiki.external(3) }}</code> には <code>undefined</code> という値が代入されますが、その配列要素は存在したままになります。</p> -<pre>trees=new Array("redwood","bay","cedar","oak","maple") -trees[3]=undefined -if (3 in trees) { - // ここは実行される -} -</pre> -<h4 id="in" name="in">in</h4> -<p><code>in</code> 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。</p> -<pre>propNameOrNumber in objectName -</pre> -<p>ここで、<code>propNameOrNumber</code> はプロパティ名か配列のインデックスを表す文字列式または数値式を、<code>objectName</code> はオブジェクトの名前をそれぞれ表しています。</p> -<p>次の例では <code>in</code> 演算子の使用法を示します。</p> -<pre>// 配列 -trees=new Array("redwood","bay","cedar","oak","maple") -0 in trees // true を返す -3 in trees // true を返す -6 in trees // false を返す -"bay" in trees // false を返す（インデックスの指す値ではなく、 - // インデックスの数字を指定しなければならない） -"length" in trees // true を返す（length は Array のプロパティ） - -// 定義済みオブジェクト -"PI" in Math // true を返す -myString=new String("coral") -"length" in myString // true を返す - -// ユーザ定義オブジェクト -mycar = {make:"Honda",model:"Accord",year:1998} -"make" in mycar // true を返す -"model" in mycar // true を返す -</pre> -<h4 id="instanceof" name="instanceof">instanceof</h4> -<p><code>instanceof</code> 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。</p> -<pre>objectName instanceof objectType -</pre> -<p>ここで、<code>objectName</code> は <code>objectType</code> と比較するオブジェクトの名前を、<code>objectType</code> は <code>Date</code> や <code>Array</code> のようなオブジェクトの種類をそれぞれ表しています。</p> -<p>実行時にオブジェクトの種類を確認する必要があるときは <code>instanceof</code> を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。</p> -<p>例えば、次のコードでは <code>instanceof</code> を使用することで <code>theDay</code> が <code>Date</code> オブジェクトであるかどうかを決定しています。<code>theDay</code> は <code>Date</code> オブジェクトなので <code>if</code> 文の中の文は実行されます。</p> -<pre>theDay=new Date(1995, 12, 17) -if (theDay instanceof Date) { - // 実行される文 -} -</pre> -<h4 id="new" name="new">new</h4> -<p><code>new</code> 演算子は、ユーザ定義オブジェクトや、<code>Array</code>、<code>Boolean</code>、<code>Date</code>、<code>Function</code>、<code>Image</code>、<code>Number</code>、<code>Object</code>、<code>Option</code>、<code>RegExp</code>、<code>String</code> といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは <code>DbPool</code>、<code>Lock</code>、<code>File</code>、<code>SendMail</code> といったオブジェクトも使用できます。<code>new</code> の使用法は以下のとおりです。</p> -<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) -</pre> -<p>オブジェクト初期化子を使用してもオブジェクトを作成することができます。<a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子の使用</a> にて説明しています。</p> -<p>詳しくはコア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator" title="ja/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new 演算子</a> のページを参照してください。</p> -<h4 id="this" name="this">this</h4> -<p><code>this</code> キーワードを使うことでカレントオブジェクトを参照することができます。一般に <code>this</code> はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。</p> -<pre>this[.propertyName] -</pre> -<p><strong>例 1</strong><br> - あるオブジェクトの <code>value</code> プロパティの妥当性を確認する <code>validate</code> という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。</p> -<pre>function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) - alert("Invalid Value!") -} -</pre> -<p>各フォーム要素の <code>onChange</code> イベントハンドラにおいて <code>validate</code> を呼び出します。<code>this</code> を使うことでフォーム要素を渡すことができます。次の例をご覧ください。</p> -<pre><B>Enter a number between 18 and 99:</B> -<INPUT TYPE = "text" NAME = "age" SIZE = 3 - onChange="validate(this, 18, 99)"> -</pre> -<p><strong>例 2</strong><br> - <code>form</code> プロパティと組み合わせると <code>this</code> でカレントオブジェクトの親のフォームを参照できます。次の例では、<code>myForm</code> というフォームに <code>Text</code> オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、<code>Text</code> オブジェクトの値にフォーム名がセットされます。ボタンの <code>onClick</code> イベントハンドラは <code>this.form</code> を利用して親のフォームである <code>myForm</code> を参照します。</p> -<pre><FORM NAME="myForm"> -Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> -<P> -<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" - onClick="this.form.text1.value=this.form.name"> -</FORM> -</pre> -<h4 id="typeof" name="typeof">typeof</h4> -<p><code>typeof</code> 演算子は次の方法のうち、どちらかの方法で使用します。</p> -<pre>1. typeof operand -2. typeof (operand) -</pre> -<p><code>typeof</code> 演算子は、未評価のオペランドの型を指す文字列を返します。<code>operand</code> は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。</p> -<p>以下の変数を定義することを想定します。</p> -<pre>var myFun = new Function("5+2") -var shape="round" -var size=1 -var today=new Date() -</pre> -<p><code>typeof</code> 演算子はこれらの変数に対して以下の結果を返します。</p> -<pre>typeof myFun is function -typeof shape is string -typeof size is number -typeof today is object -typeof dontExist is undefined -</pre> -<p><code>true</code> や <code>null</code> というキーワードに対して、<code>typeof</code> 演算子は以下の結果を返します。</p> -<pre>typeof true is boolean -typeof null is object -</pre> -<p>数値や文字列に対して、<code>typeof</code> 演算子は以下の結果を返します。</p> -<pre>typeof 62 is number -typeof 'Hello world' is string -</pre> -<p>プロパティ値に対して、<code>typeof</code> 演算子はプロパティ値の型を返します。</p> -<pre>typeof document.lastModified is string -typeof window.length is number -typeof Math.LN2 is number -</pre> -<p>メソッドや関数に対して、<code>typeof</code> 演算子は以下の結果を返します。</p> -<pre>typeof blur is function -typeof eval is function -typeof parseInt is function -typeof shape.split is function -</pre> -<p>定義済みオブジェクトに対して、<code>typeof</code> 演算子は以下の結果を返します。</p> -<pre>typeof Date is function -typeof Function is function -typeof Math is function -typeof Option is function -typeof String is function -</pre> -<h4 id="void" name="void">void</h4> -<p><code>void</code> 演算子は次の方法のうち、どちらかの方法で使用します。</p> -<pre>1. void (expression) -2. void expression -</pre> -<p><code>void</code> 演算子は値を返さずに評価する式を指定します。<code>expression</code> は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。</p> -<p><code>void</code> 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。</p> -<p>以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると <code>void(0)</code> は undefined に評価され、JavaScript としては影響を及ぼしません。</p> -<pre><A HREF="javascript:void(0)">Click here to do nothing</A> -</pre> -<p>以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。</p> -<pre><A HREF="javascript:void(document.form.submit())"> -Click here to submit</A> -</pre> -<p>{{ PreviousNext("JavaScript/Guide/Operators/String_Operators", "JavaScript/Guide/Creating_a_Regular_Expression") }}</p> diff --git a/files/ja/web/javascript/guide/operators/string_operators/index.html b/files/ja/web/javascript/guide/operators/string_operators/index.html deleted file mode 100644 index 41bf8bbc44..0000000000 --- a/files/ja/web/javascript/guide/operators/string_operators/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 文字列演算子 -slug: Web/JavaScript/Guide/Operators/String_Operators ---- -<h2 id=".E6.96.87.E5.AD.97.E5.88.97.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.96.87.E5.AD.97.E5.88.97.E6.BC.94.E7.AE.97.E5.AD.90">文字列演算子</h2> -<p>比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、<code>"my " + "string"</code> は <code>"my string"</code> という文字列を返します。</p> -<p>短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 <code>mystring</code> に "alpha" という値が格納されているとき、式 <code>mystring += "bet"</code> の評価結果は "alphabet" となり、この値を <code>mystring</code> に代入します。</p> -<p>{{ PreviousNext("JavaScript/Guide/Operators/Logical_Operators", "JavaScript/Guide/Operators/Special_Operators") }}</p> diff --git a/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html deleted file mode 100644 index aecb8a81f1..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: escape 関数と unescape 関数 -slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions ---- -<div class="onlyinclude"> - <h3 id="escape_.E3.81.8A.E3.82.88.E3.81.B3_unescape_.E9.96.A2.E6.95.B0" name="escape_.E3.81.8A.E3.82.88.E3.81.B3_unescape_.E9.96.A2.E6.95.B0">escape および unescape 関数</h3> - <p><code>escape</code> および <code>unescape</code> 関数は文字列をエンコードしたりデコードしたりします。<code>escape</code> 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。<code>unescape</code> は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。</p> - <p>これらの関数の構文は以下のとおりです。</p> - <pre>escape(string) -unescape(string) -</pre> - <p>これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。</p> - <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> -<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}</p> diff --git a/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html b/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html deleted file mode 100644 index 3945955e86..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: eval 関数 -slug: Web/JavaScript/Guide/Predefined_Functions/eval_Function ---- -<div class="onlyinclude"> - <h3 id="eval_.E9.96.A2.E6.95.B0" name="eval_.E9.96.A2.E6.95.B0">eval 関数</h3> - <p><code>eval</code> 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。</p> - <pre>eval(expr) -</pre> - <p>ここで <code>expr</code> は評価される文字列です。</p> - 文字列が式を表している場合は <code>eval</code> はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。<code>eval</code> のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために <code>eval</code> を呼び出さないでください。JavaScript は自動的に演算式を評価します。</div> -<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions", "JavaScript/Guide/Predefined_Functions/isFinite_Function") }}</p> diff --git a/files/ja/web/javascript/guide/predefined_functions/index.html b/files/ja/web/javascript/guide/predefined_functions/index.html deleted file mode 100644 index 758c6f22a0..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 定義済み関数 -slug: Web/JavaScript/Guide/Predefined_Functions ---- -<div class="onlyinclude"> - <h3 id=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0" name=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0">定義済み関数</h3> - <p>JavaScript にはトップレベルの定義済み関数がいくつかあります。</p> - <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> - </ul> -</div> -<p>{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}</p> diff --git a/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html deleted file mode 100644 index 2340536ff7..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Creating the Hierarchy -slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy ---- -<h3 id=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90">階層の作成</h3> -<p>Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。</p> -<p>このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。</p> -<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> -<p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/1905/=Hier02.gif"><br> - <small><strong>図 8.2：Employee オブジェクトの定義</strong></small></p> -<p>以下に示すように、Java と JavaScript の <code>Employee</code> の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>JavaScript</th> - <th>Java</th> - </tr> - <tr> - <td> - <pre> -function Employee () { -this.name = ""; -this.dept = "general"; -} -</pre> - </td> - <td> - <pre> -public class Employee { - public String name; - public String dept; - public Employee () { - this.name = ""; - this.dept = "general"; - } -} -</pre> - </td> - </tr> - </tbody> -</table> -<p><code>Manager</code> および <code>WorkerBee</code> の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の <code>prototype</code> プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>JavaScript</th> - <th>Java</th> - </tr> - <tr> - <td> - <pre> -function Manager () { -this.reports = []; -} -Manager.prototype = new Employee; - -function WorkerBee () { -this.projects = []; -} -WorkerBee.prototype = new Employee; -</pre> - </td> - <td> - <pre> -public class Manager extends Employee { - public Employee[] reports; - public Manager () { - this.reports = new Employee[0]; - } -} - -public class WorkerBee extends Employee { - public String[] projects; - public WorkerBee () { - this.projects = new String[0]; - } -} -</pre> - </td> - </tr> - </tbody> -</table> -<p><code>Engineer</code> および <code>SalesPerson</code> の定義は、<code>WorkerBee</code> の子孫、それゆえに <code>Employee</code> の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は <code>dept</code> プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>JavaScript</th> - <th>Java</th> - </tr> - <tr> - <td> - <pre> -function SalesPerson () { - this.dept = "sales"; - this.quota = 100; -} -SalesPerson.prototype = new WorkerBee; - -function Engineer () { - this.dept = "engineering"; - this.machine = ""; -} -Engineer.prototype = new WorkerBee; -</pre> - </td> - <td> - <pre> -public class SalesPerson extends WorkerBee { - public double quota; - public SalesPerson () { - this.dept = "sales"; - this.quota = 100.0; - } -} - -public class Engineer extends WorkerBee { - public String machine; - public Engineer () { - this.dept = "engineering"; - this.machine = ""; - } -} -</pre> - </td> - </tr> - </tbody> -</table> -<p>これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。</p> -<p><strong>注意</strong>：<em>インスタンス</em>という用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、<code>jane</code> は <code>Engineer</code> のインスタンスであると砕けた言い方をすることもできます。同様に、<em>親</em>、<em>子</em>、<em>祖先</em>、そして<em>子孫</em>という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。</p> -<p><img alt="Image:hier03.gif" class="internal" src="/@api/deki/files/1906/=Hier03.gif"><br> - <small><strong>図 8.3：単純な定義を用いたオブジェクトの作成</strong></small></p> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties") }}</p> -</div> diff --git a/files/ja/web/javascript/guide/the_employee_example/index.html b/files/ja/web/javascript/guide/the_employee_example/index.html deleted file mode 100644 index 63176fa7e2..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: The Employee Example -slug: Web/JavaScript/Guide/The_Employee_Example ---- -<h3 id=".E5.BE.93.E6.A5.AD.E5.93.A1.E3.81.AE.E4.BE.8B" name=".E5.BE.93.E6.A5.AD.E5.93.A1.E3.81.AE.E4.BE.8B">従業員の例</h3> -<p>この章の残りは次の図で示す従業員の階層を使用していきます。</p> -<p><img alt="Image:hier01.gif" class="internal" src="/@api/deki/files/1904/=Hier01.gif"></p> -<p><small><strong>図 8.1：単純なオブジェクト階層</strong></small></p> -<p>これの例では以下のオブジェクトを使用しています。</p> -<ul> - <li>Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。</li> - <li>Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。</li> - <li>WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。</li> - <li>SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。</li> - <li>Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。</li> -</ul> -<p>残りの例：</p> -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> - <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> - </ul> - </li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> -</ul> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}</p> -</div> -<p> </p> diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html deleted file mode 100644 index c6d536602b..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Adding Properties -slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Adding_Properties ---- -<h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0">プロパティの追加</h3> -<p>JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。</p> -<pre>mark.bonus = 3000; -</pre> -<p>すると、<code>mark</code> オブジェクトには bonus プロパティができます。しかし、他のどの <code>WorkerBee</code> にもこのプロパティは存在しません。</p> -<p>あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると <code>specialty</code> プロパティをすべての従業員に対して追加することができます。</p> -<pre>Employee.prototype.specialty = "none"; -</pre> -<p>JavaScript がこの文を実行するとすぐに <code>mark</code> オブジェクトも "<code>none</code>" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに <code>Engineer</code> プロトタイプに対するそれを上書きしたときの効果を示します。</p> -<p><img alt="Image:hier04.gif" class="internal" src="/@api/deki/files/1907/=Hier04.gif"><br> - <small><strong>図 8.4：プロパティの追加</strong></small></p> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties", "Core_JavaScript_1.5_Guide:The_Employee_Example:More_Flexible_Constructors") }}</p> -</div> -<p> </p> diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html deleted file mode 100644 index e529b8bb52..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Object Properties -slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties ---- -<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトのプロパティ</h3> -<p>このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。</p> -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> -</ul> -<div class="noinclude"> - <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}</p> -</div> diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html deleted file mode 100644 index 798746ead6..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Inheriting Properties -slug: >- - Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties ---- -<h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF">プロパティの継承</h3> -<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> -<pre class="eval">mark = new WorkerBee; -</pre> -<p>JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを <code>this</code> キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に <code>projects</code> プロパティの値をセットします。さらに、内部的な <code>__proto__</code> プロパティの値として <code>WorkerBee.prototype</code> の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）<code>__proto__</code> プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 <code>mark</code> にそのオブジェクトをセットします。</p> -<p>このプロセスでは <code>mark</code> がプロトタイプチェーンから継承するプロパティとして明示的には <code>mark</code> オブジェクトに値（<em>ローカルの</em>値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（<code>__proto__</code> プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、<code>mark</code> オブジェクトには次のようなプロパティと値が入ることになります。</p> -<pre class="eval">mark.name = ""; -mark.dept = "general"; -mark.projects = []; -</pre> -<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" title="ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> -<p>これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして <code>mark</code> に固有の情報を与えます。</p> -<pre class="eval">mark.name = "Doe, Mark"; -mark.dept = "admin"; -mark.projects = ["navigator"]; -</pre> -<div class="noinclude"> - <p>{{ PreviousNext("Core JavaScript 1.5 Guide:The Employee Example:Object Properties", "Core JavaScript 1.5 Guide:The Employee Example:Object Properties:Adding Properties") }}</p> -</div> diff --git a/files/ja/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/web/javascript/guide/using_the_arguments_object/index.html deleted file mode 100644 index 10c2d9e3ff..0000000000 --- a/files/ja/web/javascript/guide/using_the_arguments_object/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: arguments オブジェクトの使用 -slug: Web/JavaScript/Guide/Using_the_arguments_object ---- -<div class="onlyinclude"> - <h3 id="arguments_オブジェクトの使用"><code>arguments</code> オブジェクトの使用</h3> - <p>関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。</p> - <pre class="eval">arguments[i] -</pre> - <p>ここで <code>i</code> は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は <code>arguments{{ mediawiki.external(0) }}</code> となります。引数のトータルの数は <code>arguments.length</code> で示されます。</p> - <p><code>arguments</code> オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。<code>arguments</code>.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、<code>arguments</code> オブジェクトを使用することで各引数を扱うことができます。</p> - <p>例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。</p> - <pre class="eval">function myConcat(separator) { - var result = ""; // リストを初期化する - // 引数について繰り返し - for (var i = 1; i < arguments.length; i++) { - result += arguments[i] + separator; - } - return result; -} -</pre> - <p>この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。</p> - <pre class="eval">// "red, orange, blue, " を返す -myConcat(", ", "red", "orange", "blue"); - -// "elephant; giraffe; lion; cheetah; " を返す -myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); - -// "sage. basil. oregano. pepper. parsley. " を返す -myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); -</pre> - <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function" title="ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> - <p><strong>JavaScript 1.3 以前のバージョン</strong><br> - arguments オブジェクトは <code>Function</code> オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。</p> - functionName.arguments{{ mediawiki.external('i') }}</div> -<p>{{ PreviousNext("JavaScript/Guide/Calling_Functions", "JavaScript/Guide/Predefined_Functions") }}</p> diff --git a/files/ja/web/javascript/guide/variables/index.html b/files/ja/web/javascript/guide/variables/index.html deleted file mode 100644 index cebaecc949..0000000000 --- a/files/ja/web/javascript/guide/variables/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 変数 -slug: Web/JavaScript/Guide/Variables ---- -<p>{{ 英語版章題("Variables") }}</p> -<h3 id=".E5.A4.89.E6.95.B0" name=".E5.A4.89.E6.95.B0">変数</h3> -<p>アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は<em>識別子</em>とも呼ばれます。</p> -<p>JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。</p> -<p>JavaScript 1.5 からは å や ü といった ISO 8859-1 や Unicode のアルファベットも識別子に使えます。<a href="/ja/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences" title="ja/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences">Unicode エスケープシーケンス</a> のページに列挙されている \uXXXX 形式の Unicode エスケープシーケンスも識別子に使用できます。</p> -<p><code>Number_hits</code> や <code>temp99</code> や <code>_name</code> が使用できる名前の例です。</p> -<p>{{ 英語版章題("Declaring Variables") }}</p> -<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E5.AE.A3.E8.A8.80" name=".E5.A4.89.E6.95.B0.E3.81.AE.E5.AE.A3.E8.A8.80">変数の宣言</h4> -<p>2 つの方法で変数を宣言できます。</p> -<ul> - <li><a href="/ja/Core_JavaScript_1.5_Reference/Statements/var" title="ja/Core_JavaScript_1.5_Reference/Statements/var">var</a> というキーワードを使う。例えば、<code>var x = 42</code>。この構文は <a href="#.E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97">ローカルおよびグローバル</a> 変数どちらの宣言にも使用可能です。</li> - <li>単に値を代入する。例えば、<code>x = 42</code>。これはいつでも <a href="#.E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0">グローバル変数</a> を宣言できますが、{{ 原語併記("厳格な JavaScript 警告", "strict JavaScript warning") }}が発生します。この方法は使用すべきではありません。</li> -</ul> -<p>{{ 英語版章題("Evaluating Variables") }}</p> -<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E8.A9.95.E4.BE.A1" name=".E5.A4.89.E6.95.B0.E3.81.AE.E8.A9.95.E4.BE.A1">変数の評価</h4> -<p><code>var</code> 文を使用し、初期化せずに宣言された変数は <a href="/ja/Core_JavaScript_1.5_Reference/Global_Properties/undefined" title="ja/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a> の値をとります。</p> -<p>未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます。</p> -<pre class="eval">var a; -print("a の値は " + a); // "a の値は undefined" を出力 -print("b の値は " + b); // ReferenceError 例外を投げる -</pre> -<p><code>undefined</code> を使うと変数に値が入っているかどうかを確かめられます。以下のコードでは、変数 <code>input</code> には値が代入されておらず、<code><a href="/ja/Core_JavaScript_1.5_Reference/Statements/if...else" title="ja/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></code> 文での評価結果は <code>true</code> です。</p> -<pre class="eval">var input; -if(input === undefined){ - doThis(); -} else { - doThat(); -} -</pre> -<p><span class="comment">Not sure how the following is related to "Variables" section</span> <code>undefined</code> は真偽値コンテキストで使用されると <code>false</code> として振る舞います。例えば以下のコードでは、<code>myArray</code> の要素が未定義であるために関数 <code>myFunction</code> が実行されます。</p> -<pre class="eval">var myArray = new Array(); -if (!myArray[0]) myFunction(); -</pre> -<p>null 変数を評価すると、数値コンテキストにおいては null 値は 0 として振る舞います。また、真偽値コンテキストでは false として振る舞います。</p> -<pre class="eval">var n = null; -print(n * 32); // prints 0 -</pre> -<p>{{ 英語版章題("Variable Scope") }}</p> -<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97" name=".E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97">変数のスコープ</h4> -<p>変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、<em>グローバル</em>（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、<em>ローカル</em>（局所）変数と呼ばれます。</p> -<p>JavaScript には <a href="/ja/Core_JavaScript_1.5_Guide/Block_Statement#.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E6.96.87" title="ja/Core_JavaScript_1.5_Guide/Block_Statement#.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E6.96.87">ブロック文</a> のスコープがありません。むしろ、そのブロックを内包しているコードに対して局所化されます。例えば以下のコードは <code>condition</code> が <code>false</code> のとき、例外を投げずに 0 が出力されます。</p> -<pre class="eval">if (condition) { - var x = 5; -} -print(x ? x : 0); -</pre> -<p>JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます。</p> -<pre class="eval">print(x === undefined); // "true" を出力 -var x = 3; -</pre> -<p>{{ 英語版章題("Global Variables") }}</p> -<h4 id=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0" name=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0">グローバル変数</h4> -<p><span class="comment">need links to pages discussing scope chains and the global object</span> グローバル変数は実際には<em>グローバルオブジェクト</em>のプロパティです。ウェブページではグローバルオブジェクトは <a href="/ja/DOM/window" title="ja/DOM/window">window</a> です。そのため、<code>window.<em>variable</em></code> という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます。</p> -<p>したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、<code>phoneNumber</code> という変数を <code>FRAMESET</code> 文書内で宣言すると、子フレームから <code>parent.phoneNumber</code> としてこの変数を参照することができます。</p> -<p>{{ 英語版章題("See Also") }}</p> -<h4 id=".E9.96.A2.E9.80.A3.E9.A0.85.E7.9B.AE" name=".E9.96.A2.E9.80.A3.E9.A0.85.E7.9B.AE">関連項目</h4> -<p><a href="/ja/Sharp_variables_in_JavaScript" title="ja/Sharp_variables_in_JavaScript">JavaScript のシャープ変数</a></p> -<p>{{ PreviousNext("JavaScript/Guide/Values", "JavaScript/Guide/Constants") }}</p> diff --git a/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html deleted file mode 100644 index 64da075317..0000000000 --- a/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: 正規表現パターンの記述 -slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern ---- -<h3 id=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F" name=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F">正規表現パターンを書く</h3> - -<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> - -<h4 id="単純なパターンの使用">単純なパターンの使用</h4> - -<p>単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。</p> - -<h4 id="特殊文字の使用">特殊文字の使用</h4> - -<p>1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば <code>/ab*c/</code> というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。</p> - -<p>以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>文字</th> - <th>意味</th> - </tr> - <tr> - <td>\</td> - <td>次のうちのどちらか。 - <ul> - <li>通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、<code>/b/ </code> は 'b' という文字にマッチする。b の前にバックスラッシュを置き、<code>/\b/</code> とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。</li> - <li>通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば <code>/a*/</code> は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、<code>/a\*/</code> は 'a*' にマッチする。</li> - </ul> - </td> - </tr> - <tr> - <td>^</td> - <td>入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、<code>/^A/</code> は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする。</td> - </tr> - <tr> - <td>$</td> - <td>入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、<code>/t$/</code> は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする。</td> - </tr> - <tr> - <td>*</td> - <td>直前の文字の 0 回以上の繰り返しにマッチする。 例えば、<code>/bo*/</code> は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない。</td> - </tr> - <tr> - <td>+</td> - <td>直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、<code>/a+/</code> は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする。</td> - </tr> - <tr> - <td>?</td> - <td>直前の文字の 0 回か 1 回の繰り返しにマッチする。 - <p>例えば、<code>/e?le?/</code> は "angel" の 'el' や "angle" の 'le' にマッチする。</p> - - <p><span class="nowiki">*</span>、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。</p> - 先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明。</td> - </tr> - <tr> - <td>.</td> - <td>小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、<code>/.n/</code> は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない。</td> - </tr> - <tr> - <td>(x)</td> - <td>'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、<code>/(foo)/</code> は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 1, ..., b から参照できる。</td> - </tr> - <tr> - <td>(?:x)</td> - <td>'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 1, ..., n から参照することはできない。</td> - </tr> - <tr> - <td>x(?=y)</td> - <td>'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、<code>/Jack(?=Sprat)/</code> は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。<code>/Jack(?=Sprat|Frost)/</code> は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない。</td> - </tr> - <tr> - <td>x(?!y)</td> - <td>'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、<code>/\d+(?!\.)/</code> はある数に小数点が続かない場合のみその数にマッチする。正規表現 <code>/\d+(?!\.)/.exec("3.141")</code> は 141 にはマッチするが 3.141 にはマッチしない。</td> - </tr> - <tr> - <td>x|y</td> - <td>'x' または 'y' にマッチする。 例えば、<code>/green|red/</code> は "green apple" の "green' や "red apple" の 'red' にマッチする。</td> - </tr> - <tr> - <td>{n}</td> - <td>n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、<code>/a{2}/</code> は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする。</td> - </tr> - <tr> - <td>{n,}</td> - <td>n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、<code>/a{2,}/</code> は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする。</td> - </tr> - <tr> - <td>{n,m}</td> - <td>n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、<code>/a{1,3}/</code> は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意。</td> - </tr> - <tr> - <td>[xyz]</td> - <td>文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、<code>/[abcd]/</code> は <code>/[a-d]/</code> と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする。</td> - </tr> - <tr> - <td>[^xyz]</td> - <td>文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、<code>/[^abc]/</code> は <code>/[^a-c]/</code> と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする。</td> - </tr> - <tr> - <td>[\b]</td> - <td>後退にマッチする。（\b と混同してはならない。）</td> - </tr> - <tr> - <td>\b</td> - <td>スペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、<code>/\bn\w/</code> は "noonday" の 'no' にマッチする。また、<code>/\wy\b/</code> は "possibly yesterday" の 'ly' にマッチする。</td> - </tr> - <tr> - <td>\B</td> - <td>単語の区切り以外の文字にマッチする。 例えば、<code>/\w\Bn/</code> は "noonday" の 'on' にマッチする。また、<code>/y\B\w/</code> は "possibly yesterday" の 'ye' にマッチする。</td> - </tr> - <tr> - <td>\cX</td> - <td>X には制御文字が入る。文字列中の制御文字にマッチする。 例えば、<code>/\cM/</code> は文字列中の control-M にマッチする。</td> - </tr> - <tr> - <td>\d</td> - <td>数字にマッチする。<code>[0-9]</code> と同等。 例えば、<code>/\d/</code> や <code>/[0-9]/</code> は "B2 is the suite number" の '2' にマッチする。</td> - </tr> - <tr> - <td>\D</td> - <td>数字以外の文字にマッチする。<code>[^0-9]</code> と同等。 例えば、<code>/\D/</code> や <code>/[^0-9]/</code> は "B2 is the suite number" の 'B' にマッチする。</td> - </tr> - <tr> - <td>\f</td> - <td>改ページにマッチする。</td> - </tr> - <tr> - <td>\n</td> - <td>改行にマッチする。</td> - </tr> - <tr> - <td>\r</td> - <td>復帰にマッチする。</td> - </tr> - <tr> - <td>\s</td> - <td>スペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。 <code>[ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]</code> と同等。 例えば、<code>/\s\w*/</code> は "foo bar" の ' bar' にマッチする。</td> - </tr> - <tr> - <td>\S</td> - <td>ホワイトスペース以外の 1 文字にマッチする。<code>[^ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]</code> と同等。 例えば、<code>/\S\w*/</code> は "foo bar" の 'foo' にマッチする。</td> - </tr> - <tr> - <td>\t</td> - <td>タブにマッチする。</td> - </tr> - <tr> - <td>\v</td> - <td>垂直タブにマッチする。</td> - </tr> - <tr> - <td>\w</td> - <td>アンダースコアを含むどの英数字にもマッチする。<code>[A-Za-z0-9_]</code> と同等。 例えば、<code>/\w/</code> は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする。</td> - </tr> - <tr> - <td>\W</td> - <td>前述以外の文字にマッチする。<code>[^A-Za-z0-9_]</code> と同等。 例えば、<code>/\W/</code> や <code>/[^$A-Za-z0-9_]/</code> は "50%" の '%' にマッチする。</td> - </tr> - <tr> - <td>\n</td> - <td>n には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、<code>/apple(,)\sorange\1/</code> は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする。</td> - </tr> - <tr> - <td>\0</td> - <td>NUL 文字にマッチする。この後ろに他の数字を続けてはならない。</td> - </tr> - <tr> - <td>\xhh</td> - <td>hh（2 桁の 16 進数）というコードを持つ文字にマッチする。</td> - </tr> - <tr> - <td>\uhhhh</td> - <td>hhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。</td> - </tr> - </tbody> -</table> - -<p><small><strong>表 4.1正規表現における特殊文字</strong></small></p> - -<h4 id="括弧の使用">括弧の使用</h4> - -<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> - -<p>例えば、<code>/Chapter (\d+)\.\d*/</code> というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。</p> - -<p>このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。</p> - -<p>マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に <code>?:</code> を付けてください。例えば、<code>(?:\d+)</code> は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。</p> - -<p>{{ PreviousNext("JavaScript/Guide/Creating_a_Regular_Expression", "JavaScript/Guide/Working_with_Regular_Expressions") }}</p> diff --git a/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index cbe9e10a0a..0000000000 --- a/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: オブジェクト指向 JavaScript 入門 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - Constructor - - Encapsulation - - Inheritance - - Intermediate - - JavaScript - - Members - - Namespace - - OOP - - Object - - Object-Oriented -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<div>{{jsSidebar("Introductory")}}</div> - -<p>オブジェクト指向を追求することで、JavaScript は強力かつ柔軟な{{Glossary("OOP", "オブジェクト指向プログラミング")}}能力を特色としています。この記事ではまずオブジェクト指向プログラミングの入門から始め、JavaScript のオブジェクトモデルの復習、そして最後に JavaScript のオブジェクト指向プログラミングの概念を説明します。</p> - -<h2 id="JavaScript_review" name="JavaScript_review">JavaScript の復習</h2> - -<p>変数、型、関数、スコープといった JavaScript の概念について自信がないのでしたら、<a href="/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript「再」入門</a>で該当するトピックをご覧いただくとよいでしょう。また、<a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>もご覧ください。</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">オブジェクト指向プログラミング</h2> - -<p>オブジェクト指向プログラミング (OOP) は、実世界を元にしたモデルの作成に{{glossary("abstraction", "抽象化")}}を使用する、プログラミングのパラダイムです。OOP は{{glossary("modularity", "モジュラリティ")}}、{{glossary("polymorphism", "ポリモーフィズム")}}、{{glossary("encapsulation", "カプセル化")}}といった、これまでに確立されたパラダイム由来の技術を複数使用しています。今日、人気がある多くのプログラミング言語 (Java、JavaScript、C#、C++、Python、PHP、Ruby、Objective-C など) が OOP をサポートしています。</p> - -<p>OOP はソフトウェアを関数の集まりや単なるコマンドのリスト（これまでの伝統的な見方）としてではなく、協調して動作するオブジェクトの集まりであると考えます。OOP では、各々のオブジェクトがメッセージを受信し、データを処理し、また他のオブジェクトへメッセージを送信できます。各々のオブジェクトは明確な役割や責任を持つ、独立した小さな機械であると見なせます。</p> - -<p>OOP はプログラミングにおける柔軟性や保守性の向上を促し、大規模ソフトウェアエンジニアリングにおいて広く普及しています。OOP はモジュラリティを強く重視しているため、オブジェクト指向によるコードは開発をシンプルにします。また、コードを後から理解することが容易になります。オブジェクト指向によるコードはモジュラリティが低いプログラミング方法よりも、直接的な分析、コーディング、複雑な状況や手続きの理解を促進します。<a href="#cite-1"><sup>1</sup></a></p> - -<h2 id="Terminology" name="Terminology">用語集</h2> - -<dl> - <dt>{{Glossary("Namespace", "ネームスペース")}} （名前空間）</dt> - <dd>開発者があらゆる機能をアプリケーション固有の一意な名前にまとめることができる一種の容器のことです。</dd> - <dt>{{Glossary("Class", "クラス")}}</dt> - <dd>オブジェクトの特性を定義するものです。クラスは、オブジェクトのプロパティやメソッドを定義するテンプレートです。</dd> - <dt>{{Glossary("Object", "オブジェクト")}}</dt> - <dd>クラスの実体です。</dd> - <dt>{{Glossary("Property", "プロパティ")}}</dt> - <dd>「色」などといったオブジェクトの特性です。</dd> - <dt>{{Glossary("Method", "メソッド")}}</dt> - <dd>「歩く」などといった、オブジェクトの能力です。これは、クラスに関連付けられたサブルーチンや関数です。</dd> - <dt>{{Glossary("Constructor", "コンストラクタ")}}</dt> - <dd>インスタンス化するときに呼び出されるメソッドです。コンストラクタの名前は通常、クラスの名前と同じです。</dd> - <dt>{{Glossary("Inheritance", "継承")}}</dt> - <dd>あるクラスが別のクラスから特性を引き継ぐことを指します。</dd> - <dt>{{Glossary("Encapsulation", "カプセル化")}}</dt> - <dd>データと、そのデータを使用するメソッドとをまとめる手法のことです。</dd> - <dt>{{Glossary("Abstraction", "抽象化")}}</dt> - <dd>実世界のモデルが、オブジェクトの複雑な継承、メソッド、プロパティの集合体によって適切に再現されている状態を指します。</dd> - <dt>{{Glossary("Polymorphism", "ポリモーフィズム")}}</dt> - <dd>Poly は "<em>many</em>"、morphism は "<em>forms</em>" を意味します。別々のクラスが同じメソッドやプロパティを定義可能であることを表します。</dd> -</dl> - -<p>オブジェクト指向プログラミングのより広範な説明については、Wikipedia の {{interwiki("wikipedia", "オブジェクト指向プログラミング")}} をご覧ください。</p> - -<h2 id="Prototype-based_programming" name="Prototype-based_programming">プロトタイプベースプログラミング</h2> - -<p>プロトタイプベースのプログラミングはクラスを使用せず、既存の<strong>プロトタイプ</strong>オブジェクトをデコレート（あるいは拡張）してそのオブジェクトの持つ挙動を再利用する（クラスベースの言語における継承と同等）ことで実現される OOP モデルです（クラスレス、プロトタイプ指向、あるいはインスタンスベースプログラミングとも呼ばれます）。</p> - -<p>プロトタイプベース言語として先駆けの（そしてもっとも正統な）代表例は、David Ungar 氏と Randall Smith 氏によって開発された {{interwiki("wikipedia", "Self")}} です。とはいえ、クラスレスのプログラミングスタイルは最近ますます人気が高まり、JavaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak （ソフトウェア Morphic のコンポーネント操作の際の Viewer フレームワークとして使われています）などのプログラミング言語に採用されました。</p> - -<h2 id="JavaScript_object_oriented_programming" name="JavaScript_object_oriented_programming">JavaScript のオブジェクト指向プログラミング</h2> - -<h3 id="Namespace" name="Namespace">ネームスペース</h3> - -<p>ネームスペース（名前空間）とは、開発者が一意なアプリケーション固有の名前を付けて、機能をまとめることができる一種の容器です。<strong>JavaScript では、ネームスペースはメソッド、プロパティ、オブジェクトを包含する別のオブジェクトとなります。</strong></p> - -<p>{{note('JavaScript では通常のオブジェクトとネームスペースとの間に、言語レベルの違いがない点に留意することが重要です。これは他の多くのオブジェクト指向言語とは異なっており、新たな JavaScript プログラマを混乱させることがあります。')}}</p> - -<p>JavaScript でネームスペースを作成する考え方はシンプルです。グローバルオブジェクトをひとつ作成して、すべての変数、メソッド、関数をそのオブジェクトのプロパティとすればよいのです。ネームスペースを使用すると、アプリケーション内で名前が衝突する可能性が低下します。これは各アプリケーションのオブジェクトが、アプリケーションで定義したグローバルオブジェクトのプロパティとなるからです。</p> - -<p>MYAPP という名前のグローバルオブジェクトを作成しましょう :</p> - -<pre class="brush: js">// グローバルネームスペース -var MYAPP = MYAPP || {};</pre> - -<p>上記のサンプルコードでは、始めに MYAPP が（同じファイルまたは別のファイルで）すでに定義されているかを確認します。定義されている場合は、既存の MYAPP グローバルオブジェクトを使用します。定義されていない場合はメソッド、関数、変数、オブジェクトをカプセル化する、MYAPP という名前の空のオブジェクトを作成します。</p> - -<p>サブネームスペースも作成できます（グローバルオブジェクトを最初に定義する必要があることに注意）:</p> - -<pre class="brush: js">// サブネームスペース -MYAPP.event = {};</pre> - -<p>ネームスペースを作成して変数、関数、メソッドを追加する構文は以下のようになります :</p> - -<pre class="brush: js">// 共通のメソッドやプロパティ向けに MYAPP.commonMethod という名前のコンテナを作成 -MYAPP.commonMethod = { - regExForName: "", // 名前を検証するための正規表現を定義 - regExForPhone: "", // 電話番号を検証するための正規表現を定義 - validateName: function(name){ - // 名前に対してなんらかの処理を行う。"this.regExForName" を使用して - // 変数 regExForName にアクセス可能 - }, - - validatePhoneNo: function(phoneNo){ - // 電話番号に対してなんらかの処理を行う - } -} - -// オブジェクトとともにメソッドを定義する -MYAPP.event = { - addListener: function(el, type, fn) { - // 処理 - }, - removeListener: function(el, type, fn) { - // 処理 - }, - getEvent: function(e) { - // 処理 - } - - // 他のメソッドやプロパティを追加できる -} - -// addListener メソッドを使用する構文: -MYAPP.event.addListener("yourel", "type", callback);</pre> - -<h3 id="Standard_built-in_objects" name="Standard_built-in_objects">標準ビルトインオブジェクト</h3> - -<p>JavaScript は、例えば <code>Math</code>、<code>Object</code>、<code>Array</code>、<code>String</code> といったコアに組み込まれたオブジェクトがあります。以下の例では、乱数を取得するために <code>Math</code> オブジェクトの <code>random()</code> メソッドを使用する方法を示したものです。</p> - -<pre class="brush: js">console.log(Math.random()); -</pre> - -<div class="note"><strong>註:</strong> この例、および以降の例では、{{domxref("console.log()")}} という名前の関数がグローバルで定義されていると仮定しています。実際は、<code>console.log()</code> 関数は JavaScript そのものの一部ではありませんが、多くのブラウザがデバッグ用に実装しています。</div> - -<p>JavaScript におけるコアオブジェクトの一覧については、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects">JavaScript リファレンスの標準ビルトインオブジェクト</a>をご覧ください。</p> - -<p>JavaScript ではすべてのオブジェクトが <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> オブジェクトのインスタンスであり、それゆえに Object の全プロパティおよび全メソッドを継承します。</p> - -<h3 id="Custom_objects" name="Custom_objects">カスタムオブジェクト</h3> - -<h4 id="The_class" name="The_class">クラス</h4> - -<p>JavaScript はプロトタイプベースの言語であり、C++ や Java でみられる <code>class</code> 文がありません。これは時に、<code>class</code> 文を持つ言語に慣れているプログラマを混乱させます。その代わりに、JavaScript ではクラスのコンストラクタとして関数を使用します。クラスの定義は、関数の定義と同じほど簡単です。以下の例では、空のコンストラクタを使って Person という名前の新たなクラスを定義しています。</p> - -<pre class="brush: js">var Person = function () {}; -</pre> - -<h4 id="The_object_(class_instance)" name="The_object_(class_instance)">オブジェクト（クラスのインスタンス）</h4> - -<p><code>obj</code> オブジェクトの新たなインスタンスを生成するには <code>new obj</code> 文を使用し、その結果（<code>obj</code> 型を持つ）を、後からアクセスするための変数に代入します。</p> - -<p>前出の例で、<code>Person</code> という名前のクラスを定義しました。以下の例では、2 つのインスタンス（<code>person1</code> と <code>person2</code>）を生成しています。</p> - -<pre class="brush: js">var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note"><strong>註:</strong> 初期化されていないインスタンスを生成する、新たに追加されたインスタンス化方法については、 {{jsxref("Object.create()")}} をご覧ください。</div> - -<h4 id="The_constructor" name="The_constructor">コンストラクタ</h4> - -<p>コンストラクタは、インスタンス化の際（オブジェクトのインスタンスが生成されたとき）に呼び出されます。コンストラクタは、クラスのメソッドです。JavaScript では、関数がオブジェクトのコンストラクタとして働きます。したがって、コンストラクタメソッドを明示的に定義する必要はありません。クラス内で定義されたすべてのアクションが、インスタンス化の際に実行されます。</p> - -<p>コンストラクタはオブジェクトのプロパティの設定や、オブジェクトの使用準備を行うメソッドの呼び出しを行うために使用されます。クラスのメソッドの追加やメソッドの定義は別の構文を使用して行うことについては、後ほど説明します。</p> - -<p>以下の例では <code>Person</code> をインスタンス化する際に、コンストラクタがメッセージをログに出力します。</p> - -<pre class="brush: js">var Person = function () { - console.log('instance created'); -}; - -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<h4 id="The_property_(object_attribute)" name="The_property_(object_attribute)">プロパティ（オブジェクトの属性）</h4> - -<p>プロパティは、クラス内にある変数です。オブジェクトのインスタンスはすべて、それらのプロパティを持ちます。プロパティがそれぞれのインスタンスで作成されるように、プロパティはコンストラクタ（関数）内で設定されます。</p> - -<p>カレントオブジェクトを示す <code>this</code> キーワードを使用して、クラス内でプロパティを扱うことができます。クラス外からプロパティにアクセス（読み取りや書き込み）するには、<code>InstanceName.Property</code> という構文を使用します。これは C++、Java、その他の言語と同じ構文です（クラスの内部では、プロパティの値の取得や設定に <code>this.Property</code> 構文を使用します)。</p> - -<p>以下の例では、<code>Person</code> クラスをインスタンス化する際に <code>firstName</code> プロパティを定義しています:</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; - console.log('Person instantiated'); -}; - -var person1 = new Person('Alice'); -var person2 = new Person('Bob'); - -// オブジェクトの firstName プロパティを表示する -console.log('person1 is ' + person1.firstName); // "person1 is Alice" と出力 -console.log('person2 is ' + person2.firstName); // "person2 is Bob" と出力 -</pre> - -<h4 id="The_methods" name="The_methods">メソッド</h4> - -<p>メソッドは関数です（また、関数と同じように定義されます）が、他はプロパティと同じ考え方に従います。メソッドの呼び出しはプロパティへのアクセスと似ていますが、メソッド名の終わりに <code>()</code> を付加して、引数を伴うことがあります。メソッドを定義するには、クラスの <code>prototype</code> プロパティの名前付きプロパティに、関数を代入します。関数を代入した名前を使用して、オブジェクトのメソッドを呼び出すことができます。</p> - -<p>以下の例では、<code>Person</code> クラスで <code>sayHello()</code> メソッドを定義および使用しています。</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); - -// Person の sayHello メソッドを呼び出す -person1.sayHello(); // "Hello, I'm Alice" と出力 -person2.sayHello(); // "Hello, I'm Bob" と出力 -</pre> - -<p>JavaScript のメソッドはオブジェクトにプロパティとして割り付けられた通常の関数であり、「状況に関係なく」呼び出せます。以下のサンプルコードについて考えてみましょう:</p> - -<pre class="brush: js">var Person = function (firstName) { - this.firstName = firstName; -}; - -Person.prototype.sayHello = function() { - console.log("Hello, I'm " + this.firstName); -}; - -var person1 = new Person("Alice"); -var person2 = new Person("Bob"); -var helloFunction = person1.sayHello; - -// "Hello, I'm Alice" と出力 -person1.sayHello(); - -// "Hello, I'm Bob" と出力 -person2.sayHello(); - -// "Hello, I'm undefined" と出力 -// (strict モードでは TypeError で失敗する) -helloFunction(); - -// true と出力 -console.log(helloFunction === person1.sayHello); - -// true と出力 -console.log(helloFunction === Person.prototype.sayHello); - -// "Hello, I'm Alice" と出力 -helloFunction.call(person1);</pre> - -<p>この例で示すように、<code>sayHello</code> 関数を参照しているもの（<code>person1</code>、<code>Person.prototype</code>、<code>helloFunction</code> 変数など）すべてが、<strong>同一の関数</strong>を示しています。関数を呼び出しているときの <code>this</code> の値は、関数の呼び出し方に依存します。もっとも一般的な、オブジェクトのプロパティから関数にアクセスする形式 (<code>person1.sayHello()</code>) で <code>this</code> を呼び出すときは、その関数を持つオブジェクト (<code>person1</code>) を <code>this</code> に設定します。これが、<code>person1.sayHello()</code> で名前として "Alice"、<code>person2.sayHello()</code> で名前として "Bob" が使用される理由です。一方、他の方法で呼び出す場合は <code>this</code> に設定されるものが変わります。変数 (<code>helloFunction()</code>) から <code>this</code> を呼び出すと、グローバルオブジェクト（ブラウザでは <code>window</code>）を <code>this</code> に設定します。このオブジェクトは（おそらく）<code>firstName</code> プロパティを持っていないため、"Hello, I'm undefined" になります（これは loose モードの場合です。<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode" title="Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict モード</a>では異なる結果（エラー）になりますが、ここでは混乱を避けるために詳細は割愛します）。あるいは、例の最後で示したように <code>Function#call</code> （または <code>Function#apply</code>）を使用して、<code>this</code> を明示的に設定できます。</p> - -<div class="note"><strong>註:</strong> <code>this</code> について、詳しくは {{jsxref("Global_Objects/Function/call","Function#call")}} および {{jsxref("Global_Objects/Function/apply","Function#apply")}} をご覧ください。</div> - -<h4 id="Inheritance" name="Inheritance">継承</h4> - -<p>継承は、1 つ以上のクラスを特化したバージョンとしてクラスを作成する方法です（<strong>JavaScript は単一継承のみサポートしています</strong>）。特化したクラスは一般的に<strong>子</strong>と呼ばれ、またそれ以外のクラスは一般的に<strong>親</strong>と呼ばれます。JavaScript では親クラスのインスタンスを子クラスに代入して、特化させることにより継承を行います。現代のブラウザでは、継承の実装に {{jsxref("Global_Objects/Object/create","Object.create","#Classical_inheritance_with_Object.create()")}} を使用することもできます。</p> - -<div class="note"> -<p><strong>註:</strong> JavaScript は子クラスの <code>prototype.constructor</code>（{{jsxref("Global_Objects/Object/prototype","Object.prototype")}} をご覧ください）を検出しないため、手動で明示しなければなりません。Stackoverflow に投稿された質問 "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" をご覧ください。</p> -</div> - -<p>以下の例では、<code>Person</code> の子クラスとして <code>Student</code> クラスを定義しています。そして、<code>sayHello()</code> メソッドの再定義と <code>sayGoodBye()</code> メソッドの追加を行っています。</p> - -<pre class="brush: js">// Person コンストラクタを定義する -var Person = function(firstName) { - this.firstName = firstName; -}; - -// Person.prototype にメソッドを 2 つ追加する -Person.prototype.walk = function(){ - console.log("I am walking!"); -}; - -Person.prototype.sayHello = function(){ - console.log("Hello, I'm " + this.firstName); -}; - -// Student コンストラクタを定義する -function Student(firstName, subject) { - // 親のコンストラクタを呼び出す。呼び出しの際に "this" が - // 適切に設定されるようにする (Function#call を使用) - Person.call(this, firstName); - - // Student 固有のプロパティを初期化する - this.subject = subject; -}; - -// Person.prototype を継承する、Student.prototype オブジェクトを作成する -// 註: ここでよくある間違いが、Student.prototype を生成するために -// "new Person()" を使用することです。これは様々な理由で間違っていますが、 -// まずこれでは Person の "firstName" 引数に渡すものがありません。 -// Person を呼び出す正しい場所はこれより前の、 -// Student から呼び出します。 -Student.prototype = Object.create(Person.prototype); // 以下の注釈を参照 - -// "constructor" プロパティが Student を指すように設定する -Student.prototype.constructor = Student; - -// "sayHello" メソッドを置き換える -Student.prototype.sayHello = function(){ - console.log("Hello, I'm " + this.firstName + ". I'm studying " - + this.subject + "."); -}; - -// "sayGoodBye" メソッドを追加する -Student.prototype.sayGoodBye = function(){ - console.log("Goodbye!"); -}; - -// 使用例: -var student1 = new Student("Janet", "Applied Physics"); -student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." -student1.walk(); // "I am walking!" -student1.sayGoodBye(); // "Goodbye!" - -// instanceof が正常に機能するかをチェック -console.log(student1 instanceof Person); // true -console.log(student1 instanceof Student); // true -</pre> - -<p><code>Student.prototype = Object.create(Person.prototype);</code> という行について :<br> - {{jsxref("Global_Objects/Object/create","Object.create")}} が存在しない古い JavaScript エンジンでは、「{{原語併記("ポリフィル","polyfill")}}」 （"shim" とも呼ばれます。リンク先の記事をご覧ください）または同様の結果になる以下のような関数を使用できます。:</p> - -<pre class="brush: js">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// 使用法: -Student.prototype = createObject(Person.prototype); -</pre> - -<div class="note"><strong>註:</strong> Object.create や古いエンジン向けの shim が何を行っているかについては、{{jsxref("Global_Objects/Object/create","Object.create")}} をご覧ください。</div> - -<p>オブジェクトをインスタンス化する方法を問わずに、<code>this</code> の参照先を適切に指定するのは時に難しいものです。ですが、これを容易にするシンプルなイディオムがあります。</p> - -<pre class="brush: js">var Person = function(firstName) { - if (this instanceof Person) { - this.firstName = firstName; - } else { - return new Person(firstName); - } -} -</pre> - -<h4 id="Encapsulation" name="Encapsulation">カプセル化</h4> - -<p>前の例では、<code>Person</code> クラスによる <code>walk()</code> メソッドの実装状況を <code>Student</code> が知らなくても、そのメソッドを使用できました。<code>Student</code> クラスは変更の必要がない限り、そのメソッドを明示的に定義する必要はありません。すべてのクラスのデータとメソッドがひとつのユニットに収められていることから、これを<strong>カプセル化</strong>と呼びます。</p> - -<p>情報を隠蔽することは、他の言語でも <code>private</code> または <code>protected</code> なメソッドやプロパティという形で一般的な機能です。JavaScript でも同様のことをシミュレートできますが、オブジェクト指向プログラミングに必須というわけではありません。<a href="#cite-2"><sup>2</sup></a></p> - -<h4 id="Abstraction" name="Abstraction">抽象化</h4> - -<p>抽象化は、取り組んでいる問題の箇所を継承（特殊化）や合成によってモデル化することを可能にする仕組みです。JavaScript では継承によって特殊化を、クラスのインスタンスを別のオブジェクトの属性値にすることで合成を実現しています。</p> - -<p>JavaScript の <code>Function</code> クラスは <code>Object</code> クラスから継承しています（これはモデルを特殊化している一例です）。また、<code>Function.prototype</code> プロパティは <code>Object</code> のインスタンスです (これは合成の一例です)。</p> - -<pre class="brush: js">var foo = function () {}; - -// "foo is a Function: true" と出力 -console.log('foo is a Function: ' + (foo instanceof Function)); - -// "foo.prototype is an Object: true" と出力 -console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre> - -<h4 id="Polymorphism" name="Polymorphism">ポリモーフィズム</h4> - -<p>すべてのメソッドやプロパティが <code>prototype</code> プロパティの内部で実装されているのと同じように、異なるクラスで同じ名前のメソッドを定義できます。メソッドは 2 つのクラスに親子関係（すなわち、あるクラスが別のクラスから継承されている）がない限り、自身が定義されたクラスに収められます。</p> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>これらは JavaScript でオブジェクト指向プログラミングを実装する唯一の方法ではありません。この点で JavaScript はとても融通がききます。同様に、ここで示した技術は言語ハックをまったくしていませんし、他言語のオブジェクト理論における実装を模倣してもいません。</p> - -<p>このほかにも、JavaScript によるより高度なオブジェクト指向プログラミングのテクニックがありますが、この入門記事で扱う範囲を超えます。</p> - -<h2 id="References" name="References">参考情報</h2> - -<ol> - <li>Wikipedia: "<a href="http://en.wikipedia.org/wiki/Object-oriented_programming" name="cite-1">Object-oriented programming</a>" (<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">日本語版</a>)</li> - <li>Wikipedia: "<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" name="cite-2">Encapsulation (object-oriented programming)</a>" (<a href="http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96">日本語版</a>)</li> -</ol> diff --git a/files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html b/files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index 8d63ce70da..0000000000 --- a/files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: JavaScript で XPath を使用する -slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript ---- -<p>このドキュメントでは、JavaScript の内部、拡張機能、そして Web サイトから <a href="/ja/docs/Web/XPath">XPath</a> を使用するためのインターフェイスについて説明します。Mozilla は <a class="external" href="https://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/">DOM 3 XPath</a> をかなりの量実装しており、XPath 式は HTML と XML ドキュメントの両方に対して実行できます。</p> - -<p>XPath を使用するための主なインターフェースは、<a href="/ja/docs/Web/API/Document">Document</a> オブジェクトの <a href="/ja/docs/Web/API/Document/evaluate">evaluate</a> 関数です。</p> - -<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> - -<p>このメソッドは、<a href="/ja/docs/Glossary/XML">XML</a> ベースのドキュメント (HTML ドキュメントを含む) に対して <a href="/ja/docs/Web/XPath">XPath</a> 式を評価し、<code><a href="/ja/docs/Web/API/XPathResult">XPathResult</a></code> オブジェクトを返します。このメソッドの既存のドキュメントは <a href="/ja/docs/Web/API/Document/evaluate">document.evaluate</a> にありますが、今のところ我々が必要としているものには乏しいです。</p> - -<pre class="brush: js notranslate">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); -</pre> - -<h3 id="Parameters" name="Parameters">Parameters</h3> - -<p><a href="/ja/docs/Web/API/Document/evaluate">evaluate</a> 関数は合計5つのパラメータを取ります。</p> - -<ul> - <li><code>xpathExpression</code>: 評価される XPath 式を含む文字列</li> - <li><code>contextNode</code>: <code>xpathExpression</code> が評価されるべきドキュメント内のノード。<a href="/ja/docs/Web/API/Document">Document</a> ノードが最も一般的に使用されます</li> - <li><code>namespaceResolver</code>: <code>xpathExpression</code> 内に含まれる名前空間接頭辞を渡す関数で、その接頭辞に関連付けられた名前空間 URI を表す文字列を返します。これにより、XPath 式で使用されている接頭辞とドキュメント内で使用されている可能性のある異なる接頭辞との変換が可能になります。この関数は、以下のいずれかの方法で利用できます - <ul> - <li><code><a href="/ja/docs/Using_XPath#Node-specific_evaluator_function" title="en/XPathEvaluator">XPathEvaluator</a></code> オブジェクトの <code><a href="/ja/docs/Web/API/Document/createNSResolver">createNSResolver</a></code> メソッドを使用して<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_Default_Namespace_Resolver">作成します</a>。事実上、これを使用する必要があります</li> - <li><code>null</code>です。これは、HTML ドキュメントや名前空間プレフィックスが使用されていない場合に使用することができます。<code>xpathExpression</code>に 名前空間プレフィックスが含まれている場合、<code>NAMESPACE_ERR</code> というコードで <code>DOMException</code> がスローされることに注意してください</li> - <li>カスタムのユーザ定義関数。詳細は、付録の <a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">ユーザー定義名前空間リゾルバの使用法</a> を参照してください</li> - </ul> - </li> - <li><code>resultType</code>: 評価の結果として返される結果の型を指定する<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#XPathResult_Defined_Constants">定数</a>です。最も一般的に渡される定数は <code>XPathResult.ANY_TYPE</code> で、これは XPath 式の結果を最も自然な型として返します。付録には、<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#XPathResult_Defined_Constants">利用可能な定数</a>の完全なリストを含むセクションがあります。これらの定数は以下の「<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Specifying_the_Return_Type">戻り値の型の指定</a>」のセクションで説明されています</li> - <li><code>result</code>: 既存の <code>XPathResult</code> オブジェクトを指定すると、そのオブジェクトが再利用されて結果が返されます。<code>null</code> を指定すると、新しい <code>XPathResult</code> オブジェクトが作成されます</li> -</ul> - -<h3 id="Return_Value" name="Return_Value">Return Value</h3> - -<p><code>resultType</code> パラメータで<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Specifying_the_Return_Type">指定された</a>型の <code>XPathResult</code> オブジェクトを返します。<code>XPathResult</code> インターフェースは<a href="/ja/docs/Web/API/XPathResult">ここ</a>で定義されています。</p> - -<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</h3> - -<p><a href="/ja/docs/Web/API/document" title="en/DOM/document">document</a> オブジェクトの <code>createNSResolver</code> メソッドを使用して名前空間リゾルバを作成します。</p> - -<pre class="brush: js notranslate">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); -</pre> - -<p><span class="comment">Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre></span> そして、<code>namespaceResolver</code> パラメータとして <code>nsResolver</code> 変数である <code>document.evaluate</code> を渡します。</p> - -<p>注意: XPath は、ヌル名前空間の要素にのみマッチするように、接頭辞のない QNames を定義しています。XPath では、通常の要素参照 (例: <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code> の <code>p[@id='_myid']</code>) に適用されるデフォルトの名前空間を拾う方法はありません。NULL ではない名前空間のデフォルト要素にマッチさせるには、<code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> のような形式を使用して特定の要素を参照する必要があります (<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_a_default_namespace">このアプローチ</a>は、名前空間がわからない動的な XPath の場合にうまく機能します)。後者の方法を取りたい場合は、<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">ユーザ定義の名前空間リゾルバを作成する方法</a>を参照してください。</p> - -<h3 id="Notes" name="Notes">Notes</h3> - -<p>任意の DOM ノードを名前空間を解決するように適応させ、 <a href="/ja/docs/Web/XPath">XPath</a> 式をドキュメント内で出現したノードのコンテキストからの相対評価を簡単に行えるようにします。このアダプタは、ノード上の DOM Level 3 メソッド <code>lookupNamespaceURI</code> と同様に動作し、 <code>lookupNamespaceURI</code> が呼び出された時点でのノードの階層内で利用可能な現在の情報を使用して、指定したプレフィックスから <code>namespaceURI</code> を解決します。また、暗黙の <code>xml</code> 接頭辞も正しく解決します。</p> - -<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Specifying the Return Type</h3> - -<p>The returned variable <code>xpathResult</code> from <code>document.evaluate</code> can either be composed of individual nodes (<a href="#Simple_Types">simple types</a>), or a collection of nodes (<a href="#Node-Set_Types">node-set types</a>).</p> - -<h4 id="Simple_Types" name="Simple_Types">Simple Types</h4> - -<p><code>resultType</code> に希望する結果タイプがどちらかに指定されている場合。</p> - -<ul> - <li><code>NUMBER_TYPE</code> - a double</li> - <li><code>STRING_TYPE</code> - 文字列</li> - <li><code>BOOLEAN_TYPE</code> - 真偽値</li> -</ul> - -<p><code>XPathResult</code> オブジェクトの以下のプロパティにそれぞれアクセスして、式の戻り値を取得します。</p> - -<ul> - <li><code>numberValue</code></li> - <li><code>stringValue</code></li> - <li><code>booleanValue</code></li> -</ul> - -<h5 id="Example" name="Example">Example</h5> - -<p>The following uses the XPath expression <code><a href="/en-US/docs/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> to obtain the number of <code><p></code> elements in an HTML document:</p> - -<pre class="brush: js notranslate">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null ); - -alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' ); -</pre> - -<p>Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the <code>stringValue</code> property is requested, so the following code will <strong>not</strong> work:</p> - -<pre class="brush: js notranslate">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); - -alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' ); -</pre> - -<p>Instead, it will return an exception with the code <code>NS_DOM_TYPE_ERROR</code>.</p> - -<h4 id="Node-Set_Types" name="Node-Set_Types">Node-Set Types</h4> - -<p>The <code>XPathResult</code> object allows node-sets to be returned in 3 principal different types:</p> - -<ul> - <li><a href="#Iterators">Iterators</a></li> - <li><a href="#Snapshots">Snapshots</a></li> - <li><a href="#First_Node">First Nodes</a></li> -</ul> - -<h5 id="Iterators" name="Iterators">Iterators</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> - <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the <code>iterateNext()</code> method of the <code>XPathResult</code>.</p> - -<p>Once we have iterated over all of the individual matched nodes, <code>iterateNext()</code> will return <code>null</code>.</p> - -<p>Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the <code>invalidIteratorState</code> property of <code>XPathResult</code> is set to <code>true</code>, and a <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> exception is thrown.</p> - -<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6> - -<pre class="brush: js notranslate">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); - -try { - var thisNode = iterator.iterateNext(); - - while (thisNode) { - alert( thisNode.textContent ); - thisNode = iterator.iterateNext(); - } -} -catch (e) { - alert( 'Error: Document tree modified during iteration ' + e ); -} -</pre> - -<h5 id="Snapshots" name="Snapshots">Snapshots</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> - <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p> - -<p>Snapshots do not change with document mutations, so unlike the iterators, the snapshot does not become invalid, but it may not correspond to the current document, for example, the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.</p> - -<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6> - -<pre class="brush: js notranslate">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); - -for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) -{ - alert( nodesSnapshot.snapshotItem(i).textContent ); -} -</pre> - -<h5 id="First_Node" name="First_Node">First Node</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>ANY_UNORDERED_NODE_TYPE</code></li> - <li><code>FIRST_ORDERED_NODE_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p> - -<p>Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.</p> - -<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6> - -<pre class="brush: js notranslate">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); - -alert( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); -</pre> - -<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">The ANY_TYPE Constant</h4> - -<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p> - -<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p> - -<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== <pre> </pre></span></p> - -<h2 id="Examples" name="Examples">Examples</h2> - -<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Within an HTML Document</h3> - -<p>The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.</p> - -<p>To extract all the <code><h2></code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p> - -<pre class="brush: js notranslate">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); -</pre> - -<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p> - -<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p> - -<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the <code>iterateNext()</code> method of the returned object:</p> - -<pre class="brush: js notranslate">var thisHeading = headings.iterateNext(); - -var alertText = 'Level 2 headings in this document are:\n' - -while (thisHeading) { - alertText += thisHeading.textContent + '\n'; - thisHeading = headings.iterateNext(); -} -</pre> - -<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p> - -<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Evaluating against an XML document within an Extension</h3> - -<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p> - -<pre class="brush: xml notranslate"><?xml version="1.0"?> -<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > - <person> - <name first="george" last="bush" /> - <address street="1600 pennsylvania avenue" city="washington" country="usa"/> - <phoneNumber>202-456-1111</phoneNumber> - </person> - <person> - <name first="tony" last="blair" /> - <address street="10 downing street" city="london" country="uk"/> - <phoneNumber>020 7925 0918</phoneNumber> - </person> -</people> -</pre> - -<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en-US/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en-US/docs/Web/API/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p> - -<p>JavaScript used in the extensions xul/js documents.</p> - -<pre class="brush: js notranslate">var req = new XMLHttpRequest(); - -req.open("GET", "chrome://yourextension/content/peopleDB.xml", false); -req.send(null); - -var xmlDoc = req.responseXML; - -var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); - -var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); -</pre> - -<h3 id="Note">Note</h3> - -<p>When the XPathResult object is not defined, the constants can be retrieved in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p> - -<pre class="brush: js notranslate">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre> - -<h2 id="Appendix" name="Appendix">Appendix</h2> - -<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Implementing a User Defined Namespace Resolver</h4> - -<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p> - -<pre class="notranslate">'//xhtml:td/mathml:math' -</pre> - -<p>will select all <a href="/en-US/docs/Web/API/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p> - -<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p> - -<pre class="brush: js notranslate">function nsResolver(prefix) { - var ns = { - 'xhtml' : 'http://www.w3.org/1999/xhtml', - 'mathml': 'http://www.w3.org/1998/Math/MathML' - }; - return ns[prefix] || null; -} -</pre> - -<p>Our call to <code>document.evaluate</code> would then looks like:</p> - -<pre class="brush: js notranslate">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); -</pre> - -<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Implementing a default namespace for XML documents</h4> - -<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p> - -<pre class="brush: xml notranslate"><?xml version="1.0" encoding="UTF-8"?> -<feed xmlns="http://www.w3.org/2005/Atom"> - <entry /> - <entry /> - <entry /> -</feed> -</pre> - -<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p> - -<p>One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:</p> - -<pre class="brush: js notranslate">function resolver() { - return 'http://www.w3.org/2005/Atom'; -} -doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null) -</pre> - -<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p> - -<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p> - -<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4> - -<p>Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p> - -<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4> - -<p>If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.</p> - -<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en-US/docs/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en-US/docs/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en-US/docs/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).</p> - -<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p> - -<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p> - -<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p> - -<pre class="brush: js notranslate">var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace -var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null); -var thisitemEl = thislevel.iterateNext(); -</pre> - -<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">XPathResult Defined Constants</h4> - -<table class="standard-table"> - <thead> - <tr> - <td class="header">Result Type Defined Constant</td> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - </thead> - <tbody> - <tr> - <td>ANY_TYPE</td> - <td>0</td> - <td>A result set containing whatever type naturally results from the evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.</td> - </tr> - <tr> - <td>NUMBER_TYPE</td> - <td>1</td> - <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td> - </tr> - <tr> - <td>STRING_TYPE</td> - <td>2</td> - <td>A result containing a single string.</td> - </tr> - <tr> - <td>BOOLEAN_TYPE</td> - <td>3</td> - <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td> - </tr> - <tr> - <td>UNORDERED_NODE_ITERATOR_TYPE</td> - <td>4</td> - <td>A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> - </tr> - <tr> - <td>ORDERED_NODE_ITERATOR_TYPE</td> - <td>5</td> - <td>A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> - </tr> - <tr> - <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> - <td>6</td> - <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> - </tr> - <tr> - <td>ORDERED_NODE_SNAPSHOT_TYPE</td> - <td>7</td> - <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> - </tr> - <tr> - <td>ANY_UNORDERED_NODE_TYPE</td> - <td>8</td> - <td>A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> - </tr> - <tr> - <td>FIRST_ORDERED_NODE_TYPE</td> - <td>9</td> - <td>A result node-set containing the first node in the document that matches the expression.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/XPath">XPath</a></li> - <li><a href="http://www.xml.com/pub/a/2000/08/holman/index.html?page=2#xpath-info">XML Path Language </a>from <em><a href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a> </em>by G. Ken Holman</li> -</ul> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> - -<ul> - <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li> - <li>Original Source Author: James Graham.</li> - <li>Other Contributors: James Thompson.</li> - <li>Last Updated Date: 2006-3-25.</li> -</ul> -</div> diff --git a/files/ja/web/javascript/reference/global_objects/array/index/index.html b/files/ja/web/javascript/reference/global_objects/array/index/index.html deleted file mode 100644 index 1d2e7a4797..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/index/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: index -slug: Web/JavaScript/Reference/Global_Objects/Array/index ---- -<h2 id="Summary" name="Summary">概要</h2> -<p>正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。</p> -<table class="standard-table"> - <thead> - <tr> - <td class="header" colspan="2"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> のプロパティ</td> - </tr> - </thead> - <tbody> - <tr> - <td colspan="2"><b>静的</b></td> - </tr> - <tr> - <td>実装されたバージョン</td> - <td>JavaScript 1.2</td> - </tr> - </tbody> -</table> diff --git a/files/ja/web/javascript/reference/global_objects/array/input/index.html b/files/ja/web/javascript/reference/global_objects/array/input/index.html deleted file mode 100644 index 166ed28656..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/input/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: input -slug: Web/JavaScript/Reference/Global_Objects/Array/input ---- -<p> -</p><p>{{ 英語版章題("Summary") }} -</p> -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81"> 概要 </h3> -<p>正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 -</p> -<table class="fullwidth-table"> -<tbody><tr> -<td class="header" colspan="2"><a href="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> のプロパティ</td> -</tr> -<tr> -<td colspan="2"><b>静的</b></td> -</tr> -<tr> -<td>実装されたバージョン:</td> -<td>JavaScript 1.2, NES 3.0</td> -</tr> -</tbody></table> -<div class="noinclude"> -</div> -{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Array/input", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/input", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Array/input" } ) }} diff --git a/files/ja/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index dc20c31a41..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Junk - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<h2 id="Description" name="Description">解説</h2> - -<p>{{jsxref("Array")}} インスタンスは、 <code>Array.prototype</code> を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての <code>Array</code> オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。</p> - -<p>ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript への機能の追加</a>の際に問題が発生することがあります。</p> - -<p>豆知識: <code>Array.prototype</code> はそれ自体が {{jsxref("Array")}} です。</p> - -<pre class="brush: js notranslate">Array.isArray(Array.prototype); // true -</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>オブジェクトの prototype を生成する関数を指定します。</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>配列内の要素数を反映します。</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Mutator メソッド</h3> - -<p>これらのメソッドは、配列を書き換えます。</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>配列内で配列内の連続した要素をコピーします。</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>配列から最後の要素を取り除き、戻り値として返します。</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>配列から最初の要素を取り除き、その要素を返します。</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>配列内で要素を整列し、配列を返します。</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">アクセサーメソッド</h3> - -<p>これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>配列のすべての要素を結合した文字列を返します。</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>配列の一部を取り出して新しい配列として返します。</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">反復メソッド</h3> - -<p>いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の <code>length</code> 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>配列中のそれぞれの要素について関数を呼び出します。</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各インデックスのキーを保持します。</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> -</dl> - -<h3 id="Generic_methods_non-standard" name="Generic_methods_(non-standard)">ジェネリックメソッド (非標準)</h3> - -<p>JavaScript の <code>Array</code> オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも <code>length</code> プロパティを持ち、数値プロパティ名を使う (<code>array[5]</code> のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの <code>length</code> や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや <code>length</code> が変更可能であることを要求するため、<code>length</code> プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td><code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td><code>includes()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 46bf817819..0000000000 --- a/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -tags: - - Experimental - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>AsyncFunction.prototype</strong></code> プロパティは、{{jsxref("AsyncFunction")}} プロトタイプオブジェクトを表します。</p> - -<h2 id="説明">説明</h2> - -<p>{{jsxref("AsyncFunction")}} オブジェクトは、<code>AsyncFunction.prototype</code> を継承します。<code>AsyncFunction.prototype</code> は修正できません。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>初期値は {{jsxref("AsyncFunction")}}。</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>"AsyncFunction" を返す。</dd> -</dl> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Async Function', '#async-function-definitions', 'async function')}}</td> - <td>{{Spec2('Async Function')}}</td> - <td>提案</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th> Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("52.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>基本サポート</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("52.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/atomics/wake/index.html b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.html index be17a5f891..be17a5f891 100644 --- a/files/ja/web/javascript/reference/global_objects/atomics/wake/index.html +++ b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.html diff --git a/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html b/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html deleted file mode 100644 index c25d3dd476..0000000000 --- a/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: FinalizationRegistry.prototype.cleanupSome() -slug: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome -tags: - - FinalizationRegistry - - JavaScript - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome ---- -<div>{{JSRef}}</div> - -<p><strong>cleanupSome()</strong> メソッドは、 {{jsxref("FinalizationRegistry")}} 内のオブジェクトのうち、まだコールバックが呼ばれていないが回収されているオブジェクトの数が実装で選択された場合に、クリーンアップコールバックを起動します。このメソッドはオプションです。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>registry</var>.cleanupSome([<var>callback</var>]);</code> -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>callback</var></code> {{optional_inline}}</dt> - <dd>この <code>cleanupSome</code> への呼び出しによって起動されるコールバックだけに使用するコールバックを指定します。指定した場合、このコールバックは <code>FinalizationRegistry</code> で作成されたものの代わりに使用されます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><code>undefined</code> です。</p> - -<h2 id="Notes" name="Notes">注</h2> - -<p>通常、この関数を呼び出すことはありません。コールバックを適切に行うためには、 JavaScript エンジンのガベージコレクターに任せてください。この関数は主に、イベントループを発生させない、通常の JavaScript コードよりも WebAssembly で出てくる可能性の高い、長期に実行されるコードに対応するために存在します。また、コールバックが呼び出されない場合があることにも注意してください (例えば、ターゲットが回収されたレジストリ項目が存在しない場合)。</p> - -<p>レジストリからクリーンアップされる (クリーンアップコールバックを呼び出す) 回収オブジェクトの項目数は、実装で定義されています。実装によっては、対象となる項目を一つだけ削除したり、対象となるすべての項目を削除したり、あるいはその間のどこかで削除したりすることもあります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_cleanupSome" name="Using_cleanupSome">cleanupSome の使用</h3> - -<pre class="brush: js notranslate">registry.cleanupSome?.(heldValue => { - // ... -}); -</pre> - -<p>このメソッドはオプションであり、実装によってはこのメソッドを持たない場合があります。詳細は <a href="https://github.com/whatwg/html/issues/5446">HTML issue #5446</a> を参照してください。このメソッドはオプションなので、それを呼び出す前にそのメソッドが存在することを確認する必要があります。そのための一つの方法は、上の例のように<a href="/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining">オプション連結</a> (<code>?.</code>) を使用することです。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WeakRefs', '#sec-finalization-registry.prototype.cleanupSome', 'FinalizationRegistry.prototype.cleanupSome')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("javascript.builtins.FinalizationRegistry.cleanupSome")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("FinalizationRegistry")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 5705852c36..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -tags: - - DateTimeFormat - - Internationalization - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> プロパティは、 {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} コンストラクターに対するプロトタイプオブジェクトを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Intl.DateTimeFormat</code> インスタンスの解説については {{jsxref("DateTimeFormat")}} を確認して下さい。</p> - -<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスは <code>Intl.DateTimeFormat.prototype</code> から継承します。プロトタイプオブジェクトへの変更はすべての {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスによって継承されます。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> - <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} への参照です。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt> - <dd>ロケールおよびこの {{jsxref("DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd> - <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.</dd> - <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算されたオプションをもった新しいオブジェクトを返します。</dd> - <dt>{{jsxref("DateTimeFormat.formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt> - <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and formats the date range in the most concise way based on the locale and options provided when instantiating {{jsxref("DateTimeFormat", "DateTimeFormat")}}.</dd> - <dt>{{jsxref("DateTimeFormat.formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt> - <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and returns an Array of objects containing the locale-specific tokens representing each part of the formatted date range.</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html deleted file mode 100644 index fedccef945..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: WebAssembly.Instance.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="説明">説明</h2> - -<p>全ての {{jsxref("WebAssembly.Instance")}} インスタンスは <code>Instance.prototype</code> を継承します。{{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Instance")}} インスタンスに影響するように変更可能です。 </p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code>Instance.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Instance()")}} コンストラクタです。</dd> - <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt> - <dd>WebAssembly モジュールインスタンスからエクスポートされた全ての関数をメンバとして持つオブジェクトを返します。これらは、JavaScriptからアクセスして使用することができます。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> - -<p>なし。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WebAssembly.Instance()")}}</li> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html deleted file mode 100644 index 6d837f2f73..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.Memory.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype -tags: - - JavaScript - - Property - - Prototype - - WebAssembly - - memory -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.Memory</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="説明">説明</h2> - -<p>全ての {{jsxref("WebAssembly.Memory")}} インスタンスは <code>Memory.prototype</code> を継承します。 {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Memory")}} インスタンスに影響するように変更可能です。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code>Memory.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Memory()")}} コンストラクタです。</dd> - <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>メモリーに格納されているバッファを返すアクセサプロパティ。</dd> - <dt> - <h2 id="メソッド">メソッド</h2> - </dt> - <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> - <dd>指定した WebAssembly ページの数 (64KBを1単位とする) で <code>Memory</code> インスタンスのサイズを増やします。</dd> -</dl> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WebAssembly.Memory()")}}</li> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html deleted file mode 100644 index 84709eb736..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WebAssembly.Table.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype -tags: - - JavaScript - - Property - - Prototype - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプを表します。</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="説明">説明</h2> - -<p>全ての {{jsxref("WebAssembly.Table")}} インスタンスは <code>Table.prototype</code> を継承します。{{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Table")}} インスタンスに影響するように変更可能です。</p> - -<h2 id="プロパティ">プロパティ</h2> - -<dl> - <dt><code>Table.prototype.constructor</code></dt> - <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Table()")}} コンストラクタです。</dd> - <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> - <dd>テーブルの長さを返します。すなわち、要素数です。</dd> - <dt> - <h2 id="メソッド">メソッド</h2> - </dt> - <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> - <dd>アクセサ関数。インデックスから格納された要素を取得します。</dd> - <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> - <dd>指定した要素数で Table インスタンスを拡張します。</dd> - <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> - <dd>指定したインデックスに要素を格納します。</dd> -</dl> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WebAssembly.Table")}}</li> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/comparison_operators/index.html b/files/ja/web/javascript/reference/operators/comparison_operators/index.html deleted file mode 100644 index 5010c8eb89..0000000000 --- a/files/ja/web/javascript/reference/operators/comparison_operators/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: 比較演算子 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators -tags: - - JavaScript - - Operator - - Reference - - 演算子 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript には、厳密な比較と型変換の比較の両方があります。厳密な比較 (例: <code>===</code>) は、オペランドが同じ型で、内容も一致している場合にのみ真になります。もっとよく使用される抽象的な比較 (例: <code>==</code>) は、比較する前にオペランドを同じ型に変換します。抽象的な関係比較 (例: <code><=</code>) では、比較前にまずオペランドがプリミティブ型に変換され、それから同じ型に変換されます。</p> - -<p>文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<div> -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> -</div> - -<div></div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>比較の機能は以下のとおりです。</p> - -<ul> - <li>2 つの文字列が厳密に等しくなるのは、字の順序が等しく、長さが等しく、対応する位置の文字が等しいときです。</li> - <li>2 つの数字が厳密に等しくなるのは、数値的に等しいとき (数字の値が等しいとき) です。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> は、どんなものとも (Nan とさえも) 等しくなりません。プラスゼロとマイナスゼロは互いと等しくなります。</li> - <li>2 つの論理オペランドが厳密に等しくなるのは、どちらも <code>true</code> か、どちらも <code>false</code> のときです。</li> - <li>2 つの異なるオブジェクトは、厳密な比較でも抽象的な比較でも等しくなりません。</li> - <li>オブジェクト比較が等しくなるのは、オペランドが同じオブジェクトを参照しているときだけです。</li> - <li>Null と Undefined 型は、自分自身と厳密に等しく、また互いに抽象的に等しくなります。</li> -</ul> - -<h2 id="Equality_operators" name="Equality_operators">等価演算子</h2> - -<h3 id="Equality" name="Equality">等価 (==)</h3> - -<p>等価演算子は、2 つのオペランドが<strong>同じ型でないならば</strong>オペランドを変換して、それから厳密な比較を行います。<strong>両方のオペランドがオブジェクトならば</strong>、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。</p> - -<h4 id="Syntax" name="Syntax">構文</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Examples" name="Examples">例</h4> - -<pre class="brush: js notranslate">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 == object2 // false -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Inequality" name="Inequality">不等価 (!=)</h3> - -<p>不等価演算子は、オペランド同士が等しくないならば真を返します。2 つのオペランドが<strong>同じ型でないならば</strong>、JavaScript は適切な型にオペランドを変換して比較しようとします。<strong>両方のオペランドがオブジェクトならば</strong>、JavaScript は内部参照を比較するので、オペランドがメモリ内の異なるオブジェクトを参照するときには等しくなりません。</p> - -<h4 id="Syntax_2" name="Syntax_2">構文</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Examples_2" name="Examples_2">例</h4> - -<pre class="brush: js notranslate">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Identity" name="Identity">一致 / 厳密等価 (===)</h3> - -<p>厳密等価演算子は、<strong>型変換なしで</strong>オペランド同士が (上に示した通り) 厳密に等しければ真を返します。</p> - -<h4 id="Syntax_3" name="Syntax_3">構文</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Examples_3" name="Examples_3">例</h4> - -<pre class="brush: js notranslate">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 //false</pre> - -<h3 id="Nonidentity" name="Nonidentity">不一致 / 厳密不等価 (!==)</h3> - -<p>厳密不等価演算子は、<strong>オペランド同士が等しくないか、型が等しくない、あるいはその両方</strong>ならば真を返します。</p> - -<h4 id="Syntax_4" name="Syntax_4">構文</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Examples_4" name="Examples_4">例</h4> - -<pre class="brush: js notranslate">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Relational_operators" name="Relational_operators">関係演算子</h2> - -<p>これらの演算子のそれぞれは、比較が行われる前に、そのオペランドをプリミティブに{{Glossary("Type_coercion", "型強制")}}します。両方とも文字列として終わる場合は、辞書順で比較され、そうでない場合は数値に変換されて比較されます。 <code>NaN</code> との比較は常に <code>false</code> を生み出します。</p> - -<h3 id="Greater_than_operator" name="Greater_than_operator">大なり演算子 (>)</h3> - -<p>大なり演算子は、左オペランドが右オペランドより大きければ、真を返します。</p> - -<h4 id="Syntax_5" name="Syntax_5">構文</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Examples_5" name="Examples_5">例</h4> - -<pre class="brush: js notranslate">4 > 3 // true -</pre> - -<h3 id="Greater_than_or_equal_operator" name="Greater_than_or_equal_operator">大なりイコール演算子 (>=)</h3> - -<p>大なりイコール演算子は、左オペランドが右オペランド以上ならば、真を返します。</p> - -<h4 id="Syntax_6" name="Syntax_6">構文</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Examples_6" name="Examples_6">例</h4> - -<pre class="brush: js notranslate">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Less_than_operator" name="Less_than_operator">小なり演算子 (<)</h3> - -<p>小なり演算子は、左オペランドが右オペランドより小さければ、真を返します。</p> - -<h4 id="Syntax_7" name="Syntax_7">構文</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Examples_7" name="Examples_7">例</h4> - -<pre class="brush: js notranslate">3 < 4 // true -</pre> - -<h3 id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">小なりイコール演算子 (<=)</h3> - -<p>小なりイコール演算子は、左オペランドが右オペランド以下ならば、真を返します。</p> - -<h4 id="Syntax_8" name="Syntax_8">構文</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Examples_8" name="Examples_8">例</h4> - -<pre class="brush: js notranslate">3 <= 4 // true -3 <= 3 // true -</pre> - -<h2 id="Using_the_equality_operators" name="Using_the_equality_operators">等価演算子の使用</h2> - -<p>標準等価演算子 (<code>==</code> と <code>!=</code>) は 2 つのオペランドの比較に<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象的等価比較アルゴリズム</a>を使用します。オペランドの型が異なる場合は、比較を行う前にそれらを同じ型に変換しようとします。例えば <code>5 == '5'</code> という式では、比較を行う前に右オペランドの文字列を数値に変換します。</p> - -<p>厳密等価演算子 (<code>===</code> と <code>!==</code>) は<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">厳密等価比較アルゴリズム</a>を使用して、オペランドの型が同一かどうかに関する比較も行います。オペランドの型が異なれば、例えば <code>5</code> と <code>'5'</code> の比較では、同一性比較 <code>5 !== '5'</code> は <code>true</code> と評価され、 <code>5 === '5'</code> のチェックは <code>false</code> 評価されます。</p> - -<p>厳密等価演算子を使うのは、オペランドが特定の型の特定の値でなければならない場合、言い換えればオペランドの正確な型が重要な場合です。それ以外では、2 つのオペランドが同じ型でなくても比較が可能になる、標準的な等価演算子を使えます。</p> - -<p>比較に型の変換が関わるとき (つまり厳密でない比較のとき)、 JavaScript は以下のように {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 型のオペランドを変換します。</p> - -<ul> - <li>数値と文字列を比較するとき、文字列は数値に変換されます。 JavaScript は文字列の数値リテラルを <code>Number</code> 型の値に変換しようとします。まず、文字列の数値リテラルから数学的な値を引き出します。次に、その値を最も近い <code>Number</code> 型に丸めます。</li> - <li>もしオペランドの片方が <code>Boolean</code> ならば、その Boolean オペランドが <code>true</code> の場合 1 に、<code>false</code> の場合は +0 に変換されます。</li> - <li>オブジェクトを数値または文字列と比較すると、 JavaScript はそのオブジェクトの既定値を返そうとします。演算子は、オブジェクトの <code>valueOf</code> や <code>toString</code> といったメソッドを用いて、プリミティブな値、 <code>String</code> か <code>Number</code> の値に変換しようとします。変換に失敗したら、ランタイムエラーが発生します。</li> - <li>オブジェクトがプリミティブ値に変換されるのは、比較対象がプリミティブ値であるときだけです。両方のオペランドがオブジェクトなら、オブジェクトとして比較され、両方が同じオブジェクトを参照するときだけ真となります。</li> -</ul> - -<div class="note"><strong>メモ:</strong> String オブジェクトはオブジェクト型であり、文字列型ではありません！ String オブジェクトはほとんど使わないので、次の結果に驚くかもしれません。</div> - -<pre class="brush:js notranslate">// 両方のオペランドが文字列型 (すなわちプリミティブな文字列) なので、true -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false -a == b - -// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false -a === b - -// a と 'foo' は異なる型で、比較前にオブジェクト (a) は -// 文字列 'foo' に変換されるので、真 -a == 'foo'</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">等価性の比較とその使いどころ</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_operators/index.html b/files/ja/web/javascript/reference/operators/logical_operators/index.html deleted file mode 100644 index 8b43c3de26..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_operators/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: 論理演算子 -slug: Web/JavaScript/Reference/Operators/Logical_Operators -tags: - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> - -<p>{{ 原語併記("論理演算子", "Logical operators") }} は、基本的に真偽（論理）値とともに用いられ真偽値を返します。しかし、<code>&&</code> および <code>||</code> 演算子は真偽値ではない値も使うことができるため、その場合は、真偽値ではない値を返すことがあります。その場合の考え方は以下の「説明」の欄の記載の通りとなります。</p> - -<h2 id="Description" name="Description">説明</h2> - -<p>論理演算子を以下の表で説明します。:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>演算子</th> - <th>使用法</th> - <th>説明</th> - </tr> - <tr> - <td>論理 AND(<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td><code>expr1</code> を false と見ることができる場合は、<code>expr1</code> を返します。そうでない場合は、<code>expr2</code> を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、<code>&&</code> は、true を返し、そうでなければ、false を返します。</td> - </tr> - <tr> - <td>論理 OR (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td><code>expr1</code> を true と見ることができる場合は、<code>expr1</code> を返します。そうでない場合は、<code>expr2</code> を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、<code>||</code> は、true を返し、両方とも false の場合は、false を返します。</td> - </tr> - <tr> - <td>論理 NOT (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td>単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。</td> - </tr> - </tbody> -</table> - -<p><code>true</code> に変換できる値は、いわゆる {{Glossary("truthy")}} です。<code>false</code> に変換できる値は、いわゆる {{Glossary("falsy")}} です。</p> - -<p><code>false</code> と見ることができる式の例は、null、0、空文字列 ("")、あるいは、<code>undefined</code> と評価されるものです。</p> - -<p><code>&&</code> と <code>||</code> 演算子が真偽値ではない値である演算対象とともに用いることができても、それらは、真偽演算子と考えることができます。なぜなら、それらの戻り値は、常に、真偽値と見ることができるからです。</p> - -<h3 id=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1" name=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1">ショートサーキット評価</h3> - -<p>論理演算子は左から右へ評価されるため、論理演算子で左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価といいます。例えば、A && Bという論理式があった場合、Aがfalseなら、その時点で式全体の結果はfalseで確定するため、Bがどうであるかについてはチェックしません。:</p> - -<ul> - <li><code>false && (<em>anything</em>)</code> をショートサーキット評価すると、false になります。</li> - <li><code>true || (<em>anything</em>)</code> をショートサーキット評価すると、true になります。</li> -</ul> - -<p> 上記の式の anything の部分は評価されません。また、<strong>上記の式の anything の部分は (括弧で示しているとおり) ひとつの論理式ですので注意してください。</strong></p> - -<p>例えば、以下の 2 つの関数は等価です。</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>しかし、以下の式は等価ではありません。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">演算子の優先順位</a>のためであり、右側の演算子をひとつの式にする (必要に応じて括弧でグループ化する) 必要性の重要度を高めています。</p> - -<pre class="brush: js">false && true || true // true を返す -false && (true || true) // false を返す</pre> - -<h3 id=".E8.AB.96.E7.90.86_AND_.28&&.29" name=".E8.AB.96.E7.90.86_AND_.28&&.29">論理 AND (<code>&&</code>)</h3> - -<p>以下のコードは、<code>&&</code> (論理 AND) 演算子の例を示しています。</p> - -<pre class="brush: js">a1 = true && true // t && t true を返します。 -a2 = true && false // t && f false を返します。 -a3 = false && true // f && t false を返します。 -a4 = false && (3 == 4) // f && f false を返します。 -a5 = "Cat" && "Dog" // t && t "Dog" を返します。 -a6 = false && "Cat" // f && t false を返します。 -a7 = "Cat" && false // t && f false を返します。 -</pre> - -<h3 id=".E8.AB.96.E7.90.86_OR_.28||.29" name=".E8.AB.96.E7.90.86_OR_.28||.29">論理 OR (<code>||</code>)</h3> - -<p>以下のコードは、<code>||</code> (論理 OR) 演算子の例を示しています。</p> - -<pre class="brush: js">o1 = true || true // t || t true を返します。 -o2 = false || true // f || t true を返します。 -o3 = true || false // t || f true を返します。 -o4 = false || (3 == 4) // f || f false を返します。 -o5 = "Cat" || "Dog" // t || t "Cat" を返します。 -o6 = false || "Cat" // f || t "Cat" を返します。 -o7 = "Cat" || false // t || f "Cat" を返します。 -</pre> - -<h3 id=".E8.AB.96.E7.90.86_NOT_.28.21.29" name=".E8.AB.96.E7.90.86_NOT_.28.21.29">論理 NOT (<code>!</code>)</h3> - -<p>以下のコードは、<code>!</code> (論理 NOT) 演算子の例を示しています。</p> - -<pre class="brush: js">n1 = !true // !t false を返します。 -n2 = !false // !f true を返します。 -n3 = !"Cat" // !t false を返します。 -</pre> - -<h3 id="Conversion_rules" name="Conversion_rules">変換規則</h3> - -<h4 id="Converting_AND_to_OR" name="Converting_AND_to_OR">AND から OR への変換</h4> - -<p>Boolean について以下の演算を行います:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>これは以下の演算と等価です:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Converting_OR_to_AND" name="Converting_OR_to_AND">OR から AND への変換</h4> - -<p>Boolean について以下の演算を行います:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>これは以下の演算と等価です:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Converting_between_NOTs" name="Converting_between_NOTs">NOT 間の変換</h4> - -<p>Boolean について以下の演算を行います:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>これは以下の演算と等価です:</p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="Removing_nested_parentheses" name="Removing_nested_parentheses">入れ子の括弧を削除する</h3> - -<p>論理演算子は左から右へ評価されるため、複雑な式の中にある括弧をいくつかの規則に従って削除することができます。</p> - -<h4 id="Removing_nested_AND" name="Removing_nested_AND">入れ子の AND を削除する</h4> - -<p>Boolean について以下の複雑な演算を行います:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>これは以下の演算と等価です:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Removing_nested_OR" name="Removing_nested_OR">入れ子の OR を削除する</h4> - -<p>Boolean について以下の複雑な演算を行います:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>これは以下の演算と等価です:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>最初期の定義</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>仕様書内のいくつかのセクションで定義: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>仕様書内のいくつかのセクションで定義: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>仕様書内のいくつかのセクションで定義: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>論理 AND (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>論理 OR (<code>||</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>論理 NOT (<code>!</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>機能</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>論理 AND (<code>&&</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>論理 OR (<code>||</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>論理 NOT (<code>!</code>)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/special/index.html b/files/ja/web/javascript/reference/operators/special/index.html deleted file mode 100644 index cb220a008d..0000000000 --- a/files/ja/web/javascript/reference/operators/special/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Special -slug: Web/JavaScript/Reference/Operators/Special ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/web/javascript/reference/operators/special_operators/index.html b/files/ja/web/javascript/reference/operators/special_operators/index.html deleted file mode 100644 index febf3ac3d6..0000000000 --- a/files/ja/web/javascript/reference/operators/special_operators/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Special Operators -slug: Web/JavaScript/Reference/Operators/Special_Operators ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/web/javascript/reference/reserved_words/index.html b/files/ja/web/javascript/reference/reserved_words/index.html deleted file mode 100644 index fabc275890..0000000000 --- a/files/ja/web/javascript/reference/reserved_words/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 予約語 -slug: Web/JavaScript/Reference/Reserved_Words -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words ---- -<p>以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は <a href="/ja/docs/ECMAScript">ECMAScript</a> の仕様で既存のキーワードとして予約されているものです。</p> - -<div class="threecolumns"> -<ul> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">case</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">catch</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/continue" title="JavaScript/Reference/Statements/continue">continue</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/debugger" title="JavaScript/Reference/Statements/debugger">debugger</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">default</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/delete">delete</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/do...while" title="JavaScript/Reference/Statements/do...while">do</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">else</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">finally</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/function" title="JavaScript/Reference/Statements/function">function</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">if</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">in</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/new">new</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/return" title="JavaScript/Reference/Statements/return">return</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">switch</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this">this</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/throw" title="JavaScript/Reference/Statements/throw">throw</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">try</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/typeof">typeof</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/void">void</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/while" title="JavaScript/Reference/Statements/while">while</a></code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/with" title="JavaScript/Reference/Statements/with">with</a></code></li> -</ul> -</div> - -<h2 id="Words_reserved_for_possible_future_use" name="Words_reserved_for_possible_future_use">将来の使用を見越した予約語</h2> - -<p>以下は ECMAScript の仕様で将来のキーワードとして予約されているものです。現在は特別な機能を持っていませんが、将来機能を持つときのために、識別子として使用できません。このキーワードは、厳格モード、非厳格モードの両方で使用できません。</p> - -<div class="note"><strong>注記:</strong> Firefox 5 (JavaScript 1.8.6) より以前では、これらのキーワードは厳格モードでないときには使用できました。この ECMAScript 違反は Firefox 5 で修正されました。</div> - -<div class="threecolumns"> -<ul> - <li><code>class</code></li> - <li><code>enum</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a></code></li> - <li><code>extends</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a></code></li> - <li><code>super</code></li> -</ul> -</div> - -<p>以下は <a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">厳格モードのコード</a> として実行されたときに 、ECMAScript の仕様で将来のキーワードとして 予約されているものです。ただし、JavaScript 1.7 以上では <code>let</code> と <code>yield</code> は伝統的な Mozilla 特有の機能を持っています。</p> - -<div class="threecolumns"> -<ul> - <li><code>implements</code></li> - <li><code>interface</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></code></li> - <li><code>package</code></li> - <li><code>private</code></li> - <li><code>protected</code></li> - <li><code>public</code></li> - <li><code>static</code></li> - <li><code><a href="/ja/docs/JavaScript/Reference/Statements/yield" title="JavaScript/Reference/Statements/yield">yield</a></code></li> -</ul> -</div> - -<p><code><a href="/ja/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const">const</a></code> は ECMAScript の仕様によって将来のキーワードとして予約されていますが、Mozilla やほとんどの他のブラウザが非標準の拡張として実装していることに注意してください。さらに、 <a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a> と <a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a> はかつて Mozilla で実装されていましたが、現在では予約語となっています。</p> - -<p>加えて、 <code>null</code> 、 <code>true</code> 、 <code>false</code> リテラルは ECMAScript の仕様で予約されています。</p> - -<h2 id="Reserved_word_usage" name="Reserved_word_usage">予約語の利用</h2> - -<p>実際に、予約語は識別子のみに適用されます。<span class="comment-copy"><a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a> の記述にあるように、これらは全て予約語を排除しない識別名です。</span></p> - -<p><span class="comment-copy"><code>a.import</code></span><br> - <span class="comment-copy"><code>a["import"]</code></span><br> - <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p> - -<p><span class="comment-copy">反対に、以下は識別子であるので違反です。識別子は関数宣言や関数式に使用されます。</span></p> - -<p><span class="comment-copy"><code>function import() {}</code></span></p> diff --git a/files/ja/web/javascript/reference/statements/yield/index.html b/files/ja/web/javascript/reference/statements/yield/index.html deleted file mode 100644 index 69be44e8d9..0000000000 --- a/files/ja/web/javascript/reference/statements/yield/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Reference/Statements/yield -translation_of: Web/JavaScript/Reference/Operators/yield -translation_of_original: Web/JavaScript/Reference/Statements/yield ---- -<p>『 <a href="/ja/docs/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7 の新機能</a>』、『<a href="/ja/docs/JavaScript/Guide/Iterators_and_Generators">イテレータとジェネレータ</a>』 を参照して下さい。</p> diff --git a/files/ja/web/manifest/serviceworker/index.html b/files/ja/web/manifest/serviceworker/index.html deleted file mode 100644 index 7215a877d7..0000000000 --- a/files/ja/web/manifest/serviceworker/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: serviceworker -slug: Web/Manifest/serviceworker -tags: - - Manifest - - ServiceWorker - - Web - - マニフェスト -translation_of: Web/Manifest/serviceworker ---- -<div>{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}</div> - -<div>{{obsolete_header}}</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">型</th> - <td><code>Object</code></td> - </tr> - <tr> - <th scope="row">必須</th> - <td>いいえ</td> - </tr> - </tbody> -</table> - -<p><dfn><code>serviceworker</code></dfn> メンバーは開発者が PWA を制御するためにインストールする<a href="/en-US/docs/Web/API/Service_Worker_API">サービスワーカー</a>を記述します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: json">"serviceworker": { - "src": "./serviceworker.js", - "scope": "/app", - "type": "", - "update_via_cache": "none" -} -</pre> - -<h2 id="Values" name="Values">値</h2> - -<p>サービスワーカーには以下の値が含まれます (<code>src</code> のみが必須です)。</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">メンバー</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>src</code></td> - <td>サービスワーカーのスクリプトのダウンロード元となる URL。これだけが <code>serviceworker</code> メンバーで必須です。</td> - </tr> - <tr> - <td><code>scope</code></td> - <td>サービスワーカーの登録スコープを定義する URL を表す文字列で、サービスワーカーが制御できる URL の範囲を表します。これは通常、アプリケーションのベース URL からの相対 URL です。既定では、サービスワーカー登録のスコープ値は、サービスワーカーのスクリプトが置かれているディレクトリに設定されています。</td> - </tr> - <tr> - <td><code>type</code></td> - <td>?</td> - </tr> - <tr> - <td><code>update_via_cache</code></td> - <td> - <p>ユーザーエージェントがサービスワーカーを読み込むときにキャッシュを回避するかどうかです。</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("html.manifest.serviceworker")}}</p> diff --git a/files/ja/web/opensearch/index.html b/files/ja/web/opensearch/index.html new file mode 100644 index 0000000000..91cf05bed8 --- /dev/null +++ b/files/ja/web/opensearch/index.html @@ -0,0 +1,145 @@ +--- +title: Creating OpenSearch plugins for Firefox +slug: Creating_OpenSearch_plugins_for_Firefox +tags: + - Add-ons + - Search plugins +translation_of: Web/OpenSearch +--- +<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2> +<p><a href="/ja/Firefox_2_for_developers" title="ja/Firefox_2_for_developers">Firefox 2</a> は検索プラグインとして <a class="external" href="http://opensearch.org/">OpenSearch</a> 記述フォーマットをサポートしています。<a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">OpenSearch 記述シンタックス</a>を使ったプラグインは IE 7 と Firefox で互換性があります。このため、ウェブでの利用で推奨されたフォーマットです。</p> +<p>Firefox は{{ 訳語("検索サジェスト", "search suggestions") }}と <code>SearchForm</code> 要素のような <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">OpenSearch 記述シンタックス</a>に含まれていない追加の検索機能もサポートします。この記事では Firefox 特有の機能をサポートした OpenSearch 互換の検索プラグインの作成にフォーカスをあてていきます。</p> +<p>OpenSearch 記述ファイルは<a href="#.E6.A4.9C.E7.B4.A2.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E8.87.AA.E5.8B.95.E6.A4.9C.E5.87.BA">検索プラグインの自動検出</a>に書かれているように通知でき、<a href="/ja/Adding_search_engines_from_web_pages" title="ja/Adding_search_engines_from_web_pages">Web ページから検索エンジンを追加する</a>に書かれているようにプログラム的にインストールできます。</p> +<h2 id="OpenSearch_.E8.A8.98.E8.BF.B0.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB" name="OpenSearch_.E8.A8.98.E8.BF.B0.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB">OpenSearch 記述ファイル</h2> +<p>検索エンジンを記述した XML ファイルはとてもシンプルで、以下の基本的なテンプレートに従います。あなたが書いている検索エンジンに応じて、斜体になっている箇所をカスタマイズする必要があります。</p> +<pre class="eval"><OpenSearchDescription xmlns="<span class="nowiki">http://a9.com/-/spec/opensearch/1.1/</span>" + xmlns:moz="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"> +<ShortName><em>engineName</em></ShortName> +<Description><em>engineDescription</em></Description> +<InputEncoding><em>inputEncoding</em></InputEncoding> +<Image width="16" height="16">data:image/x-icon;base64,<em>imageData</em></Image> +<Url type="text/html" method="<em>method</em>" template="<em>searchURL</em>"> + <Param name="<em>paramName1</em>" value="<em>paramValue1</em>"/> + ... + <Param name="<em>paramNameN</em>" value="<em>paramValueN</em>"/> +</Url> +<Url type="application/x-suggestions+json" template="<em>suggestionURL</em>"/> +<moz:SearchForm><em>searchFormURL</em></moz:SearchForm> +</OpenSearchDescription> +</pre> +<dl> + <dt> + <strong>ShortName</strong></dt> + <dd> + 検索エンジンの短い名前。</dd> +</dl> +<dl> + <dt> + <strong>Description</strong></dt> + <dd> + 検索エンジンの簡単な説明。</dd> +</dl> +<dl> + <dt> + <strong>InputEncoding</strong></dt> + <dd> + 検索エンジンがデータの入力に使っているエンコーディング。</dd> +</dl> +<dl> + <dt> + <strong>Image</strong></dt> + <dd> + 検索エンジンを表す Base-64 でエンコードされた 16x16 のアイコン。ここに置くためのデータを作成するのに使える便利なツールの一つはここで見付かります: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>。</dd> +</dl> +<dl> + <dt> + <strong>Url</strong></dt> + <dd> + 検索に使う 1 つまたは複数の URL を記述します。<code>method</code> 属性は結果を得るために <code>GET</code> と <code>POST</code> リクエストのどちらを使うか指定します。<code>template</code> 属性は検索クエリのベースとなる URL を指定します。</dd> + <dd> + <div class="note"> + <strong>注意:</strong> Internet Explorer 7 は <code>POST</code> リクエストをサポートしていません。</div> + </dd> +</dl> +<dl> + <dd> + Firefox がサポートしている URL タイプは 2 つです:</dd> +</dl> +<ul> + <li><code>type="text/html"</code> は実際の検索結果そのものの URL を設定するために使われます。</li> + <li><code>type="application/x-suggestions+json"</code> は検索サジェストを得るために使われる URL を設定するために使われます。</li> +</ul> +<dl> + <dd> + どちらの URL のタイプでも、ユーザが検索バーに入力した検索語句に置き換えられる <code>{searchTerms}</code> を使うことができます。サポートしている他の動的な検索パラメータは <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1/Draft_3#OpenSearch_1.1_parameters">OpenSearch 1.1 パラメータ</a>に記述されています。</dd> +</dl> +<dl> + <dd> + 検索サジェストのクエリに指定された URL のテンプレートは JavaScript Object Notation (JSON) フォーマットで補完リストを取得するために使われます。サーバ上で検索サジェストのサポートを実装する方法の詳細は <a href="/ja/Supporting_search_suggestions_in_search_plugins" title="ja/Supporting_search_suggestions_in_search_plugins">検索プラグインでの検索サジェストのサポート</a>を見てください。</dd> +</dl> +<p><img alt="Image:SearchSuggestionSample.png" class="internal" src="/@api/deki/files/1794/=SearchSuggestionSample.png"></p> +<dl> + <dt> + <strong>Param</strong></dt> + <dd> + 検索クエリともに通過させるために必要なキー/値のペアのパラメータです。この値を指定する際にはユーザが検索バーに入力した検索語句を挿入するための <code>{searchTerms}</code> を使うことができます。</dd> + <dd> + <div class="note"> + <strong>注意:</strong> Internet Explorer 7 はこの要素をサポートしていません。</div> + </dd> +</dl> +<dl> + <dt> + <strong>SearchForm</strong></dt> + <dd> + プラグインのサイトの検索ページを開くための URL。これは Firefox にユーザが直接 Web サイトを訪れる方法を提供します。</dd> + <dd> + <div class="note"> + <strong>注意:</strong> この要素は Firefox 特有で OpenSearch 仕様の一部ではないため、この要素をサポートしていない他のユーザエージェントが安全に無視できるようにするために、上の例では "<code>moz:</code>" XML 名前空間接頭辞を使っています。</div> + </dd> +</dl> +<h2 id=".E6.A4.9C.E7.B4.A2.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E8.A8.B3.E8.AA.9E.E8.87.AA.E5.8B.95.E6.A4.9C.E5.87.BAAutodiscovery" name=".E6.A4.9C.E7.B4.A2.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E8.A8.B3.E8.AA.9E.E8.87.AA.E5.8B.95.E6.A4.9C.E5.87.BAAutodiscovery">検索プラグインの{{ 訳語("自動検出", "Autodiscovery") }}</h2> +<p>検索プラグインを提供しているウェブサイトは Firefox ユーザがプラグインを簡単にダウンロードしてインストールできるように通知することができます。</p> +<p>自動検出をサポートするには、ウェブページの <code><HEAD></code> セクションに単に一行追加するだけです。</p> +<pre class="eval"><link rel="search" type="application/opensearchdescription+xml" title="<em>searchTitle</em>" href="<em>pluginURL</em>"> +</pre> +<p>斜体の項目を以下で説明されているように置き換えてください。</p> +<dl> + <dt> + <strong>searchTitle</strong></dt> + <dd> + "MDC を検索" や 'Yahoo! 検索" のような実行する検索の名前です。この値は、プラグインファイルの ShortName と一致させる必要があります。</dd> +</dl> +<dl> + <dt> + <strong>pluginURL</strong></dt> + <dd> + ブラウザがダウンロードできる XML 検索プラグインの URL です。</dd> +</dl> +<p>もしあなたのサイトが複数の検索プラグインを提供しているなら、それら全ての自動検出をサポートすることができます。例:</p> +<pre class="eval"><link rel="search" type="application/opensearchdescription+xml" title="MySite: 著者" href="<a class="external" href="http://www.mysite.com/mysiteauthor.xml" rel="freelink">http://www.mysite.com/mysiteauthor.xml</a>"> +<link rel="search" type="application/opensearchdescription+xml" title="MySite: タイトル" href="<a class="external" href="http://www.mysite.com/mysitetitle.xml" rel="freelink">http://www.mysite.com/mysitetitle.xml</a>"> +</pre> +<p>この方法であなたのサイトは著者による検索とタイトルによる検索を行うプラグインを別々のものとしてを提供することができます。</p> +<h2 id=".E3.83.88.E3.83.A9.E3.83.96.E3.83.AB.E3.82.B7.E3.83.A5.E3.83.BC.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E3.83.92.E3.83.B3.E3.83.88" name=".E3.83.88.E3.83.A9.E3.83.96.E3.83.AB.E3.82.B7.E3.83.A5.E3.83.BC.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E3.83.92.E3.83.B3.E3.83.88">トラブルシューティングのヒント</h2> +<p>検索プラグインの XML に問題があると、検出されたプラグインを Firefox 2 に追加する際にエラーが発生するでしょう。エラーメッセージは完全な参考になるわけではありません、しかし、以下のヒントが問題を探す手助けになるでしょう。</p> +<ul> + <li>検索プラグインが{{ 原語併記("整形式", "well formed") }}か確認してください。</li> +</ul> +<p>ファイルを Firefox に直接読みこませることによって確認できます。テンプレート URL の中のアンパサンド(&)は &amp; でエスケープされている必要があり、タグは最後のスラッシュか一致する終了タグで閉じられている必要があります。</p> +<ul> + <li><code>xmlns</code> 属性が重要です。<code>xmlns</code> 属性無しでは "Firefox は次の場所から検索エンジンをダウンロードできませんでした:(URL)" というエラーメッセージを受け取るでしょう。</li> + <li><code>text/html</code> URL を含めなくては<strong>ならない</strong> ことに注意してください — Atom や <a href="/ja/RSS" title="ja/RSS">RSS</a> URL タイプしか含まない検索エンジン(それは妥当なのですが、Firefox はサポートしていません) は "検索エンジンをダウンロードできませんでした"というエラーを引き起こします。</li> +</ul> +<p><br> + さらに、検索プラグインサービスはプラグイン開発者が使うであろうログの仕組みを提供します。<em>about:config</em> を使い '<code>browser.search.log</code>' を <code>true</code> にしてください。検索プラグインが追加されるとログ情報が Firefox の<a href="/ja/JavaScript_Console" title="ja/JavaScript_Console">エラーコンソール</a>(ツール -> エラーコンソール)に表示されます。</p> +<h2 id=".E5.8F.82.E8.80.83.E8.B3.87.E6.96.99" name=".E5.8F.82.E8.80.83.E8.B3.87.E6.96.99">参考資料</h2> +<ul> + <li><a class="external" href="http://opensearch.a9.com/">OpenSearch ドキュメント</a></li> + <li>Technorati.com には <a class="external" href="http://technorati.com/osd.xml">動作する osd.xml</a> があります。</li> + <li>自動検出の更なる問題は bugzilla {{ Bug(340208) }}</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Data:_URI_scheme"><code>data:<code> URI スキーマ</code></a></li> + <li><a class="external" href="http://searchy.protecus.de/">Searchy</a> - あなた自身のを<a class="external" href="http://searchy.protecus.de/en/add2.php">作成</a>、あるいは<a class="external" href="http://searchy.protecus.de/en/searchbox-add-ons.php">検索プラグインのリスト</a>を利用する</li> + <li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - OpenSearch プラグインの作成(日本語不可, POSTメソッド可) <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">作成された検索プラグインのリスト</a></li> + <li><a class="external" href="http://ready.to/search/jp/">Ready2Search</a> - OpenSearch プラグインの作成(日本語可, GETメソッドのみ) <a class="external" href="http://ready.to/search/make/">Ready2Searchでの検索プラグイン作成</a>,<a class="external" href="http://ready.to/search/list/#setind">カテゴリー別の検索設定インデックス</a></li> +</ul> diff --git a/files/ja/web/progressive_web_apps/advantages/index.html b/files/ja/web/progressive_web_apps/advantages/index.html deleted file mode 100644 index b7d3a2dc7b..0000000000 --- a/files/ja/web/progressive_web_apps/advantages/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: プログレッシブウェブアプリの利点 -slug: Web/Progressive_web_apps/Advantages -tags: - - PWA - - Progressive web apps - - advantages - - concepts -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages ---- -<p class="summary"><span class="seoSummary">プログレッシブウェブアプリ（Progressive web apps、PWA）には、以下のセクションにリストされているすべての利点があります。</span></p> - -<p> </p> - -<h2 id="Discoverable" name="Discoverable">発見可能<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。</p> - -<p>一部の機能は、<a href="http://ogp.me/">Open Graph</a> のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。 Open Graph は、メタタグを使用して HTML の <code><head></code> で類似のメタデータを指定するための形式を提供します。</p> - -<p>ここで関連するウェブ標準は<a href="/ja/docs/Web/Manifest">ウェブアプリマニフェスト</a>（Web app manifest）です。 これは、名前、アイコン、スプラッシュスクリーン、テーマカラーなどのアプリの機能を JSON 形式のマニフェストファイルで定義します。 これは、アプリ一覧やデバイスのホーム画面などのコンテキストで使用するためのものです。</p> - -<ul> -</ul> - -<h2 id="Installable" name="Installable">インストール可能<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>アプリエクスペリエンスの中心的な部分は、ユーザーが自分のホーム画面にアプリアイコンを表示して、タップしてアプリをネイティブコンテナに開くことができることで、基盤となるプラットフォームとうまく統合されていると感じます。</p> - -<p>最新のウェブアプリは、ウェブアプリマニフェスト内で設定されたプロパティや、<a href="/ja/docs/Web/Progressive_web_apps/Add_to_home_screen">ホーム画面に追加</a>と呼ばれる最新のスマートフォンのブラウザーで利用可能な機能を介して、このネイティブアプリの感じを持つことができます。</p> - -<h2 id="Linkable" name="Linkable">リンク可能<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>ウェブの最も強力な機能の1つは、特定の URL でアプリにリンクできることです — アプリストアは不要で、複雑なインストールプロセスも不要です。 これこそがいつものことです。</p> - -<h2 id="Network_independent" name="Network_independent">ネットワーク非依存<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>最新のウェブアプリは、ネットワークの信頼性が低い場合、または存在しない場合でも機能します。 ネットワークの独立性の背景にある基本的な考え方は、次のことができるようにすることです。</p> - -<ul> - <li>ネットワークにアクセスできない場合でも、サイトを再訪してそのコンテンツを取得する。</li> - <li>接続性が悪い状況でも、ユーザーが以前に少なくとも1回アクセスしたことがある、あらゆる種類のコンテンツを閲覧する。</li> - <li>接続がない状況下でユーザーに見せるものを制御する。</li> -</ul> - -<p>これは技術の組み合わせによって達成されます — ページ要求を制御する<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>（オフラインでの保存など）、ネットワーク要求への応答をオフラインで保存するための <a href="/ja/docs/Web/API/Cache">Cache API</a>（サイトアセット（静的なコンテンツ）の保存に非常に便利）、アプリケーションデータをオフラインで格納するための <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> や <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> などのクライアント側のデータストレージ技術です。</p> - -<h2 id="Progressive" name="Progressive">プログレッシブ<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>最新のウェブアプリは、完全対応のブラウザーには非常にクールなエクスペリエンスを提供し、完全ではない対応のブラウザーには（あまり魅力的ではないが）許容可能なエクスペリエンスを提供するように開発できます。<a href="/ja/docs/Glossary/Progressive_Enhancement"> プログレッシブエンハンスメント</a>（progressive enhancement）などのベストプラクティスを使って、これを長年にわたって行ってきました。</p> - -<h2 id="Re-engageable" name="Re-engageable">再エンゲージ可能<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>ネイティブプラットフォームの大きな利点の1つは、アプリを見ていないときやデバイスを使用していないときでも、ユーザーが更新や新しいコンテンツに簡単に再エンゲージ（係り合い）できることです。 最新のウェブアプリでも、新しい技術を使用してこれを実行できます — ページを制御するための<a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカー</a>（Service Worker）、サービスワーカーを介してサーバーからアプリに直接更新を送信するための <a href="/ja/docs/Web/API/Push_API">Web Push API</a> 、ユーザーがブラウザーを見ていないときにユーザーとのエンゲージを援助するシステム通知を生成するための <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> といったもの。</p> - -<h2 id="Responsive" name="Responsive">レスポンシブ<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>レスポンシブウェブアプリ（Responsive web apps）では、メディアクエリやビューポートなどの技術を使用して、その UI があらゆる形状（デスクトップ、モバイル、タブレット、または次に来るものは何でも）に適合することを確認します。</p> - -<h2 id="Safe" name="Safe">安全<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> - -<p>ウェブプラットフォームは、HTTPS を利用してセキュリティを念頭に置いてアプリを開発する限り、スヌーピング（覗き見）を防ぎ、コンテンツが改ざんされていないことを保証する安全な配信メカニズムを提供します。 さらに、PWA が正しい URL にあることを確認することで、PWA の本質を検証できます。 一方、アプリストア内のアプリは、多くの場合1つのもののように見えますが別のものになります（<a href="https://twitter.com/andreasbovens/status/926965095296651264">例</a>）。</p> - -<p> </p> diff --git a/files/ja/web/security/information_security_basics/index.html b/files/ja/web/security/information_security_basics/index.html deleted file mode 100644 index 4eaeff0350..0000000000 --- a/files/ja/web/security/information_security_basics/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 情報セキュリティの基本 -slug: Web/Security/Information_Security_Basics -tags: - - Beginner - - Landing - - Security - - セキュリティ -translation_of: Web/Security/Information_Security_Basics ---- -<p><span class="seoSummary">情報セキュリティを基本的に理解しておくことは、ソフトウェアやサイトが危険で脆弱なままで、資産を奪ったりその他の悪意の理由のために弱点を悪用されるのを防ぐのに役立ちます。これらの記事は知るべきことを学ぶのに役立ちます。</span> この情報から、ウェブ開発を通じて、またそれ以外のコンテンツのデプロイにおいても、セキュリティの役割と重要性に気づくでしょう。</p> - -<dl> - <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Confidentiality,_Integrity,_and_Availability">機密性、完全性、可用性</a></dt> - <dd>セキュリティを理解する上で絶対的な基礎となる、セキュリティの第一の目的を説明します。</dd> - <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Security_Controls">セキュリティの制御</a></dt> - <dd>セキュリティ制御の主要なカテゴリを定義し、潜在的な欠点を議論します。</dd> - <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/TCP_IP_Security">TCP/IP セキュリティ</a></dt> - <dd>SSL のセキュリティの考慮事項に焦点を当てた TCP/IP モデルの概要です。</dd> - <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Threats">脅威</a></dt> - <dd>主要な脅威の概念を簡単に案内します。</dd> -</dl> - -<dl> - <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Vulnerabilities">脆弱性</a></dt> - <dd>主要な分野の脆弱性を定義し、すべてのソフトウェアの脆弱性の存在を議論します。</dd> -</dl> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Mozilla/Security">ブラウザーセキュリティ</a></li> - <li><a href="/ja/docs/Web/Security">ウェブセキュリティ</a></li> - <li><a href="/ja/docs/Web/Security/Securing_your_site">サイトを安全にする</a></li> - <li><a href="/ja/docs/Security/Firefox_Security_Basics_For_Developers">開発者向け Firefox セキュリティの基本</a></li> - <li><a href="/ja/docs/Web/Privacy">プライバシー、アクセス制限、情報セキュリティ</a></li> -</ul> - -<p>{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}</p> diff --git a/files/ja/web/specification_list/index.html b/files/ja/web/specification_list/index.html deleted file mode 100644 index fb1ee99700..0000000000 --- a/files/ja/web/specification_list/index.html +++ /dev/null @@ -1,614 +0,0 @@ ---- -title: Specification List -slug: Web/Specification_list -translation_of: Web/Specification_list ---- -<p>Open Webの基盤は幾つもの仕様書によって定義されています。このページではそれらの仕様書をリストしています。</p> - -<p>The Open Web Platform is defined in numerous specifications. This page lists these specifications, as well as links to MDN's documentation (including both tutorials and reference content), and links to status documentation about how complete our documentation project is in that topic.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">状態</th> - <th scope="col">API Introduction & Landing pages</th> - <th scope="col">Tutorial</th> - <th scope="col">Reference</th> - <th scope="col">Doc status</th> - </tr> - </thead> - <tbody> - <tr> - <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">HTML</a> (one page)<br> - {{ SpecName("HTML WHATWG") }}<br> - </td> - <td>{{ Spec2("HTML WHATWG") }}</td> - <td> </td> - <td> - <ul> - <li>Constraint Validation API</li> - <li>Microdata API</li> - <li>Browsing context (that is <code>_blank</code>, ...)</li> - <li>Session History</li> - <li><a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a></li> - <li>Drag and Drop</li> - <li>Using scoped stylesheet</li> - <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">Using the History API</a></li> - <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm">The structured clone algorithm</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes" title="/en-US/docs/Web/Guide/HTML/Using_data_attributes">Using data attributes</a></li> - </ul> - </td> - <td> - <p>The <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML Elements</a>.<br> - <em>HTML element-related interfaces:</em><br> - {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableCellElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)<br> - <em>Other DOM-related interfaces/events/... :</em><br> - {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("CanvasImageSource")}} {{domxref("WindowEventHandlers")}} {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} <code>Document getter? </code>{{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}} {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (<code>Event</code>|<code>Document</code>) {{event("load")}} (<code>Event</code>|<code>XMLDocument</code>, <code>HTMLLinkElement</code>, <code>HTMLStyleElement</code>, <code>HTMLScriptElement</code>, <code>HTMLImageElement</code>) {{event("load")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>){{event("click")}} (<code>Event</code>|<em>any interactive element</em>) {{event("error")}} (<code>Event</code>|<code>HTMLLinkElement</code>, <code>HTMLStyleElement</code>, <code>HTMLScriptElement</code>, <code>HTMLImageElement</code>) {{event("beforescriptexecute")}} (<code>Event</code>|<code>HTMLScriptElement</code>) {{event("afterscriptexecute")}} (<code>Event</code>|<code>HTMLScriptElement</code>) {{event("loadstart")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>) {{event("loadend")}} (<code>Event</code>|<code>HTMLImageElement</code>) {{event("loadend")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>) {{domxref("Window")}} {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}} {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ValidityState")}} {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatorStorageUtils")}} {{domxref("NavigatorPlugins")}} {{domxref("PluginArray")}} {{domxref("MimeTypeArray")}} {{domxref("Plugin")}} {{domxref("MimeType")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}} {{domxref("Transferable")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)<br> - <em>Events on any <code>HTML*Element</code>, <code>Document</code> and <code>Window</code> objects:</em><br> - {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}<br> - Events on any <code>HTML*Element</code> (except <code>HTMLBodyElement and HTMLFrameSetElement</code>), <code>Document</code> and <code>Window</code> objects:<br> - {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}<br> - <em>Events on the <code>Window</code> objects:</em><br> - {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}<br> - <em>Events on the </em><code>Document</code><em> objects: </em>{{event("readystatechange")}}</p> - </td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td> CSS</td> - <td><em>Variable</em></td> - <td><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting Started</a></td> - <td>CSS Tutorials</td> - <td>The <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> page list them & the <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a> has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.<br> - <em>{{SpecName("CSS3 Fonts")}}</em>: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)<br> - <em>{{SpecName("CSS3 Transitions")}}</em>: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)<br> - <em>{{SpecName("CSS3 Animations")}}</em>: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}<br> - <em>{{SpecName("CSS3 Conditional")}}</em>: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}<br> - <em>{{SpecName("CSS3 Device")}}</em>: {{domxref("CSSViewportRule")}}<br> - <em>{{SpecName("CSS3 Variables")}}</em>: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> - </tr> - <tr> - <td>{{SpecName("HTML5 Web Messaging")}} (also in WHATWG HTML)</td> - <td>{{Spec2("HTML5 Web Messaging")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("MessageEvent")}} {{domxref("Window.postMessage")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("ES5.1")}}<br> - {{SpecName("ES6")}}<br> - {{SpecName("ES Int 1.0")}}</td> - <td>{{Spec2('ES5.1')}}<br> - {{Spec2('ES6')}}<br> - {{Spec2('ES Int 1.0')}}</td> - <td> </td> - <td> </td> - <td><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></td> - <td><a href="/en-US/docs/MDN/Doc_status/JavaScript">JavaScript</a></td> - </tr> - <tr> - <td> - <p>{{SpecName("SVG1.1")}}</p> - </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td><a href="/en-US/docs/MDN/Doc_status/SVG">SVG</a></td> - </tr> - <tr> - <td>WebGL</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("MathML3")}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td><a href="/en-US/docs/MDN/Doc_status/MathML">MathML</a></td> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG") }}</td> - <td>{{ Spec2("DOM WHATWG") }}</td> - <td><a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference">DOM Reference </a></td> - <td> </td> - <td>{{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Promise")}} {{ domxref("PromiseResolver")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}} {{ domxref("Range") }}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("UI Events")}}</td> - <td>{{Spec2("UI Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("UIEvent")}} {{domxref("FocusEvent")}} {{domxref("MouseEvent")}} {{domxref("WheelEvent")}} {{domxref("KeyboardEvent")}} {{domxref("CompositionEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("CSSOM")}}</td> - <td>{{ Spec2("CSSOM")}}</td> - <td><a href="/en-US/docs/Web/CSSOM" title="/en-US/docs/Web/CSSOM">CSSOM</a></td> - <td> </td> - <td>{{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}} - <p>{{domxref("CSSMarginRule")}}</p> - </td> - <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> - </tr> - <tr> - <td>{{SpecName("CSSOM View")}}</td> - <td>{{ Spec2("CSSOM View")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> - </tr> - <tr> - <td>{{SpecName("Geometry Interfaces")}}</td> - <td>{{Spec2("Geometry Interfaces")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("DOMPointReadOnly")}} {{domxref("DOMPoint")}} {{domxref("DOMRect")}} {{domxref("DOMRectReadOnly")}} {{domxref("DOMRectList")}} {{domxref("DOMQuad")}} {{domxref("DOMMatrixReadOnly")}} {{domxref("DOMMatrix")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("DOM Parsing")}}</td> - <td>{{ Spec2("DOM Parsing")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("DOMParser")}} {{domxref("XMLSerializer")}} {{domxref("Element.innerHTML")}} {{domxref("Element.outerHTML")}} {{domxref("Element.insertAdjacentHTML")}} {{domxref("Text.serializeAsCDATA")}} {{domxref("Range.createContextualFragment")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Web Workers")}} (also in WHATWG HTML)</td> - <td>{{ Spec2("Web Workers")}}</td> - <td> </td> - <td><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></td> - <td>{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebWorkers">WebWorkers</a></td> - </tr> - <tr> - <td>{{SpecName("Element Traversal")}}</td> - <td>{{Spec2("Element Traversal")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ElementTraversal")}} {{domxref("Element")}} (new inheritance)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("File API")}}</td> - <td>{{Spec2("File API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}} {{domxref("URL.createObjectURL")}} {{domxref("URL.revokeObjectURL")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/File_API">File API</a></td> - </tr> - <tr> - <td>{{SpecName("Fullscreen")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td> </td> - <td><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Using fullscreen mode</a></td> - <td>{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}} {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("IndexedDB")}}</td> - <td>{{Spec2("IndexedDB")}}</td> - <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></td> - <td><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> <a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></td> - <td>{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/IndexedDB">IndexedDB</a></td> - </tr> - <tr> - <td>{{SpecName("Web Audio API")}}</td> - <td>{{Spec2("Web Audio API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} {{domxref("AudioDestinationNode")}} {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} {{domxref("ChannelMergerNode")}} {{domxref("ChannelSplitterNode")}} {{event("complete")}} (event) {{domxref("ConvolverNode")}} {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} {{event("ended_(Web_Audio)", "ended")}} (event) {{domxref("GainNode")}} {{domxref("MediaElementAudioSourceNode")}} {{domxref("MediaStreamAudioDestinationNode")}} {{domxref("MediaStreamAudioSourceNode")}} {{domxref("OfflineAudioCompletionEvent")}} {{domxref("OfflineAudioContext")}} {{domxref("OscillatorNode")}} {{domxref("PannerNode")}}{{domxref("PeriodicWave")}} {{domxref("ScriptProcessorNode")}} {{domxref("WaveShaperNode")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebAudio">WebAudio</a></td> - </tr> - <tr> - <td>{{SpecName("WebRTC 1.0")}}</td> - <td>{{Spec2("WebRTC 1.0")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> - </tr> - <tr> - <td>{{SpecName("Media Capture")}}</td> - <td>{{Spec2("Media Capture")}}</td> - <td> </td> - <td> </td> - <td>{{event("addtrack")}} (event) {{domxref("AudioStreamTrack")}} {{domxref("BlobEvent")}} {{event("ended (MediaStream)")}} (event) {{event("ended (MediaStreamTrack)")}} (event) {{domxref("MediaStream")}} {{domxref("MediaStreamConstraints")}} {{domxref("MediaStreamTrack")}} {{domxref("MediaStreamTrackEvent")}} {{domxref("MediaStreamTrackList")}} {{domxref("MediaTrackConstraints")}} {{event("muted")}} (event) {{domxref("NavigatorUserMedia")}} {{domxref("NavigatorUserMediaError")}} {{event("overconstrained")}} (event) {{event("removetrack")}} (event) {{event("started")}} (event) {{event("unmuted")}} (event) {{domxref("URL")}} {{domxref("VideoStreamTrack")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> - </tr> - <tr> - <td>{{SpecName("MediaStream Recording")}}</td> - <td>{{Spec2("MediaStream Recording")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> - </tr> - <tr> - <td>{{SpecName("Media Source Extensions")}}</td> - <td>{{Spec2("Media Source Extensions")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("MediaSource")}} {{domxref("SourceBuffer")}} {{event("updatestart")}} (event) {{event("update")}} (event) {{event("updateevent")}} (event) {{event("error")}} (event) {{event("abort")}} (event) {{domxref("SourceBufferList")}} {{event("addsourcebuffer")}} (event) {{event("removesourcebuffer")}} (event) {{domxref("VideoPlaybackQuality")}} {{domxref("URL.createObjectURL(MediaSource)")}} {{domxref("HTMLVideoElement.getVideoPlaybackQuality")}} {{domxref("AudioTrack.kind")}} {{domxref("AudioTrack.language")}} {{domxref("AudioTrack.sourceBuffer")}} {{domxref("VideoTrack.kind")}} {{domxref("VideoTrack.language")}} {{domxref("VideoTrack.sourceBuffer")}} {{domxref("TextTrack.kind")}} {{domxref("TextTrack.language")}} {{domxref("TextTrack.sourceBuffer")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("Pointer Lock")}}</td> - <td>{{Spec2("Pointer Lock")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td> - <td>{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}} {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Vibration API")}}</td> - <td>{{Spec2("Vibration API")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></td> - <td>{{domxref("Navigator.vibrate()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></td> - <td> </td> - <td>{{domxref("Navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Geolocation")}}</td> - <td>{{Spec2("Geolocation")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></td> - <td>{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("Navigator")}} (implements <code>NavigatorGeolocation</code>) {{domxref("Position")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Device Orientation")}}</td> - <td>{{Spec2("Device Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Screen Orientation")}}</td> - <td>{{Spec2("Screen Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> - </tr> - <tr> - <td>{{SpecName("Web Notifications")}}</td> - <td>{{Spec2("Web Notifications")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web notifications</a></td> - <td>{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("AmbientLight")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Using light events</a></td> - <td>{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Proximity Events")}}</td> - <td>{{Spec2("Proximity Events")}}</td> - <td><a href="/en-US/docs/Web/API/Proximity_Events">Proximity Events</a></td> - <td> </td> - <td>{{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("WebIDL")}}</td> - <td>{{Spec2("WebIDL")}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("XMLHttpRequest")}}</td> - <td>{{Spec2("XMLHttpRequest")}}</td> - <td> </td> - <td><a href="/en-US/docs/Web/Guide/Using_FormData_Objects" title="/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData objects</a></td> - <td>{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("Highres Time")}}</td> - <td>{{Spec2("Highres Time")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Websockets")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Websockets")}}</td> - <td><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a> <a href="/en-US/docs/WebSockets/WebSockets_reference" title="/en-US/docs/WebSockets/WebSockets_reference">WebSockets reference</a></td> - <td><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></td> - <td>{{domxref("WebSocket")}} {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebSockets">WebSockets</a></td> - </tr> - <tr> - <td>{{SpecName("Page Visibility API")}}</td> - <td>{{Spec2("Page Visibility API")}}</td> - <td> </td> - <td><a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="/en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></td> - <td>{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("RequestAnimationFrame")}}</td> - <td>{{Spec2("RequestAnimationFrame")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("Server-sent events")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Server-sent events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("Network Information")}}</td> - <td>{{Spec2("Network Information")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></td> - <td>{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{domxref("Navigator")}} (implements <code>NetworkInformation</code>) {{event("change")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Web Storage")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Web Storage")}}</td> - <td> </td> - <td><a href="/en-US/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage Guide</a></td> - <td>{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebStorage">WebStorage</a></td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td> </td> - <td> </td> - <td>{{cssxref(":scope")}} {{domxref("Document.find()")}} {{domxref("Document.findAll()")}} {{domxref("DocumentFragment.find()")}} {{domxref("DocumentFragment.findAll()")}}<br> - {{domxref("Element.find()")}} {{domxref("Element.findAll()")}} {{domxref("Element.matches()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Progress Events")}}</td> - <td>{{Spec2("Progress Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ProgressEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Typed Array")}}</td> - <td>{{Spec2("Typed Array")}}</td> - <td> </td> - <td><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">JavaScript Typed arrays</a></td> - <td>{{domxref("Int8Array")}} {{domxref("Int16Array")}} {{domxref("Int32Array")}} {{domxref("Uint8Array")}} {{domxref("Uint16Array")}} {{domxref("Uint32Array")}} {{domxref("Uint8ClampedArray")}} {{domxref("Float32Array")}} {{domxref("Float64Array")}}, {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("TypedArray")}}, {{domxref("DataView")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/JavaScript">JavaScript</a></td> - </tr> - <tr> - <td>{{SpecName("Gamepad")}}</td> - <td>{{Spec2("Gamepad")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> - </tr> - <tr> - <td>{{SpecName("Navigation Timing")}}</td> - <td>{{Spec2("Navigation Timing")}}</td> - <td><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></td> - <td><a href="/en-US/docs/Navigation_timing/Using_Navigation_Timing" title="/en-US/docs/Navigation_timing/Using_Navigation_Timing">Navigation Timing</a></td> - <td>{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("WOFF1.0")}}</td> - <td>{{Spec2("WOFF1.0")}}</td> - <td><a href="/en-US/docs/WOFF" title="/en-US/docs/WOFF">About the Web Open Font Format</a></td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td><a href="/en-US/docs/HTML/WebVTT" title="/en-US/docs/HTML/WebVTT">WebVTT</a></td> - <td> </td> - <td>{{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("Custom Elements")}} aka WebComponents</td> - <td>{{Spec2("Custom Elements")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("document.register()")}} {{cssxref(":unresolved")}} {{domxref("document.createElement()")}} (new optional argument) {{domxref("document.createElementNS()")}} (new optional argument)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> - </tr> - <tr> - <td>{{SpecName("Shadow DOM")}}, part of WebComponents</td> - <td>{{Spec2("Shadow DOM")}}</td> - <td> </td> - <td> </td> - <td><em>Still in flux (lists what looks stable enough).</em><br> - {{HTMLElement("shadow")}} {{domxref("ShadowRoot")}} {{domxref("HTMLShadowElement")}} {{HTMLElement("content")}} {{domxref("HTMLContentElement")}} {{domxref("Element.createShadowRoot()")}} {{domxref("Element.shadowRoot")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> - </tr> - <tr> - <td>{{SpecName("HTML Templates")}}, part of WebComponents</td> - <td>{{Spec2("HTML Templates")}}</td> - <td> </td> - <td> </td> - <td>{{HTMLElement("template")}} {{domxref("HTMLTemplateElement")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> - </tr> - <tr> - <td>{{SpecName("Touch Events")}}</td> - <td>{{Spec2("Touch Events")}}</td> - <td> </td> - <td><a href="/en-US/docs/Web/Guide/Touch_events" title="/en-US/docs/Web/Guide/Touch_events">Touch Events</a></td> - <td>{{domxref("Touch")}} {{domxref("TouchList")}} {{domxref("TouchEvent")}} {{event("touchstart")}} (event) {{event("touchend")}} (event) {{event("touchmove")}} (event) {{event("touchcancel")}} (event) {{domxref("Document.createTouch()")}} {{domxref("Document.createTouchList()")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Pointer Events")}}</td> - <td>{{Spec2("Pointer Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("PointerEvent")}} {{event("pointerdown")}} (event) {{event("pointerup")}} (event) {{event("pointercancel")}} (event) {{event("pointermove")}} (event) {{event("pointerover")}} (event) {{event("pointerout")}} (event) {{event("pointerenter")}} (event) {{event("pointerleave")}} (event) {{event("gotpointercapture")}} (event) {{event("lostpointercapture")}} (event) {{domxref("Element.ongotpointercapture")}} {{domxref("Element.onlostpointercapture")}} {{domxref("Element.setPointerCapture()")}} {{domxref("Element.releasePointerCapture()")}} {{domxref("GlobalEventHandlers.onpointerdown")}} {{domxref("GlobalEventHandlers.onpointerup")}} {{domxref("GlobalEventHandlers.onpointercancel")}} {{domxref("GlobalEventHandlers.onpointermove")}} {{domxref("GlobalEventHandlers.onpointerover")}} {{domxref("GlobalEventHandlers.onpointerout")}} {{domxref("GlobalEventHandlers.onpointerenter")}} {{domxref("GlobalEventHandlers.onpointerleave")}} {{domxref("Navigator.pointerEnabled")}} {{domxref("Navigator.maxTouchPoints")}} {{cssxref("touch-action")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td> {{SpecName("HTML Editing")}}</td> - <td>{{Spec2("HTML Editing")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Selection")}} {{domxref("Document.getSelection()")}} {{domxref("Window.getSelection()")}} {{domxref("EditingBeforeInputEvent")}} {{domxref("EditingInputEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> - </tr> - <tr> - <td>{{SpecName("Web Crypto API")}}</td> - <td>{{Spec2("Web Crypto API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Key")}} {{domxref("CryptoOperation")}} {{event("abort")}} (event) {{event("error")}} (event) {{event("progress")}} (event) {{event("complete")}} (event) {{domxref("KeyOperation")}} {{domxref("Crypto")}} {{domxref("SubtleCrypto")}} {{domxref("Window.crypto")}} {{domxref("WorkerCrypto")}} {{domxref("WorkerGlobalScope.crypto")}} {{domxref("KeyPair")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/WebCrypto">Web Crypto</a></td> - </tr> - <tr> - <td>{{SpecName("Undo Manager")}}</td> - <td>{{Spec2("Undo Manager")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("UndoManager")}} {{domxref("Element.undoScope")}} {{domxref("Element.undoManager")}} {{domxref("DOMTransaction")}} {{domxref("DOMTransactionEvent")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>WebSocket Protocol</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CORS")}}</td> - <td>{{Spec2("CORS")}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>HTTP</td> - <td> </td> - <td><a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a></td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>TLS</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>MediaFragment</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Link: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Content-Disposition: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("URL")}}</td> - <td>{{Spec2("URL")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("URL")}} {{domxref("URLUtils")}} (no interface object) {{domxref("URLUtilsReadOnly")}} (no interface object) {{domxref("URLQuery")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Encoding")}}</td> - <td>{{Spec2("Encoding")}}</td> - <td><a href="/en-US/docs/WebAPI/Encoding_API" title="/en-US/docs/WebAPI/Encoding_API">Encoding API</a></td> - <td> </td> - <td>{{domxref("TextDecoder")}} {{domxref("TextEncoder")}}</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Clipboard API")}}</td> - <td>{{Spec2("Clipboard API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ClipboardEvent")}} {{event("cut")}} (event) {{event("copy")}} (event) {{event("paste")}} (event)</td> - <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> - </tr> - <tr> - <td>{{SpecName("Selection API")}}</td> - <td>{{Spec2("Selection API")}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/ja/web/svg/svg_1.1_support_in_firefox/index.html b/files/ja/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..7dcb1173e2 --- /dev/null +++ b/files/ja/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,30 @@ +--- +title: Mozilla SVG Status +slug: Mozilla_SVG_Status +tags: + - SVG +--- +<div class="note"> +<p>この文書は現在の開発バージョン ("trunk") の Mozilla <a href="ja/SVG">SVG</a> の現状を取り扱っています。もし Firefox 2 の SVG 機能に関する情報をお探しの場合、<a href="ja/SVG_in_Firefox">別のページ</a> に情報があります。 +</p> +</div> +<h3 id=".E8.A6.81.E7.B4.A0.E3.81.AE.E5.AE.9F.E8.A3.85.E7.8A.B6.E6.B3.81" name=".E8.A6.81.E7.B4.A0.E3.81.AE.E5.AE.9F.E8.A3.85.E7.8A.B6.E6.B3.81"> 要素の実装状況 </h3> +<p><a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> の要素とネイティブサポートの状況の概略です。章は現在の状態 (<span style="color: black; background-color: lightgreen;">サポート済み</span>、<span style="color: black; background-color: gold;">サポート中</span>、<span style="color: black; background-color: salmon;">現在未サポート</span>) によってマークされています。未実装部分のほとんどは 3 つの大きなモジュール (フォントとフィルタ、アニメーション) に該当します。 +</p> +<table style="margin: 5px;"> <tbody><tr> <th>要素</th> <th>備考</th> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#basic-structure-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> +<td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a> {{ 訳注() }}</td> <td> <ul> <li>実装済み。</li> <li>DOM 属性 <code>currentScale</code> と <code>currentTranslate</code> は実装されていますが、パンとズームのユーザーインターフェースはありません。</li> <li>SVGSVGElement <ul> <li>未実装の属性: contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li> <li>未実装のバインディング: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, getElementById</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#GElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#DefsElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#DescElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>DOM に保存されるのみでユーザインタフェースなし。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#TitleElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/metadata.html#MetadataElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>DOM に保存されるのみでユーザインタフェースなし。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#SymbolElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#UseElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>ドキュメント内の参照のみ動作 ({{ Bug(269482) }}).</li> <li><svg:use> カスケーディング規則に完全に従っていない ({{ Bug(265894) }}).</li> <li>SVGElementInstance ツリーにイベントを伝えない ({{ Bug(265895) }}).</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#conditional-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#SwitchElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#image-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#ImageElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>ラスタ画像のみ動作 ({{ Bug(272288) }})。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/styling.html#style-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/styling.html#StyleElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#shape-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/paths.html#PathElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>SVGPathElement <ul> <li>未実装の属性: normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#RectElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#CircleElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#LineElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#EllipseElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#PolylineElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/shapes.html#PolygonElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#text-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#TextElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>フォントフェイスの選択はフェイスの候補リストの最初の項目しか試しません。</li> <li>SVGTextElement <ul> <li>未実装の属性: rotate, textLength, lengthAdjust</li> <li>未実装のバインディング: selectSubString</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#TSpanElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>SVGTSpanElement <ul> <li>未実装の属性: rotate, textLength, lengthAdjust</li> <li>未実装のバインディング: selectSubString</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#TRefElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#TextPathElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>未実装のバインディング: selectSubString</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#AltGlyphElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#AltGlyphDefElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#AltGlyphItemElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/text.html#GlyphRefElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/painting.html#marker-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/painting.html#MarkerElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/color.html#color-profile-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/color.html#ColorProfileElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#gradient-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#LinearGradientElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#RadialGradientElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#StopElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#pattern-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/pservers.html#PatternElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/masking.html#clip-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/masking.html#ClipPathElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/masking.html#mask-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/masking.html#MaskElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#filter-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#FilterElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> <li>擬似画像入力は <code>SourceGraphic</code> and <code>SourceAlpha</code> のみ実装。</li> <li>未実装の擬似画像入力かフィルタ要素を使うとそのフィルタは無視され、参照された画像はフィルタ無しで表示されます。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feBlendElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feColorMatrixElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feComponentTransferElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feCompositeElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feConvolveMatrixElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feDiffuseLightingElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feDisplacementMapElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(389746) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feFloodElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feGaussianBlurElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feImageElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(390379) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feMergeElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feMergeNodeElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feMorphologyElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feOffsetElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feSpecularLightingElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feTileElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feTurbulenceElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feDistantLightElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#fePointLightElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feSpotLightElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feFuncRElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feFuncGElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feFuncBElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/filters.html#feFuncAElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/interact.html#cursor-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/interact.html#CursorElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/linking.html#hyperlinking-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/linking.html#AElement\"'>日本語訳</a>") }}</td> <td> <ul> <li><code>xlink:href</code> と <code>xlink:show</code> 属性のみ実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/linking.html#view-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/linking.html#ViewElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/script.html#scripting-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/script.html#ScriptElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#animation-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#AnimateElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(216462) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#SetElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#AnimateMotionElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#AnimateTransformElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(216462) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#AnimateColorElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/animate.html#mpathElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#font-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(119490) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontFaceElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(119490) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: gold;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#GlyphElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>{{ Bug(119490) }}</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#MissingGlyphElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#HKernElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#VKernElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontFaceSrcElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontFaceNameElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontFaceNameElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#FontFaceNameElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/fonts.html#DefinitionSrcElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>未実装。</li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility モジュール</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/extend.html#extensibility-mod\"'>日本語訳</a>") }}</th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a> {{ 訳注("<a class='\"external\"' href='\"http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/extend.html#ForeignObjectElement\"'>日本語訳</a>") }}</td> <td> <ul> <li>実装済み。</li> </ul> </td> </tr> +</tbody></table> +<h3 id=".E5.AE.9F.E8.A3.85.E3.81.AE.E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.B3.A8.E6.84.8F" name=".E5.AE.9F.E8.A3.85.E3.81.AE.E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.B3.A8.E6.84.8F"> 実装のその他の注意 </h3> +<p><code>onload</code> イベントは <code>externalResourcesRequired</code> 属性を考慮しません ({{ Bug(277955) }})。 +</p> +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1"> 原文書の情報 </h2> +<ul><li> 著者: Tim Rowley +</li><li> 貢献者: Jonathan Watt, Steffen Wilberg +</li><li> 最終更新日: July 31, 2007 +</li><li> 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a> +</li></ul> +</div> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Mozilla_SVG_Status" } ) }} diff --git a/files/ja/web/web_components/status_in_firefox/index.html b/files/ja/web/web_components/status_in_firefox/index.html deleted file mode 100644 index 0fa1b2248b..0000000000 --- a/files/ja/web/web_components/status_in_firefox/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Firefox での Web Components のサポート状況 -slug: Web/Web_Components/Status_in_Firefox -tags: - - API - - Experimental - - Firefox - - Guide - - Web Components - - status -translation_of: Web/Web_Components/Status_in_Firefox ---- -<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p> - -<p><a href="/docs/Web/Web_Components">Web Components</a> は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている <a href="/docs/Mozilla/Gecko">Gecko</a> での実装状況の一覧を示します。</p> - -<div class="blob instapaper_body" id="readme"> -<article class="markdown-body entry-content"> -<h2 id="ネイティブサポート">ネイティブサポート</h2> - -<p>Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:</p> - -<ul> - <li>{{HTMLElement("template")}}</li> -</ul> - -<h2 id="今後実装予定の機能">今後実装予定の機能</h2> - -<ul> - <li>新しい同意に基づいた <a href="/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> の実装は、2016 年 Q1 にリリース予定です。<a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne</a> と <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson</a> のブログ投稿に詳細が記述されています。しかし、まだ仕様について <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">多くの議論や課題</a> があり、すべてのブラウザへの実装は将来となるでしょう。</li> - <li><strong>Custom elements</strong> は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。 - <ul> - <li>古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。</li> - </ul> - </li> - <li>これらの問題について、<a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">2016 年 1 月の会議</a> でベンダが議論するでしょう。</li> -</ul> - -<h2 id="放棄された機能">放棄された機能</h2> - -<p>これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。</p> - -<ul> - <li><strong>HTML imports</strong> の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。{{bug(568953)}} をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。</li> -</ul> - -<h2 id="Firefox_でポリフィルを使用する">Firefox でポリフィルを使用する</h2> - -<p>Firefox でポリフィルを使用する際に考慮すべき注意事項があります:</p> - -<ul> - <li><code>about:config</code> の {{pref("dom.webcomponents.enabled")}} 設定を <code>true</code> に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。</li> - <li><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を <strong>サポートした</strong> 環境と異なる見た目になることに注意してください。</li> - <li>Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。</li> - <li>Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。</li> -</ul> -</article> -</div> diff --git a/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..c73f0a1a51 --- /dev/null +++ b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,440 @@ +--- +title: Introduction to using XPath in JavaScript +slug: Introduction_to_using_XPath_in_JavaScript +tags: + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - Web Development + - XML + - XPath + - XSLT +--- +<p>この文書では拡張機能や Web サイトから JavaScript 内で <a href="ja/XPath">XPath</a> を使うためのインターフェースについて解説します。Mozilla は <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a> のかなりの部分を実装しており、HTML 文書と XML 文書の双方に対して XPath 式を実行することができます。</p> + +<p>XPath を利用するための主となるインターフェースは <a href="ja/DOM/document">document</a> オブジェクトの <a href="ja/DOM/document.evaluate">evaluate</a> 関数です。</p> + +<p>{{ 英語版章題("document.evaluate") }}</p> + +<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> + +<p>このメソッドは HTML を含む <a href="ja/XML">XML</a> ベースの文書に対して <a href="ja/XPath">XPath</a> 式を評価し、<code>XPathResult</code> オブジェクトを返します。 XPathResult オブジェクトは単一のノード、もしくはノードの集合になります。このメソッドの情報は <a href="ja/DOM/document.evaluate">DOM:document.evaluate</a> にありますが、このメソッドの解説のためには内容が薄いため、以下でさらに詳しく説明します。</p> + +<pre>var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); +</pre> + +<p>{{ 英語版章題("Parameters") }}</p> + +<h3 id=".E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF" name=".E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF">パラメータ</h3> + +<p><a href="ja/DOM/document.evaluate">evaluate</a> 関数は 5 つのパラメータを取ります。</p> + +<ul> + <li><code>xpathExpression</code>: 評価する XPath 式を文字列で指定します。</li> +</ul> + +<ul> + <li><code>contextNode</code>: <code>xpathExpression</code> を評価する対象となる文書内のノードを指定します。指定されたノードの全ての子ノードに対しても評価が行われます。もっともよく指定される値は <a href="ja/DOM/document">document</a> です。</li> +</ul> + +<ul> + <li><code>namespaceResolver</code>: <code>xpathExpression</code> に含まれるあらゆる名前空間接頭辞を渡され、その接頭辞に対応する名前空間 URI を表す文字列を返す関数です。この関数により、XPath 式で使われている接頭辞と文書内で使われている接頭辞が異なっていたとしてもそれを変換する事が可能になります。この関数は次のいずれかです。 + + <ul> + <li><code><a class="external" href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code> オブジェクトの <code><a href="ja/DOM/document.createNSResolver">createNSResolver</a></code> メソッドにより<a href="#Implementing_a_Default_Namespace_Resolver">作成された</a>もの。ほとんどの場合はこれを使うべきでしょう。</li> + <li>HTML 文書の場合や、名前空間接頭辞が使われていない場合は <code>null</code> 。<code>xpathExpression</code> に名前空間接頭辞が含まれている場合に null を使うと、<code>NAMESPACE_ERR</code> コードと共に <code>DOMException</code> が投げられるので注意してください。</li> + <li>ユーザ定義のカスタム関数。詳しくは付録の<a href="#Implementing_a_User_Defined_Namespace_Resolver">ユーザ定義名前空間リゾルバの使用</a>の節を参照して下さい。</li> + </ul> + </li> +</ul> + +<ul> + <li><code>resultType</code>: 評価の結果返してほしい値の型を示す<a href="#XPathResult_Defined_Constants">定数</a>です。もっとも良く指定される定数は <code>XPathResult.ANY_TYPE</code> で、この場合、指定された XPath 式に対して一番適切な型で結果が返されます。指定できる定数の一覧は付録の<a href="#XPathResult_Defined_Constants">定数一覧</a>の節を参照してください。それぞれの定数の使い方は<a href="#Specifying_the_Return_Type">戻り値の型の指定</a>の節を参考にしてください。</li> +</ul> + +<ul> + <li><code>result</code>: 既存の <code>XPathResult</code> オブジェクトまたは <code>null</code> を指定します。 <code>XPathResult</code> オブジェクトが指定された場合には、そのオブジェクトが再利用されます。 <code>null</code> が指定された場合には新しい <code>XPathResult</code> オブジェクトが生成されます。</li> +</ul> + +<p>{{ 英語版章題("Return Value") }}</p> + +<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3> + +<p>パラメータ <code>resultType</code> で<a href="#Specifying_the_Return_Type">指定された</a>型の <code>XPathResult</code> オブジェクトを返します。<code>XPathResult</code> インターフェースは<a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/public/idl/xpath/nsIDOMXPathResult.idl">ここ</a>で定義されています。</p> + +<p>{{ 英語版章題("Implementing a Default Namespace Resolver") }}</p> + +<h3 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.83.AA.E3.82.BE.E3.83.AB.E3.83.90.E3.81.AE.E5.AE.9F.E8.A3.85" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.83.AA.E3.82.BE.E3.83.AB.E3.83.90.E3.81.AE.E5.AE.9F.E8.A3.85">デフォルト名前空間リゾルバの実装</h3> + +<p>名前空間リゾルバを作成するには、普通は <a href="ja/DOM/document">document</a> オブジェクトの <code>createNSResolver</code> メソッドを使います。</p> + +<pre>var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); +</pre> + +<p><span class="comment">Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre></span> それから 変数 <code>nsResolver</code> を パラメータ <code>namespaceResolver</code> として <code>document.evaluate</code> に渡します。</p> + +<p>注意すべきなのは、XPath では接頭辞のない <code>QName</code> は名前空間が null の要素にのみマッチすると定義されているという点です。XPath にはデフォルト名前空間を取得する手段はありません。名前空間が null ではない要素や属性にマッチさせるには、接頭辞付きの名前テストを使い、その接頭辞を名前空間にマッピングする名前空間リゾルバを作成する必要があります。詳しくは下記の<a href="#Implementing_a_User_Defined_Namespace_Resolver">ユーザ定義の名前空間リゾルバを作成する</a>方法を参照して下さい。</p> + +<p>{{ 英語版章題("Specifying the Return Type") }}</p> + +<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4.E3.81.AE.E5.9E.8B.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.99.E3.82.8B" name=".E6.88.BB.E3.82.8A.E5.80.A4.E3.81.AE.E5.9E.8B.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.99.E3.82.8B">戻り値の型を指定する</h3> + +<p><code>document.evaluate</code> から返される変数 <code>xpathResult</code> は、単一のノード (<a href="#Simple_Types">単純型</a>) もしくはノードのコレクション (<a href="#Node-Set_Types">ノード集合型</a>) から成ります。</p> + +<p>{{ 英語版章題("Simple Types") }}</p> + +<h4 id=".E5.8D.98.E7.B4.94.E5.9E.8B" name=".E5.8D.98.E7.B4.94.E5.9E.8B">単純型</h4> + +<p><code>resultType</code> で要求された結果型が次のうちのどれかであった場合、</p> + +<ul> + <li><code>NUMBER_TYPE</code> - 倍精度浮動小数点数 (double)</li> + <li><code>STRING_TYPE</code> - 文字列</li> + <li><code>BOOLEAN_TYPE</code> - 真偽値</li> +</ul> + +<p>それぞれ以下の <code>XPathResult</code> オブジェクトのプロパティにアクセスする事で式の戻り値を得る事ができます。</p> + +<ul> + <li><code>numberValue</code></li> + <li><code>stringValue</code></li> + <li><code>booleanValue</code></li> +</ul> + +<p>{{ 英語版章題("Example") }}</p> + +<h5 id=".E4.BE.8B" name=".E4.BE.8B">例</h5> + +<p>下の例では XPath 式 <code><a href="ja/XPath/Functions/count">count(//p)</a></code> によって HTML 文書内の <code><span class="nowiki"><p></span></code> 要素の数を取得しています。</p> + +<pre>var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'この文書には ' + paragraphCount.numberValue + ' 個の段落要素が含まれています' ); +</pre> + +<p>JavaScript では数値を表示しようとすると文字列に変換されますが、XPath インターフェイスは <code>stringValue</code> プロパティを要求しても数値の結果を自動的に変換しないので、下のコードは<strong>動作しません</strong>。</p> + +<pre>var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'この文書には ' + paragraphCount.stringValue + ' 個の段落要素が含まれています' ); +</pre> + +<p>これを実行すると <code>NS_DOM_TYPE_ERROR</code> コードの例外が返されます。</p> + +<p>{{ 英語版章題("Node-Set Types") }}</p> + +<h4 id=".E3.83.8E.E3.83.BC.E3.83.89.E9.9B.86.E5.90.88.E5.9E.8B" name=".E3.83.8E.E3.83.BC.E3.83.89.E9.9B.86.E5.90.88.E5.9E.8B">ノード集合型</h4> + +<p><code>XPathResult</code> オブジェクトが返すノード集合には主として 3 種類の型があります。</p> + +<ul> + <li><a href="#Iterators">イテレータ</a></li> + <li><a href="#Snapshots">スナップショット</a></li> + <li><a href="#First_Node">ファーストノード</a></li> +</ul> + +<p>{{ 英語版章題("Iterators") }}</p> + +<h5 id=".E3.82.A4.E3.83.86.E3.83.AC.E3.83.BC.E3.82.BF" name=".E3.82.A4.E3.83.86.E3.83.AC.E3.83.BC.E3.82.BF">イテレータ</h5> + +<p>パラメータ <code>resultType</code> で指定された結果型が次のどちらかの場合、</p> + +<ul> + <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> + <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> +</ul> + +<p>マッチしたノードのノード集合が<code>XPathResult</code> オブジェクトとして返されます。これはイテレータのようにふるまい、 <code>XPathResult</code> の <code>iterateNext()</code> メソッドを使ってその中に含まれる個々のノードにアクセスできます。</p> + +<p>マッチしたノードに対する反復が全て終了すると、<code>iterateNext()</code> は <code>null</code> を返します。</p> + +<p>ただし、反復処理中に文書が変異した (文書ツリーが改変された) 場合、反復処理は無効化され、<code>XPathResult</code> の <code>invalidIteratorState</code> プロパティが <code>true</code> に設定され、<code>NS_ERROR_DOM_INVALID_STATE_ERR</code> 例外が投げられます。</p> + +<p>{{ 英語版章題("Iterator Example") }}</p> + +<h6 id=".E3.82.A4.E3.83.86.E3.83.AC.E3.83.BC.E3.82.BF.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B" name=".E3.82.A4.E3.83.86.E3.83.AC.E3.83.BC.E3.82.BF.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B">イテレータの使用例</h6> + +<pre>var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); + +try { + var thisNode = iterator.iterateNext(); + + while (thisNode) { + alert( thisNode.textContent ); + thisNode = iterator.iterateNext(); + } +} +catch (e) { + dump( 'Error: Document tree modified during iteraton ' + e ); +} +</pre> + +<p>{{ 英語版章題("Snapshots") }}</p> + +<h5 id=".E3.82.B9.E3.83.8A.E3.83.83.E3.83.97.E3.82.B7.E3.83.A7.E3.83.83.E3.83.88" name=".E3.82.B9.E3.83.8A.E3.83.83.E3.83.97.E3.82.B7.E3.83.A7.E3.83.83.E3.83.88">スナップショット</h5> + +<p>パラメータ <code>resultType</code> で指定された結果型が次のどちらかの場合、</p> + +<ul> + <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> + <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> +</ul> + +<p>返される <code>XPathResult</code> オブジェクトはマッチしたノードの静的なノード集合となり、<code>XPathResult</code> オブジェクトの <code>snapshotItem(itemNumber)</code> メソッドによってそれぞれのノードにアクセス出来ます。<code>itemNumber</code> は取り出すノードのインデックスです。含まれるノードの総数は <code>snapshotLength</code> プロパティから得られます。</p> + +<p>スナップショットは文書が変異しても変更されず、イテレータと違って無効になることはありませんが、スナップショットは現在の文書に対応しません。ノードが移動されていたり、既に存在しないノードが含まれていたり、新しいノードが追加されている可能性もあります。</p> + +<p>{{ 英語版章題("Snapshot Example") }}</p> + +<h6 id=".E3.82.B9.E3.83.8A.E3.83.83.E3.83.97.E3.82.B7.E3.83.A7.E3.83.83.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B" name=".E3.82.B9.E3.83.8A.E3.83.83.E3.83.97.E3.82.B7.E3.83.A7.E3.83.83.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B">スナップショットの使用例</h6> + +<pre>var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); + +for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) +{ + dump( nodesSnapshot.snapshotItem(i).textContent ); +} +</pre> + +<p>{{ 英語版章題("First Node") }}</p> + +<h5 id=".E3.83.95.E3.82.A1.E3.83.BC.E3.82.B9.E3.83.88.E3.83.8E.E3.83.BC.E3.83.89" name=".E3.83.95.E3.82.A1.E3.83.BC.E3.82.B9.E3.83.88.E3.83.8E.E3.83.BC.E3.83.89">ファーストノード</h5> + +<p>パラメータ <code>resultType</code> で指定された結果型が次のどちらかの場合、</p> + +<ul> + <li><code>ANY_UNORDERED_NODE_TYPE</code></li> + <li><code>FIRST_ORDERED_NODE_TYPE</code></li> +</ul> + +<p>XPath 式にマッチした最初のノードのみが <code>XPathResult</code> オブジェクトとして返されます。このノードには <code>XPathResult</code> オブジェクトの <code>singleNodeValue</code> プロパティによってアクセスできます。ノード集合が空ならばこのプロパティは <code>null</code> になります。</p> + +<p>ただし、ordered サブタイプの場合は文書順において最初にマッチしたノードであることが保証されますが、unordered サブタイプの場合、返される単一のノードは文書順において最初のものではない可能性があるので注意が必要です。</p> + +<p>{{ 英語版章題("First Node Example") }}</p> + +<h6 id=".E3.83.95.E3.82.A1.E3.83.BC.E3.82.B9.E3.83.88.E3.83.8E.E3.83.BC.E3.83.89.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.83.BC.E3.82.B9.E3.83.88.E3.83.8E.E3.83.BC.E3.83.89.E3.81.AE.E4.BD.BF.E7.94.A8.E4.BE.8B">ファーストノードの使用例</h6> + +<pre>var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); + +dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); +</pre> + +<p>{{ 英語版章題("The ANY_TYPE Constant") }}</p> + +<h4 id="ANY_TYPE_.E5.AE.9A.E6.95.B0" name="ANY_TYPE_.E5.AE.9A.E6.95.B0">ANY_TYPE 定数</h4> + +<p>パラメータ <code>resultType</code> に指定された結果型が <code>ANY_TYPE</code> である場合、返される <code>XPathResult</code> オブジェクトは、式を評価した結果から導き出される適切な型になります。</p> + +<p>返される結果型は単純型 ( <code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code> ) のうちのいずれにもなり得ます<strong>が</strong>、もしノード集合であった場合には、<code>UNORDERED_NODE_ITERATOR_TYPE</code> に<strong>しか</strong>なり得ません。</p> + +<p>評価の後に型を判断するには、<code>XPathResult</code> オブジェクトの <code>resultType</code> プロパティを使います。このプロパティの<a href="#XPathResult_Defined_Constants">定数</a>値は付録に記載されています。 <span class="comment">None Yet {{ 英語版章題("Any_Type Example") }} </span></p> + +<h4 id="Any_Type_Example"><span class="comment">Any_Type Example</span></h4> + +<p>{{ 英語版章題("Examples") }}</p> + +<h2 id=".E4.BE.8B_2" name=".E4.BE.8B_2">例</h2> + +<p>{{ 英語版章題("Within a HTML Document") }}</p> + +<h3 id="HTML_.E6.96.87.E6.9B.B8.E5.86.85.E3.81.A7" name="HTML_.E6.96.87.E6.9B.B8.E5.86.85.E3.81.A7">HTML 文書内で</h3> + +<p>下のコードは、 XPath 式を評価する対象となる HTML 文書の内部や、それにリンクされた JavaScript 内に設置するためのものです。</p> + +<p>XPath を使って HTML 文書内の全ての <code><span class="nowiki"><h2></span></code> 見出し要素を抽出したければ、<code>xpathExpression</code> は単に '<code>//h2</code>' となります。 <code>//</code> は再帰下降演算子 (Recursive Descent Operator)なので、この式は文書ツリー内のあらゆる位置にある、nodeName が <code>h2</code> である要素にマッチします。 <span class="comment">link to introductory xpath doc</span></p> + +<pre>var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); +</pre> + +<p>HTML は名前空間を持っていないため、パラメータ <code>namespaceResolver</code> には <code>null</code> を渡している事に注目してください。</p> + +<p>文書全体から見出し要素を探すため、ここでは <a href="ja/DOM/document">document</a> オブジェクト自体を <code>contextNode</code> として使っています。</p> + +<p>この式の結果は <code>XPathResult</code> オブジェクトです。返された結果の型を知りたければ、返されたオブジェクトの <code>resultType</code> プロパティを評価します。この場合は <code>4</code> 、つまり <code>UNORDERED_NODE_ITERATOR_TYPE</code> と評価されるでしょう。これは XPath 式の結果がノード集合であった場合のデフォルトの結果型です。この型はノードに一つずつアクセスする事ができ、返されるノードの順序は決まっていません。返されたノードにアクセスするには、返されたオブジェクトの <code>iterateNext()</code> メソッドを使います。</p> + +<pre>var thisHeading = headings.iterateNext(); + +var alertText = 'この文書内のレベル 2 の見出しは、\n' + +while (thisHeading) { + alertText += thisHeading.textContent + '\n'; + thisHeading = headings.iterateNext(); +} +</pre> + +<p>反復によってノードを得られれば、そのノードの全ての標準 <a href="ja/DOM_interfaces">DOM インターフェイス</a>にアクセスできます。式によって返される <code>h2</code> 要素に対する反復処理が全て終了すると、それ以降は <code>iterateNext()</code> を何度呼び出しても <code>null</code> が返されます。</p> + +<p>{{ 英語版章題("Evaluating against an XML document within an Extension") }}</p> + +<h3 id=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E5.86.85.E3.81.AE_XML_.E6.96.87.E6.9B.B8.E3.81.AB.E5.AF.BE.E3.81.97.E3.81.A6.E8.A9.95.E4.BE.A1.E3.81.99.E3.82.8B" name=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E5.86.85.E3.81.AE_XML_.E6.96.87.E6.9B.B8.E3.81.AB.E5.AF.BE.E3.81.97.E3.81.A6.E8.A9.95.E4.BE.A1.E3.81.99.E3.82.8B">拡張機能内の XML 文書に対して評価する</h3> + +<p>例として XML 文書が <a class="external" rel="freelink">chrome://yourextension/content/peopleDB.xml</a> にあるとします。</p> + +<pre><?xml version="1.0"?> +<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > + <person> + <name first="george" last="bush" /> + <address street="1600 pennsylvania avenue" city="washington" country="usa"/> + <phoneNumber>202-456-1111</phoneNumber> + </person> + <person> + <name first="tony" last="blair" /> + <address street="10 downing street" city="london" country="uk"/> + <phoneNumber>020 7925 0918</phoneNumber> + </person> +</people> +</pre> + +<p>拡張機能内で XML 文書の内容を取得できるようにするため、<code><a href="ja/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトを作成して文書を同期的に読み込みます。変数 <code>xmlDoc</code> には文書が <code><a href="ja/XMLDocument">XMLDocument</a></code> オブジェクトとして格納されるので、それに対して <code>evaluate</code> メソッドを使う事ができます。</p> + +<p>拡張機能の xul/js 文書で使用する JavaScript は以下の通りです。</p> + +<pre>var req = new XMLHttpRequest(); + +req.open("GET", "chrome://yourextension/content/peopleDB.xml", false); +req.send(null); + +var xmlDoc = req.responseXML; + +var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); + +var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<p>{{ 英語版章題("Appendix") }}</p> + +<h2 id=".E4.BB.98.E9.8C.B2" name=".E4.BB.98.E9.8C.B2">付録</h2> + +<p>{{ 英語版章題("Implementing a User Defined Namespace Resolver") }}</p> + +<h4 id=".E3.83.A6.E3.83.BC.E3.82.B6.E5.AE.9A.E7.BE.A9.E3.81.AE.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.83.AA.E3.82.BE.E3.83.AB.E3.83.90.E3.81.AE.E5.AE.9F.E8.A3.85" name=".E3.83.A6.E3.83.BC.E3.82.B6.E5.AE.9A.E7.BE.A9.E3.81.AE.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.83.AA.E3.82.BE.E3.83.AB.E3.83.90.E3.81.AE.E5.AE.9F.E8.A3.85">ユーザ定義の名前空間リゾルバの実装</h4> + +<p>この例は説明のためだけのものです。 この関数は、<code>xpathExpression</code> から名前空間接頭辞を取り、その接頭辞に対応する URI を返さなければなりません。例えば、この式は、</p> + +<pre>'//xhtml:td/mathml:math' +</pre> + +<p>(X)HTML のテーブルデータセル要素の子要素である全ての <a href="ja/MathML">MathML</a> 式を選択します。</p> + +<p>接頭辞 '<code>mathml:</code>' と 名前空間 URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' を、接頭辞 '<code>xhtml:</code>' と URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' をそれぞれ関連付けるため、関数を用意します。</p> + +<pre>function nsResolver(prefix) { + var ns = { + 'xhtml' : 'http://www.w3.org/1999/xhtml', + 'mathml': 'http://www.w3.org/1998/Math/MathML' + }; + return ns[prefix] || null; +} +</pre> + +<p>そうすると <code>document.evaluate</code> をこのようにして呼び出せます。</p> + +<pre>document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<p>{{ 英語版章題("Implementing a default namespace for XML documents") }}</p> + +<h4 id="XML_.E6.96.87.E6.9B.B8.E3.81.AE.E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.9F.E8.A3.85.E3.81.99.E3.82.8B" name="XML_.E6.96.87.E6.9B.B8.E3.81.AE.E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.9F.E8.A3.85.E3.81.99.E3.82.8B">XML 文書のデフォルト名前空間を実装する</h4> + +<p><a href="#Implementing_a_Default_Namespace_Resolver">デフォルト名前空間リゾルバの実装</a>で述べたように、デフォルトリゾルバは XML 文書のデフォルト名前空間を処理しません。たとえばこの文書では、</p> + +<pre><?xml version="1.0" encoding="UTF-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <entry /> + <entry /> + <entry /> +</feed> +</pre> + +<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> は、<code>nsResolver</code> が <code>createNSResolver</code> によって返されたリゾルバである場合、空集合を返します。リゾルバとして <code>null</code> を渡しても同じです。</p> + +<p>正しいデフォルト名前空間 (この場合は Atom 名前空間) を返すカスタムリゾルバを作成すれば、この問題を解決できます。この時、XPath 式の中ではなんらかの名前空間接頭辞を使わなければならないことに注意してください。これはリゾルバ関数がその接頭辞を指定した名前空間に変換できるようにするためです。例えばこのようにします。</p> + +<pre>function resolver() { + return 'http://www.w3.org/2005/Atom'; +} +doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null) +</pre> + +<p>文書で複数の名前空間が使われている場合には、より複雑なリゾルバが必要になります。</p> + +<p>{{ 英語版章題("XPathResult Defined Constants") }}</p> + +<h4 id="XPathResult_.E3.81.AE.E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E5.AE.9A.E6.95.B0" name="XPathResult_.E3.81.AE.E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E5.AE.9A.E6.95.B0">XPathResult の定義済み定数</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">定義済みの結果型定数</td> + <td class="header">値</td> + <td class="header">解説</td> + </tr> + <tr> + <td>ANY_TYPE</td> + <td>0</td> + <td>式の評価によって導き出される適切な型を格納した結果の集合。結果がノード集合ならば、結果の型は常に UNORDERED_NODE_ITERATOR_TYPE となるので注意が必要。</td> + </tr> + <tr> + <td>NUMBER_TYPE</td> + <td>1</td> + <td>一つの数値を格納した結果。 <code>count()</code> 関数を使用した XPath 式などで有用。</td> + </tr> + <tr> + <td>STRING_TYPE</td> + <td>2</td> + <td>一つの文字列を格納した結果。</td> + </tr> + <tr> + <td>BOOLEAN_TYPE</td> + <td>3</td> + <td>一つの真偽値を格納した結果。 <code>not()</code> 関数を使用した XPath 式などで有用。</td> + </tr> + <tr> + <td>UNORDERED_NODE_ITERATOR_TYPE</td> + <td>4</td> + <td>式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。</td> + </tr> + <tr> + <td>ORDERED_NODE_ITERATOR_TYPE</td> + <td>5</td> + <td>式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。</td> + </tr> + <tr> + <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> + <td>6</td> + <td>式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。</td> + </tr> + <tr> + <td>ORDERED_NODE_SNAPSHOT_TYPE</td> + <td>7</td> + <td>式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。</td> + </tr> + <tr> + <td>ANY_UNORDERED_NODE_TYPE</td> + <td>8</td> + <td>式にマッチしたノードのうちのどれか一つを格納した結果ノード集合。これは必ずしも文書内で式にマッチした最初のノードというわけではない。</td> + </tr> + <tr> + <td>FIRST_ORDERED_NODE_TYPE</td> + <td>9</td> + <td>文書内で式にマッチした最初のノードを格納した結果ノード集合。</td> + </tr> + </tbody> +</table> + +<div class="originaldocinfo"> +<p>{{ 英語版章題("Original Document Information") }}</p> + +<h2 id=".E5.8E.9F.E6.96.87.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.83.85.E5.A0.B1">原文情報</h2> + +<ul> + <li>原文 <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a> に基づいて作成されています。</li> + <li>原文の著者: James Graham</li> + <li>その他の貢献者: James Thompson</li> + <li>最終更新日: 2006 年 3 月 25 日</li> +</ul> +</div> + +<p> </p> |