diff options
Diffstat (limited to 'files/ja/conflicting/web')
91 files changed, 9896 insertions, 0 deletions
diff --git a/files/ja/conflicting/web/accessibility/aria/index.html b/files/ja/conflicting/web/accessibility/aria/index.html new file mode 100644 index 0000000000..df17bbcfbb --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria/index.html @@ -0,0 +1,1063 @@ +--- +title: Accessible Rich Internet Applications +slug: ARIA/Accessible_Rich_Internet_Applications +tags: + - AJAX + - Accessibility + - DHTML + - DOM +translation_of: Web/Accessibility/ARIA +translation_of_original: ARIA/Accessible_Rich_Internet_Applications +--- +<p> </p> +<p>Accessibility Rich Internet Applications(ARIA) の Firefox による実装は、ツリービューやメニューバー、表計算などのデスクトップスタイルのウィジェットを、キーボードとスクリーンリーダや拡大鏡、代替入力機器などの支援技術から利用可能にします。また、ページ上で一部を AJAX スタイルのライブアップデートを行う際のアクセシビリティの解決策を提供します。</p> +<p>ARIA は、以前は <a href="ja/DHTML">DHTML</a> アクセシビリティとして知られており、<a class="external" href="http://www.w3.org/">W3C - World Wide Web Consortium</a> にて開発中の標準です。すべての文書は <a class="external" href="http://w3.org/wai/pf">Protocols and Formats Working Group 公式ページ</a> で利用可能です。ここには、<a class="external" href="http://www.w3.org/TR/aria-roadmap/">ARIA ロードマップ</a> および <a class="external" href="http://www.w3.org/TR/aria-role/">ARIA roles 仕様</a>, <a class="external" href="http://www.w3.org/TR/aria-state/">states モジュール</a> が含まれます。</p> +<p>Firefox における ARIA のためのソースコードは IBM によって寄贈されています。</p> +<p>また、<a class="external" href="http://developer.mozilla.org/en/docs/ARIA:_Accessible_Rich_Internet_Applications/Relationship_to_HTML_FAQ">ARIA のよくある質問とその答え(FAQ)</a> もご覧ください。</p> +<p><br> + ARIA の例は Firefox の実装で説明することができます。コミュニティが W3C の Protocols and Formats グループがいくつかの標準化プロセスを経て ARIA 実装へと移行するのを待つ間、今日のウェブサイトはすでに Firefox の ARIA サポートを利用して書かれています。バグ修正と小さな改良は続いており、Firefox における ARIA サポートは進化し続けています。 {{ 英語版章題("Keyboard navigation") }}</p> +<h3 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C">キーボードによる操作</h3> +<p>キーボードナビゲーションは二通りの方法でサポートされています:</p> +<ol> + <li>HTML の <code>tabindex</code> 属性を通して、どの HTML 要素へもタブで移動可能にし、また少なくとも、スクリプトやマウスを通してフォーカスすることができます。タブで移動可能な要素と単にフォーカス可能な要素を区別することによって、コンテナ内の子要素を矢印キーを使って移動できる、ツリービューや表計算のようなコンテナウィジェットを開発することができます。現在、これは Internet Explorer や Firefox, Opera で動作します。Safari では動作しません。キーボードから操作可能な DHTML ウィジェットの tabindex コードの書き方は、<a href="ja/Key-navigable_custom_DHTML_widgets">Practical documentation on building key navigable custom widgets</a> を参照してください。</li> + <li><code>aria-activedescendant</code> 属性を通して。これを利用すると、とても簡単です。(例えば、list や tree, grid などの) コンテナウィジェット 上に tabindex="0" を置くだけで、ウィジェットがタブの移動順に追加されます。そして、aria-activedescendant="{{ mediawiki.external('id') }}" 属性を持つ、現在フォーカスされたものの子孫にフォーカスが移ります。コンテナウィジェット上の keydown ハンドラは、そのフォーカスが移った子孫に変更され、現在の項目がそれと分かるように (border や background color によって) スタイル付けされます。この方法は、すべてのブラウザで動作させることができます。この動作を直接描いた例は、<a class="external" href="http://www.mozilla.org/access/dhtml/listbox">listbox example</a> のソースコードをご覧ください。</li> +</ol> +<p>{{ 英語版章題("Basic support for assistive technologies") }}</p> +<h3 id=".E6.94.AF.E6.8F.B4.E6.8A.80.E8.A1.93.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88" name=".E6.94.AF.E6.8F.B4.E6.8A.80.E8.A1.93.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88">支援技術のための基本的なサポート</h3> +<p>支援技術のサポートには、<a class="external" href="http://www.mozilla.org/projects/firefox/">Firefox 2 以降</a>と、各ウィジェットを記述するために ARIA マークアップを使用するコンテンツを必要とします。例えば、各ウィジェットの種類を指定するために ARIA role を使用する必要があります。ウィジェットの種類にはメニューやスライダー、プログレスバーなどがあります。各 role は、<code>checked</code> および <code>selected</code>, <code>required</code>, <code>invalid</code>, <code>expanded</code> などの追加の property 属性をサポートします。 {{ 英語版章題("What does the markup look like?") }}</p> +<h3 id=".E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E4.BE.8B" name=".E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E4.BE.8B">マークアップ例</h3> +<p>ARIA の勧告が変更され、名前空間がマークアップ内で使用されなくなったため、HTML 内で使用できるようになりました。</p> +<p>例えば、checkbox は以下のように指定します: {{ 英語版章題("In HTML (requires Firefox 3)") }}</p> +<h4 id="HTML_.E3.81.A7.E3.81.AF_.28.E8.A6.81_Firefox_3.29" name="HTML_.E3.81.A7.E3.81.AF_.28.E8.A6.81_Firefox_3.29">HTML では (要 Firefox 3)</h4> +<pre><span tabindex="0" role="checkbox" + aria-checked="true" + onkeydown="return checkBoxEvent(event);" + onclick="return checkBoxEvent(event);"> + チェックボックスのラベル +</span> +</pre> +<p>{{ 英語版章題("Historical Namespace approach (no longer supported)") }}</p> +<h4 id=".E4.BC.9D.E7.B5.B1.E7.9A.84.E3.81.AA.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.97.E3.83.AD.E3.83.BC.E3.83.81_.28.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.BE.E3.81.9B.E3.82.93.29" name=".E4.BC.9D.E7.B5.B1.E7.9A.84.E3.81.AA.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.97.E3.83.AD.E3.83.BC.E3.83.81_.28.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.BE.E3.81.9B.E3.82.93.29">伝統的な名前空間によるアプローチ (サポートされません)</h4> +<p>これは、歴史に残しておくための名前空間によるアプローチです。この方法は宣言が使用されるため、XHTML が必要です。Firefox 3 ではサポートされません:</p> +<pre><span tabindex="0" role="wairole:checkbox" + aaa:checked="true" + onkeydown="return checkBoxEvent(event);" + onclick="return checkBoxEvent(event);"> + チェックボックスのラベル +</span> +</pre> +<p><br> + 上記の checkbox はカスタム構成です。しかし、支援技術とユーザに関しては通常の checkbox のように動作します。作者が望めば、<a href="ja/CSS">CSS</a> を通してビジュアルな外観にすることができます。以下に各属性の意味を解説します:</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>属性</th> + <th>意味</th> + </tr> + <tr> + <td><code>tabindex="0"</code></td> + <td><code><span class="nowiki"><span></span></code> ベースのチェックボックスをタブで移動する順番に含め、マウスでクリックしてフォーカスできるようにします。対照的に、<code>tabindex="-1"</code> はスクリプトやマウスクリックから要素をフォーカスできるようにしますが、既定のタブで移動する順番には含まれません。</td> + </tr> + <tr> + <td><code>role="checkbox"</code></td> + <td>これが checkbox であることを指定します。スクリーンリーダなどの支援技術は、これが checkbox であることを知ることができます。</td> + </tr> + <tr> + <td><code>aria-checked="true"</code></td> + <td>checkbox はチェックが入っているかどうかをサポートしています。この指定により、checkbox がチェック可能であることを示しています。property は支援技術にも向いています。</td> + </tr> + <tr> + <td><code>onkeydown="return checkBoxEvent(event);"</code></td> + <td>スペースキーでチェックの切り替えができるようにします。<code>checkBoxEvent()</code> メソッドでこれを実装しています。同様に、(消費された)イベントが伝達され続けるべきではない場合に false を返します。</td> + </tr> + <tr> + <td><code>onclick="return checkBoxEvent(event);"</code></td> + <td>キーボードハンドラに加えて、これも必要です。checkbox をクリックすると checkbox の値を切り替えます。</td> + </tr> + </tbody> +</table> +<p>このマークアップが使用されている例は、<a href="#Sample_widgets">ARIA サンプル</a> をご覧ください。Firefox はこれらのマークアップ role と property を + <i> + MSAA - Microsoft Active Accessibility</i> + と + <i> + ATK - Accessibility Toolkit</i> + (from <a class="external" href="http://developer.gnome.org/projects/gap/">Gnome Accessibility Project</a>) から実装しています。これは、Windows と Linux 上でのアクセシビリティ API 標準です。ウィジェットの情報がアクセシビリティ API 標準を通して公開されているため、支援技術はこれらのウィジェットを用いて、新しいコードなしで多くの互換性を得ることができます。現在、最も完全なスクリーンリーダによるサポートには + <i> + <a class="external" href="http://www.gwmicro.com/">Window-Eyes 5.5</a></i> + が必要です。 + <i> + <a class="external" href="http://www.aisquared.com/">ZoomText</a></i> + などのスクリーン拡大鏡もまた、ARIA と互換性があります。</p> +<p>Internet Explorer による role や property のサポートは現在利用できません。Internet Explorer は現在、これらのウィジェットのキーボード操作のみサポートしています。支援技術ベンダーは、Internet Explorer を変更せずに <a href="ja/DOM">DOM</a> と DOM 変更イベントを直接探すことによって、ARIA のセマンティクスをサポートできるようにするべきです。 {{ 英語版章題("Choosing XHTML or HTML") }}</p> +<h3 id="XHTML_.E3.81.A8_HTML_.E3.81.AE.E3.81.A9.E3.81.A1.E3.82.89.E3.82.92.E9.81.B8.E3.81.B6.E3.81.8B" name="XHTML_.E3.81.A8_HTML_.E3.81.AE.E3.81.A9.E3.81.A1.E3.82.89.E3.82.92.E9.81.B8.E3.81.B6.E3.81.8B">XHTML と HTML のどちらを選ぶか</h3> +<p>XHTML と HTML (または SVG と XUL) のどちらを使用するかという問題はなくなりました。Firefox は名前空間なしの新しいマークアップを、他のものと同じ方法で処理します。content type の心配をしなくても、ARIA マークアップ宣言を使用し、それを他のものと同様に動的に設定することができます。初期の ARIA の扱いに比べれば、これは劇的な向上です! {{ 英語版章題("Sample widgets") }}</p> +<h3 id=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.82.A6.E3.82.A3.E3.82.B8.E3.82.A7.E3.83.83.E3.83.88" name=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.82.A6.E3.82.A3.E3.82.B8.E3.82.A7.E3.83.83.E3.83.88">サンプルウィジェット</h3> +<p>{{ 英語版章題("Testing with keyboard and mouse navigation") }}</p> +<h4 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.A8.E3.83.9E.E3.82.A6.E3.82.B9.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C.E3.82.92.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.A8.E3.83.9E.E3.82.A6.E3.82.B9.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C.E3.82.92.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">キーボードとマウスによる操作をテストする</h4> +<p>キーボードまたはマウスによる操作は、Internet Explorer と Firefox のどちらでも可能です。サンプルの HTML バージョンのみが Internet Explorer 上でテストし、動作するように作られているので注意してください。サンプルの XHTML バージョンはそうではありません。 {{ 英語版章題("Testing with Firefox Accessibility Extension") }}</p> +<h4 id="Firefox_.E3.81.AE.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E6.8B.A1.E5.BC.B5.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name="Firefox_.E3.81.AE.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E6.8B.A1.E5.BC.B5.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">Firefox のアクセシビリティ拡張でテストする</h4> +<p><a class="external" href="http://firefox.cita.uiuc.edu/index.php">Firefox Accessibility Extension</a> は ARIA role のアクセシビリティをテストする機能を持っています。 {{ 英語版章題("Testing with screen readers") }}</p> +<h4 id=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.BC.E3.83.B3.E3.83.AA.E3.83.BC.E3.83.80.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.BC.E3.83.B3.E3.83.AA.E3.83.BC.E3.83.80.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">スクリーンリーダでテストする</h4> +<p>スクリーンリーダのサポートは Firefox 1.5 以降でのみ利用可能です。以下のコンポーネントをインストールする必要があります:</p> +<ol> + <li>Firefox: <a class="external" href="http://www.mozilla.com/firefox/">Firefox</a> からダウンロードしてインストールしてください。</li> + <li>スクリーンリーダ: スクリーンリーダでテストするには <a class="external" href="http://www.gwmicro.com/">Window-Eyes</a> 5.5 以降が必要です。加えて、JAWS 7.x が ARIA の一部をサポートしています。また、Orca 2.20 以降が Firefox 3.0 のほとんどの ARIA ウィジェット型をサポートしています。</li> +</ol> +<p>{{ 英語版章題("Where can I find samples?") }}</p> +<h4 id=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.81.AF.E3.81.A9.E3.81.93.E3.81.AB.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.81.8B.3F" name=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.81.AF.E3.81.A9.E3.81.93.E3.81.AB.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.81.8B.3F">サンプルはどこにありますか?</h4> +<p>注意: 以下の例は、次のセクションの role/property にもあります。 {{ 英語版章題("Dojo Toolkit") }}</p> +<h5 id="Dojo_Toolkit" name="Dojo_Toolkit">Dojo Toolkit</h5> +<p><a class="external" href="http://www.dojotoolkit.org/">Dojo 1.0 widget toolkit</a> のすべての <a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/">Dijit ウィジェット</a>コアは ARIA をサポートしています。スクリーンリーダをサポートする Dojo の例は、Firefox 2 または Firefox 3 で開かなくてはなりません。 {{ 英語版章題("University of Illinois") }}</p> +<h5 id=".E3.82.A4.E3.83.AA.E3.83.8E.E3.82.A4.E5.A4.A7.E5.AD.A6" name=".E3.82.A4.E3.83.AA.E3.83.8E.E3.82.A4.E5.A4.A7.E5.AD.A6">イリノイ大学</h5> +<p><a class="external" href="http://test.cita.uiuc.edu/aria/">イリノイ大学の ARIA テストスイート</a>は、スクリーンリーダのサポートに Firefox 3 が必要です。 {{ 英語版章題("Mozilla bare bones examples") }}</p> +<h5 id="Mozilla_.E3.83.99.E3.82.A2.E3.83.9C.E3.83.BC.E3.83.B3.E3.81.AE.E4.BE.8B" name="Mozilla_.E3.83.99.E3.82.A2.E3.83.9C.E3.83.BC.E3.83.B3.E3.81.AE.E4.BE.8B">Mozilla ベアボーンの例</h5> +<p>Mozilla.org の ARIA テストページは、ここから学ぶためのいくつかの例を提供しています。スクリーンリーダのサポートは Firefox 3 が必要です:</p> +<ol> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Checkbox</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/button">説明つき Button</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">グラフィカルな slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">簡単な slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Progress bar</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/alert">Alert</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">menubar 付きの Grid (spreadsheet)</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">タブパネル</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Listbox</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Tree ビュー</a>, <a class="external" href="http://www.weba11y.com/AjaxDemo/sample.html">Tree ビュー #2</a></li> +</ol> +<p>{{ 英語版章題("CLC World: live region examples") }}</p> +<h5 id="CLC_World:_live_region_.E3.81.AE.E4.BE.8B" name="CLC_World:_live_region_.E3.81.AE.E4.BE.8B">CLC World: live region の例</h5> +<p>現在の <a class="external" href="http://accessibleajax.clcworld.net/">live region の例</a> は Fire Vox 内で動作します。Fire Vox スクリーンリーダ拡張の実行は、Firefox のどのバージョンを使用しても問題ありません。 {{ 英語版章題("Supported roles") }}</p> +<h3 id=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_role" name=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_role">サポートされている role</h3> +<p>ここには、Firefox に対応した使用例のある role と 各 role に対応する property の表があります。一部の property は "universal properties" であり、すべての要素上で動作することに注意してください。詳しくは、対応する property のセクションをご覧ください。</p> +<p>他の方法で指示されていない限り、property はブーリアン値で <code>true</code> または <code>false</code> に対応します。ブーリアン値である場合は、値が設定されていない属性には <code>false</code> が設定されます。</p> +<p>ただし、<code>checked</code> および <code>selected</code>, <code>expanded</code> 属性は特別です。属性に <code>false</code> が提供されている場合は、ウィジェットが checkable/selectable/expandable であると指示され、<code>false</code> が無いものとは異なります。</p> +<p>また私たちは、<a href="ja/ARIA_to_API_mapping">これらの情報を Firefox がどのように Windows(MSAA) や Linux(ATK) 上のアクセシビリティ API を通して公開しているか</a>、技術の詳細を提供しています。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Role</th> + <th>サポートされている作者が定義した property †</th> + <th>自動的にサポートされる property</th> + <th>使用例</th> + <th>Firefox 1.5 対応</th> + <th>Firefox 2 対応</th> + <th><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox 3</a> テストビルド対応</th> + </tr> + <tr> + <td><code>alert</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/alert">Mozilla.org alert</a>,</td> + <td colspan="3">Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>alertdialog</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>application</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org Grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>button</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>pressed</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.weba11y.com/Examples/button.html">Weba11y button</a> <a class="external" href="http://www.mozilla.org/access/dhtml/button">説明付きの Mozilla.org button</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/button">UIUC button</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 8.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 8.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>checkbox</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>invalid</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/checkbox">UIUC checkbox</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>columnheader</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>readonly</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>combobox</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>expanded</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/combo">Mozilla.org combo box</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>description</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/button">Mozilla.org button</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降<br> + 要素上では、その要素のための記述と共に <code>aria-describedby</code> を使用する必要があります。</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>dialog</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Dialog.html">Dojo dialog</a></td> + <td colspan="2"> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>directory</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>document</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>grid</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/grid">UIUC grid</a></td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(JAWS は row/column ヘッダを読まないため)</li> + <li>まだ公開されていなかったため、Firefox 1.5 では <code>multiselectable</code> に未対応。</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)</li> + <li><code>multiselectable</code> に対応している場合、検証データをテストする必要あり</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>Orca 2.20 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)</li> + <li><code>multiselectable</code> に対応している場合、検証データをテストする必要あり</li> + </ul> + </td> + </tr> + <tr> + <td><code>gridcell</code></td> + <td> + <ul> + <li><code>disabled</code><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できないない状態を指示)</li> + <li><code>readonly</code></li> + <li><code>invalid</code></li> + <li><code>required</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/grid">UIUC grid</a></td> + <td colspan="2"> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)</li> + <li>Orca 2.20 以降</li> + </ul> + </td> + </tr> + <tr> + <td><code>group</code></td> + <td> </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org progress bar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>img</code></td> + <td> </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/imagetiled">Mozilla.org 並べられた image</a></td> + <td>未対応</td> + <td>未対応</td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>label</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>link</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前、<code>linked</code>(常に true)</td> + <td><code>disabled</code></td> + <td>名前の処理が不正確</td> + <td>名前の処理が不正確</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>list</code></td> + <td> + <ul> + <li><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>listbox</code></td> + <td> + <ul> + <li><code>disabled</code><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org listbox</a></td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>listitem</code></td> + <td> + <ul> + <li><code>disabled</code><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>log</code> (チャットログ、ゲームログ、エラーログなど。デフォルトで実況)</td> + <td> </td> + <td> </td> + <td><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></td> + <td colspan="3">公開されているが、現在は対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>menu</code></td> + <td><code>disabled</code></td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>menubar</code></td> + <td><code>disabled</code></td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/menubar">UIUC menubar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>menuitem</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>checked=true|false|mixed</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/menubar">UIUC menubar</a></td> + <td>Window-Eyes 5.5, JAWS 7.1 以降 (<code>checked=mixed</code> には未対応)</td> + <td>Window-Eyes 5.5, JAWS 7.1 以降 (<code>checked=mixed</code> に対応している場合、検証データをテストする必要あり)</td> + <td>Window-Eyes 5.5, Orca 2.20 以降、JAWS 7.1 以降 (<code>checked=mixed</code> に対応している場合、検証データをテストする必要あり)</td> + </tr> + <tr> + <td><code>menuitemcheckbox</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td><code>checkable</code>, 子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>menuitemradio</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td><code>checkable</code>, 子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>option</code></td> + <td> + <ul> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>disabled</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org listbox</a></td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>presentation</code></td> + <td> </td> + <td>これらの項目はアクセシビリティの階層から自動的に削除されます。table 上に置いたときは、table 以下のすべての子孫もまたアクセシビリティの階層から自動的に削除されます。</td> + <td> </td> + <td colspan="3">MSAA や ATK のようにアクセシビリティ API を使用する、DOM ベースでない支援技術すべて<br> + 例えば、Window-Eyes 5.5 以降、JAWS 7.0 以降、ZoomText 9.1 以降、Orca 2.20 以降で動作するが、Fire Vox では動作しない</td> + </tr> + <tr> + <td><code>progressbar</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>valuenow="#"|"unknown"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org progress bar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>radio</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons ATRC radio buttons (ARIA の名前空間のみ)</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/radio">UIUC radio buttons</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>required</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/radio">UIUC radio buttons</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>region</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>row</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false|mixed</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>expanded=true|false</code> (<code>expanded</code> 属性が無いものは展開できない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>なし</td> + <td>Firefox 3 に向けて作業中</td> + </tr> + <tr> + <td><code>rowheader</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>readonly</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>separator</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>slider</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>valuenow="#"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">Mozilla.org 平坦な slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">Mozilla.org グラフィカルな slider</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/slider">UIUC slider</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)</td> + </tr> + <tr> + <td><code>spinbutton</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>valuenow="#"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Spinner.html">Dojo spinner</a></td> + <td colspan="2"> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>tab</code></td> + <td><code>disabled</code></td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>tablist</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>tabpanel</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>textbox</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>multiline</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/textfield">UIUC textfield</a></td> + <td>未対応</td> + <td>未対応</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + </tr> + <tr> + <td><code>toolbar</code></td> + <td><code>disabled</code></td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、どの支援技術がこれに対応しているか、または必要としているかが不明確</td> + </tr> + <tr> + <td><code>tooltip</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/new/tooltip.html">Mozilla.org tooltip</a></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>tree</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>multiselectable</code></li> + <li><code>readonly</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></td> + <td colspan="2">Windows-Eyes 5.5 以降、JAWS 7.0</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降</td> + </tr> + <tr> + <td><code>treegrid</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>multiselectable</code></li> + <li><code>readonly</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>なし</td> + <td>Firefox で作業中のため未サポート</td> + </tr> + <tr> + <td><code>treeitem</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false|mixed</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>expanded=true|false</code> (<code>expanded</code> 属性が無いものは展開できない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0 以降、<code>checked=mixed</code> には未対応</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降</td> + </tr> + </tbody> +</table> +<p>† 下記の表において、適用性の列が "すべての要素" と書かれているすべての要素が universal property を許容します。 {{ 英語版章題("Landmark Roles from XHTML role attribute module") }}</p> +<h4 id=".E4.BB.A3.E8.A1.A8.E7.9A.84.E3.81.AA_XHTML_.E3.81.AE_role_.E5.B1.9E.E6.80.A7.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB" name=".E4.BB.A3.E8.A1.A8.E7.9A.84.E3.81.AA_XHTML_.E3.81.AE_role_.E5.B1.9E.E6.80.A7.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB">代表的な XHTML の role 属性モジュール</h4> +<p><a class="external" href="http://www.w3.org/TR/xhtml-role/">XHTML の role 属性モジュール</a> は次の role を定義しています: <code>banner, contentinfo, definition, main, navigation, note, search, secondary, seealso</code></p> +<p>XHTML では、これらの代表的な role を "wairole:" プレフィックス無しで使用することができます (例: <code><div role="main"></code>)。理想的なスクリーンリーダーは、これらの role を用いてナビゲーション機構を提供するか、ユーザがメインコンテンツに入ると自動的にナビゲーションを開始します。スクリーン拡大鏡や携帯電話もまた、メインコンテンツから開始するか、特別なハイライトやナビゲーション機構を提供します。しかしながら、これらの role は MSAA 下の role を通じて公開されており、現在ある支援技術には特別なサポートが知られていません。 {{ 英語版章題("Supported properties") }}</p> +<h3 id=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_property" name=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_property">サポートされている property</h3> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Property 名</th> + <th>適用性</th> + <th>使用例</th> + <th>Firefox 1.5 対応</th> + <th>Firefox 2 対応</th> + <th><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox 3</a> テストビルド対応</th> + </tr> + <tr> + <td><code>aria-activedescendant="{{ mediawiki.external('id') }}"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org Listbox</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-atomic="true"</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/atomic_false.htm">aria-atomic="false"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/atomic_true.htm">aria-atomic="true"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/form_hints/form_hints.htm">フォームのヒント</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-busy="true" or "false" or "error"</code></td> + <td>すべての要素</td> + <td> </td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-channel="main" (default) or "notify"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-checked="true"</code><br> + <code>aria-checked="false"</code> (チェック可能だがチェックされていない)</td> + <td>roles: checkbox, menuitem, menuitemcheckbox, menuitemradio, listitem, option, radio, treeitem</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a>, + <p><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox">UIUC checkbox</a></p> + </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-checked="mixed"</code> (チェック可能だが未確定)</td> + <td>roles: checkbox, menuitem, treeitem</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-controls=IDLIST</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/controls.htm">aria-controls=IDLIST</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_controls-and-politeness.htm">controls と politeness</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-datatype="xsd:DATATYPE"</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>公開されているが、対応する支援技術は無い</td> + </tr> + <tr> + <td><code>aria-describedby=IDLIST</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/button">Mozilla.org button with aria-describedby</a> + <p><a class="external" href="http://accessibleajax.clcworld.net/simple/describedby.htm">Live region with aria-describedby</a></p> + </td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-disabled="true"</code></td> + <td>roles: button, checkbox, columnheader, combobox, grid, gridcell, link, listbox, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, radiogroup, row, rowheader, slider, spinbutton, tab, textbox, toolbar, tree, treegrid, treeitem</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降 (span への参照点なし)</td> + </tr> + <tr> + <td><code>aria-dropeffect="copy" または "move", "reference", "none"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-expanded="true"</code></td> + <td>roles: treeitem, region, (combobox?)</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, + <p><a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></p> + </td> + <td> </td> + <td> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-flowto=IDLIST</code></td> + <td>すべての要素</td> + <td> </td> + <td>公開されているが、対応する支援技術は無い</td> + <td>公開されているが、対応する支援技術は無い</td> + <td>公開されているが、対応する支援技術は無い</td> + </tr> + <tr> + <td><code>aria-grab= "true" または "false", "supported"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-haspopup="true"</code></td> + <td>すべての要素</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-hidden="true"</code></td> + <td>すべての要素</td> + <td> </td> + <td>要素のスタイルに display: none がある場合に動作</td> + <td>要素のスタイルに display: none がある場合に動作</td> + <td>要素のスタイルに display: none がある場合に動作</td> + </tr> + <tr> + <td><code>aria-invalid="true"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/errorAlert.xhtml">ATRC alert</a>, + <p><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></p> + </td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>aria-labelledby="{{ mediawiki.external('IDLIST') }}"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://accessibleajax.clcworld.net/simple/labelledby.htm">aria-labelledby=IDLIST</a></td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-level=POSITIVE_NUMBER</code></td> + <td>すべての要素、特に treeitem 上で有用</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>ツリービューでのみ動作、Window-Eyes 5.5 以降および JAWS 7.0 以降</td> + </tr> + <tr> + <td><code>aria-live=POLITENESS</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_off.htm">aria-live="off"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_polite.htm">aria-live="polite"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_assertive.htm">aria-live="assertive"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_rude.htm">aria-live="rude"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_multiple-regions.htm">複数の live region</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_nested-regions.htm">入れ子状の live regions</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_controls-and-politeness.htm">controls と politeness</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/form_hints/form_hints.htm">フォームのヒント</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/scoreboard/scoreboard.htm">Scoreboard</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-multiselectable="true"</code></td> + <td>roles: grid, list, tree</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/grid/grid.html">UIUC grid</a></td> + <td>未対応</td> + <td>未対応</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-owns</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>無し</td> + </tr> + <tr> + <td><code>aria-pressed="true"</code></td> + <td>roles: button</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/button">UIUC button</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-posinset=POSITIVE_NUMBER</code> (treeitem 上の場合、aria-setsize および aria-level と共に使用)</td> + <td>すべての要素、特に option, listitem, treeitem 上で有用</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作</td> + </tr> + <tr> + <td><code>aria-readonly="true"</code></td> + <td>roles: checkbox, columnheader grid, gridcell, list, rowheader, spinbutton, textarea, textfield</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-relevant=RELEVANCE_LIST</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_additions.htm">aria-relevant="additions"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_removals.htm">aria-relevant="removals"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_text.htm">aria-relevant="text"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_all.htm">aria-relevant="all"</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>role="{{ mediawiki.external('rolename') }}"</code></td> + <td>すべての要素</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + </tr> + <tr> + <td><code>aria-required="true"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>selected="true"</code><br> + <code>selected="false"</code> (選択可能だが、選択されていない)</td> + <td>roles: columnheader, gridcell, listitem, option, rowheader</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/grid/grid.html">UIUC grid</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-setsize=POSITIVE_NUMBER</code> (treeitem 上の場合、aria-setsize および aria-level と共に使用)</td> + <td>すべての要素、特に option, listitem, treeitem 上で有用</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作</td> + </tr> + <tr> + <td><code>aria-sort=SORT_TYPE</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>アクセシビリティ API を通して公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>すべての HTML 要素</td> + <td> </td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + </tr> + <tr> + <td><code>valuenow="#"</code><br> + <code>valuemin="#"</code><br> + <code>valuemax="#"</code></td> + <td>roles: progressbar, slider, spinbutton</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">Mozilla.org 平坦な slider</a> <a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">Mozilla.org グラフィカルな slider</a> <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org plain progress bar</a></td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>valuenow の設定なし (値が未確定)</code></td> + <td>roles: progressbar</td> + <td> </td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + </tbody> +</table> +<p>{{ 英語版章題("Live regions") }}</p> +<h3 id="Live_regions" name="Live_regions">Live regions</h3> +<p>一部のウェブページには、ユーザのアクションや現実世界のイベントによって更新することができる Live region(動的更新が可能な領域) があります。ユーザのアクションによる変更の例は、<a class="external" href="http://developer.mozilla.org/ja/docs/Special:Preferences">この wiki のオプションページ</a>です。現実世界のイベントによる変更の例には、<a class="external" href="http://ircatwork.com/">チャット領域</a> や <a class="external" href="http://cbs.sportsline.com/nba/scoreboard">試合状況のライブ更新</a>, <a class="external" href="http://finance.yahoo.com">金融情報のライブ更新</a> があります。</p> +<p>今のところ、スクリーンリーダの Live region のためのアクセシビリティには問題があります。スクリーンリーダがページ上のすべての変更を逐次読み上げてしまうと、ユーザにとって迷惑になります。もし、スクリーンリーダがそれらを読み上げなければ、ユーザは極めて重要な情報を失うことになります。</p> +<p>解決策は ARIA を通して開発されており、ウェブページの作者がそこにある Live region が何かを指定し、また Live region についての追加の役立つ情報を指定することができます。これは、スクリーンリーダが何をいつ読み上げればよいかを決められるようにします。</p> +<p>これらの ARIA プロパティには、aria-live および aria-atomic, aria-relevant, aria-controls, aria-labelledby, aria-describedby があります。現在のサポートは、標準仕様の執筆活動を前進させ、ウェブ開発者コミュニティに対して WAI-ARIA を採用する利点を実証し、またスクリーンリーダ開発者コミュニティがエンドユーザに WAI-ARIA の 動作を体験できることを示すため、<a class="external" href="http://www.firevox.clcworld.net/">Fire Vox スクリーン読み上げ拡張機能</a>で開発されています。</p> +<p>さらに詳しい情報:</p> +<ul> + <li>Live region マークアップの開発状況の完全なリポートは、<a href="ja/AJAX/WAI_ARIA_Live_Regions">AJAX:WAI_ARIA_Live_Regions</a> をご覧ください。ここでは、Fire Vox で動作するテストケースへのリンクも提供しています。</li> + <li><a class="external" href="http://accessibleajax.clcworld.net/">テストケースの簡単なものと詳細なもの</a> は、Fire Vox 拡張の開発者である Charles Chen 氏によって提供されています。これらの例はすべて、Fire Vox で動作します。</li> + <li>その他のマークアップの記述は、Gez Lemon 氏による Juicy Studio の <a class="external" href="http://juicystudio.com/article/wai-aria-live-regions.php">ARIA live region についての記事</a>にあります。</li> +</ul> +<p>Firefox 3 の登場までに、Live region がスクリーンリーダのすべての目的に対応することは期待されていません。 {{ 英語版章題("Standards development for ARIA") }}</p> +<h3 id="ARIA_.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E6.A8.99.E6.BA.96.E9.96.8B.E7.99.BA" name="ARIA_.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E6.A8.99.E6.BA.96.E9.96.8B.E7.99.BA">ARIA のための標準開発</h3> +<p><a class="external" href="http://www.w3.org">W3C</a> の <a class="external" href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> の中身は <a class="external" href="http://www.w3.org/WAI/PF/">Protocols and Formats Working Group (PFWG)</a> です。このグループは、<a class="external" href="http://www.w3.org/WAI/PF/#Roadmap">Dynamic Web Content Accessibility Work roadmap</a> と呼ばれるものに大きく焦点を当てており、すべての重要な格差を埋める長期的な努力と同時に、基本的な role および properties を定義する短期間の努力をしています。 {{ 英語版章題("Open Bugs in Firefox") }}</p> +<h3 id="Firefox_.E3.81.AE.E5.85.AC.E9.96.8B.E3.83.90.E3.82.B0" name="Firefox_.E3.81.AE.E5.85.AC.E9.96.8B.E3.83.90.E3.82.B0">Firefox の公開バグ</h3> +<p>完全な <a class="link-https" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1">Firefox の ARIA バグ一覧</a> では、Firefox の ARIA 対応の進捗を追跡することができます。 {{ 英語版章題("Future of ARIA") }}</p> +<h3 id=".E5.B0.86.E6.9D.A5.E3.81.AE_ARIA" name=".E5.B0.86.E6.9D.A5.E3.81.AE_ARIA">将来の ARIA</h3> +<p>追加の ARIA サポートは将来のリリースで計画されています。この作業は W3C PF グループの安定した標準から得ることに依存しています。これらの変更には、作者が既存の role を継承して新しい role を定義したり、動作を記述したり、要素間の関係を新たに指定したり、またブラウザと Web ページの間でのキーボード・アクセラレータの今日のような衝突を避けるセマンティック・アクセスキーのサポートが含まれます。 {{ 英語版章題("ARIA IRC channel and mailing list") }}</p> +<h3 id="ARIA_IRC_.E3.83.81.E3.83.A3.E3.83.B3.E3.83.8D.E3.83.AB.E3.81.A8.E3.83.A1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.E3.83.AA.E3.82.B9.E3.83.88" name="ARIA_IRC_.E3.83.81.E3.83.A3.E3.83.B3.E3.83.8D.E3.83.AB.E3.81.A8.E3.83.A1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.E3.83.AA.E3.82.B9.E3.83.88">ARIA IRC チャンネルとメーリングリスト</h3> +<p>WAI-ARIA について公共の場で討議するには #wai-aria チャンネル (irc.w3.org:6665) に参加してください。メンバーは内部ドラフト案を #pf で審議してください。</p> +<p>公共の討議をするメーリングリストは wai-xtech です。wai-xtech に参加したい方は PFWG 議長 <a class="link-mailto" href="mailto:(wai-pf-call@w3.org)" rel="freelink">(wai-pf-call@w3.org)</a> に購読希望のメールを出してください。</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/ARIA/Accessible_Rich_Internet_Applications", "fr": "fr/ARIA/Applications_riches_Internet_accessibles" } ) }}</p> diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..b84af866ef --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +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/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html new file mode 100644 index 0000000000..be09a119f7 --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html @@ -0,0 +1,213 @@ +--- +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/conflicting/web/api/crypto/getrandomvalues/index.html b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..5972564d98 --- /dev/null +++ b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,113 @@ +--- +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/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c09e67595e --- /dev/null +++ b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,31 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +tags: + - DOM +--- +<p><span class="CRHTML_TXN"><span id="eq00000g00003">要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。</span></span></p> + +<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">表示に使用されている領域の大きさはどのくらいか？</h3> + +<p>表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、<code><a href="/ja/DOM/element.offsetWidth" title="ja/DOM/element.offsetWidth">offsetWidth</a></code> プロパティと <code><a href="/ja/DOM/element.offsetHeight" title="ja/DOM/element.offsetHeight">offsetHeight</a></code> プロパティを利用するのが良いです:</p> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + +<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されているコンテンツのサイズは何か?</h3> + +<p>border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 <code><a href="/ja/DOM/element.clientWidth" title="ja/DOM/element.clientWidth">clientWidth</a></code> プロパティと <code><a href="/ja/DOM/element.clientHeight" title="ja/DOM/element.clientHeight">clientHeight</a></code> プロパティを利用するのが良いです:</p> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどのくらいか?</h3> + +<p>現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、<code><a href="/ja/DOM/element.scrollWidth" title="ja/DOM/element.scrollWidth">scrollWidth</a></code> プロパティと <code><a href="/ja/DOM/element.scrollHeight" title="ja/DOM/element.scrollHeight">scrollHeight</a></code> プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。</p> + +<p>たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。</p> + +<h3 id="References" name="References">リファレンス</h3> + +<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p> + +<p>{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}</p> diff --git a/files/ja/conflicting/web/api/document/characterset/index.html b/files/ja/conflicting/web/api/document/characterset/index.html new file mode 100644 index 0000000000..bc128b09e8 --- /dev/null +++ b/files/ja/conflicting/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +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/conflicting/web/api/document/createevent/index.html b/files/ja/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..d9dc6aef3f --- /dev/null +++ b/files/ja/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,32 @@ +--- +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/conflicting/web/api/document_object_model/index.html b/files/ja/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..5bd2ec6ada --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,5 @@ +--- +title: DOM Client Object Cross-Reference +slug: DOM_Client_Object_Cross-Reference +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html new file mode 100644 index 0000000000..736d3074ba --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html @@ -0,0 +1,16 @@ +--- +title: DOM (Document Object Model) について +slug: DOM/About_the_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +<h2 id="What_is_the_DOM.3F" name="What_is_the_DOM.3F">DOM とは何か?</h2> +<p><a href="/ja/docs/DOM">Document Object Model</a> は <a href="/ja/docs/HTML">HTML</a> と <a href="/ja/docs/XML">XML</a> ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。</p> +<p>ウェブ開発者がウェブページを操作及び作成するのに役立つ全てのプロパティ、メソッド、そしてイベントは、<a href="/ja/docs/Gecko_DOM_Reference">objects</a> に組込まれています。(例えば、document オブジェクトはドキュメントそのもの、table オブジェクトは HTML テーブル要素を表すなど)。これらのオブジェクトは最新のウェブブラウザのスクリプティング言語を通してアクセス可能です。</p> +<p>DOM は <a href="/ja/docs/JavaScript">JavaScript</a> との関連において最も頻繁に使われます。JavaScript で書かれたコードは、しかしウェブページとその要素にアクセスするのには DOM を使う為です。しかしながら、 DOM はあらゆる個々のプログラミング言語から独立して設計され、ドキュメントの構造的な表現の作成が、単独で、一貫した API により利用できます。当サイトでは終始 JavaScript に焦点を置きますが、DOM の実装は<a href="http://www.w3.org/DOM/Bindings">あらゆる言語</a> でビルドする事が出来ます。</p> +<p><a href="http://www.w3.org/">World Wide Web Consortium</a> は W3C DOM と呼ばれる <a href="http://www.w3.org/DOM/">DOM 標準</a>を設けました。今こそ、有力なブラウザは正しくこれを実装し、強力なクロスブラウザアプリケーションを可能にすべきです。</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">何故 Mozilla が DOM をサポートすることが重要か</h2> +<p>"Dynamic HTML" (<a href="/ja/docs/DHTML">DHTML</a>) は、あるベンダーが、HTML、スタイルシート、及びドキュメントを活発にするスクリプトの組み合わせを表現するのに使われる一方言です。 W3C DOM ワーキンググループは、必ずや相互実行可能且つ言語的に中立なソリューションが合意に至るよう熱心に努めています(<a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a> も見てください)。Mozilla が "ウェブアプリケーションプラットフォーム" を標榜するならば、DOM のサポートは最も求められる機能の一つであり、もし Mozilla が他のブラウザの代替として成功したいのなら、欠かせないものです。</p> +<p>さらにより重要なことは、Mozilla (Firefox や Thunderbird も然り) のユーザインタフェースが XUL -- XML User interface Language でビルドされているという事実です。故に Mozilla は<a href="/ja/docs/Dynamically_modifying_XUL-based_user_interface">自身の UI を操作する</a>為に DOM を使います。</p> diff --git a/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..dcee4acf84 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,37 @@ +--- +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/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html new file mode 100644 index 0000000000..4a390b9177 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html @@ -0,0 +1,52 @@ +--- +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/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..740d006c66 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,13 @@ +--- +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/conflicting/web/api/documentorshadowroot/index.html b/files/ja/conflicting/web/api/documentorshadowroot/index.html new file mode 100644 index 0000000000..a7953136e6 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/index.html @@ -0,0 +1,79 @@ +--- +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/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html new file mode 100644 index 0000000000..d3f79b8d11 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html @@ -0,0 +1,83 @@ +--- +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/conflicting/web/api/element/compositionstart_event/index.html b/files/ja/conflicting/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..e02e6c35ef --- /dev/null +++ b/files/ja/conflicting/web/api/element/compositionstart_event/index.html @@ -0,0 +1,80 @@ +--- +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/conflicting/web/api/element/index.html b/files/ja/conflicting/web/api/element/index.html new file mode 100644 index 0000000000..859be5e107 --- /dev/null +++ b/files/ja/conflicting/web/api/element/index.html @@ -0,0 +1,50 @@ +--- +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/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..605885878f --- /dev/null +++ b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,145 @@ +--- +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/conflicting/web/api/globaleventhandlers/onclick/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..ac36968fa6 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,45 @@ +--- +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/conflicting/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..b5f947f8be --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,48 @@ +--- +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/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..f7133126a9 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,57 @@ +--- +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/conflicting/web/api/html_drag_and_drop_api/index.html b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..6b9a4be242 --- /dev/null +++ b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,9 @@ +--- +title: DragDrop +slug: DragDrop +--- +<p> </p> + +<p>This page was auto-generated because a user created a sub-page to this page.</p> + +<p> </p> diff --git a/files/ja/conflicting/web/api/index.html b/files/ja/conflicting/web/api/index.html new file mode 100644 index 0000000000..e069431e6e --- /dev/null +++ b/files/ja/conflicting/web/api/index.html @@ -0,0 +1,58 @@ +--- +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/conflicting/web/api/mediastream_recording_api/index.html b/files/ja/conflicting/web/api/mediastream_recording_api/index.html new file mode 100644 index 0000000000..a2e3ec8eaf --- /dev/null +++ b/files/ja/conflicting/web/api/mediastream_recording_api/index.html @@ -0,0 +1,187 @@ +--- +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/conflicting/web/api/mouseevent/button/index.html b/files/ja/conflicting/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..572f611ebc --- /dev/null +++ b/files/ja/conflicting/web/api/mouseevent/button/index.html @@ -0,0 +1,60 @@ +--- +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/conflicting/web/api/navigator/index.html b/files/ja/conflicting/web/api/navigator/index.html new file mode 100644 index 0000000000..141fc19189 --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/index.html @@ -0,0 +1,620 @@ +--- +title: navigator +slug: DOM_Client_Object_Cross-Reference/navigator +translation_of: Web/API/Navigator +translation_of_original: DOM_Client_Object_Cross-Reference/navigator +--- +<p> +</p> +<table class="standard-table"> +<tbody><tr> +<th>ユーザエージェント</th> +<th>プロパティ</th> +<th>読み取り専用</th> +<th>データ型</th> +<th>デフォルト値</th> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appCodeName</td> +<td>false</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appMinorVersion</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('hotfixes installed') }}</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appMinorVersion</td> +<td>false</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Microsoft Internet Explorer</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appName</td> +<td>false</td> +<td>string</td> +<td>Microsoft Internet Explorer</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }};)</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>4.0 (compatible; MSIE 6.0; ...)</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appVersion</td> +<td>false</td> +<td>string</td> +<td>4.0 (compatible; MSIE 6.0; {{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>browserLanguage</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on language') }}</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>browserLanguage</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>false</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>cookieEnabled</td> +<td>false</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>cpuClass</td> +<td>true</td> +<td>string</td> +<td>depends on CPU</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>IE-6.0</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>depends on default language</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>en-US</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>en-US</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>language</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>mimeTypes</td> +<td>false</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypes') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>onLine</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>opsProfile</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>platform</td> +<td>false</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>plugins</td> +<td>false</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>CCYYMMDD - build date</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>CCYYMMDD</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>20050511</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>IE-6.0</td> +<td>systemLanguage</td> +<td>true</td> +<td>string</td> +<td>depends on default langauge</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td>false {{ Obsolete_inline() }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.0.1) Gecko/CCYYMMDD Vendor/version</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.4) Gecko/20030624</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.7.8) Gecko/20050511</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/4.0 (compatible; MSIE 6.0; ...)</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>userAgent</td> +<td>false</td> +<td>string</td> +<td>Mozilla/4.0 (compatible; MSIE 6.0; ...) Opera 8.0</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userLanguage</td> +<td>true</td> +<td>string</td> +<td>depends on default langauge</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>userLanguage</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userProfile</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td>empty if Mozilla, otherwise matches Vendor in userAgent</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td>empty if Mozilla, otherwise matches version in userAgent</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +</tbody></table> +{{ languages( { "en": "en/DOM_Client_Object_Cross-Reference/navigator" } ) }} diff --git a/files/ja/conflicting/web/api/node/index.html b/files/ja/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..1de7600c48 --- /dev/null +++ b/files/ja/conflicting/web/api/node/index.html @@ -0,0 +1,33 @@ +--- +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/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..41547615f2 --- /dev/null +++ b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,21 @@ +--- +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/conflicting/web/api/url/index.html b/files/ja/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..ac758d1b3b --- /dev/null +++ b/files/ja/conflicting/web/api/url/index.html @@ -0,0 +1,101 @@ +--- +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/conflicting/web/api/web_storage_api/index.html b/files/ja/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..72c9a903e3 --- /dev/null +++ b/files/ja/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,14 @@ +--- +title: DOM Storage +slug: DOM/Storage +tags: + - DOM + - Gecko + - HTML5 + - JavaScript + - Offline web applications + - 要更新 +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<p>REDIRECT <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API">Web Storage API</a></p> diff --git a/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..15dcbf30e3 --- /dev/null +++ b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,16 @@ +--- +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/conflicting/web/api/websockets_api/index.html b/files/ja/conflicting/web/api/websockets_api/index.html new file mode 100644 index 0000000000..d924ac2328 --- /dev/null +++ b/files/ja/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,23 @@ +--- +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/conflicting/web/api/window/moveto/index.html b/files/ja/conflicting/web/api/window/moveto/index.html new file mode 100644 index 0000000000..1510d2870e --- /dev/null +++ b/files/ja/conflicting/web/api/window/moveto/index.html @@ -0,0 +1,11 @@ +--- +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/conflicting/web/api/windoworworkerglobalscope/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..760541b9c5 --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,116 @@ +--- +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/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..549969232f --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,119 @@ +--- +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/conflicting/web/api/xsltprocessor/index.html b/files/ja/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..ca2a707fb7 --- /dev/null +++ b/files/ja/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,12 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +<p>XSLTProcesor は、Mozilla の XSLT エンジンへのインタフェースを提供するオブジェクトです。特権のない JavaScript で利用可能です。</p> + +<ul> + <li><a href="/ja/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li> + <li><a href="/ja/docs/The_XSLT_JavaScript_Interface_in_Gecko">The XSLT/JavaScript Interface in Gecko</a></li> +</ul> diff --git a/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..1df9691cb1 --- /dev/null +++ b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,125 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong> はデバイス間の互換性を提供する機能一式であり、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) やデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。</p> + +<div class="note"> +<p><strong>注記:</strong> 各バッジの簡単な説明については、<a href="/ja/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">パッケージ型アプリ</a>のドキュメントをご覧ください。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">コミュニケーション API</h2> + +<dl> + <dt><a href="/ja/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>接続速度など、現在のネットワーク接続に関する基本的な情報を提供します。</dd> + <dt><a href="/ja/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> + <dd>WebBluetooth API は、デバイスのBluetooth ハードウェアに対する低水準のアクセス手段を提供します。</dd> + <dt><a href="/ja/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>信号強度やオペレーター情報など、デバイスのセルラー接続に関する情報を公開します。</dd> + <dt><a href="/ja/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> + <dd>データの使用状況をモニタリングして、そのデータを特権アプリケーションに公開します。</dd> + <dt><a href="/ja/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>アプリが電話を発着信したり、内蔵の電話機能のユーザインターフェイスを使用したりすることが可能です。</dd> + <dt><a href="/ja/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>アプリに対して、デバイスに保存しているメッセージのアクセスや管理だけでなく、SMS テキストメッセージの送受信を可能にします。</dd> + <dt><a href="/ja/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>信号強度、現在接続しているネットワークの名称、利用可能な WiFi ネットワークなどの情報を提供する特権 API です。</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">ハードウェアアクセス API</h2> + +<dl> + <dt><a href="/ja/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>環境光センサーへのアクセス手段を提供します。これにより、アプリがデバイス付近の環境光のレベルを検出できます。</dd> + <dt><a href="/ja/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>バッテリーの残量や、デバイスが電源に接続されて充電中であるかといった情報を提供します。</dd> + <dt><a href="/ja/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>デバイスの物理的な位置に関する情報を提供します。</dd> + <dt><a href="/ja/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>アプリがマウスへのアクセスをロックして、絶対座標ではなく移動量の差分にアクセスできます。これはゲームに対して重要です。</dd> + <dt><a href="/ja/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>ユーザの顔など、近くにある物体とデバイスとの近接度を検出できます。</dd> + <dt><a href="/ja/docs/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> + <dd>デバイスの向きが変化したときに通知します。</dd> + <dt><a href="/ja/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Managing_screen_orientation">Screen Orientation API</a></dt> + <dd>スクリーンの向きが変化したときに通知します。この API は、アプリにとってどの向きが望ましいかを示すことにも使用できます。</dd> + <dt><a href="/ja/docs/Web/Guide/API/Vibration" title="WebAPI/Vibration">Vibration API</a></dt> + <dd>ゲームでの触覚フィードバックなどのために、アプリがデバイスのバイブレーションハードウェアを制御できます。これは通知のためのバイブレーションといった用途向けでは<strong>ありません</strong>。通知については <a href="/ja/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> をご覧ください。</dd> + <dt><a href="/ja/docs/Web/API/Camera_API" title="Web/API/Camera_API">Camera API</a> {{NonStandardBadge}}</dt> + <dd>デバイス内蔵のカメラを使用して、アプリが写真や動画を撮影できます。</dd> + <dt><a href="/ja/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> + <dd>アプリがスクリーン、CPU、デバイスの電源などをオン・オフできるようにします。また、リソースロックイベントのリスニングや調査もサポートします。</dd> +</dl> + +<p><span class="alllinks"><a href="/ja/docs/tag/WebAPI" title="tag/CSS">すべて見る...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">データ管理 API</h2> + +<dl> + <dt><a href="/ja/docs/Web/API/File_Handle_API" title="Web/API/File_Handle_API">FileHandle API</a> {{NonStandardBadge}}</dt> + <dd>ロック機能とともに、書き込み可能なファイルをサポートします。</dd> + <dt><a href="/ja/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>パフォーマンスが高い検索機能をサポートする、クライアントサイドの構造化データ用ストレージです。</dd> + <dt><a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>デバイスへ永続的に保存されるシステム全体の設定オプションを、アプリが調査したり変更したりすることが可能です。</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">その他の API</h2> + +<dl> + <dt><a href="/ja/docs/Web/API/Alarm_API" title="Web/API/Alarm_API">Alarm API</a></dt> + <dd>アプリが通知を予定することが可能です。特定の時刻にアプリを自動起動する機能もサポートします。</dd> + <dt><a href="/ja/docs/Web/API/Simple_Push_API" title="Web/API/Simple_Push_API">Simple Push API</a></dt> + <dd>プラットフォームが特定のアプリケーションに通知メッセージを送信できます。</dd> + <dt><a href="/ja/docs/WebAPI/Using_Web_Notifications" title="WebAPI/Using_Web_Notifications">Web Notifications</a></dt> + <dd>アプリケーションが、システムレベルで表示される通知を送信できます。</dd> + <dt><a href="/ja/docs/Web/API/DOMApplicationsRegistry" title="Web/API/DOMApplicationsRegistry">Apps API</a> {{NonStandardBadge}}</dt> + <dd>Open WebApps API は、Web アプリのインストールや管理をサポートします。また、アプリが課金情報を調べることを可能にします。</dd> + <dt><a href="/ja/docs/Web/API/Web_Activities" title="Web/API/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>あるアプリが別のアプリにアクティビティを渡すことができます。例えばあるアプリが別のアプリに対して、写真を選択 (または作成) して返すように依頼するでしょう。一般的に、ユーザはどのアクティビティにどのアプリを使用するかを設定できます。</dd> + <dt><a href="/ja/docs/Web/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> + <dd>Web コンテンツが、仮想的な物品に対する支払いや払い戻しの処理を開始できます。</dd> + <dt><a href="/ja/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>Web 技術を完全に使用する Web ブラウザの構築をサポートします (要するに、ブラウザの中にあるブラウザです)。</dd> + <dt><a href="/ja/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>ユーザが能動的にデバイスを使用していないときに、アプリが通知を受け取れます。</dd> + <dt><a href="/ja/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>集中化された場所で、アプリの許可設定を管理します。設定アプリで使用されます。</dd> + <dt><a href="/ja/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>現在時刻の設定をサポートします。タイムゾーンは <a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> で設定します。</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI コミュニティ</h2> + +<p>これらの API について支援が必要になったとしても、それらの使用方法について他の開発者と語る手段がいくつかあります。</p> + +<ul> + <li>WebAPI フォーラムで相談する: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>WebAPI IRC チャンネルを訪問する: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><em>ネチケット</em>を忘れないでください...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連トピック</h2> + +<ul> + <li><a href="/ja/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> は、HTML ドキュメントをツリーとして表現するものです。</li> + <li><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> - Web 向けのスクリプト言語です。</li> + <li><a href="/ja/docs/MDN/Doc_status/API" title="MDN/Doc_status/API">Doc status</a>: WebAPI のトピック一覧と、それらのドキュメント化の状況です。</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/ja/conflicting/web/css/@media/index.html b/files/ja/conflicting/web/css/@media/index.html new file mode 100644 index 0000000000..5bf2140f1d --- /dev/null +++ b/files/ja/conflicting/web/css/@media/index.html @@ -0,0 +1,5 @@ +--- +title: Media +slug: Web/CSS/Media +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html new file mode 100644 index 0000000000..87ca6f864c --- /dev/null +++ b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html @@ -0,0 +1,17 @@ +--- +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/conflicting/web/css/@viewport/index.html b/files/ja/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..38f093896b --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport/index.html @@ -0,0 +1,86 @@ +--- +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/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..0e9f9079f0 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +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/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..01b0ae54b2 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,71 @@ +--- +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/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..97814ca702 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,78 @@ +--- +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/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..483e5c214f --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,89 @@ +--- +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/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..f05447a501 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,91 @@ +--- +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/conflicting/web/css/_colon_placeholder-shown/index.html b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..f9e7367a09 --- /dev/null +++ b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,59 @@ +--- +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/conflicting/web/css/box-ordinal-group/index.html b/files/ja/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..147bdbd9b4 --- /dev/null +++ b/files/ja/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +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/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..fa7ce58677 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,103 @@ +--- +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/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..4c7327f6c1 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,74 @@ +--- +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/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..fc56bb1de6 --- /dev/null +++ b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,47 @@ +--- +title: cursor のプロパティーに URL 値を使用する +slug: Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +--- +<p> </p> +<p><a href="ja/Gecko">Gecko</a> 1.8 (<a href="ja/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) では、<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 cursor プロパティー</a> で URL 値が使用できます。これにより、自由な画像 — Gecko がサポートする画像形式なら — がマウスカーソルとして利用できます。</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<p>このプロパティーの記述方式は以下のようになります。</p> +<pre class="eval">cursor: [<url>,]* keyword; +</pre> +<p>これは、カンマ区切りのゼロ個以上の URL が指定可能で、その後ろに <a href="ja/CSS">CSS</a> 規格で定義されている <code>auto</code> や <code>pointer</code> といったキーワードを一つ指定する<b>必要</b>があります。</p> +<p>たとえば、以下のような指定は可能です :</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>この場合、最初に foo.cur を読み込もうとします。もし、存在しないかその他の理由により利用できない場合、bar.gif を試しますが、両方利用できない場合は <code>auto</code> が利用されます。</p> +<p>cursor 値での CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">書式</a> のサポートが Gecko 1.8beta3 で付け加えられました。(そのため、Firefox 1.5 でも動作します) このことにより、カーソルのホットスポットの座標を指定できるようになります。もし、指定されていなければ、ホットスポットの座標はファイルそのもの (CUR もしくは XBM ファイル) か、画像の左上端に設定されます。CSS3 における書式のサンプルは</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>となります。</p> +<p>最初の値が x 座標、二つ目の値が y 座標になります。サンプルではホットスポットが、左上端 (0,0) に対して (4,12) のピクセルに設定されます。</p> +<h3 id=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85" name=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85">制限事項</h3> +<p>Gecko でサポートされているすべての画像形式が利用可能です。これは、BMP、JPG、CUR、GIF などが利用できることを意味します。しかしながら、ANI はサポートされていません。また、アニメーション GIF を指定した場合でも、カーソルはアニメーションを行いません。この制限は、将来のリリースで除かれる可能性があります。</p> +<p>Gecko それ自体には、カーソルサイズの制限はありません。しかしながら、OS やプラットフォームの互換性のために、最大サイズを 32x32 にするのがよいでしょう。特に、このサイズより大きなカーソルは、Windows 9x (95, 98, Me) では動作しません。</p> +<p>半透明カーソルは、Windows XP より前ではサポートされていません。これは、OS の制限です。透明度はすべてのプラットフォームで動作します。</p> +<p>Windows、OS/2 と Linux (GTK+ 2.4 以上の場合) での Mozilla リリースでのみ、カーソルにURL 値が利用できます。その他のプラットフォームでのサポートは、将来のリリースで加えられる予定です。(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7" name=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ほかのブラウザとの互換性</h3> +<p>Microsoft Internet Explorer でも <code>cursor</code> プロパティーに URL 値を利用できます。しかしながら、CUR と ANI フォーマットのみをサポートしています。</p> +<p>また、<code>cursor</code> プロパティーの書式の制限もゆるいです。これは、</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>または:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>なども、MSIE では動作することを意味しますが、Geckoブラウザでは動作しません。Gecko との互換性と CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。</p> +<dl> + <dd> + <i> + To-do: MSIE が CSS3 ホットスポット座標について行うことについて記述</i> + </dd> +</dl> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,368 @@ +--- +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/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..4458dddff2 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +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/conflicting/web/css/float/index.html b/files/ja/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..562347725e --- /dev/null +++ b/files/ja/conflicting/web/css/float/index.html @@ -0,0 +1,32 @@ +--- +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/conflicting/web/css/font-variant/index.html b/files/ja/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..4f1a3acf6b --- /dev/null +++ b/files/ja/conflicting/web/css/font-variant/index.html @@ -0,0 +1,37 @@ +--- +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/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html new file mode 100644 index 0000000000..7eed5bdf59 --- /dev/null +++ b/files/ja/conflicting/web/css/index.html @@ -0,0 +1,31 @@ +--- +title: CSS-2 Quick Reference +slug: CSS-2_Quick_Reference +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS +translation_of_original: CSS-2_Quick_Reference +--- +<p> </p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p><p><big><b><a href="ja/CSS-2_Quick_Reference/All_in_a_page">CSS-2 クイックリファレンス(一括)</a></b></big> +</p><p>さらに詳しい情報とブラウザのサポート: +</p><p><big> +<b><a href="ja/CSS-2_Quick_Reference/Selectors">セレクタ</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Box_model">ボックスモデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_model">視覚的構成モデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_details">視覚的構成の詳細</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_effects">視覚効果</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Lists">リスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Color_and_Background">カラーと背景</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Font">フォント</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Text">テキスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Tables">表組み</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/User_interface">ユーザインタフェース</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Units">単位</a></b><br> +</big> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference", "fr": "fr/Pr\u00e9cis_CSS_2", "pl": "pl/Szybka_dokumentacja_CSS-2" } ) }} diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,412 @@ +--- +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/conflicting/web/css/reference/index.html b/files/ja/conflicting/web/css/reference/index.html new file mode 100644 index 0000000000..9d20688007 --- /dev/null +++ b/files/ja/conflicting/web/css/reference/index.html @@ -0,0 +1,189 @@ +--- +title: All in a page +slug: CSS-2_Quick_Reference/All_in_a_page +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS/Reference +translation_of_original: CSS-2_Quick_Reference/All_in_a_page +--- +<p> +</p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p> +<h3 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB"> ボックスモデル </h3> +<p><small> +<b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b><br> +</small></p><p><b>padding-top : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-right : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-left : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b><br> +</p><p><b>border-top-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-right-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-left-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-width : thin | medium | thick | <i>length</i>;</b><br> +</p><p><b>border-top-color : <i>color</i> | transparent;</b><br> +<b>border-right-color : <i>color</i> | transparent;</b><br> +<b>border-bottom-color : <i>color</i> | transparent;</b><br> +<b>border-left-color : <i>color</i> | transparent;</b><br> +<b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b><br> +</p><p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b><br> +</p><p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.83.A2.E3.83.87.E3.83.AB"> 視覚的構成モデル </h3> +<p><small> +<b>display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;</b><br> +</small></p><p><b>position : static | relative | absolute | fixed;</b><br> +</p><p><b>top : <i>length</i> | <i>percentage</i> | auto;</b> +<b>right : <i>length</i> | <i>percentage</i> | auto;</b> +<b>bottom : <i>length</i> | <i>percentage</i> | auto;</b> +<b>left : <i>length</i> | <i>percentage</i> | auto;</b> +</p><p><b>float : left | right | none;</b><br> +<b>clear : none | left | right | both;</b><br> +</p><p><b>z-index : auto | <i>integer</i>;</b><br> +</p><p><b>direction : ltr | rtl;</b><br> +<b>unicode-bidi : normal | embed | bidi-override;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.81.AE.E8.A9.B3.E7.B4.B0"> 視覚的構成の詳細 </h3> +<p><small> +<b>width : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-width : <i>length</i> | <i>percentage</i>;</b> +<b>max-width : <i>length</i> | <i>percentage</i> | none;</b> +</small></p><p><b>height : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-height : <i>length</i> | <i>percentage</i>;</b> +<b>max-height : <i>length</i> | <i>percentage</i> | none;</b> +</p><p><b>line-height : normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b> +</p><p><b>vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E5.8A.B9.E6.9E.9C"> 視覚効果 </h3> +<p><small> +<b>overflow : visible | hidden | scroll | auto;</b><br> +</small></p><p><b>clip : <i>rect(top,right,bottom,left)</i> | auto;</b><br> +</p><p><b>visibility : visible | hidden | collapse;</b><br> </p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88"> リスト </h3> +<p><small> +<b>list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;</b><br> +<b>list-style-image : <i>uri</i> | none;</b><br> +<b>list-style-position : inside | outside;</b><br> +<b>list-style : <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b> +</small> +</p> +<h3 id=".E3.82.AB.E3.83.A9.E3.83.BC.E3.81.A8.E8.83.8C.E6.99.AF"> カラーと背景 </h3> +<p><small> +<b>color : <i>color</i>;</b><br> +</small></p><p><b>background-color : <i>color</i> | transparent;</b><br> +<b>background-image : <i>uri</i> | none;</b><br> +<b>background-repeat : repeat | repeat-x | repeat-y | no-repeat;</b><br> +<b>background-attachment : scroll | fixed;</b><br> +<b>background-position : {{ mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right') }} {{ mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom') }} ;</b><br> +<b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b><br> </p> +<h3 id=".E3.83.95.E3.82.A9.E3.83.B3.E3.83.88"> フォント </h3> +<p><small> +<b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b><br> +<b>font-style: normal | italic | oblique; </b><br> +<b>font-variant: normal | small-caps; </b><br> +<b>font-weight: normal | bold | bolder | lighter | 100 | ... | 900;</b><br> +<b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b><br> +<b>font: {{ mediawiki.external('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>') }} <i>font-size</i> {{ mediawiki.external('<i>/line-height</i>') }} <i>font-family</i>;</b> +</small> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88"> テキスト </h3> +<p><small> +<b>text-indent : <i>length</i> | <i>percentage</i>;<br></b> +<b>text-align : left | right | center | justify ;<br></b> +<b>text-decoration : none | {{ mediawiki.external(' underline overline line-through blink ') }};<br></b> +<b>text-transform : capitalize | uppercase | lowercase | none;<br></b> +<br> +<b>letter-spacing : normal | <i>length</i>;<br></b> +<b>word-spacing : normal | <i>length</i>;<br></b> +<b>white-space : normal | pre | nowrap | pre-wrap | pre-line;<br></b> +</small></p><p> +</p> +<h3 id=".E8.A1.A8.E7.B5.84.E3.81.BF"> 表組み </h3> +<p><small> +<b>caption-side : top | bottom;</b><br> +</small></p><p><b>table-layout : auto | fixed;</b><br> +</p><p><b>vertical-align : baseline | top | bottom | middle;</b><br> +</p><p><b>border-collapse : collapse | separate;</b><br> +<b>border-spacing : <i>length</i> {{ mediawiki.external('<i>length</i>') }};</b><br> +</p><p><b>empty-cells : show | hide;</b><br> </p> +<h3 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9"> ユーザインタフェース </h3> +<p><small> +<b>cursor : {{ mediawiki.external('<i>uri</i>') }} {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ') }}, ...;</b><br> +</small></p><p><b>outline-color : <i>color</i> | invert;</b><br> +<b>outline-style : <i>border-style</i>;</b><br> +<b>outline-width : <i>border-width</i>;</b><br> +<b>outline : <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b><br> </p> +<h3 id=".E5.8D.98.E4.BD.8D"> 単位 </h3> +<p><small> +<b>相対単位 : em, ex, px</b> +</small></p> +<ul><li> em : 1 em はフォントサイズと等しい +</li><li> ex : 1 ex はフォントの "x" の高さと等しい +</li><li> px : ピクセル +</li></ul> +<p><b>絶対単位 : in, cm, mm, pt, pc</b> +</p> +<ul><li> in : インチ +</li><li> cm : センチメートル +</li><li> mm : ミリメートル +</li><li> pt : ポイント {{ 訳注() }} +</li><li> pc : パイカ {{ 訳注() }} +</li></ul> +<p><b>カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b> +</p> +<ul><li> #306090 : 十六進数で赤が 30、緑が 60、青が 90。 +</li><li> #fa5 : 十六進数で赤が FF、緑が AA、青が 55。 +</li><li> rgb(127,255,0) : 赤が 127、緑が 255、青が 0。 +</li><li> rgb(40%,50%,60%) : 赤が 40%、緑が 50%、青が 60%。 +</li></ul> +<p> +</p> +<h3 id=".E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF"> セレクタ </h3> +<p><small> +<b>型セレクタ</b><br> +<code>h1 { text-decoration: underline; }</code><br> +</small></p><p><b>クラスセレクタ</b><br> +<code>.myclass { text-decoration: underline; }</code><br> +</p><p><b>一意セレクタ</b><br> +<code>#myid { text-decoration: underline; }</code><br> +</p><p><b>子孫セレクタ</b><br> +<code>#mainpage h1 { text-decoration: underline; }</code><br> +</p><p><b>リンク擬似クラスセレクタ</b><br> +<code>a:link { color: blue; }</code><br> +<code>a:visited { color: purple; }</code><br> +</p><p><b>動的擬似クラスセレクタ</b><br> +<code>a:hover { text-decoration: underline; }</code><br> +<code>a:active { color: #666666; }</code><br> +<code>a:focus { outline: 1px dashed red; }</code><br> +</p><p><b>印刷用擬似要素セレクタ</b><br> +<code>p:first-line { font-weight: bold; }</code><br> +<code>p:first-letter { font-size: 2em; }</code><br> +</p><p><b>コンテンツ擬似要素セレクタ</b><br> +<code>p:before { content: "["; }</code><br> +<code>p:after { content: "]"; }</code><br> +</p><p><b>子セレクタ</b><br> +<code>#title > p { font-weight: bold; }</code><br> +</p><p><b>first-child 擬似クラスセレクタ</b><br> +<code>p:first-child { margin-top: 0; }</code><br> +</p><p><b>隣接セレクタ</b><br> +<code>h1 + p { font-style: italic; }</code><br> +</p><p><b>属性セレクタ</b><br> +<code>option{{ mediawiki.external('selected') }} { color: #ff0000; }</code><br> +<code>input{{ mediawiki.external('type=\"password\"') }} { color: #cccccc; }</code><br> +<code>a{{ mediawiki.external('rel~=\"next\"') }} { background: #ffffff; }</code><br> +<code>*{{ mediawiki.external('lang|=\"en\"') }} { color: red; }</code><br> </p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference/All_in_a_page", "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }} diff --git a/files/ja/conflicting/web/css/url()/index.html b/files/ja/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..2ca334be5a --- /dev/null +++ b/files/ja/conflicting/web/css/url()/index.html @@ -0,0 +1,98 @@ +--- +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/conflicting/web/css/width/index.html b/files/ja/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..cae634e45a --- /dev/null +++ b/files/ja/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +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/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html new file mode 100644 index 0000000000..aad9d6d606 --- /dev/null +++ b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html @@ -0,0 +1,37 @@ +--- +title: width +slug: width +tags: + - Disambiguation +translation_of: Web/CSS/width +translation_of_original: width +--- +<p><code>width</code> は多くの文脈で用いられます。</p> + +<h2 id="CSS" name="CSS">CSS</h2> + +<ul> + <li>CSS {{cssxref("width")}} プロパティ</li> +</ul> + +<h2 id="DOM" name="DOM"><a href="/ja/docs/DOM">DOM</a></h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("table.width")}}</li> + <li>{{domxref("element.style","element.style.width")}}</li> +</ul> + +<h2 id="SVG" name="SVG">SVG</h2> + +<ul> + <li>SVG <a href="/ja/docs/SVG/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<h2 id="XUL" name="XUL">XUL</h2> + +<ul> + <li>XUL <a href="/ja/docs/XUL/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html new file mode 100644 index 0000000000..fe471649c2 --- /dev/null +++ b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html @@ -0,0 +1,28 @@ +--- +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/conflicting/web/guide/events/creating_and_triggering_events/index.html b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..a544b714ed --- /dev/null +++ b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,28 @@ +--- +title: dispatchEvent example +slug: DOM/dispatchEvent_example +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +<div class="noinclude"> + {{ApiRef}}</div> +<p>次の例では DOM メソッドを使用してチェックボックスのクリックをシミュレート（※スクリプトでクリックイベントを生成）しています。</p> +<pre>function simulateClick() { + var evt = <a href="/ja/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a>("MouseEvents"); + evt.<a href="/ja/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a>("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var cb = document.getElementById("checkbox"); + var canceled = !cb.<a href="/ja/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">dispatchEvent</a>(evt); + if(canceled) { + // A handler called preventDefault + alert("canceled"); + } else { + // None of the handlers called preventDefault + alert("not canceled"); + } +}</pre> +<p><a class="button liveSample external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">実際の表示を確認</a></p> diff --git a/files/ja/conflicting/web/guide/index.html b/files/ja/conflicting/web/guide/index.html new file mode 100644 index 0000000000..534c441e19 --- /dev/null +++ b/files/ja/conflicting/web/guide/index.html @@ -0,0 +1,81 @@ +--- +title: Web 開発 +slug: Web_Development +tags: + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<p><strong>ウェブ開発</strong> は、ウェブサイトやウェブアプリケーションの開発のすべての側面を含んでいます。</p> + +<p>ここで見つけられる記事を熟読して、単純なウェブサイトから最新のウェブ技術を用いた複雑で非常にインタラクティブなウェブサイトまでを作成する方法を学んでください。</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics" name="Documentation_topics">ドキュメンテーショントピックス</h2> + + <h3 id="Technologies" name="Technologies">技術</h3> + + <dl> + <dt><a class="internal" href="/ja/docs/Web_Development/Introduction_to_Web_development" title="ja/docs/Web Development/Introduction to Web development">ウェブ開発の初歩</a></dt> + <dd>Web 向けの開発方法を学ぶためのガイド。</dd> + <dt><a class="internal" href="/ja/docs/HTML" rel="internal">HTML</a></dt> + <dd>HyperText Markup Language はウェブページやブラウザーで表示される他のドキュメントを作成するための基本言語です。</dd> + <dt><a class="internal" href="/ja/docs/CSS" rel="internal">CSS</a></dt> + <dd>Cascading Style Sheets によって Web 上で高度なレイアウトとページデザインを行うことが可能になります。</dd> + <dt><a class="internal" href="/ja/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd>JavaScript はウェブアプリケーションを開発するために最も一般的に用いられているスクリプト言語です。Mozilla ベースのソフトウェアの開発にも用いられています。</dd> + <dt><a class="internal" href="/ja/docs/DOM" rel="internal">DOM</a></dt> + <dd>Document Object Model は HTML と XML ドキュメントのための API であり、見た目の表現を変更するために変更可能であるドキュメントの構造的な表現を提供します。</dd> + <dt><a class="internal" href="/ja/docs/AJAX" rel="internal">AJAX</a></dt> + <dd>Asynchronous JavaScript and XML はひとつの技術ではなく複数の技術の組み合わせです。動的なウェブアプリケーションを作成するために JavaScript と他のモダンなウェブ技術を共に用いることを指します。</dd> + <dt><a class="internal" href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a></dt> + <dd>Extensible HyperText Markup Language は HTML よりも厳格な構文を提供する XML ベースの HTML 風の言語です。</dd> + <dt><a class="internal" href="/ja/docs/SVG" rel="internal">SVG</a></dt> + <dd>Scalable Vector Graphics は 2D ベクターグラフィックを扱うための XML マークアップ言語です。</dd> + </dl> + + <h3 id="Strategies" name="Strategies">方針</h3> + + <dl> + <dt><a class="internal" href="/ja/docs/Web_Standards" title="ja/docs/Web Standards">Web 標準</a></dt> + <dd>オープンな Web と互換性を持つことであなたのウェブサイトまたはアプリケーションを最も多くのユーザーに提供するための方法を学んでください。</dd> + <dt><a href="/ja/docs/Web_Development/Responsive_Web_design" title="ja/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd>同じコンテンツを携帯電話から高解像度のデスクトップディスプレイまですべてのハードウェア環境で提供できるよう、CSS を使用してください。</dd> + <dt><a href="/ja/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd>ブラウザーが更新されても壊れることのないウェブサイトを作成するためのベストプラクティスを紹介します。</dd> + <dt><a href="/ja/docs/Web_Development/Mobile" title="/ja/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd>モバイル機器で表示されるウェブサイトを開発する際は、デスクトップブラウザー向けの開発に慣れた人々にはあまり知られていない独特の手法を必要とします。</dd> + <dt><a class="internal" href="/ja/docs/Mozilla_Web_Developer_FAQ" title="ja/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd>ウェブ開発者からのよく聞かれる質問です。答えもあります!</dd> + </dl> + + <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development" title="ja/docs/tag/Web_Development">すべてみる...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">コミュニティ</h2> + + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a> (<a class="external" href="https://dev.mozilla.jp/hacksmozillaorg/" title="https://dev.mozilla.jp/hacksmozillaorg/">日本語訳</a>)</li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">ツール</h2> + + <ul> + <li><a href="/ja/docs/Tools" title="ja/docs/Tools">ツールのメインページ</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/1843">Firebug 拡張機能</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/60">Web Developer 拡張機能</a></li> + <li><a href="/ja/docs/Venkman" rel="internal">Venkman</a>: JavaScript デバッガー</li> + <li><a href="/ja/docs/DOM_Inspector" rel="internal" title="ja/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/ja/docs/Tools/Scratchpad" title="ja/docs/Tools/Scratchpad">スクラッチパッド</a></li> + </ul> + + <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development:Tools" title="ja/docs/tag/Web_Development:Tools">すべてみる...</a></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/guide/introduction_to_web_development/index.html b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..73086c9207 --- /dev/null +++ b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,113 @@ +--- +title: Introduction to Web development +slug: Web_Development/Introduction_to_Web_development +--- +<p>Web開発の初歩</p> + +<p>ここに示すリンクは、Web開発を始めたばかりの方であってもWebのすごさへの新しい領域に踏み込もうとしている方であっても手助けになるはずです。</p> + +<div class="note"><strong>注:</strong> 本ページの推奨リソースは変更される可能性があります。</div> + +<table class="mainpage-table"> + <tbody> + <tr> + <td> + <p> </p> + + <h2 id="項目">項目</h2> + + <p> </p> + + <h3 id="HTML">HTML</h3> + + <ul> + <li><a class="external" href="http://dev.opera.com/articles/view/12-the-basics-of-html/" title="http://dev.opera.com/articles/view/12-the-basics-of-html/">Hypertext Mark-up Langage (HTML</a>)の基本 - HTMLとはいったい何か?</li> + <li><a class="external" href="http://reference.sitepoint.com/html/page-structure" title="http://reference.sitepoint.com/html/page-structure">webページの基本構造</a> - doctype とドキュメント'ツリー'</li> + <li><a class="external" href="http://reference.sitepoint.com/html/elements" title="http://reference.sitepoint.com/html/elements">基本的なHTML要素</a> - カテゴリ別に説明された、構造、ヘッダー、リスト、フォーム要素ほか</li> + <li><a class="external" href="http://htmldog.com/guides/htmlbeginner/" title="http://htmldog.com/guides/htmlbeginner/">HTML初心者へのチュートリアル</a> - 上述の基礎を含めたチュートリアルと練習</li> + <li><a class="external" href="/ja/HTML/Element" title="https://developer.mozilla.org/ja/HTML/Element">MDC HTML要素リファレンスガイド</a> - 詳細を含めGecko/FirefoxがサポートするHTML要素の包括的ガイド</li> + </ul> + + <dl> + <dt>はじめに </dt> + </dl> + + <ul> + </ul> + + <h3 id="CSS">CSS</h3> + + <ul> + <li><a class="external" href="/ja/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">初心者のためのCSSのMDCガイド</a> - 基本的な概念と基礎をカバーするCSSのまさに初心者用ガイド</li> + <li><a class="external" href="/ja/CSS_Reference" title="https://developer.mozilla.org/ja/CSS_Reference">MDC CSSリファレンスガイド</a> - Gecko/Firefoxのレベルで詳細に記載したCSSの完全ガイド</li> + <li><a class="external" href="http://www.w3.org/MarkUp/Guide/Style" title="http://www.w3.org/MarkUp/Guide/Style">CSSでスタイリングするためのW3Cの紹介</a> - 初心者がwebページをスタイリングするための分かりやすいガイド</li> + <li><a class="external" href="/ja/Common_CSS_Questions" title="https://developer.mozilla.org/ja/Common_CSS_Questions">よくあるCSSの質問</a> - 初心者によくあるQ&A</li> + </ul> + + <ul> + <li><a class="external" href="http://www.html.net/tutorials/css/" title="http://www.html.net/tutorials/css/">中級レベルのCSSの概念</a> - グループ分け、pseudo-classesほか</li> + </ul> + + <dl> + <dt>はじめに </dt> + <dt>中級者向け</dt> + </dl> + + <ul> + </ul> + + <h3 id="JavaScript">JavaScript</h3> + + <ul> + <li><a class="external" href="/ja/JavaScript/Getting_Started" title="https://developer.mozilla.org/ja/JavaScript/Getting_Started">初心者向けMDC Javascriptガイド</a> - Javascriptとは何か? どうやって役に立つのか?</li> + <li><a class="external" href="/ja/JavaScript/Guide" title="https://developer.mozilla.org/ja/JavaScript/Guide">MDC JavaScriptリファレンスガイド</a> - 定期的にアップデートされる、初心者から上級者まですべてのレベルのための包括的ガイド</li> + <li><a class="external" href="http://yuiblog.com/crockford/" title="http://yuiblog.com/crockford/">Crockford on JavaScript</a> - Javascript言語に関し徹底的に追求したビデオシリーズ</li> + </ul> + + <ul> + <li><a href="/ja/JavaScript/A_re-introduction_to_JavaScript" title="https://developer.mozilla.org/ja/a_re-introduction_to_javascript">Javascriptの再入門</a> - 中級者レベルの開発者向けJavascriptプログラミング言語の要約</li> + <li><a class="external" href="http://eloquentjavascript.net/contents.html" title="http://eloquentjavascript.net/contents.html">雄弁なJavaScript </a>- 中級から上級向けJavascript技術の包括ガイド</li> + <li><a class="external" href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" title="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">本質的なJavaScript設計パターン</a> - 本質的なJavascriptの設計パターンの紹介</li> + <li><a class="external" href="/ja/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/ja/Introduction_to_Object-Oriented_JavaScript">オブジェクト指向JavascriptのためのMDCの紹介</a> - Javascriptオブジェクトモデルについて学習する</li> + <li><a class="external" href="http://dev.opera.com/articles/view/javascript-best-practices/" title="http://dev.opera.com/articles/view/javascript-best-practices/">Christian HeilmannのJavaScript最適学習</a> - Javascriptを書くときお決まりの(そんなにお決まりでないものも)最適な練習について学習する</li> + </ul> + + <ul> + <li><a class="external" href="http://ejohn.org/apps/learn/" title="http://ejohn.org/apps/learn/">上級者向けJavaScriptを学ぶ</a> - John Resigによる上級者向けJavaScriptガイド</li> + <li><a class="external" href="http://uk.video.yahoo.com/watch/111585/1027823" title="http://uk.video.yahoo.com/watch/111585/1027823">Crockford on Advanced JavaScript</a> - 上級者向けJavascript概念に関する3部構成のビデオシリーズ</li> + </ul> + + <dl> + <dt>はじめに </dt> + <dt>中級者向け</dt> + <dt>上級者向け</dt> + </dl> + + <ul> + </ul> + </td> + <td> + <h2 id="リソース">リソース</h2> + + <dl> + <dt><a class="external" href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur" title="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur">Opera's Web Standards Curriculum</a></dt> + <dd>webデザイン、HTML、HTML5、CSS、Javascriptとそのアクセス法について。多くの分野を通じてweb開発の基礎を学習しようとしている初心者にとってここはよいスタートポイントになります。</dd> + <dt><a class="external" href="http://reference.sitepoint.com/" title="http://reference.sitepoint.com/">SitePoint</a></dt> + <dd>異なるブラウザーやブラウザーに関する既知のバグを通じてのサポートにも言及している、HTML、CSS、Javascriptを学習するために信頼できるサイト</dd> + <dt><a class="external" href="http://htmldog.com/" title="http://htmldog.com/">HTMLDog</a></dt> + <dd>初心者向け、HTMLとCSSに関する優秀で包括的なリファレンスサイト</dd> + <dt><a class="external" href="http://code.google.com/edu/submissions/html-css-javascript/" title="http://code.google.com/edu/submissions/html-css-javascript/">Google's HTML, CSS, and Javascript from the Ground Up</a></dt> + <dd>Googleのプロのweb開発者による易しいビデオチュートリアルがHTML、CSS、Javascriptの基本をカバーします</dd> + <dt><a class="external" href="http://www.csstutorial.net/" title="http://www.csstutorial.net/">CSSTutorial.net Beginner Tutorials</a></dt> + <dd>A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.</dd> + <dt><a class="external" href="http://www.tizag.com/cssT/" title="http://www.tizag.com/cssT/">Tizag CSS Tutorials</a></dt> + <dd>An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.</dd> + <dt><a class="external" href="http://jqfundamentals.com/book/book.html" title="http://jqfundamentals.com/book/book.html">jQuery Fundamentals</a></dt> + <dd>An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.</dd> + <dt><a class="external" href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/" title="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript From Null: A Video Series</a></dt> + <dd>A video series on JavaScript for absolute beginners looking for more 'visual'-based learning</dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/guide/mobile/index.html b/files/ja/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ja/conflicting/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/ja/conflicting/web/html/element/index.html b/files/ja/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..b5da7466db --- /dev/null +++ b/files/ja/conflicting/web/html/element/index.html @@ -0,0 +1,585 @@ +--- +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/conflicting/web/html/element/title/index.html b/files/ja/conflicting/web/html/element/title/index.html new file mode 100644 index 0000000000..ab170f7d35 --- /dev/null +++ b/files/ja/conflicting/web/html/element/title/index.html @@ -0,0 +1,19 @@ +--- +title: title +slug: title +tags: + - Disambiguation +translation_of: Web/HTML/Element/title +translation_of_original: title +--- +<p><strong>title</strong> は、その文脈により異なるものを指す場合があります。</p> + +<ul> + <li>DOM:{{ domxref("element.title")}} - 要素の <code>title</code> 属性の値を取得 / 設定</li> + <li>DOM:{{domxref("document.title")}} - 文書の <code>title</code> 要素の値を取得 / 設定</li> + <li><a href="/ja/docs/HTML/Element/title"><code><title></code> (HTML)</a> - <a href="/en-US/docs/HTML">HTML</a> の <code>title</code> 要素</li> + <li><a href="/ja/docs/SVG/Element/title"><code><title></code> (SVG)</a> - <a href="/en-US/docs/SVG">SVG</a> の <code>title</code> 要素</li> + <li><a href="/ja/docs/RSS/Element/title"><code><title></code> (RSS)</a> - <a href="/en-US/docs/RSS">RSS</a> の <code>title</code> 要素</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/html/global_attributes/index.html b/files/ja/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..aee67a75d0 --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,27 @@ +--- +title: Global attribute (グローバル属性) +slug: Glossary/Global_attribute +tags: + - Attribute + - CodingScripting + - Glossary + - HTML +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +<p>グローバル属性は、すべての{{glossary("element","要素")}}で使用できる{{glossary("attribute","属性")}}です（ただし、一部の要素には影響を与えないこともあります）。</p> + +<p>HTML 要素には、次のいくつかの属性を使用できます。</p> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes/dir"><strong>dir</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/lang"><strong>lang</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/style"><strong>style</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/class"><strong>class</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/tabindex"><strong>tabindex</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/accesskey"><strong>accesskey</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/title"><strong>title</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/hidden"><strong>hidden</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/contextmenu"><strong>contextmenu</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><strong>contenteditable</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/translate"><strong>translate</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><strong>spellcheck</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/draggable"><strong>draggable</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/dropzone"><strong>dropzone</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemid"><strong>itemid</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemprop"><strong>itemprop</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemref"><strong>itemref</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemscope"><strong>itemscope</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemtype"><strong>itemtype</strong></a>.</li> + <li><strong>xml:lang </strong>と <strong>xml:base</strong> の両方が {{glossary("XHTML")}} 仕様から継承され、非推奨ですが互換性のために保持されています。</li> + <li>アクセシビリティを向上させるための複数の <strong><a href="/ja/docs/Web/Accessibility/ARIA">aria-*</a></strong> 属性。</li> + <li>イベントハンドラー属性: <strong>onabort</strong>, <strong>onautocomplete</strong>, <strong>onautocompleteerror</strong>, <strong>onblur</strong>, <strong>oncancel</strong>, <strong>oncanplay</strong>, <strong>oncanplaythrough</strong>, <strong>onchange</strong>, <strong>onclick</strong>, <strong>onclose</strong>, <strong>oncontextmenu</strong>, <strong>oncuechange</strong>, <strong>ondblclick</strong>, <strong>ondrag</strong>, <strong>ondragend</strong>, <strong>ondragenter</strong>, <strong>ondragexit</strong>, <strong>ondragleave</strong>, <strong>ondragover</strong>, <strong>ondragstart</strong>, <strong>ondrop</strong>, <strong>ondurationchange</strong>, <strong>onemptied</strong>, <strong>onended</strong>, <strong>onerror</strong>, <strong>onfocus</strong>, <strong>oninput</strong>, <strong>oninvalid</strong>, <strong>onkeydown</strong>, <strong>onkeypress</strong>, <strong>onkeyup</strong>, <strong>onload</strong>, <strong>onloadeddata</strong>, <strong>onloadedmetadata</strong>, <strong>onloadstart</strong>, <strong>onmousedown</strong>, <strong>onmouseenter</strong>, <strong>onmouseleave</strong>, <strong>onmousemove</strong>, <strong>onmouseout</strong>, <strong>onmouseover</strong>, <strong>onmouseup</strong>, <strong>onmousewheel</strong>, <strong>onpause</strong>, <strong>onplay</strong>, <strong>onplaying</strong>, <strong>onprogress</strong>, <strong>onratechange</strong>, <strong>onreset</strong>, <strong>onresize</strong>, <strong>onscroll</strong>, <strong>onseeked</strong>, <strong>onseeking</strong>, <strong>onselect</strong>, <strong>onshow</strong>, <strong>onsort</strong>, <strong>onstalled</strong>, <strong>onsubmit</strong>, <strong>onsuspend</strong>, <strong>ontimeupdate</strong>, <strong>ontoggle</strong>, <strong>onvolumechange</strong>, <strong>onwaiting</strong>.</li> +</ul> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>HTML の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..07cdb135ef --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,32 @@ +--- +title: HTML フォームのスペルチェックを制御する +slug: Controlling_spell_checking_in_HTML_forms +tags: + - Configuration management + - HTML +--- +<p>{{ Fx_minversion_header(2) }} Firefox 2 はウェブフォームのテキストエリア{{ 訳注("複数行のテキスト入力欄") }}とテキストフィールド{{ 訳注("一行のテキスト入力欄") }}のスペルチェックのサポートを導入します。ユーザーは about:config インターフェースを使って、スペルチェックを有効にするか、テキストエリアとテキストフィールドの両方でチェックするかを設定することができます。</p> +<p>標準では、テキストエリアと <code>designMode</code> ドキュメントではスペルチェックが行われますが、一行の入力ボックスでは行われません。なぜなら、Firefox が ユーザ ID や E メールアドレスを誤ってマークしてしまうと、ユーザの気を散らしてしまうからです。</p> +<p>しかし、この動作が必ずしも適切でない状況があるでしょう。例えば、HTML や他の非散文データを編集するためにテキストエリアの使用が意図されているなら、スペルチェッカは助けよりむしろ妨害でしょう。 同じようにウェブサイトが特定のテキストフィールドでスペルチェック可能にすることを Firefox に勧めたい場合があるかもしれません。例えば、検索ボックスや E メールの件名フィールドなど。</p> +<p>ウェブサイトが特定の <code><input></code> 要素にスペルチェックを使わせたい、あるいは使わせたくない場合は、<code>spellcheck</code> 属性を使うことができます。スペルチェックを勧めるには <code>true</code> を、使わせたくないときには <code>false</code> を設定します。</p> +<p>もしユーザが <code>layout.spellcheckDefault</code> を 0 に設定してスペルチェックを完全に無効化しているなら、サイトからの勧めは無視されることを覚えておいてください。もし <code>layout.spellcheckDefault</code> が他の値なら勧めは考慮に入れられるでしょう。</p> +<p>一行のテキストフィールド(HTML の <code><input></code> 要素) でスペルチェックを有効化するには、HTML で次のようにコードを書きます:</p> +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> +<p>同様にテキストエリアでスペルチェックを無効にするには、HTML で次のようにコードを書きます:</p> +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> +<p><code>spellcheck</code> 属性をドキュメントの <code><body></code> 要素に設定することによって、ドキュメントの <code>designMode</code> (一般的に、リッチテキスト編集の実装に使用されます) を制御することができます。</p> +<p>あなたは <code>spellcheck</code> 属性を <code><span></code> と <code><div></code> のような他の要素にも同じように適用ですます。それらに含まれた全ての <code><input></code> 要素は親によって設定されたスペルチェックの設定が継承されます。もし祖先の要素で何も設定されていない場合、ユーザの標準設定が使われます。</p> +<p>例えば</p> +<pre><div spellcheck="true"> + <label>文章を入力してください: </label><input type="text" size="50"> + <br /> + <label>さらに入力してください: </label><input type="text" size="50"> +</div> +<br /> +<label>3 番目を入力してください: </label><input type="text" size="50"> +</pre> +<p>この HTML の断片では、最初の 2 つのテキストフィールドはスペルチェックされるのに対して 3 番目はスペルチェックされません。</p> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..adb8b20a69 --- /dev/null +++ b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,38 @@ +--- +title: HTTP Pipelining FAQ +slug: HTTP_Pipelining_FAQ +tags: + - Necko +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +translation_of_original: Web/HTTP/Pipelining_FAQ +--- +<p><b>HTTP/1.1 パイプライン化 FAQ</b> +</p> +<h3 id="HTTP_.E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.81.A8.E3.81.AF.EF.BC.9F"> HTTP パイプライン化とは？ </h3> +<p>通常、HTTP リクエストは、次のリクエストは完全に受け取られた現在のリクエストに対するレスポンスのあとにだけ発行されるという形で、連続して発行されます。ネットワークの待ち時間と帯域幅の制限により、次のリクエストがサーバによって受け取られるまでに、著しい遅れを生じさせることもあります。 +</p><p>HTTP/1.1 では、複数 HTTP リクエストを対応するレスポンスを待つことなくソケットに同時に書き出すことを許しています。リクエスト発行者は、リクエストされた順序での到着のためのレスポンスを待っています。リクエストの「パイプライン化」の作用でページ読み込み時に劇的に改善をみせることもあります。高い待ち時間をともなう接続においては特にそうです。 +</p><p>パイプライン化はまた、TCP/IP パケットの数を劇的に減少させることもあります。536 ～ 1460 バイトの典型的な MSS (最大セグメントサイズ) で、1 つの TCP/IP パケットにいくつかの HTTP リクエストが可能です。少ないパケットは通常、IP ルータとネットワークの負荷を減らすため、読み込みに必要なパケットの数を減らすことは、全体としてはインターネットに利益になります。 +</p><p>HTTP/1.1 に合致するサーバはパイプライン化のサポートが必要とされています。これはサーバにパイプライン化したレスポンスが必要とされることを意味するわけではありません。しかし、クライアントがパイプライン化したリクエストを選択した時に失敗してはいけないことを要求します。著名な Mozilla 以外のブラウザがパイプライン化を実装していないため、これは明らかにエバンジェリズム (啓蒙) に関する新しいカテゴリのバグとなる可能性があります。 +</p> +<h3 id=".E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.81.97.E3.81.9F.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.82.92.E3.81.84.E3.81.A4.E3.81.99.E3.81.B9.E3.81.8D.E3.81.A7.E3.81.99.E3.81.8B.EF.BC.9F"> パイプライン化したリクエストをいつすべきですか？ </h3> +<p>GET や HEAD といったリクエストのように独立したリクエストだけが、パイプライン化可能です。POST と PUT といったリクエストはパイプライン化すべきではありません。新しいコネクションの上でもまた、パイプライン化したリクエストをすべきではありません。なぜなら、相手のサーバ (もしくはプロキシ) が HTTP/1.1 をサポートしているかどうかまだわからないからです。そのために、パイプライン化は存在する「keep-alive」接続の再利用時のみ可能です。 +</p> +<h3 id=".E3.81.A9.E3.81.AE.E3.81.8F.E3.82.89.E3.81.84.E3.81.AE.E6.95.B0.E3.81.AE.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.81.AE.E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.82.92.E3.81.99.E3.81.B9.E3.81.8D.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> どのくらいの数のリクエストのパイプライン化をすべきでしょうか？ </h3> +<p>うーん。多くのリクエストのパイプライン化は、もし早い時点でコネクションが切断された場合コストが高くつきます。新しいコネクションの上でだけ繰り返せばいいのに、ネットワークへリクエストを書き出す時間を浪費するからです。そのうえ、最初のリクエストが完了するのに長い時間がかかると、長いパイプライン化は実際にユーザに知覚されてしまうほどの遅れを引き起こします。サーバあたり、2 つの「keep-alive」接続を超えないという制限を勧めます。明らかに、それはアプリケーションに依存します。Web ブラウザはたぶん、前述の理由のためにあまりに長いパイプライン化は望まないでしょう。2 というのは適切な値でしょう。しかし、この数値にはまだ試行により変えられる余地があります。 +</p> +<h3 id=".E3.82.82.E3.81.97.E3.80.81.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.81.8C.E3.82.AD.E3.83.A3.E3.83.B3.E3.82.BB.E3.83.AB.E3.81.95.E3.82.8C.E3.81.9F.E3.82.89.E3.81.A9.E3.81.86.E3.81.AA.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> もし、リクエストがキャンセルされたらどうなるのでしょうか？ </h3> +<p>もし、リクエストがキャンセルされたとき、パイプライン全体がキャンセルされるのでしょうか？ それとも、パイプラインに属する他のリクエストを繰り返すことを強いてはいけないので、キャンセルされたリクエストだけがただ単に捨てられるべきなのでしょうか？ 答えは、受け取られていないままキャンセルされたリクエストに対するレスポンスの破片のサイズを含むいくつかの要素に依存します。実直なアプローチでは、ただパイプラインをキャンセルし、すべてのリクエストを再発行するというのもあるでしょう。これは、リクエストが一度の発行で何度も利用できるときだけできることです。パイプライン化さているリクエストは大抵、キャンセルされている同じ読み込みのグループ (ページ) に属するので、この実直なアプローチはよく筋が通っています。 +</p> +<h3 id=".E3.82.B3.E3.83.8D.E3.82.AF.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E5.A4.B1.E6.95.97.E3.81.99.E3.82.8B.E3.81.A8.E3.81.A9.E3.81.86.E3.81.AA.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> コネクションに失敗するとどうなるのでしょうか？ </h3> +<p>もし、コネクションが失敗するか、サーバによってパイプライン化されたレスポンスのダウンロードの一部へ放り込まれた時、Web ブラウザは失ったリクエストの再開始の能力がなくてはなりません。この場合、単純にも、上述の取り消された場合と等価にハンドリンクされているでしょう。 +</p> +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1"> 原文書の情報 </h2> +<ul><li> 著者: <a class="link-mailto" href="mailto:darin@meer.net">Darin Fisher</a> +</li><li> 最終更新日: March 20, 2005 +</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/HTTP_Pipelining_FAQ" } ) }} diff --git a/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html new file mode 100644 index 0000000000..c14a549f89 --- /dev/null +++ b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,175 @@ +--- +title: User Agent Strings Reference +slug: User_Agent_Strings_Reference +tags: + - 要更新 +translation_of: Web/HTTP/Headers/User-Agent/Firefox +translation_of_original: User_Agent_Strings_Reference +--- +<h3 id="このドキュメントの状況"><a name="status">このドキュメントの状況</a></h3> +<p>これは、元の user-agent のバージョン文字列提議の改訂版です。<a class="external" href="http://www-archive.mozilla.org/build/user-agent-strings.html">元の、時代遅れの提議</a> と、<a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.seamonkey">netscape.public.mozilla.seamonkey</a> 及び <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a>での議論を改訂の参考にしてください。</p> +<p>This document is the official Mozilla user-agent string specification. However, the following issues are under review and may be revised in the near future:</p> +<ul style="border: medium solid red;"> + <li>There is concern that the attempt to separate <code>Platform</code> and <code>OS-or-CPU</code> on Windows and Macintosh is not backwards compatible and the user-agent strings should return to their old-fashioned form.</li> + <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=57555">concern</a> that giving the operating system version on Windows reveals too much information about a system (such as potential security holes).</li> + <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=55366">concern</a> that revealing localization information is a violation of privacy.</li> +</ul> +<h3 id="目標点"><a name="goals">目標点</a></h3> +<p>元の目標は:</p> +<ul> + <li>RFC 1945 や RFC 2068 で述べられている規格に従う。</li> + <li>現存の Web サーバーを破壊しない。</li> + <li>現存のログファイル解析ソフトや、user-agent 分析コードを破壊しない。</li> + <li>user-agent のバージョン文字列を適切な短い長さにとどめる。</li> + <li>一貫した、見てすぐ分かる、そして解析しやすい形式を用いる。</li> +</ul> +<p>議論の中で出てきた他の事項は:</p> +<ul> + <li>日付に基づいたバージョン情報を提供する。</li> + <li>バージョン修飾語の問題点に焦点を絞る。</li> + <li>アプリケーションに、Gecko のように Mozilla の技術が含まれていることを知らせる。しかし、Mozilla ではないので、区別できるようにする。</li> +</ul> +<h3 id="提議"><a name="proposal">提議</a></h3> +<p>Mozillaに基づくブラウザは、user-agentのバージョン文字列を以下の形式にすべきである:</p> +<p style="margin-left: 40px;"><code>MozillaProductToken (MozillaComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> +<p>Gecko レイアウトエンジンが埋め込まれたアプリケーションの user-agent のバージョン文字列は以下の形式に従うべきである:</p> +<p style="margin-left: 40px;"><code>ApplicationProductToken (ApplicationComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> +<p>上記の定義中の参照は以下の通り:</p> +<table> + <colgroup> + <col> + <col> + </colgroup> + <tbody> + <tr style="background-color: rgb(255, 255, 204);"> + <td>MozillaProductToken</td> + <td><code><strong>Mozilla/</strong></code> <em>MozillaVersion</em></td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>MozillaVersion</td> + <td><em>Major</em> <code><strong>.</strong></code> <em>minor</em></td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>Major</td> + <td>メジャーリリース番号を示す整数値。In practice, always 5.</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>Minor</td> + <td>もし 0 でないなら、3 桁の 0 で埋められた数字であるべきで、たとえば <strong><code>001</code></strong> である。もし 0 なら、0 とするのが望ましい。</td> + </tr> + <tr> + <td>MozillaComment</td> + <td><code>(</code> <em>Platform</em> <strong><code>;</code></strong> <em>Security</em> <strong><code>;</code></strong> <em>OS-or-CPU</em> <strong><code>;</code></strong> <em>Localization information</em> <em><strong><code>;</code></strong> GeckoVersion <code>)</code></em> <em>*[<strong><code>;</code></strong> Optional Other Comments] <code>)</code></em></td> + </tr> + <tr> + <td>Platform</td> + <td>使用してよい文字列: + <ul> + <li><code><strong>Windows</strong></code>: 全ての Windows 環境</li> + <li><code><strong>Macintosh</strong></code>: 全ての Mac OS 環境</li> + <li><code><strong>X11</strong></code>: 全ての X-Window システム環境</li> + <li>etc.</li> + </ul> + </td> + </tr> + <tr> + <td>Security</td> + <td>使用してよい文字列: + <ul> + <li><code><strong>N</strong></code>: セキュリティー無し</li> + <li><code><strong>U</strong></code>: 強化セキュリティーバージョン</li> + <li><code><strong>I</strong></code>: 弱いセキュリティーバージョン</li> + </ul> + </td> + </tr> + <tr> + <td>OS-or-CPU</td> + <td><strong>Windows</strong> システム用の文字列: + <ul> + <li><code><strong>Win3.11</strong></code>: Windows 3.11</li> + <li><code><strong>WinNT3.51</strong></code>: Windows NT 3.11</li> + <li><code><strong>WinNT4.0</strong></code>: Windows NT 4.0</li> + <li><code><strong>Windows NT 5.0</strong></code>: Windows 2000</li> + <li><code><strong>Win95</strong></code>: Windows 95</li> + <li><code><strong>Win98</strong></code>: Windows 98</li> + <li><code><strong>Win 9x 4.90</strong></code>: Windows Me</li> + <li>etc.</li> + </ul> + <strong>MacOS</strong> システム用の文字列: + <ul> + <li><code><strong>68K</strong></code>: 68k ハードウエア</li> + <li><code><strong>PPC</strong></code>: PowerPC ハードウエア</li> + <li>etc.</li> + </ul> + <strong>Unix</strong> システム用の文字列: コマンド <strong><code>uname -sm</code></strong> の出力を用いる。(also accessible as the <strong>sysname</strong> and <strong>machine</strong> fields of the utsname structure.) (Previous versions of this document said they should be the output of <strong><code>uname -srm</code></strong>, but the <strong>release</strong> field of the utsname structure was considered to <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=57555">reveal too much information</a> about the system, such as potential security holes.)</td> + </tr> + <tr> + <td>Localization Information</td> + <td>文字コードの表現は、RFC 1945 及び RFC 2068 の規格に従う。例としては<br> + <code>en, en-US, es, es-CO, ja, ja-JP</code>などがあげられる。</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoVersion</td> + <td>String starting with "rv:" followed by the Gecko version. This is a set of numbers separated by periods, possibly followed by a pre-release indicator (e.g. "a1" for the first alpha).</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoProductToken</td> + <td><code><strong>Gecko/</strong></code><em>GeckoDate</em> + <p>Mozilla を含む、Gecko エンジンに基づく製品には、Gecko 製品文字列をその二次製品であることを明確にするために利用を許可する。</p> + </td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoDate</td> + <td>YYYYMMDD 形式の日付。正式な Mozilla ビルドにおいては、これは BuildID の中の日付に一致させる。Mozilla の公開版においては、GeckoDate はソースコードが mozilla.org から取り出された日付と一致させなければならず、必ずしも生成された BuildID の日付部分とは一致しない。複数のブランチが同時に公開される場合、この日付からは Gecko のバージョンを特定できない。</td> + </tr> + <tr> + <td>ApplicationProductToken, Application Comment</td> + <td>Gecko レイアウトエンジンに基づくアプリケーションが使用する部分である。それらの製品文字列とコメントの形式はここで指定するものではないが、HTTP 標準に基づくべきである。</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>( VendorProductToken | VendorComment )</td> + <td>Mozilla に基づくアプリケーションの製品文字列を記述する部分である。形式や内容はベンダー規定とするが、HTTP 標準に基づくべきであり、上記の GeckoVersion を含むことが望ましい。</td> + </tr> + <tr> + <td><strong><code>*</code></strong></td> + <td>0 かそれ以上のトークンを入れることを指定する記号</td> + </tr> + <tr> + <td><strong><code>?</code></strong></td> + <td>0 か 1 つのトークンを入れることを指定する記号</td> + </tr> + </tbody> +</table> +<h3 id="例"><a name="examples">例</a></h3> +<table> + <colgroup> + <col> + <col> + </colgroup> + <tbody> + <tr> + <td>mozilla.org のブラウザ</td> + <td><code>Mozilla/5.001 (windows; U; NT4.0; en-US; rv:1.0) Gecko/25250101</code></td> + </tr> + <tr> + <td>上のブラウザと同じソースに基づいて作られた商標リリース</td> + <td><code>Mozilla/5.001 (Macintosh; N; PPC; ja; rv:1.0) Gecko/25250101 MegaCorpBrowser/1.0 (MegaCorp, Inc.)</code></td> + </tr> + <tr> + <td>再構成リリース</td> + <td><code>Mozilla/9.876 (X11; U; Linux 2.2.12-20 i686, en; rv:2.0) Gecko/25250101 Netscape/5.432b1 (C-MindSpring)</code></td> + </tr> + <tr> + <td>Gecko に基づくブラウザ</td> + <td><code>TinyBrowser/2.0 (TinyBrowser Comment; rv:1.9.1a2pre) Gecko/20201231</code></td> + </tr> + </tbody> +</table> +<h3 id="Implementation_notes_for_applications_vendors_and_extensions"><a name="implementation">Implementation notes for applications, vendors, and extensions</a></h3> +<p>Starting with Mozilla 1.8 beta2, the best way for applications, vendors, and extensions (if needed) to add to default preferences to add <code>VendorProductToken</code>s or <code>VendorComment</code>s is to add a default preference of the form <code>general.useragent.extra.<em>identifier</em></code>. <em>All</em> of the <code>general.useragent.extra.*</code> preferences will have their string values added to the User-Agent string in alphabetical order by identifier. For example:</p> +<ul> + <li><code>pref("general.useragent.extra.megabrowser", "MegaCorpBrowser/1.0 (MegaCorp, Inc.)");</code></li> + <li><code>pref("general.useragent.extra.tinydistro", "TinyDistroLinux/2.3");</code></li> +</ul> +<hr> +<p>これに対するコメントは <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a> または <a class="link-mailto" href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a> まで</p> diff --git a/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html new file mode 100644 index 0000000000..f6ef54e17d --- /dev/null +++ b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html @@ -0,0 +1,35 @@ +--- +title: DNS プリフェッチの制御 +slug: Controlling_DNS_prefetching +--- +<p>{{ fx_minversion_header(3.5) }}</p> +<p>Firefox 3.5 では <strong>DNS prefetching </strong>が導入されました。これにより、 Firefox は文書中に埋め込まれたアンカーに加え、画像、CSS、JavaScript などの文書内で参照されている外部リソースの URL に対し、予めドメインの名前解決を行います。</p> +<p>このプリフェッチはバックグラウンドで行われるため、実際にリソースが必要となった際には既に名前解決が終了していることになります。これにより、例えばユーザーがリンクをクリックした際の待ち時間を減らすことができます。</p> +<h2 id="背景">背景</h2> +<p>DNS による名前解決に必要な帯域幅は小さなものですが、それにかかる時間は非常に大きく、特にモバイル環境では顕著なものとなります。予め名前解決を行っておくことで、例えばユーザーがリンクをクリックした際に、ページが表示されるまでの待ち時間を大きく削減することができ、場合によっては秒単位の効果が現れる場合もあります。</p> +<p>Firefox での実装においては、実際のページコンテンツの取得と<strong>並行して</strong> DNS による名前解決が行われるため、名前解決に時間がかかっても実際のページコンテンツの取得に遅れが生じることはありません。</p> +<p>特にモバイル環境においては、 DNS プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。</p> +<h2 id="ブラウザーでのプリフェッチ制御">ブラウザーでのプリフェッチ制御</h2> +<p>通常、ユーザーはプリフェッチ機能に対して何ら設定する必要はありません。が、何らかの理由でプリフェッチ機能を無効にしたい場合は、 <code>network.dns.disablePrefetch</code> を <code>true</code> に設定してください。</p> +<p>また、既定では HTTPS にて読み込まれた文書に対する埋め込みリンクのホスト名は事前に解決されないように設定されています。これを変更するには<code>network.dns.disablePrefetchFromHTTPS </code>を <code>false</code> としてください。</p> +<h2 id="コンテンツでのプリフェッチ制御">コンテンツでのプリフェッチ制御</h2> +<p>コンテンツ・プロバイダー側でもプリフェッチ機能をある程度制御することができます。これは、 <a class="external" href="http://dev.chromium.org/developers/design-documents/dns-prefetching" title="http://dev.chromium.org/developers/design-documents/dns-prefetching">Google Chrome が DNS プリフェッチをコントロールする</a> 際の手法と互換性があります。</p> +<h3 id="プリフェッチのオン・オフ">プリフェッチのオン・オフ</h3> +<p>まず、サーバーはコンテンツの配信時に <code>x-dns-prefetch-control </code>HTTP ヘッダを "<code>off</code>" とすることで、DNS プリフェッチ機能をオプト・アウトとして（ユーザーの意志とは関係なく）実装することができます。</p> +<p>同様に個々の文書に対して制御を行うことも可能で、 <a class="internal" href="/Ja/HTML/Element/Meta" title="Ja/HTML/Element/Meta"><code>meta</code></a> 要素の <code style="color: rgb(37, 34, 29); font-weight: inherit;">http-equiv</code> 属性を次のように設定することで実現できます:</p> +<pre><meta http-equiv="x-dns-prefetch-control" content="off"> +</pre> +<p>逆に、 <code>content</code> 属性を "<code>on</code>" とすることで、プリフェッチが有効になります。</p> +<h3 id="特定のホスト名の名前解決を強制する">特定のホスト名の名前解決を強制する</h3> +<p>コンテンツ・プロバイダーは、文書内にアンカーを埋め込まずとも、特定のホスト名に対する DNS の事前解決を強制することができます。これは、 <code><a class="internal" href="/en/HTML/Element/link" title="En/HTML/Element/Link">link</a> 要素に以下のように記述します</code>:</p> +<pre><link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> +</pre> +<p>この例では、 Firefox は "www.spreadfirefox.com" について、予め名前解決を行うよう試みます。</p> +<p>また、 link 要素中に必ずしも完全なアドレスを記述せずとも、ホスト名の前に二つのスラッシュを加えることで名前解決が行われます:</p> +<pre><link rel="dns-prefetch" href="//www.spreadfirefox.com"> +</pre> +<p>特定のホスト名について強制的に予め名前解決を行うというのは、次のような場合に有効と考えられます: トップページそのものでは参照されていないものの、サイト内の他のページでは頻繁に参照されている外部ドメインをトップページにて強制的に名前解決を行うことで、トップページ自体の速度向上は望めませんが、サイト全体でのパフォーマンス向上が期待できます。</p> +<h2 id="参考文献">参考文献</h2> +<ul> <li><a class="external" href="http://bitsup.blogspot.com/2008/11/dns-prefetching-for-firefox.html" title="http://bitsup.blogspot.com/2008/11/dns-prefetching-for-firefox.html">DNS Prefetching for Firefox (blog post)</a></li> +</ul> +<p> </p> diff --git a/files/ja/conflicting/web/javascript/guide/index.html b/files/ja/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..79c30b670a --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide/index.html @@ -0,0 +1,44 @@ +--- +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/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html new file mode 100644 index 0000000000..88bf9acbe7 --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html @@ -0,0 +1,10 @@ +--- +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/conflicting/web/javascript/reference/global_objects/escape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..48ab4cab3b --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,34 @@ +--- +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/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..5705852c36 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,88 @@ +--- +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/conflicting/web/javascript/reference/global_objects/json/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..a4f38307ea --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,95 @@ +--- +title: ネイティブ JSON を使う +slug: Using_native_JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +translation_of_original: Web/JavaScript/Guide/Using_native_JSON +--- +<div>{{gecko_minversion_header("1.9.1")}}</div> + +<p>この文書では、 Gecko 1.9.1 で追加された ECMAScript 5 互換のネイティブ JSON オブジェクトについて説明します。以前のバージョンの Firefox で JSON を扱う際の基本的な情報については、<a href="/ja/docs/JSON" title="JSON">JSON</a> のページをご覧下さい。</p> + +<p>ネイティブ JSON オブジェクトは 2 つの重要なメソッドをもっています。<code>JSON.parse()</code> メソッドは JSON 文字列をパースし、 JavaScript のオブジェクトに変換します。<code>JSON.stringify()</code> メソッドは、 JavaScript オブジェクトを JSON 文字列に変換します。</p> + +<div class="note"><strong>注意:</strong>JSON オブジェクトは循環的な構造の変換には対応していません。そのようなオブジェクトを JSON 文字列に変換しようとすると、<code>TypeError</code> 例外が起こります。</div> + +<h2 id="JSON_.E6.96.87.E5.AD.97.E5.88.97.E3.81.AE.E3.83.91.E3.83.BC.E3.82.B9" name="JSON_.E6.96.87.E5.AD.97.E5.88.97.E3.81.AE.E3.83.91.E3.83.BC.E3.82.B9">JSON 文字列のパース</h2> + +<p>JSON 文字列を JavaScript オブジェクトに変換するには、以下の例のように JSON 文字列を単純に <code>JSON.parse()</code> に渡すだけで済みます。</p> + +<pre class="brush: js">var jsObject = JSON.parse(jsonString); +</pre> + +<p>JavaScript 1.8.5 (Firefox 4) 以降では <code>JSON.parse()</code> では末尾のカンマを許可しません。</p> + +<pre>// JavaScript 1.8.5 ではいずれも構文エラーとなります +var jsObject = JSON.parse("[1, 2, 3, 4, ]"); +var jsObject = JSON.parse("{ \"foo\" : 1, }"); +</pre> + +<h2 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92_JSON_.E3.81.AB.E5.A4.89.E6.8F.9B" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92_JSON_.E3.81.AB.E5.A4.89.E6.8F.9B">オブジェクトを JSON に変換</h2> + +<p>JavaScript オブジェクトを JSON 文字列に変換するには、オブジェクトを<code>JSON.stringify()</code> メソッドに渡します:</p> + +<pre class="brush: js">var foo = {}; +foo.bar = "new property"; +foo.baz = 3; + +var jsonString = JSON.stringify(foo); +</pre> + +<p><code>jsString</code>は<code>'{"bar":"new property","baz":3}'</code> と変換されます。</p> + +<p>Firefox 3.5.4 以降では <code>JSON.stringify()</code> オプションの引数で挙動をカスタマイズ可能になります。構文は次の通りです:</p> + +<p><code>jsonString = JSON.stringify(<em>value</em> [, <em>replacer</em> [, <em>space</em>]])</code></p> + +<dl> + <dt><code>value</code></dt> + <dd>JSON 文字列に変換する JavaScript オブジェクト。</dd> + <dt><code>replacer</code></dt> + <dd>文字列化プロセスの振る舞いを変更する関数、または value オブジェクトのプロパティのうち JSON 文字列出力に含めるホワイトリストを指定する <a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/Guide/Predefined Core Objects/String Object"><code>String</code></a> もしくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global Objects/Number"><code>Number</code></a> オブジェクトの配列。この値が null もしくは指定されなかった場合、オブジェクトのすべてのプロパティが JSON 文字列の出力に含まれます。</dd> + <dt><code>space</code></dt> + <dd>出力される JSON 文字列を読みやすくするために挿入する空白文字を指定する <a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/ Guide/Predefined Core + Objects/String Object"><code>String</code></a> もしくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global + Objects/Number"><code>Number</code></a> オブジェクト。<code>Number </code>が指定された場合、ホワイトスペースの空白文字数として扱われます。但し 10 を超える数値を指定しても 10 を指定したものとして扱われます。1 より小さい値を指定するとホワイトスペースは含められません。<code>String </code>が指定された場合、空白文字の代わりにその文字列(または 10 文字を越える場合は最初の 10 文字)が使われます。この値が<code> null </code>もしくは指定されなかった場合、ホワイトスペースは含まれません。</dd> +</dl> + +<h3 id="replacer_.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF" name="replacer_.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF">replacer パラメータ</h3> + +<p><code>replacer </code>パラメータには関数または配列を指定できます。</p> + +<p><code>replacer </code>が関数である場合、文字列化するプロパティのキーと値二つをパラメータとして受け取ります。キーが見つかったオブジェクトは <code>this</code> パラメータとして渡されます。最初空文字列をキー、<code>value</code> パラメータのオブジェクトを値として関数を呼び出します。関数の返り値がオブジェクト(もしくは配列)であれば順次そのプロパティの名前と値を引数として関数を呼び出します。出力される JSON 文字列は関数の返値に応じて次のようになります:</p> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global Objects/Number"><code>Number</code></a> が返されると、プロパティの値としてその数値に対応する文字列が JSON 文字列に出力されます。</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/ Guide/Predefined Core Objects/String"><code>String</code></a> が返されると、プロパティの値としてその文字列が JSON 文字列に出力されます。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/ Reference/Global Objects/Boolean"><code>Boolean</code></a> が返されると、プロパティの値として "true" もしくは "false" が JSON 文字列に出力されます。</li> + <li>その他のオブジェクトが返されると、各プロパティについて <code>replacer</code> を呼び出し、再帰的に JSON 文字列化されます。但し関数が返された場合には JSON 文字列には何も追加されません。</li> + <li><code>undefined</code> が返されると、プロパティは JSON 文字列の出力に含められません。</li> +</ul> + +<div class="note"><strong>注記:</strong> 配列の要素を除外するためには <code>replacer</code> は使えません。オブジェクトのプロパティについては <code>undefined</code> または関数を返すとそのプロパティがスキップされますが、関数の要素の場合は <code>null</code> が出力されます。</div> + +<h4 id="Example" name="Example">例</h4> + +<pre class="eval deki-transform brush: js">function replacer(key, value) { + if (typeof value === "string") { + return undefined; + } + return value; +} + +var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; +var jsonString = JSON.stringify(foo, replacer); +</pre> + +<p>結果として得られる JSON 文字列は <code>{"week":45,"month":7}</code> となります。</p> + +<p><code>replacer</code> が配列である場合、オブジェクトのプロパティのうち JSON 文字列出力に含まれるべきプロパティ名のリストとして扱われます。</p> + +<h2 id="See_also" name="See_also">参考文献</h2> + +<ul> + <li><a class="internal" href="/ja/docs/Web/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">Mozilla における ECMAScript 5 のサポート</a></li> + <li><a class="internal" href="/ja/docs/JSON" title="JSON">JSON</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..1dc9e038db --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,18 @@ +--- +title: lastIndexOf +slug: lastIndexOf +tags: + - Disambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +translation_of_original: lastIndexOf +--- +<p><strong>lastIndexOf</strong> は、いくつかの JavaScript オブジェクトが持つメソッドです。</p> + +<h2 id="JavaScript" name="JavaScript">JavaScript</h2> + +<ul> + <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf">lastIndexOf</a> - Array オブジェクトのメソッド</li> + <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a> - String オブジェクトのメソッド</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..07564a02ee --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,34 @@ +--- +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/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..fedccef945 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,64 @@ +--- +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/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..6d837f2f73 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,71 @@ +--- +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/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..84709eb736 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,75 @@ +--- +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/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..fabc275890 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,89 @@ +--- +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/conflicting/web/javascript/reference/operators/index.html b/files/ja/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..5010c8eb89 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,232 @@ +--- +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/conflicting/web/javascript/reference/operators/yield/index.html b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..69be44e8d9 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,7 @@ +--- +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/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..8b43c3de26 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,295 @@ +--- +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/conflicting/web/opensearch/index.html b/files/ja/conflicting/web/opensearch/index.html new file mode 100644 index 0000000000..f7c679aae4 --- /dev/null +++ b/files/ja/conflicting/web/opensearch/index.html @@ -0,0 +1,73 @@ +--- +title: ウェブページからの検索エンジンの追加 +slug: Adding_search_engines_from_web_pages +tags: + - Add-ons + - Search plugins +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +<p>Firefox では JavaScript コードから検索プラグインをインストールすることができ、<a href="ja/Creating_OpenSearch_plugins_for_Firefox">OpenSearch</a> と Sherlock という 2 つの検索プラグインフォーマットをサポートしています。</p> + +<div class="note"><strong>注意</strong>: Firefox 2 からは、OpenSearch が Firefox の検索フォーマットとして推奨されています。Sherlock のサポートは将来廃止する予定です ({{bug(862137)}})。</div> + +<p>JavaScript コードが検索プラグインをインストールしようとすると、Firefox はユーザにプラグインのインストールを許可するか尋ねる警告を表示します。</p> + +<p>{{ 英語版章題("Installing OpenSearch plugins") }}</p> + +<h2 id="OpenSearch_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB" name="OpenSearch_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB">OpenSearch プラグインのインストール</h2> + +<p>OpenSearch プラグインをインストールするには、<code>window.external.AddSearchProvider()</code> DOM メソッドを使う必要があります。このメソッドの構文はこのようになります。</p> + +<pre class="eval">window.external.AddSearchProvider(<em>engineURL</em>); +</pre> + +<p><em>engineURL</em>は検索プラグイン XML ファイルへの絶対 URL です。</p> + +<div class="note"><strong>注意:</strong> OpenSearch は Firefox 2 以降でのみサポートされています。</div> + +<p>{{ 英語版章題("Installing Sherlock plugins") }}</p> + +<h2 id="Sherlock_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB" name="Sherlock_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB">Sherlock プラグインのインストール</h2> + +<div>{{obsolete_header}}</div> + +<div class="warning"> +<p>window.sidebar.addSearchEngine のサポートは <a href="/ja/docs/Mozilla/Firefox/Releases/44">Firefox 44</a> で廃止しました。</p> +</div> + +<p>Sherlock プラグインをインストールするには、<code>window.sidebar.addSearchEngine()</code> を呼び出す必要があり、その構文は以下のとおりです。</p> + +<pre class="eval">window.sidebar.addSearchEngine(<em>engineURL</em>,<em>iconURL</em>,<em>suggestedName</em>,<em>suggestedCategory</em>); +</pre> + +<ul> + <li><code>engineURL</code> パラメータはインストールする Sherlock プラグイン (".src" ファイル) の URL です。</li> + <li><code>iconURL</code> はプラグインに関連付けるアイコンの URL です。</li> + <li><code>suggestedName</code> パラメータはプラグインのインストールの許可をユーザに尋ねるときにだけ使用します。つまり 「<em>engineURL</em> から<em>suggestedName</em> をインストールしますか?」 のようなメッセージが表示されるでしょう。</li> + <li><code>suggestedCategory</code> パラメータは使われていません。空の文字列 (<code>""</code>) か <code>null</code> を指定すべきです。</li> +</ul> + +<p>Sherlock の詳細は <a class="external" href="http://developer.apple.com/macosx/sherlock/" rel="freelink">http://developer.apple.com/macosx/sherlock/</a> を参照ください。</p> + +<p>{{ 英語版章題("Browser search engine capability detection") }}</p> + +<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A4.9C.E7.B4.A2.E3.82.A8.E3.83.B3.E3.82.B8.E3.83.B3.E6.A9.9F.E8.83.BD.E3.81.AE.E6.A4.9C.E5.87.BA" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A4.9C.E7.B4.A2.E3.82.A8.E3.83.B3.E3.82.B8.E3.83.B3.E6.A9.9F.E8.83.BD.E3.81.AE.E6.A4.9C.E5.87.BA">ブラウザの検索エンジン機能の検出</h2> + +<p>検索エンジンを追加するための API は Firefox 1.5 から Firefox 2 までに変更されており、また Firefox 1.5 は OpenSearch 記述ファイルをサポートしていません。このため、検索エンジンを追加する時に後方互換性を維持したい場合、すなわち Firefox 1.5, Firefox 2.0, IE7 で動作するようにしたい場合、Web ページの製作者は Sherlock と OpenSearch の両方のフォーマットに対応し、またブラウザの機能を適宜検出しなければなりません。次のコード片はこういったことを行う一つの例です。</p> + +<pre class="brush: js">function installSearchEngine() { + if (window.external && ("AddSearchProvider" in window.external)) { + // Firefox 2 と IE 7 では OpenSearch を使う + window.external.AddSearchProvider("<span class="nowiki">http://example.com/search-plugin.xml</span>"); + } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) { + // Firefox 1.5 以下では Sherlock を使う + window.sidebar.addSearchEngine("<span class="nowiki">http://example.com/search-plugin.src</span>", + "<span class="nowiki">http://example.com/search-icon.png</span>", + "Search Plugin", ""); + } else { + // 検索エンジンはサポートされていない (IE 6, Opera など) + alert("No search engine support"); + } +} +</pre> diff --git a/files/ja/conflicting/web/progressive_web_apps/index.html b/files/ja/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..36724f3ba5 --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,77 @@ +--- +title: レスポンシブデザイン +slug: Web_Development/Mobile/Responsive_design +tags: + - Apps + - Mobile + - Responsive Design + - Web Development +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +<p>モバイル向けとデスクトップ向けの Web サイトの開発に対する <a href="/ja/docs/Web/Guide/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">別々のサイト</a> 手法に関連する問題に対する反応として、比較的新しい (実際は <a href="http://www.alistapart.com/articles/dao/">とても古い</a>) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a> で紹介され、<a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">レスポンシブ Web デザイン</a> として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。</p> + +<h2 id="長所">長所</h2> + +<p>最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。</p> + +<ol style="font-size: medium;"> + <li>デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。</li> + <li>レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。</li> + <li>モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。</li> + <li>レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。</li> +</ol> + +<p>この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。</p> + +<h2 id="短所">短所</h2> + +<p>この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。</p> + +<p>もし <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">フレキシブルなレイアウト</a> に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。</p> + +<p>最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。</p> + +<h2 id="この選択肢を選ぶとき">この選択肢を選ぶとき</h2> + +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！</p> + +<h2 id="Examples" name="Examples" style="overflow: hidden;">用例</h2> + +<p>分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。</p> + +<ul> + <li><a href="http://teixido.co/">http://teixido.co/</a> – 私のお気に入りのレスポンシブデザインです。画像が上にあります！</li> + <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 読むのにおすすめの記事です。記事内のリンクも用例となっています。</li> + <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> + +<p>比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、<a href="http://www.lukew.com/ff/entry.asp?1117">まず小さい画面で作成する</a> のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">ここ</a> から利用できます。</p> + +<h2 id="モバイル_Web_開発手法">モバイル Web 開発手法</h2> + +<p>以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。</p> + +<ul> + <li><a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルの親しみやすさとは？</a></li> + <li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li> + <li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> + +<h2 id="関連文書">関連文書</h2> + +<ul> + <li>追加リソース: <a href="/ja/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">レスポンシブ Web デザイン</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="元の文書">元の文書</h3> + +<p>Mozilla Webdev ブログの "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。</p> +</div> + +<p> </p> diff --git a/files/ja/conflicting/web/progressive_web_apps/introduction/index.html b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..b7d3a2dc7b --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,65 @@ +--- +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/conflicting/web/svg/svg_1.1_support_in_firefox/index.html b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..8def32aa25 --- /dev/null +++ b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,781 @@ +--- +title: Firefox の SVG 実装状況 +slug: SVG_in_Firefox +tags: + - Firefox + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p><a class="external" href="http://www.w3.org/Graphics/SVG/Test/20061213/">W3C SVG test suite</a> に、いくつかの基本的な SVG 構文と使用例があります。</p> +<div class="geckoVersionNote"> + <p>{{gecko_callout_heading("2.0")}}</p> + <p>Gecko は 現在、SMIL を用いての SVG アニメーションをサポートしています。概要については、『<a href="/ja/docs/SVG/SVG_animation_with_SMIL">SMIL を用いた SVG アニメーション</a>』 をご覧下さい。SVG の完全なドキュメントはまだ完成に向けて作成中です。</p> +</div> +<h2 id="Element_implementation_status" name="Element_implementation_status">要素の実装状況</h2> +<p><a href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> 要素の簡単な概要および現在のネイティブサポート状況を以下に列挙します。</p> +<table class="standard-table" style="border-collapse: separate;"> + <tbody> + <tr> + <th>要素</th> + <th>注記</th> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>実装済</li> + <li><code>currentScale</code> 属性と <code>currentTranslate</code> 属性は実装されていますが、パンとズームのユーザインターフェースは有りません。</li> + <li>SVGSVGElement + <ul> + <li>未実装の属性 : <code>contentScriptType</code> 、 <code>contentStyleType</code> 、 <code>viewport</code> 、 <code>currentView</code></li> + <li>未実装のバインディング : <code>getIntersectionList</code> 、 <code>getEnclosureList</code> 、 <code>checkIntersection</code> 、 <code>checkEnclosure</code> 、 <code>deselectAll</code></li> + <li>最近実装されたバインディング : + <ul> + <li><code>pauseAnimations</code> 、 <code>unpauseAnimations</code> 、 <code>animationsPaused</code> 、 <code>getCurrentTime</code> 、 <code>setCurrentTime</code> {{gecko_minversion_inline("2")}} 、 <code>getElementById</code> {{gecko_minversion_inline("11")}} 、 <code>useCurrentView</code> {{gecko_minversion_inline("15")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>実装済</li> + <li>DOM に保存されるだけでユーザインタフェースは無し</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 より、SVG オブジェクトにマウスを重ねると <code>title</code> 属性値が表示されるようになった {{gecko_minversion_inline("2")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>実装済</li> + <li>DOM に保存されるだけでユーザインタフェースは無し</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>実装済</li> + <li>Firefox 3.5/Gecko 1.9.1 で外部文書への参照が実装された ({{Bug(269482)}})</li> + <li><svg:use> カスケーディング規則に完全に従っていない ({{Bug(265894)}})</li> + <li>SVGElementInstance ツリーにイベントを伝えない ({{Bug(265895)}})</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 以前では <svg:image> はラスタ画像のみサポート ({{Bug(272288)}}).</li> + <li>Gecko 2.0 より、 <svg:image> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>実装済</li> + <li>SVGPathElement Interface + <ul> + <li>未実装の属性 : normalizedPathSegList, animatedNormalizedPathSegList</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>実装済</li> + <li>多くのプレゼンテーション属性が動作せず : (<code>alignment-baseline</code>, <code>baseline-shift</code>, <code>dominant-baseline</code>, <code>font-variant</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code>, <code>text-decoration</code>, <code>direction</code>, <code>unicode-bidi</code>, <code>writing-mode</code>, <code>glyph-orientation-horizontal</code>, <code>glyph-orientation-vertical</code>)</li> + <li><code>x</code>, <code>y</code>, <code>dx</code>, <code>dy</code> 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}</li> + <li>SVGTextElement + <ul> + <li>未実装の属性 : <code>textLength</code> 、 <code>lengthAdjust</code></li> + <li>未実装のバインディング : <code>selectSubString</code></li> + <li>追加属性 : <code>rotate</code> {{gecko_minversion_inline("2")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>実装済</li> + <li>多くのプレゼンテーション属性が動作せず : (<code>alignment-baseline</code>, <code>baseline-shift</code>, <code>dominant-baseline</code>, <code>font-variant</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code>, <code>text-decoration</code>, <code>direction</code>, <code>unicode-bidi</code>, <code>writing-mode</code>, <code>glyph-orientation-horizontal</code>, <code>glyph-orientation-vertical</code>)</li> + <li><code>x</code>, <code>y</code>, <code>dx</code>, <code>dy</code> 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}</li> + <li>SVGTSpanElement + <ul> + <li>未実装の属性 : <code>textLength</code> 、 <code>lengthAdjust</code></li> + <li>未実装のバインディング : <code>selectSubString</code></li> + <li>追加属性 : <code>rotate</code> {{gecko_minversion_inline("2")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td> + <ul> + <li>未実装 ({{Bug(273171)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>実装済</li> + <li>未実装バインディング : selectSubString</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: yellow;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Gecko 2.0 では tspan として実装され、フォント機能は無い ({{Bug(456286)}} / {{Bug(571808)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>未実装 ({{Bug(427713)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>実装済</li> + <li>擬似入力として次のものが実装されている : <code>SourceGraphic</code> 、 <code>SourceAlpha</code> 、 <code>FillPaint</code> {{gecko_minversion_inline("17")}}<br> + <code>StrokePaint</code> が実装済 {{gecko_minversion_inline("17")}}</li> + <li>未実装の擬似入力ないしフィルタ要素を使った場合、フィルタは無視され対応する図形はフィルタ無しで表示される</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 以前は <svg:feImage> はラスタ画像のみサポート</li> + <li>Gecko 2.0 より、 <svg:feImage> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}</li> + <li>ドキュメントフラグメントは <svg:feImage> で未サポート ({{bug(455986)}})</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>未実装 ({{Bug(177193)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>次の属性のみ実装 : <code>xlink:href</code> 、 <code>xlink:show</code> 、 <code>xlink:target</code> 、 <code>xlink:title</code></li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Gecko 15.0 で実装済 ({{Bug(512525)}}) {{gecko_minversion_inline("15.0")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>未実装 ({{Bug(436296)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontElement" title="http://www.w3.org/TR/SVG11/fonts.html#FontElement">font</a></td> + <td> + <ul> + <li>未実装 ({{Bug(119490)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..8d63ce70da --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,411 @@ +--- +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/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html new file mode 100644 index 0000000000..9186a55b76 --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html @@ -0,0 +1,94 @@ +--- +title: Using XPath +slug: Using_XPath +tags: + - AJAX + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +<p> +</p><p><a href="ja/XPath">XPath</a> は XML 文書の一部を指し示すための言語であり、<a class="external" href="http://www.w3.org/TR/xpath">W3C 勧告</a>です。 +</p><p>この記事では JavaScript のコードから XPath の機能を使うための Mozilla のインターフェイスについて説明します。これらは <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a> (現時点では W3C Working Group Note) に記載されているものです。 +</p><p>この記事は XPath それ自体について教えるものではありません。XPath についてよく知らなければ、 <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a> を参照して下さい。 +</p><p>{{ 英語版章題("Wrapper function") }} +</p> +<h3 id=".E3.83.A9.E3.83.83.E3.83.91.E9.96.A2.E6.95.B0">ラッパ関数</h3> +<p>次の関数を使うと、特定の XML ノードに対して XPath 式を評価する事ができます。第一引数は DOM ノードもしくは Document オブジェクトで、第二引数は XPath 式を定義した文字列です。 +</p> +<pre>// 特定の DOM ノードもしくは Document オブジェクト (aNode) に対して +// XPath 式 aExpression を評価し、その結果を配列として返す。 +// 最初の作業を行った wanderingstan at morethanwarm dot mail dot com に感謝します。 +function evaluateXPath(aNode, aExpr) { + var xpe = new XPathEvaluator(); + var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? + aNode.documentElement : aNode.ownerDocument.documentElement); + var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); + var found = []; + var res; + while (res = result.iterateNext()) + found.push(res); + return found; +} +</pre> +<p>この関数では <code>new XPathEvaluator()</code> を使用しています。このコンストラクタは Mozilla 固有のものです。他のブラウザで使用される可能性のある Web ページのスクリプトでは、 <code>new XPathEvaluator()</code> の呼び出しを次のコードに置き換えて下さい。 +</p> +<pre> // XPathEvaluator は Document を実装するオブジェクトに実装されている + var xpe = aNode.ownerDocument || aNode; +</pre> +<p>この場合、 <a href="ja/DOM/document.createNSResolver">XPathNSResolver</a> の作成は次のように単純にできます。 +</p> +<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); +</pre> +<p>ただ、 <code>createNSResolver</code> は、 XPath 式の中の名前空間接頭辞が検索対象の文書のものと一致する場合にしか使うべきではないということに注意してください。一致しない場合には、独自の XPathNSResolver の実装を用意しなければなりません。 +</p><p><a href="ja/XMLHttpRequest">XMLHttpRequest</a> を使って (<a href="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a> にあるように) ローカルもしくはリモートの XML ファイルを DOM ツリーに読み込んだ場合には、 <code>evaluateXPath()</code> の第一引数に <code>req.responseXML</code> を指定します。 +</p><p>{{ 英語版章題("Sample usage") }} +</p> +<h3 id=".E4.BD.BF.E7.94.A8.E4.BE.8B">使用例</h3> +<p>次のような XML 文書があるとします。 (<a href="ja/How_to_create_a_DOM_tree">How to create a DOM tree</a> と <a href="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a> も参照して下さい) +</p> +<pre><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> +<p>関数 <code>evaluateXPath</code> を使って、XPath 式でこの文書を「クエリ」する事ができます。DOM ツリーを走査しても同様の結果を得られますが、XPath 式を使った方がずっと高速で強力です。<code>id</code> 属性に頼る事ができれば <code>document.getElementById()</code> は強力ですが、XPath の強力さには全く及びません。いくつか例を示します。 +</p> +<pre>// 文書内の全ての人物の苗字を表示する +var results = evaluateXPath(people, "//person/@last-name"); +for (var i in results) + alert("Person #" + i + " has the last name " + results[i].value); + +// 2 人目の人物のノードを得る +results = evaluateXPath(people, "/people/person[2]"); + +// デンバーに住所を持つ全ての人物ノードを得る +results = evaluateXPath(people, "//person[address/@city='denver']"); + +// 通りの名前に "south" が含まれる全ての住所を得る +results = evaluateXPath(people, "//address[contains(@street, 'south')]"); +alert(results.length); +</pre> +<p>{{ 英語版章題("Resources") }} +</p> +<h3 id=".E8.B3.87.E6.96.99">資料</h3> +<ul> <li><a href="/ja/XPath" title="ja/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">この話題に関するフォーラムでの議論</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - JavaScript から XPath を使用するためのチュートリアルの草稿</li> +</ul> +<p> </p> + +<p>{{ languages( { "en": "en/Using_XPath", "fr": "fr/Utilisation_de_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}</p> |