diff options
Diffstat (limited to 'files/ja/web')
62 files changed, 389 insertions, 742 deletions
diff --git a/files/ja/web/accessibility/aria/widgets/overview/index.html b/files/ja/web/accessibility/aria/widgets/overview/index.html deleted file mode 100644 index c49401a24b..0000000000 --- a/files/ja/web/accessibility/aria/widgets/overview/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 概観 -slug: Web/Accessibility/ARIA/widgets/overview -tags: - - Accessibility - - JavaScript - - Landing - - NeedsUpdate -translation_of: Web/Accessibility/ARIA/widgets/overview ---- -<div class="warning">Warning: needs updating</div> - -<h2 id="Introduction_2" name="Introduction_2"><span class="mw-headline" id="Introduction">入門</span></h2> - -<p>ここでは、動作する例とアクセシブルなJavaScript ウィジェットを作るベストプラクティスを見ていきます。</p> - -<h2 id="General_Resources_2" name="General_Resources_2"><span class="mw-headline" id="General_Resources">一般リソース</span></h2> - -<ul> - <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">DHTML Style Guide</a> にはキーボードインタラクションのお勧めがあります。</li> - <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">WAI-ARIA Authoring Practices Guide</a></li> -</ul> - -<h2 id="Checkbox" name="Checkbox">チェックボックス</h2> - -<ul> - <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">ARIA Toggle Button and Tri-state Checkbox examples</a> (from "The Paciello Group Blog")</li> - <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox" rel="nofollow">ARIA Example Checkbox Widgets from the University of Illinois</a></li> -</ul> - -<h2 id="Menu_2" name="Menu_2"><span class="mw-headline" id="Menu">メニュー</span></h2> - -<ul> - <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Using WAI-ARIA Roles and States with the YUI Menu Control</a></li> -</ul> - -<h2 id="Slider_2" name="Slider_2"><span class="mw-headline" id="Slider">スライダー</span></h2> - -<ul> - <li>From the Paciello Group Blog: ARIA Slider, <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">part one</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">part two</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">part threet</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">example</a>)</li> - <li><a class="external text" href="http://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/" rel="nofollow">Creating an Accessible, Internationalized Dojo Rating Widget</a></li> -</ul> - -<h2 id="Tabs_2" name="Tabs_2"><span class="mw-headline" id="Tabs">タブ</span></h2> - -<ul> - <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Enhancing TabView Accessibility with WAI-ARIA Roles and States</a>, from the YUI blog</li> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Enhancing the jQuery UI Tabs accordingly to WCAG 2.0 and ARIA</a></li> - <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Tab panel example here on CodeTalks</a></li> -</ul> - -<h2 id="Lightbox_2" name="Lightbox_2"><span class="mw-headline" id="Lightbox">ライトボックス</span></h2> - -<ul> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 and ARIA-</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conformant</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow"> lightbox application</a></li> - <li><a class="external free" href="http://majx-js.digissime.net/js/popin/" rel="nofollow">http://majx-js.digissime.net/js/popin/</a></li> -</ul> - -<h2 id="Form_Validation_2" name="Form_Validation_2"><span class="mw-headline" id="Form_Validation">フォーム検証</span></h2> - -<ul> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">WCAG 2.0 and ARIA-conformant live form validation</a></li> -</ul> - -<h2 id="Tables" name="Tables"><span class="mw-headline" id="Table">表</span></h2> - -<ul> - <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">German tutorial on creating an accessible form</a></li> - <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Simple grid example at CodeTalks</a></li> - <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Date picker grid at CodeTalks</a></li> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">WCAG 2.0 and ARIA-conformant sortable tables</a></li> -</ul> diff --git a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html index 56f9db6d6b..643e43fc8c 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html @@ -58,7 +58,7 @@ ctx.stroke(); <p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code" name="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -104,7 +104,7 @@ window.addEventListener("load", drawCanvas); <p>以下の例は異なった形を描くことで、<code>arc()()</code>メソッドは何ができるのかを示します。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="HTML_2">HTML</h6> <pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html index 4f09a2bc91..11d53cfe2b 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -63,7 +63,7 @@ ctx.clearRect(10, 10, 100, 100); <p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html index 4d0135e6fa..db5875c709 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html @@ -50,7 +50,7 @@ ctx.drawFocusIfNeeded(button); <p>下のコードを編集すると、変更がリアルタイムにcanvasに反映されます:</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"> diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html index 1424ba870b..9839c130e1 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -49,7 +49,7 @@ ctx.fillRect(10, 10, 100, 100); <p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html index 87823bbb20..6098495f82 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html @@ -55,7 +55,7 @@ ctx.fillText("Hello world", 50, 100); <p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code" name="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html index 6929a63253..2bd2f6ea4f 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html @@ -45,7 +45,7 @@ ctx.stroke(); <p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/rect/index.html b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html index 651320c13c..dff79b53ed 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/rect/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html @@ -66,7 +66,7 @@ ctx.fill(); <p>下のコードを変更してみよう:</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html index 83ea761abf..3405ee1221 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html @@ -41,7 +41,7 @@ ctx.stroke(); <p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html index 173e65157b..e664a5f6bf 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -58,7 +58,7 @@ ctx.strokeText("Hello world", 50, 100); <p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p> -<div style="display: none;"> +<div class="hidden"> <h6 id="Playable_code" name="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ja/web/api/documentorshadowroot/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html index 5fe59cbae6..3d47c8b0b0 100644 --- a/files/ja/web/api/documentorshadowroot/activeelement/index.html +++ b/files/ja/web/api/document/activeelement/index.html @@ -1,6 +1,6 @@ --- title: document.activeElement -slug: Web/API/DocumentOrShadowRoot/activeElement +slug: Web/API/Document/activeElement tags: - DOM - Focus @@ -10,7 +10,7 @@ tags: - 要更新 translation_of: Web/API/DocumentOrShadowRoot/activeElement translation_of_original: Web/API/Document/activeElement -original_slug: Web/API/Document/activeElement +original_slug: Web/API/DocumentOrShadowRoot/activeElement --- <div>{{ApiRef}}</div> diff --git a/files/ja/web/api/documentorshadowroot/caretpositionfrompoint/index.html b/files/ja/web/api/document/caretpositionfrompoint/index.html index 57168e3eea..44deaf1be3 100644 --- a/files/ja/web/api/documentorshadowroot/caretpositionfrompoint/index.html +++ b/files/ja/web/api/document/caretpositionfrompoint/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.caretPositionFromPoint() -slug: Web/API/DocumentOrShadowRoot/caretPositionFromPoint +slug: Web/API/Document/caretPositionFromPoint tags: - API - Document @@ -10,6 +10,7 @@ tags: - ShadowRoot - caretPositionFromPoint() translation_of: Web/API/DocumentOrShadowRoot/caretPositionFromPoint +original_slug: Web/API/DocumentOrShadowRoot/caretPositionFromPoint --- <p>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</p> diff --git a/files/ja/web/api/documentorshadowroot/fullscreenelement/index.html b/files/ja/web/api/document/fullscreenelement/index.html index 2c75a57840..b5218b2447 100644 --- a/files/ja/web/api/documentorshadowroot/fullscreenelement/index.html +++ b/files/ja/web/api/document/fullscreenelement/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.fullscreenElement -slug: Web/API/DocumentOrShadowRoot/fullscreenElement +slug: Web/API/Document/fullscreenElement tags: - API - Document @@ -18,6 +18,7 @@ tags: - 全画面 - 読み取り専用 translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +original_slug: Web/API/DocumentOrShadowRoot/fullscreenElement --- <div>{{ApiRef("Fullscreen API")}}</div> diff --git a/files/ja/web/api/documentorshadowroot/getanimations/index.html b/files/ja/web/api/document/getanimations/index.html index 83900d4b9f..dde6a5530a 100644 --- a/files/ja/web/api/documentorshadowroot/getanimations/index.html +++ b/files/ja/web/api/document/getanimations/index.html @@ -1,6 +1,6 @@ --- title: Document.getAnimations() -slug: Web/API/DocumentOrShadowRoot/getAnimations +slug: Web/API/Document/getAnimations tags: - API - Animation @@ -17,7 +17,7 @@ tags: - waapi - web animations api translation_of: Web/API/DocumentOrShadowRoot/getAnimations -original_slug: Web/API/Document/getAnimations +original_slug: Web/API/DocumentOrShadowRoot/getAnimations --- <p>{{ SeeCompatTable() }}{{APIRef("Web Animations")}}</p> diff --git a/files/ja/web/api/documentorshadowroot/getselection/index.html b/files/ja/web/api/document/getselection/index.html index e201ed0675..81fc970c85 100644 --- a/files/ja/web/api/documentorshadowroot/getselection/index.html +++ b/files/ja/web/api/document/getselection/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.getSelection() -slug: Web/API/DocumentOrShadowRoot/getSelection +slug: Web/API/Document/getSelection tags: - API - DocumentOrShadowRoot @@ -12,6 +12,7 @@ tags: - getSelection() - shadow dom translation_of: Web/API/DocumentOrShadowRoot/getSelection +original_slug: Web/API/DocumentOrShadowRoot/getSelection --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/ja/web/api/documentorshadowroot/pointerlockelement/index.html b/files/ja/web/api/document/pointerlockelement/index.html index 5806f9344e..6b6afcd8e5 100644 --- a/files/ja/web/api/documentorshadowroot/pointerlockelement/index.html +++ b/files/ja/web/api/document/pointerlockelement/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.pointerLockElement -slug: Web/API/DocumentOrShadowRoot/pointerLockElement +slug: Web/API/Document/pointerLockElement tags: - API - DOM @@ -12,6 +12,7 @@ tags: - プロパティ - マウスロック translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +original_slug: Web/API/DocumentOrShadowRoot/pointerLockElement --- <div>{{APIRef("DOM")}}</div> diff --git a/files/ja/web/api/documentorshadowroot/stylesheets/index.html b/files/ja/web/api/document/stylesheets/index.html index 48a1e7a169..8a793da1fc 100644 --- a/files/ja/web/api/documentorshadowroot/stylesheets/index.html +++ b/files/ja/web/api/document/stylesheets/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.styleSheets -slug: Web/API/DocumentOrShadowRoot/styleSheets +slug: Web/API/Document/styleSheets tags: - API - Document @@ -11,6 +11,7 @@ tags: - Stylesheets - shadow dom translation_of: Web/API/DocumentOrShadowRoot/styleSheets +original_slug: Web/API/DocumentOrShadowRoot/styleSheets --- <div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div> diff --git a/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html b/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html deleted file mode 100644 index 57d9c2b7b7..0000000000 --- a/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: DocumentOrShadowRoot.msElementsFromRect() -slug: Web/API/DocumentOrShadowRoot/msElementsFromRect -tags: - - API - - 'API:Microsoft Extensions' - - Method - - Non-standard - - Reference - - msElementsFromRect -translation_of: Web/API/DocumentOrShadowRoot/msElementsFromRect ---- -<div>{{APIRef("Microsoft Extensions")}}{{Non-standard_Header}}</div> - -<p><strong><code>msElementsFromRect</code></strong> メソッドは、left、 top、 width、 heighで定義された四角形の下にある要素のノードリストを返します。</p> - -<p>この独自プロパティは Internet Explorer と Microsoft Edge に固有のものです。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>object</em>.msElementsFromRect(left, top, width, height, retVal) -</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>left </em>[in]</dt> - <dd>型: <strong>浮動小数点</strong></dd> - <dt><em>top</em>[in]</dt> - <dd>型: <strong>浮動小数点</strong></dd> - <dt><em>width</em>[in]</dt> - <dd>型: <strong>浮動小数点</strong></dd> - <dt><em>height </em>[in]</dt> - <dd>型: <strong>浮動小数点</strong></dd> - <dt><em>retVal </em>[out, reval]</dt> - <dd>型: <strong>ノードリスト</strong></dd> -</dl> - -<h2 id="例">例</h2> - -<p>特定のポイントの下にある全ての要素を検索するには、 <code>msElementsFromPoint(x, y)</code> を使用します。長方形を交差する全ての要素を見つけるには、 <code>msElementsFromRect(top, left, width, height)</code> を使用します。</p> - -<pre class="brush: js notranslate">var nodeList = document.msElementsFromRect(x,y,width,height) -var nodeList = document.msElementsFromPoint(x,y) -</pre> - -<p>返された nodeList には z-index でソートされているため、要素の相対的なスタック順序を確認できます。</p> - -<h2 id="See_Also" name="See_Also">関連項目</h2> - -<ul> - <li><a href="https://testdrive-archive.azurewebsites.net/HTML5/HitTest/Default.html">Advanced Hit Testing APIs Demo for msElementsFromPoint() and msElementsFromRect() </a></li> - <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API extensions </a></li> -</ul> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/hash/index.html b/files/ja/web/api/htmlanchorelement/hash/index.html index 293b73e2f0..98cb53f17f 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/hash/index.html +++ b/files/ja/web/api/htmlanchorelement/hash/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.hash -slug: Web/API/HTMLHyperlinkElementUtils/hash +slug: Web/API/HTMLAnchorElement/hash tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/hash +original_slug: Web/API/HTMLHyperlinkElementUtils/hash --- <div>{{ APIRef("URLUtils") }}</div> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/host/index.html b/files/ja/web/api/htmlanchorelement/host/index.html index 876dd935c1..c015eeb640 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/host/index.html +++ b/files/ja/web/api/htmlanchorelement/host/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.host -slug: Web/API/HTMLHyperlinkElementUtils/host +slug: Web/API/HTMLAnchorElement/host tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/host +original_slug: Web/API/HTMLHyperlinkElementUtils/host --- <div>{{ApiRef("URL API")}}</div> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/hostname/index.html b/files/ja/web/api/htmlanchorelement/hostname/index.html index 46c38302f1..a5cafaf97d 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/hostname/index.html +++ b/files/ja/web/api/htmlanchorelement/hostname/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.hostname -slug: Web/API/HTMLHyperlinkElementUtils/hostname +slug: Web/API/HTMLAnchorElement/hostname tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/hostname +original_slug: Web/API/HTMLHyperlinkElementUtils/hostname --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/href/index.html b/files/ja/web/api/htmlanchorelement/href/index.html index a371695230..3f87137986 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/href/index.html +++ b/files/ja/web/api/htmlanchorelement/href/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.href -slug: Web/API/HTMLHyperlinkElementUtils/href +slug: Web/API/HTMLAnchorElement/href tags: - API - Experimental @@ -10,6 +10,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/href +original_slug: Web/API/HTMLHyperlinkElementUtils/href --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/origin/index.html b/files/ja/web/api/htmlanchorelement/origin/index.html index 8353b66f0a..254a6d0a41 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/origin/index.html +++ b/files/ja/web/api/htmlanchorelement/origin/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.origin -slug: Web/API/HTMLHyperlinkElementUtils/origin +slug: Web/API/HTMLAnchorElement/origin tags: - API - Experimental @@ -10,6 +10,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/origin +original_slug: Web/API/HTMLHyperlinkElementUtils/origin --- <p>{{APIRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/password/index.html b/files/ja/web/api/htmlanchorelement/password/index.html index d973268e54..c64b6381b0 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/password/index.html +++ b/files/ja/web/api/htmlanchorelement/password/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.password -slug: Web/API/HTMLHyperlinkElementUtils/password +slug: Web/API/HTMLAnchorElement/password tags: - API - Experimental @@ -8,6 +8,7 @@ tags: - Property - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/password +original_slug: Web/API/HTMLHyperlinkElementUtils/password --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/pathname/index.html b/files/ja/web/api/htmlanchorelement/pathname/index.html index a8b227269c..7782280325 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/pathname/index.html +++ b/files/ja/web/api/htmlanchorelement/pathname/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.pathname -slug: Web/API/HTMLHyperlinkElementUtils/pathname +slug: Web/API/HTMLAnchorElement/pathname tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/pathname +original_slug: Web/API/HTMLHyperlinkElementUtils/pathname --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/port/index.html b/files/ja/web/api/htmlanchorelement/port/index.html index a97a28511a..5c7d24055a 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/port/index.html +++ b/files/ja/web/api/htmlanchorelement/port/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.port -slug: Web/API/HTMLHyperlinkElementUtils/port +slug: Web/API/HTMLAnchorElement/port tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/port +original_slug: Web/API/HTMLHyperlinkElementUtils/port --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/protocol/index.html b/files/ja/web/api/htmlanchorelement/protocol/index.html index 9b800001ea..f25a1d16df 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/protocol/index.html +++ b/files/ja/web/api/htmlanchorelement/protocol/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.protocol -slug: Web/API/HTMLHyperlinkElementUtils/protocol +slug: Web/API/HTMLAnchorElement/protocol tags: - API - Experimental @@ -8,6 +8,7 @@ tags: - Property - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/protocol +original_slug: Web/API/HTMLHyperlinkElementUtils/protocol --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/search/index.html b/files/ja/web/api/htmlanchorelement/search/index.html index 3d09ac6610..2b1c67dd78 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/search/index.html +++ b/files/ja/web/api/htmlanchorelement/search/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.search -slug: Web/API/HTMLHyperlinkElementUtils/search +slug: Web/API/HTMLAnchorElement/search tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/search +original_slug: Web/API/HTMLHyperlinkElementUtils/search --- <div>{{ApiRef("URL API")}}</div> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/tostring/index.html b/files/ja/web/api/htmlanchorelement/tostring/index.html index 1edb61e862..36d1b4190a 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/tostring/index.html +++ b/files/ja/web/api/htmlanchorelement/tostring/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.toString() -slug: Web/API/HTMLHyperlinkElementUtils/toString +slug: Web/API/HTMLAnchorElement/toString tags: - API - Experimental @@ -10,6 +10,7 @@ tags: - Stringifier - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/toString +original_slug: Web/API/HTMLHyperlinkElementUtils/toString --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/username/index.html b/files/ja/web/api/htmlanchorelement/username/index.html index 2bda58e2d2..c1f7c60dcb 100644 --- a/files/ja/web/api/htmlhyperlinkelementutils/username/index.html +++ b/files/ja/web/api/htmlanchorelement/username/index.html @@ -1,6 +1,6 @@ --- title: HTMLHyperlinkElementUtils.username -slug: Web/API/HTMLHyperlinkElementUtils/username +slug: Web/API/HTMLAnchorElement/username tags: - API - Experimental @@ -9,6 +9,7 @@ tags: - Reference - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/username +original_slug: Web/API/HTMLHyperlinkElementUtils/username --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/ja/web/api/htmlhyperlinkelementutils/index.html b/files/ja/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index bc0b1f182a..0000000000 --- a/files/ja/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTMLHyperlinkElementUtils -slug: Web/API/HTMLHyperlinkElementUtils -tags: - - API - - Experimental - - Mixin - - URL API -translation_of: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p><span class="seoSummary"><strong><code>HTMLHyperlinkElementUtils</code></strong> ミックスインは、{{domxref("HTMLAnchorElement")}} および {{domxref("HTMLAreaElement")}} と連携するユーティリティのメソッドとプロパティを定義します。 これらのユーティリティを使用すると、URL などの一般的な機能を処理できます。</span></p> - -<p>このタイプのオブジェクトはありませんが、いくつかのオブジェクトの {{domxref("HTMLAnchorElement")}} および {{domxref("HTMLAreaElement")}} がそれを実装しています。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<div class="note"> -<p><strong>注</strong>: このインターフェイスはプロパティを継承しません。</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>これは、URL 全体を含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>これは、最後の <code>':'</code> を含む URL のプロトコルスキームを含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>これは、ホストを含む {{domxref("USVString")}} です。 ホストは、<em>ホスト名</em>の後に、URL の<em>ポート</em>が空でない場合、<code>':'</code>、および URL の<em>ポート</em>が続きます（空は、指定されていないか、URL のスキームのデフォルトポートとして指定されているために発生する可能性があります）。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>これは、URL のドメイン(ホスト名)を含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>これは、URL のポート番号を含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>これは、最初の <code>'/'</code> とその後に続く URL のパスを含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>これは、<code>'?'</code> とその後に続く URL のパラメーターを含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>これは、<code>'#'</code> とその後に続く URL のフラグメント識別子を含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>これは、ドメイン名の前に指定されたユーザー名を含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>これは、ドメイン名の前に指定されたパスワードを含む {{domxref("USVString")}} です。</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>これは、URL のオリジン（スキーム、ドメイン、ポート）を含む {{domxref("USVString")}} を返します。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<div class="note"> -<p><strong>注</strong>: このインターフェイスはメソッドを継承しません。</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>これは、URL 全体を含む {{domxref("USVString")}} を返します。 {{domxref("HTMLHyperlinkElementUtils.href")}} の同義語ですが、値を変更するために使用することはできません。</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('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>これを実装するインターフェイス: {{domxref("HTMLAnchorElement")}}、{{domxref("HTMLAreaElement")}}</li> -</ul> diff --git a/files/ja/web/api/htmltableelement/index.html b/files/ja/web/api/htmltableelement/index.html index 2fb98c6ee0..180f2bd96c 100644 --- a/files/ja/web/api/htmltableelement/index.html +++ b/files/ja/web/api/htmltableelement/index.html @@ -187,4 +187,4 @@ translation_of: Web/API/HTMLTableElement <ul> <li>{{HTMLElement("table")}} - <code>HTMLTableElement</code> インタフェースを持つ HTML 要素</li> </ul> -<p><span id="cke_bm_222C" style="display: none;"> </span></p> +<p><span id="cke_bm_222C" class="hidden"> </span></p> diff --git a/files/ja/web/api/keyboardevent/keycode/index.html b/files/ja/web/api/keyboardevent/keycode/index.html index d080637e20..840a2dd38a 100644 --- a/files/ja/web/api/keyboardevent/keycode/index.html +++ b/files/ja/web/api/keyboardevent/keycode/index.html @@ -359,7 +359,7 @@ translation_of: Web/API/KeyboardEvent/keyCode <th scope="row"><code>"KeyD"</code></th> <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> - <td colspan="3" rowspan="1"><code>0x44 (68)<span style="display: none;"> </span></code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)<span class="hidden"> </span></code></td> <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> diff --git a/files/ja/web/api/nondocumenttypechildnode/index.html b/files/ja/web/api/nondocumenttypechildnode/index.html deleted file mode 100644 index 2115525343..0000000000 --- a/files/ja/web/api/nondocumenttypechildnode/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: NonDocumentTypeChildNode -slug: Web/API/NonDocumentTypeChildNode -tags: - - API - - DOM - - Interface - - NonDocumentTypeChildNode - - Reference -translation_of: Web/API/NonDocumentTypeChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>NonDocumentTypeChildNode</strong></code> インターフェイスは親を持つ {{domxref("Node")}} オブジェクトに固有な、{{domxref("DocumentType")}} に適していないメソッドを含みます。</p> - -<p><code>NonDocumentTypeChildNode</code> は純粋なインターフェースで、この型のオブジェクトを作ることはできません。 {{domxref("Element")}}、{{domxref("CharacterData")}} オブジェクトで実装されています。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em>継承されたプロパティはありません。</em></p> - -<dl> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt> - <dd>このノードの親ノードの子リスト内にある、このノードの直前にある {{domxref("Element")}} を返します。リスト内でこのノードの前に {{domxref("Element")}} がない場合は <code>null</code> を返します。</dd> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt> - <dd>このノードの親ノードの子リスト内にある、このノードの直後にある {{domxref("Element")}} を返します。リスト内でこのノードの後に {{domxref("Element")}} がない場合は <code>null</code> を返します。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p><em>継承、および実装されたメソッドはありません。</em></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', '#interface-nondocumenttypechildnode', 'NonDocumentTypeChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インタフェースを{{domxref("ParentNode")}}、{{domxref("ChildNode")}}、<code>NonDocumentTypeChildNode</code> に分割しました。後者では <code>previousElementSibling</code> と <code>nextElementSibling</code> が定義されるようになりました。<br> - {{domxref("CharacterData")}} と {{domxref("Element")}} は、新しいインタフェースを実装しました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td><code>ElementTraversal</code> 基本インターフェースにプロパティの初期定義を追加し、{{domxref("Element")}} で使用できるようにしました。.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div class="hidden">このページの互換表は構造化データで生成されました。データに貢献したい方は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div> - -<p>{{Compat("api.NonDocumentTypeChildNode")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}} 基本インターフェース</li> - <li> - <div class="syntaxbox">この基本インターフェースを実装したオブジェクト: {{domxref("CharacterData")}}、{{domxref("Element")}}</div> - </li> -</ul> diff --git a/files/ja/web/api/response/usefinalurl/index.html b/files/ja/web/api/response/usefinalurl/index.html deleted file mode 100644 index 6f18f681d8..0000000000 --- a/files/ja/web/api/response/usefinalurl/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Response.useFinalURL -slug: Web/API/Response/useFinalURL -tags: - - API - - Experimental - - Fetch - - Obsolete - - Property - - Reference - - Response - - useFinalURL -translation_of: Web/API/Response/useFinalURL ---- -<div>{{APIRef("Fetch")}}{{obsolete_header}}</div> - -<p>{{domxref("Response")}} インターフェイスの <strong><code>useFinalURL</code></strong> プロパティには、これが response の最終URLかどうかを示すbook値が含まれています。</p> - -<div class="note"> -<p>このプロパティは <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> にのみに適用されます。他のコンテキストの場合、 <code>undefined</code> を返します。</p> -</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">var <var>isfinalURL</var> = <var>Response</var>.useFinalURL;</pre> - -<h3 id="値">値</h3> - -<p>URLがリダイレクトでなく最終的なものかどうかを示す {{domxref("Boolean")}}</p> - -<h2 id="例">例</h2> - -<p>ページ <code>index.html</code> にあるスクリプトで考えてみます:</p> - -<pre class="brush: js notranslate">fetch('/test').then((r) => console.log(r.url))</pre> - -<p><code>test.html</code> は service worker <code>sw.js</code> によって制御されています:</p> - -<pre class="brush: js notranslate">onfetch = (e) => { - e.respondWith(fetch('/page2').then((r) => { - r.usefinalURL = true; - return r; - }) -}</pre> - -<p><code>usefinalURL</code> を設定すると、 response のURLが要求のURLに設定されないため、出力は <code>index.html</code> の <code>/test</code> ではなく <code>/page2</code> になります。</p> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("api.Response.useFinalURL")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/ja/web/api/trackevent/index.html b/files/ja/web/api/trackevent/index.html index dbfefe98c3..0ed9a8d0ee 100644 --- a/files/ja/web/api/trackevent/index.html +++ b/files/ja/web/api/trackevent/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/TrackEvent <p><code>TrackEvent</code> に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。</p> <ul> - <li><span style="display: none;"> </span>動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。</li> + <li><span class="hidden"> </span>動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。</li> <li>音声トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.audioTracks")}} で指定された {{domxref("AudioTrackList")}} に送信されます。</li> <li>テキストトラックに影響を与えるイベントは、{{domxref("HTMLMediaElement.textTracks")}} によって示される {{domxref("TextTrackList")}} オブジェクトに送信されます。</li> </ul> diff --git a/files/ja/web/api/xmlhttprequest/openrequest/index.html b/files/ja/web/api/xmlhttprequest/openrequest/index.html deleted file mode 100644 index 18cc93f844..0000000000 --- a/files/ja/web/api/xmlhttprequest/openrequest/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: XMLHttpRequest.openRequest() -slug: Web/API/XMLHttpRequest/openRequest -tags: - - API - - DOM - - Firefox - - Gecko - - Method - - XHR - - XMLHttpRequest - - openRequest - - 非標準 -translation_of: Web/API/XMLHttpRequest/openRequest ---- -<div>{{APIRef("XMLHttpRequest")}}{{non-standard_header}}</div> - -<p><span class="seoSummary">この Mozilla 固有メソッドは、特権コード内からのみ使用でき、 <code>XMLHttpRequest</code> を初期化するために C++ コンテキストからのみ呼び出されます。 </span>JavaScript コードからのリクエストを初期化するには、代わりに標準の {{domxref("XMLHttpRequest.open", "open()")}} メソッドを使用します。</p> diff --git a/files/ja/web/api/xrreferencespace/index.html b/files/ja/web/api/xrreferencespace/index.html index 12222a3ab7..0acca51c9f 100644 --- a/files/ja/web/api/xrreferencespace/index.html +++ b/files/ja/web/api/xrreferencespace/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/XRReferenceSpace <p><em>親インターフェイスである {{domxref("XRSpace")}} から継承されたメソッド（現時点では、ない）に加えて、<code>XRReferenceSpace</code> は {{domxref("EventTarget")}} からメソッドを継承します。 <code>XRReferenceSpace</code> は、次のメソッドも提供します。</em></p> <dl> - <dt>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}}<span style="display: none;"> </span></dt> + <dt>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}}<span class="hidden"> </span></dt> <dd>メソッドを呼び出したものと同じ型（つまり、<code>XRReferenceSpace</code> または {{domxref("XRBoundedReferenceSpace")}}）の新しい参照空間オブジェクトを作成して返します。 新しい参照空間を使用して、メソッドが呼び出されたオブジェクトの参照空間から別の座標空間に座標を変換できます。 これは、レンダリング中にオブジェクトを配置したり、3D 空間でビューアーの位置や向きを変更するときに必要な変換を実行したりするのに役立ちます。</dd> </dl> diff --git a/files/ja/web/css/background-repeat/index.html b/files/ja/web/css/background-repeat/index.html index 5ca4c622ba..671f078202 100644 --- a/files/ja/web/css/background-repeat/index.html +++ b/files/ja/web/css/background-repeat/index.html @@ -178,7 +178,7 @@ div { /* 複数の画像 */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html index e1821163f7..e6805d19db 100644 --- a/files/ja/web/css/border-bottom-left-radius/index.html +++ b/files/ja/web/css/border-bottom-left-radius/index.html @@ -89,7 +89,7 @@ border-bottom-left-radius: inherit;</pre> <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている円弧 @@ -103,7 +103,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている楕円の弧 @@ -117,7 +117,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形。境界として使用されている円弧 @@ -131,7 +131,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 @@ -145,7 +145,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>背景色は境界で切り取られる diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html index a757c6aa39..090de6ee4a 100644 --- a/files/ja/web/css/border-bottom-right-radius/index.html +++ b/files/ja/web/css/border-bottom-right-radius/index.html @@ -83,7 +83,7 @@ border-bottom-right-radius: inherit;</pre> <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている円弧 @@ -97,7 +97,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>境界として使用されている楕円の弧 @@ -111,7 +111,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形。境界として使用されている円弧 @@ -125,7 +125,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 @@ -139,7 +139,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>背景色は境界で切り取られる diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html index e207a4c5cf..c522635fbb 100644 --- a/files/ja/web/css/border-top-right-radius/index.html +++ b/files/ja/web/css/border-top-right-radius/index.html @@ -111,7 +111,7 @@ div { <tr> <td style="padding: 1.5em;"> <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;"> - <div style="display: none;">.</div> + <div class="hidden">.</div> </div> </td> <td>ボックスは正方形ではない。境界として使用されている楕円の弧 diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html index fa4aa48cdf..8ce5bab6e9 100644 --- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html index 7ec4cab13e..4ce39890a7 100644 --- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content" name="HTML_Content">HTML Content</h3> diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html index 7375e00046..958178331b 100644 --- a/files/ja/web/css/css_colors/color_picker_tool/index.html +++ b/files/ja/web/css/css_colors/color_picker_tool/index.html @@ -14,7 +14,7 @@ tags: - 色選択 translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">色選択ツール</h2> <h3 id="HTML">HTML</h3> diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html index d01fba6005..e1fcbc6e7e 100644 --- a/files/ja/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -109,7 +109,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -308,7 +308,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -371,7 +371,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -434,7 +434,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -497,7 +497,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -564,7 +564,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -636,7 +636,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -708,7 +708,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -780,7 +780,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html index 5bb245abe5..1ec80548b3 100644 --- a/files/ja/web/css/filter/index.html +++ b/files/ja/web/css/filter/index.html @@ -116,7 +116,7 @@ img { <pre class="brush: css notranslate">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html notranslate"> <table class="standard-table"> <thead> <tr> @@ -213,7 +213,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -308,7 +308,7 @@ table.standard-table td { </svg> </pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -415,7 +415,7 @@ table.standard-table td { </svg> </pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -539,7 +539,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -622,7 +622,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -708,7 +708,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -791,7 +791,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -872,7 +872,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -952,7 +952,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -1035,7 +1035,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> diff --git a/files/ja/web/css/index.html b/files/ja/web/css/index.html index 6af2d9450c..c6c3c04a15 100644 --- a/files/ja/web/css/index.html +++ b/files/ja/web/css/index.html @@ -17,56 +17,56 @@ translation_of: Web/CSS --- <div>{{CSSRef}}</div> -<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、 <a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p> +<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、<a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p> -<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1, CSS2.1, CSS3 について聞いたことがあるでしょう。しかし、 CSS4 は公式なバージョンにはなっていません。</p> +<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、<a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1、CSS2.1、CSS3 について聞いたことがあるでしょう。しかし、CSS4 は公式なバージョンにはなっていません。</p> -<p>CSS3 以降、仕様の範囲が大幅に拡大し、 CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。 W3C では、 CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p> +<p>CSS3 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p> <h2 id="Key_resources" name="Key_resources">主なリソース</h2> <dl> - <dt><span>CSS 入門</span></dt> - <dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、 CSS とは何か、どのように使用するかを学習しましょう。</dd> - <dt><span>CSS チュートリアル</span></dt> + <dt>CSS 入門</dt> + <dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、CSS とは何か、どのように使用するかを学習しましょう。</dd> + <dt>CSS チュートリアル</dt> <dd><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a>は、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。</dd> - <dt><span>CSS リファレンス</span></dt> + <dt>CSS リファレンス</dt> <dd>CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>です。</dd> </dl> -<div class="in-page-callout webdev"> -<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために + </h4> -<p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。</p> + <p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。 + </p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> + <p><a class="button primary" href="/ja/docs/Learn/Front-end_web_developer">始めましょう</a> + </p> </div> -<div class="row topicpage-table"> -<div class="section"> <h2 class="Documentation" id="Tutorials" name="Tutorials">チュートリアル</h2> <p><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a> は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。</p> <dl> <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt> - <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd> + <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> <dd> - <p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p> + <p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p> - <p>ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> + <p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> </dd> <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt> - <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd> + <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> <dd>現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</dd> <dt><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></dt> <dd>このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。</dd> </dl> -</div> -<div class="section"> + <h2 class="Tools" id="Reference" name="Reference">リファレンス</h2> <ul> @@ -74,8 +74,8 @@ translation_of: Web/CSS <li>CSS の主要な概念: <ul> <li><a href="/ja/docs/Web/CSS/Syntax">言語の構文と書式</a></li> - <li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a> と <a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a> および <a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li> + <li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a>と<a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a>および<a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li> <li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a>と<a href="/ja/docs/Web/CSS/margin_collapsing">マージンの相殺</a></li> <li><a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a></li> <li><a href="/ja/docs/Web/CSS/Understanding_z_index/The_stacking_context">重ね合わせ</a>と<a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形</a>コンテキスト</li> @@ -84,7 +84,7 @@ translation_of: Web/CSS <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li> <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> <li><a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a></li> - <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a></li> + <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a></li> <li><a href="/ja/docs/Web/CSS/animation">アニメーション</a></li> </ul> </li> @@ -99,7 +99,7 @@ translation_of: Web/CSS <ul> <li><a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。</li> <li><a href="/ja/docs/Tools">Firefox Developer Tools</a> は<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>と<a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a>ツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。</li> - <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li> + <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li> <li>ウェブコミュニティは、利用できるその他の<a href="/ja/docs/Web/CSS/Tools">様々な CSS のためのツール</a>を開発しています。</li> </ul> @@ -108,15 +108,13 @@ translation_of: Web/CSS <ul> <li>Firefox: {{bug(1323667)}}</li> </ul> -</div> -</div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/Demos_of_open_web_technologies#CSS">CSS デモ</a>: 最新の CSS テクノロジーの例を探索して想像力をかきたてましょう。</li> - <li>CSS がよく適用されるウェブ言語。 <a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, <a href="/ja/docs/XML_introduction">XML</a></li> - <li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/ja/docs/Mozilla/Firefox">Firefox</a>, <a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の <a href="/ja/docs/Mozilla/Add-ons">拡張機能</a> と <a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li> + <li>CSS がよく適用されるウェブ言語。<a href="/ja/docs/Web/HTML">HTML</a>、<a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、{{Glossary("XHTML")}}、<a href="/ja/docs/XML_introduction">XML</a></li> + <li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>、<a href="/ja/docs/Mozilla/Firefox">Firefox</a>、<a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の<a href="/ja/docs/Mozilla/Add-ons">拡張機能</a>と<a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li> <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla メーリングリスト</a></li> - <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li> </ul> diff --git a/files/ja/web/css/max-height/index.html b/files/ja/web/css/max-height/index.html index 4d333dd365..0435b9a45a 100644 --- a/files/ja/web/css/max-height/index.html +++ b/files/ja/web/css/max-height/index.html @@ -54,7 +54,7 @@ max-height: unset; <dt><code>min-content</code></dt> <dd>内容物の最小の <code>max-height</code> です。</dd> <dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt> - <dd>利用可能な空白をして死された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd> + <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html index 5473f5af42..394ad6a371 100644 --- a/files/ja/web/css/text-decoration-style/index.html +++ b/files/ja/web/css/text-decoration-style/index.html @@ -60,7 +60,7 @@ text-decoration-style: unset; <h2 id="Examples" name="Examples">例</h2> -<pre class="brush: css" style="display: none;">.example { +<pre class="brush: css" class="hidden">.example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html index 9094d98eb4..3e47ffa76a 100644 --- a/files/ja/web/css/transition-delay/index.html +++ b/files/ja/web/css/transition-delay/index.html @@ -56,7 +56,7 @@ transition-delay: unset; <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -123,7 +123,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -190,7 +190,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -257,7 +257,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/transition-duration/index.html b/files/ja/web/css/transition-duration/index.html index c5bb4f0bbf..2aa297c4ee 100644 --- a/files/ja/web/css/transition-duration/index.html +++ b/files/ja/web/css/transition-duration/index.html @@ -54,7 +54,7 @@ transition-duration: unset; <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -119,7 +119,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -184,7 +184,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -249,7 +249,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html notranslate"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html index 0008b66d3e..6571a2ed14 100644 --- a/files/ja/web/css/using_css_custom_properties/index.html +++ b/files/ja/web/css/using_css_custom_properties/index.html @@ -145,7 +145,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties } </pre> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"><div> <div class="one"></div> <div class="two">Text <span class="five">- more text</span></div> diff --git a/files/ja/web/html/element/input/number/index.html b/files/ja/web/html/element/input/number/index.html index 8177c9f00f..26e7df6a71 100644 --- a/files/ja/web/html/element/input/number/index.html +++ b/files/ja/web/html/element/input/number/index.html @@ -315,7 +315,6 @@ input:valid+span:after { <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="例 1.78" required> <span class="validity"></span> </div> - <div class="feetInputGroup" style="display: none;"> <span>あなたの身長を入力してください — </span> <label for="feet">フィート:</label> <input id="feet" type="number" name="feet" min="0" step="1"> @@ -334,7 +333,7 @@ input:valid+span:after { <p>これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 <code>step</code> の値を <code>0.01</code> に設定して、 <em>1.78</em> のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。</p> -<p>最初はフィートとインチの入力欄を <code>style="display: none;"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p> +<p>最初はフィートとインチの入力欄を <code>class="hidden"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p> <p>次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。</p> diff --git a/files/ja/web/html/element/menuitem/index.html b/files/ja/web/html/element/menuitem/index.html index 535b84a4be..1fa3ea9bd9 100644 --- a/files/ja/web/html/element/menuitem/index.html +++ b/files/ja/web/html/element/menuitem/index.html @@ -93,7 +93,7 @@ translation_of: Web/HTML/Element/menuitem <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>Checkbox</menuitem> <hr> - <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> + <menuitem type="command" label="This command does nothing" icon="https://developer.mozilla.org/static/img/favicon144.png"> Commands don't render their contents. </menuitem> <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')"> diff --git a/files/ja/web/html/element/ul/index.html b/files/ja/web/html/element/ul/index.html index b8fee6133a..34c5392697 100644 --- a/files/ja/web/html/element/ul/index.html +++ b/files/ja/web/html/element/ul/index.html @@ -19,8 +19,8 @@ translation_of: Web/HTML/Element/ul <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。また、 <code><ul></code> 要素の子に少なくとも 1 個 {{HTMLElement("li")}} 要素を包含する場合は、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>。また、 <code><ul></code> 要素の子に少なくとも 1 個 {{HTMLElement("li")}} 要素を包含する場合は、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td> </tr> <tr> <th scope="row">許可されている内容</th> @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/ul </tr> <tr> <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> </tr> <tr> <th scope="row">暗黙の ARIA ロール</th> @@ -49,19 +49,16 @@ translation_of: Web/HTML/Element/ul </tbody> </table> -<h2 id="Attributes" name="Attributes">属性</h2> +<h2 id="Attributes">属性</h2> <p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> <dl> <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt> - <dd>この論理属性は、コンパクトなスタイルでリストを秒がするようブラウザーに指示するものです。この属性の解釈は{{glossary("user agent", "ユーザーエージェント")}}に委ねられ、またすべてのブラウザーで動作するものでもありません。</dd> + <dd>この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈は{{glossary("user agent", "ユーザーエージェント")}}に委ねられ、またすべてのブラウザーで動作するものでもありません。</dd> <dd> <div class="warning"><strong>警告:</strong> この属性は非推奨になっているため、使用しないでください。代わりに <a href="/ja/docs/Web/CSS">CSS</a> を使用してください。 <code>compact</code> 属性と同様の効果を得るには、 CSS の {{cssxref("line-height")}} プロパティを用い、その値として <code>80%</code> を指定します。</div> </dd> -</dl> - -<dl> <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt> <dd>リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。 <ul> @@ -78,7 +75,7 @@ translation_of: Web/HTML/Element/ul </dd> </dl> -<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> +<h2 id="Usage_notes">使用上のメモ</h2> <ul> <li><code><ul></code> 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS の {{ cssxref("list-style-type") }} プロパティを用いて変更することが可能です。</li> @@ -86,11 +83,11 @@ translation_of: Web/HTML/Element/ul <li>{{ HTMLElement("ol") }} と <code><ul></code> は、どちらも項目のリストを表します。両者の違いは、 {{ HTMLElement("ol") }} 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば {{ HTMLElement("ol") }} 要素を使用し、そうでない場合は <code><ul></code> 要素を使用することができます。</li> </ul> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Simple_example" name="Simple_example">シンプルな例</h3> +<h3 id="Simple_example">シンプルな例</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>first item</li> <li>second item</li> <li>third item</li> @@ -101,9 +98,9 @@ translation_of: Web/HTML/Element/ul <p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> -<h3 id="Nesting_a_list" name="Nesting_a_list">入れ子になったリスト</h3> +<h3 id="Nesting_a_list">入れ子になったリスト</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>first item</li> <li>second item <!-- 閉じタグの </li> がここにはありません。 --> @@ -129,9 +126,9 @@ translation_of: Web/HTML/Element/ul <p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p> -<h3 id="Nested_ul_and_ol" name="Nested_ul_and_ol"><ul> と <ol> のネスト</h3> +<h3 id="Nested_ul_and_ol"><ul> と <ol> のネスト</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>first item</li> <li>second item <!-- ここには <li> の閉じタグはない --> @@ -150,7 +147,7 @@ translation_of: Web/HTML/Element/ul <p>{{EmbedLiveSample("Ordered_list_inside_unordered_list", 400, 150)}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -174,13 +171,11 @@ translation_of: Web/HTML/Element/ul </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> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("html.elements.ul")}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>その他のリスト関連要素: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> diff --git a/files/ja/web/http/basics_of_http/evolution_of_http/index.html b/files/ja/web/http/basics_of_http/evolution_of_http/index.html index 4357788871..0e9bb0dc62 100644 --- a/files/ja/web/http/basics_of_http/evolution_of_http/index.html +++ b/files/ja/web/http/basics_of_http/evolution_of_http/index.html @@ -120,7 +120,7 @@ Vary: Cookie, Accept-Encoding GET /static/img/header-background.png HTTP/1.1 -Host: developer.cdn.mozilla.net +Host: developer.mozilla.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Accept: */* Accept-Language: en-US,en;q=0.5 diff --git a/files/ja/web/http/browser_detection_using_the_user_agent/index.html b/files/ja/web/http/browser_detection_using_the_user_agent/index.html index 8277621dea..d202b232b4 100644 --- a/files/ja/web/http/browser_detection_using_the_user_agent/index.html +++ b/files/ja/web/http/browser_detection_using_the_user_agent/index.html @@ -17,31 +17,28 @@ translation_of: Web/HTTP/Browser_detection_using_the_user_agent <p>繰り返します。ユーザーエージェントを調べるのが良いことはめったにありません。問題を解決するには、もっと良い、もっと広く互換性のある方法が見つかるはずです。</p> </div> -<h2 id="Considerations_before_using_browser_detection" name="Considerations_before_using_browser_detection">ブラウザーの判定を用いる前に考えること</h2> +<h2 id="Considerations_before_using_browser_detection">ブラウザーの判定を用いる前に考えること</h2> <p>ユーザーエージェント文字列を使用して、使用されているブラウザーを判定することを検討している場合は、できればまずは回避するようにしてください。<strong>なぜ</strong>それをやりたいのかを見分けることから始めましょう。</p> <dl> - <dt>ブラウザーのあるバージョンの特有のバグを回避しようとしているのですか？</dt> - <dd>専門のフォーラムで見たり尋ねたりしてみましょう。この問題に最初に遭遇したのがあなたであることはほとんどありません。また専門家、あるいは単に別の視点を持つ人々が、バグを回避するためのアイディアをくれるかもしれません。珍しい問題である場合は、このバグがバグ追跡システム (<a class="link-https" href="https://bugzilla.mozilla.org">Mozilla</a>; <a class="external" href="https://bugs.webkit.org">WebKit</a>; <a href="https://www.chromium.org/issue-tracking">Blink</a>; <a class="link-https" href="https://bugs.opera.com/">Opera</a>) を介してブラウザーのベンダーに報告されているかどうかを確認することが重要です。ブラウザーメーカーはバグレポートに注意を払い、そのバグの他の回避策を分析するかもしれません。</dd> - <dt>特定の機能が存在するかどうか確認しようとしているのですか？</dt> - <dd>一部のブラウザーがまだ対応していない特定のウェブ機能をサイトで使用する必要がある場合、未対応のブラウザーのユーザーには、より機能が少ないものの動作することが分かっている古いウェブサイトを送信したい場合があります。これはユーザーエージェントの検出を使用する最悪の理由です。なぜなら、この差は最終的に他のすべてのブラウザーが追いつくからです。さらに、それほど一般的でないブラウザーを１つ１つ全てテストするのは現実的ではありません。ユーザーエージェントによる判定は<strong>決して</strong>行うべきではありません。その代わりに<strong>常に</strong>機能の検出を行う代替手段があります。</dd> + <dt>ブラウザーのあるバージョンの特有のバグを回避しようとしているのですか？</dt> + <dd>専門のフォーラムで見たり尋ねたりしてみましょう。この問題に最初に遭遇したのがあなたであることはほとんどありません。また専門家、あるいは別の視点を持つ人々が、バグを回避するためのアイディアをくれるかもしれません。珍しい問題である場合は、このバグがバグ追跡システム (<a class="link-https" href="https://bugzilla.mozilla.org">Mozilla</a>; <a href="https://bugs.webkit.org">WebKit</a>; <a href="https://www.chromium.org/issue-tracking">Blink</a>; <a class="link-https" href="https://bugs.opera.com/">Opera</a>) を介してブラウザーのベンダーに報告されているかどうかを確認することが重要です。ブラウザーメーカーはバグレポートに注意を払い、そのバグの他の回避策を分析するかもしれません。</dd> + <dt>特定の機能が存在するかどうか確認しようとしているのですか？</dt> + <dd>一部のブラウザーがまだ対応していない特定のウェブ機能をサイトで使用する必要がある場合、未対応のブラウザーのユーザーには、より機能が少ないものの動作することが分かっている古いウェブサイトを送信したい場合があります。これはユーザーエージェントの検出を使用する最悪の理由です。なぜなら、この差は最終的に他のすべてのブラウザーが追いつくからです。さらに、これらのウェブ機能について、それほど一般的でないブラウザーを１つ１つテストするのは現実的ではありません。ユーザーエージェントによる判定は<strong>決して</strong>行うべきではありません。その代わりに<strong>常に</strong>機能の検出を行う代替手段があります。</dd> + <dt>使用されているブラウザーによって異なる HTML を提供する予定ですか？</dt> + <dd>通常では悪い慣例ですが、これが必要な場合もあります。このような場合は、まず自分の状況を分析してそれが本当に必要であることを確認してください。形式的な {{ HTMLElement("div") }} または {{ HTMLElement("span") }} 要素を追加することで、それを防ぐことができませんか？ユーザーエージェントの検出を正しく行うことは、 HTML の純度をいくらか損なっても構わないくらい難しいものです。また、デザインを考え直してください。プログレッシブエンハンスメントや流体レイアウトを使用することで、回避することはできませんか？</dd> </dl> -<dl> - <dt>使用されているブラウザーによって異なる HTML を提供する予定ですか？</dt> - <dd>通常では悪い慣例ですが、これが必要な場合もあります。このような場合は、まず自分の状況を分析してそれが本当に必要であることを確認してください。形式的な {{ HTMLElement("div") }} または {{ HTMLElement("span") }} 要素を追加することで、それを防ぐことができませんか？ユーザーエージェントの検出を正しく行うことは、 HTML の純度をいくらか損なっても構わないくらい難しいものです。また、デザインを考え直してください。プログレッシブエンハンスメントや流体レイアウトを使用することで、回避することはできませんか？</dd> -</dl> - -<h2 id="Avoiding_user_agent_detection" name="Avoiding_user_agent_detection">ユーザーエージェントの判定の回避</h2> +<h2 id="Avoiding_user_agent_detection">ユーザーエージェントの判定の回避</h2> <p>ユーザーエージェントの検出を使用しないようにするのであれば、いくつかの選択肢があります。</p> <dl> - <dt>機能の検出</dt> - <dd>機能の検出とは、ページを表示しているブラウザーを特定するのではなく、必要な機能が利用可能であるかどうかを確認することです。利用できない場合は代替手段を使用します。ブラウザーによって異なる動作をする場合は稀ですが、ユーザーエージェント文字列をチェックする代わりに、ブラウザーがその API をどう実装しているか検査する処理を実装し、そこから使い方を判断しましょう。機能の検出の今のところ良い例は次の通りです。最近、 Chrome は<a href="https://www.chromestatus.com/feature/5668726032564224">正規表現に実験的な後方参照の対応を追加しました</a>が、他のブラウザーは今のところ対応していません。ですから、間違って以下のようにするべきと思うかもしれません。</dd> - <dd> - <pre class="brush: js notranslate">// this code snippet splits a string in a special notation + <dt>機能の検出</dt> + <dd>機能の検出とは、ページを表示しているブラウザーを特定するのではなく、必要な機能が利用可能であるかどうかを確認することです。利用できない場合は代替手段を使用します。ブラウザーによって異なる動作をする場合は稀ですが、ユーザーエージェント文字列をチェックする代わりに、ブラウザーがその API をどう実装しているか検査する処理を実装し、そこから使い方を判断しましょう。機能の検出の今のところ良い例は次の通りです。最近、 Chrome は<a href="https://www.chromestatus.com/feature/5668726032564224">正規表現に実験的な後方参照の対応を追加しました</a>が、他のブラウザーは今のところ対応していません。ですから、間違って以下のようにするべきと思うかもしれません。</dd> + <dd> + <pre class="brush: js">// this code snippet splits a string in a special notation if (navigator.userAgent.indexOf("Chrome") !== -1){ // YES! The user is suspected to support look-behind regexps @@ -62,17 +59,17 @@ if (navigator.userAgent.indexOf("Chrome") !== -1){ console.log(splitUpString("fooBare")); // ["fooB", "are"] console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]</pre> - <p>上記のコードでは、いくつかの間違った仮定をするでしょう。</p> + <p>上記のコードでは、いくつかの間違った仮定をするでしょう。</p> - <ul> - <li>それは、部分文字列 "Chrome" を含むすべてのユーザーエージェント文字列が Chrome であると仮定するでしょう。 UA 文字列は誤解を招くことで有名です。</li> - <li>ブラウザーが Chrome であれば、ルックバインド機能は常に利用可能であると仮定しています。エージェントは対応が追加される前の古いバージョンの Chrome かもしれないし、 (当時は実験的な機能だったので) それが削除された後のバージョンの Chrome かもしれません。</li> - <li>最も重要なのは、他のブラウザーがこの機能に対応していないことを前提としていることです。他のブラウザーではいつの間にか対応が追加されていたかもしれませんが、このコードでは劣った道を選択し続けていたことになります。</li> - </ul> + <ul> + <li>部分文字列 "Chrome" を含むすべてのユーザーエージェント文字列が Chrome であると仮定するでしょう。 UA 文字列は誤解を招くことで有名です。</li> + <li>ブラウザーが Chrome であれば、ルックバインド機能は常に利用可能であると仮定しています。エージェントは対応が追加される前の古いバージョンの Chrome かもしれないし、 (当時は実験的な機能だったので) それが削除された後のバージョンの Chrome かもしれません。</li> + <li>最も重要なのは、他のブラウザーがこの機能に対応していないことを前提としていることです。他のブラウザーではいつの間にか対応が追加されていたかもしれませんが、このコードでは劣った道を選択し続けることになります。</li> + </ul> - <p>このような問題は、機能自体の対応をテストすることで回避することができます。</p> + <p>このような問題は、機能自体の対応をテストすることで回避することができます。</p> - <pre class="brush: js notranslate">var isLookBehindSupported = false; + <pre class="brush: js">var isLookBehindSupported = false; try { new RegExp("(?<=)"); @@ -90,18 +87,18 @@ var splitUpString = isLookBehindSupported ? function(str) { }; </pre> - <p>上記のコードが示すように、ブラウザーの互換性をユーザーエージェントの判定なしに行う方法は<strong>常に</strong>あります。このためにユーザーの文字列をチェックする理由は<strong>決してありません</strong>。</p> - - <p>最後に、上記のコードスニペットは、常に考慮しなければならないクロスブラウザーのコーディングで重大な問題を引き起こします。サポート対象外のブラウザーでテストしている API を意図せず使用しないでください。これは明らかでシンプルに聞こえるかもしれませんが、そうでない時もあります。たとえば、上記のコードスニペットでは、短い regexp 表記 (たとえば /reg/igm) で lookbehind を使用すると、サポートされていないブラウザーで parser エラーが発生します。したがって、あなたのコードの lookbehind がサポートされているセクションであっても、上記の例では <em>new RegExp("(?<=look_behind_stuff)");</em> を <em>/(?<=look_behind_stuff)/</em> の代わりに使用します。</p> - </dd> - <dt>プログレッシブエンハンスメント</dt> - <dd>この設計手法は、ウェブサイトを「階層」で開発し、ボトムアップのアプローチを使用して、より簡単な階層から始め、階層が上がるに従ってより多くの機能を使用して、サイトの機能を向上させる方法です。</dd> - <dt>グレイスフルデグラデーション</dt> - <dd>これはトップダウンのアプローチで、必要なすべての機能を使用して最適なサイトを構築し、それを古いブラウザーでも使用できるように調整する方法です。これは、プログレッシブエンハンスメントよりも難しく、有効性が低くなりますが、場合によっては有用であることがあります。</dd> - <dt id="Mobile_Device_Detection">モバイル端末の検出</dt> - <dd>おそらく、ユーザーエージェントの判定で最も一般的かつ誤った使用法は、その端末がモバイル端末であるかどうかを検出することです。しかし、それが後で本当にどうなるかは見過ごされがちです。開発者はユーザーエージェントの判定を使用して、ユーザーの端末がタッチ操作であることや小さい画面であることを判別し、それに応じてウェブサイトを最適化することがあります。ユーザーエージェントの判定でこれらを検出できることもありますが、すべての端末が同じではありません。モバイル端末が大きなサイズの画面を持っている場合もあるし、デスクトップが小さなタッチ画面を持っている場合もあるし、まったく異なる球技であるスマートテレビで見ている場合もあるし、タブレットの向きを回転させて画面の幅や高さを動的に変化させている人もいます。よって、ユーザーエージェントの検出は決定的な方法ではありません。幸い、はるかに良い代替方法があります。ユーザーの端末にタッチ画面があるかどうかを検出するには、 <a href="/ja/docs/Web/API/Navigator/maxTouchPoints">Navigator.maxTouchPoints</a> を使用しましょう。そして、 <em>if (!("maxTouchPoints" in navigator)) { /*Code here*/}</em> の場合のみ、ユーザーエージェントの画面をチェックする既定に戻します。この情報を使用して端末にタッチ画面があるかどうかを確認することができますが、タッチ端末であるだけのためにウェブサイトのレイアウト全体を変更しないようにしてください。これは自分の作業とメンテナンスの量を増やすだけです。それよりも、タッチに適したより大きい、よりクリックしやすいボタンを追加しましょう (CSS を使用してフォントサイズを上げるだけです)。モバイル端末で #exampleButton のパディングを 1em に拡張するコードの例を示します。</dd> - <dd> - <pre class="brush: js notranslate">var hasTouchScreen = false; + <p>上記のコードが示すように、ブラウザーの互換性をユーザーエージェントの判定なしに行う方法は<strong>常に</strong>あります。このためにユーザーの文字列をチェックする理由は<strong>決してありません</strong>。</p> + + <p>最後に、上記のコードスニペットは、常に考慮しなければならないクロスブラウザーのコーディングで重大な問題を引き起こします。サポート対象外のブラウザーでテストしている API を意図せず使用しないでください。これは明らかでシンプルに聞こえるかもしれませんが、そうでない時もあります。たとえば、上記のコードスニペットでは、短い regexp 表記 (たとえば /reg/igm) で lookbehind を使用すると、サポートされていないブラウザーで parser エラーが発生します。したがって、あなたのコードの lookbehind がサポートされているセクションであっても、上記の例では <em>new RegExp("(?<=look_behind_stuff)");</em> を <em>/(?<=look_behind_stuff)/</em> の代わりに使用します。</p> + </dd> + <dt>プログレッシブエンハンスメント</dt> + <dd>この設計手法は、ウェブサイトを「階層」で開発し、ボトムアップのアプローチを使用して、より簡単な階層から始め、階層が上がるに従ってより多くの機能を使用して、サイトの機能を向上させる方法です。</dd> + <dt>グレイスフルデグラデーション</dt> + <dd>これはトップダウンのアプローチで、必要なすべての機能を使用して最適なサイトを構築し、それを古いブラウザーでも使用できるように調整する方法です。これは、プログレッシブエンハンスメントよりも難しく、有効性が低くなりますが、場合によっては有用であることがあります。</dd> + <dt id="Mobile_Device_Detection">モバイル端末の検出</dt> + <dd>おそらく、ユーザーエージェントの判定で最も一般的かつ誤った使用法は、その端末がモバイル端末であるかどうかを検出することです。しかし、それが後で本当にどうなるかは見過ごされがちです。開発者はユーザーエージェントの判定を使用して、ユーザーの端末がタッチ操作であることや小さい画面であることを判別し、それに応じてウェブサイトを最適化することがあります。ユーザーエージェントの判定でこれらを検出できることもありますが、すべての端末が同じではありません。モバイル端末が大きなサイズの画面を持っている場合もあるし、デスクトップが小さなタッチ画面を持っている場合もあるし、まったく異なる球技であるスマートテレビで見ている場合もあるし、タブレットの向きを回転させて画面の幅や高さを動的に変化させている人もいます。よって、ユーザーエージェントの検出は決定的な方法ではありません。幸い、はるかに良い代替方法があります。ユーザーの端末にタッチ画面があるかどうかを検出するには、 <a href="/ja/docs/Web/API/Navigator/maxTouchPoints">Navigator.maxTouchPoints</a> を使用しましょう。そして、 <em>if (!("maxTouchPoints" in navigator)) { /*Code here*/}</em> の場合のみ、ユーザーエージェントの画面をチェックする既定に戻します。この情報を使用して端末にタッチ画面があるかどうかを確認することができますが、タッチ端末であるだけのためにウェブサイトのレイアウト全体を変更しないようにしてください。これは自分の作業とメンテナンスの量を増やすだけです。それよりも、タッチに適したより大きい、よりクリックしやすいボタンを追加しましょう (CSS を使用してフォントを拡大することができます)。モバイル端末で #exampleButton のパディングを 1em に拡張するコードの例を示します。</dd> + <dd> + <pre class="brush: js">var hasTouchScreen = false; if ("maxTouchPoints" in navigator) { hasTouchScreen = navigator.maxTouchPoints > 0; } else if ("msMaxTouchPoints" in navigator) { @@ -123,21 +120,21 @@ if ("maxTouchPoints" in navigator) { } if (hasTouchScreen) document.getElementById("exampleButton").style.padding="1em";</pre> - </dd> - <dd>画面のサイズについては、 <em>window.innerWidth</em> と window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ }) を使用するだけです。画面サイズの対策としてやりたいことは、小さな画面の時に情報を削らないことです。デスクトップバージョンを使用するようになるので、人々を悩ますだけです。むしろ、小さい画面で長いページでは情報の列数を少なくし、画面サイズが大きいほど短いページで多くの列を持つようにしてください。この効果は、 CSS <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用し、時には部分的な代替手段として<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮動レイアウト</a>を用いることで簡単に達成できます。</dd> - <dd>また、関連性や重要性の低い情報を下に移動させ、ページのコンテンツを有意義にまとめてみてください。トピック外ではありますが、以下の詳細な例を見れば、ユーザーエージェントのスニッフィングを避けるための洞察力やアイデアが得られるかもしれません。複数の情報のボックスで構成されたページを想像してみましょう。それぞれのボックスは様々な猫や犬の品種についてのものであるとします。各ボックスには、画像、概要、経緯があるとします。画像は、大画面でも適切な最大の大きさが維持されるとします。意味のあるグループ分けをするために、すべての猫のボックスとすべての犬のボックスを分離し、猫と犬の箱が混在しないようにしています。大きな画面では、段組みをして画像の左右の無駄な空間を縮小することで、空間を節約します。このボックスは2つの等価な方法により、段組みに分割することができます。ここで、犬のボックスはすべてソースコードの上の方にあり、猫のボックスはすべてソースコードの下の方にあり、これらの箱の親要素はすべて共通であると仮定します。もちろん、猫ボックスのすぐ上に犬ボックスの単一のインスタンスがあります。最初の方法では、水平方向の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用してコンテンツをグループ化し、ページがエンドユーザーに表示されたときに、すべての犬のボックスをページの上部に配置し、すべての猫のボックスをページの下部に配置するようにします。2つ目の方法は<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">段組み</a>レイアウトを使用し、すべての犬を左に、すべての猫を右に配置します。この特定のシナリオでのみ、フレックスボックス/段組みのフォールバックを提供しないことが適切であり、その結果、古いブラウザー上では非常に幅の広いボックスの単一の列になります。また、以下のことも考慮してください。より多くの人がウェブページに猫を見に来るのであれば、ソースコード上で犬よりも猫をすべて先に書くと、コンテンツが1段になるような小さな画面でも、より多くの人が探しているものをより早く見つけることができるようになるので、良い考えかもしれません。</dd> - <dd>次に、コードを常に動的にしましょう。ユーザーは携帯端末の向きを回転させて、ページの幅と高さを変更することがあります。または、将来は広げると画面が拡張できるような、折り畳み式電話のような奇妙な端末が現れるかもしれません。折り畳み式電話のような端末をどのように扱うかということに頭を悩ませないでください。開発者ツールのサイドパネルを開いて画面のサイズを変更してみて、ウェブページが滑らかに、流動的に、動的にサイズ変更されるようになるまで満足しないようにしてください。これを行う最も単純な方法は、画面の大きさに基づいてコンテンツを移動させるすべてのコードを、ページが読み込まれたときと、その後の <a href="/ja/docs/Web/API/Window/resize_event">resize</a> イベントのたびに呼び出される単一の関数に分離することです。もし、このレイアウト関数がページの新しいレイアウトを決定する前に多くの計算がある場合は、イベントリスナーが呼び出されないようにイベントリスナーをデバウンスすることを検討してください。また、メディアクエリの <code>(max-width: 25em)</code>, <code>not all and (min-width: 25em)</code>, <code>(max-width: 24.99em)</code> の間には大きな違いがあることにも注意してください。 <code>(max-width: 25em)</code> は <code>(max-width: 25em)</code> を除外し、 <code>not all and (min-width: 25em)</code> は <code>(max-width: 25em)</code> を含みます。 <code>(max-width: 24.99em)</code> は、単に <code>not all and (min-width: 25em)</code> の哀れな人のバージョンです。 <code>(max-width: 24.99em)</code> を使用しないでください。適切なメディアクエリを選択し、対応する JavaScript の中で適切な >=, <=, >, < を選択すると、これらが混ざってしまいやすく、結果として、レイアウトが変更された画面サイズでウェブサイトを見てしまうことになるからです。そのため、レイアウト変更が適切に行われているかどうかを確認するために、レイアウト変更が行われている正確な幅/高さでウェブサイトを徹底的にテストしてください。</dd> + </dd> + <dd>画面のサイズについては、 <em>window.innerWidth</em> と window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ }) を使用してください。画面サイズの対策としてやりたいことは、小さな画面の時に情報を削らないことです。デスクトップバージョンを使用するようになるので、人々を悩ますだけです。むしろ、小さい画面で長いページでは情報の列数を少なくし、画面サイズが大きいほど短いページで多くの列を持つようにしてください。この効果は、 CSS <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用し、時には部分的な代替手段として<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動レイアウト</a>を用いることで簡単に達成できます。</dd> + <dd>また、関連性や重要性の低い情報を下に移動させ、ページのコンテンツを有意義にまとめてみてください。トピック外ではありますが、以下の詳細な例を見れば、ユーザーエージェントのスニッフィングを避けるための洞察力やアイデアが得られるかもしれません。複数の情報のボックスで構成されたページを想像してみましょう。それぞれのボックスは様々な猫や犬の品種についてのものであるとします。各ボックスには、画像、概要、経緯があるとします。画像は、大画面でも適切な最大の大きさが維持されるとします。意味のあるグループ分けをするために、すべての猫のボックスとすべての犬のボックスを分離し、猫と犬の箱が混在しないようにしています。大きな画面では、段組みをして画像の左右の無駄な空間を縮小することで、空間を節約します。このボックスは2つの等価な方法により、段組みに分割することができます。ここで、犬のボックスはすべてソースコードの上の方にあり、猫のボックスはすべてソースコードの下の方にあり、これらの箱の親要素はすべて共通であると仮定します。もちろん、猫ボックスのすぐ上に犬ボックスの単一のインスタンスがあります。最初の方法では、水平方向の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>を使用してコンテンツをグループ化し、ページがエンドユーザーに表示されたときに、すべての犬のボックスをページの上部に配置し、すべての猫のボックスをページの下部に配置するようにします。2つ目の方法は<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">段組み</a>レイアウトを使用し、すべての犬を左に、すべての猫を右に配置します。この特定のシナリオでのみ、フレックスボックス/段組みのフォールバックを提供しないことが適切であり、その結果、古いブラウザー上では非常に幅の広いボックスの単一の列になります。また、以下のことも考慮してください。より多くの人がウェブページに猫を見に来るのであれば、ソースコード上で犬よりも猫をすべて先に書くと、コンテンツが一段になるような小さな画面でも、より多くの人が探しているものをより早く見つけることができるようになるので、良い考えかもしれません。</dd> + <dd>次に、コードを常に動的にしましょう。ユーザーは携帯端末の向きを回転させて、ページの幅と高さを変更することがあります。または、将来は広げると画面が拡張できるような、折り畳み式電話のような奇妙な端末が現れるかもしれません。折り畳み式電話のような端末をどのように扱うかということに頭を悩ませないでください。開発者ツールのサイドパネルを開いて画面のサイズを変更してみて、ウェブページが滑らかに、流動的に、動的にサイズ変更されるようになるまで満足しないようにしてください。これを行う最も単純な方法は、画面の大きさに基づいてコンテンツを移動させるすべてのコードを、ページが読み込まれたときと、その後の <a href="/ja/docs/Web/API/Window/resize_event">resize</a> イベントのたびに呼び出される単一の関数に分離することです。もし、このレイアウト関数がページの新しいレイアウトを決定する前に多くの計算がある場合は、イベントリスナーが呼び出されないようにイベントリスナーをデバウンスすることを検討してください。また、メディアクエリの <code>(max-width: 25em)</code>, <code>not all and (min-width: 25em)</code>, <code>(max-width: 24.99em)</code> の間には大きな違いがあることにも注意してください。 <code>(max-width: 25em)</code> は <code>(max-width: 25em)</code> を除外し、 <code>not all and (min-width: 25em)</code> は <code>(max-width: 25em)</code> を含みます。 <code>(max-width: 24.99em)</code> は、 <code>not all and (min-width: 25em)</code> の哀れな人のバージョンです。 <code>(max-width: 24.99em)</code> を使用しないでください。適切なメディアクエリを選択し、対応する JavaScript の中で適切な >=, <=, >, < を選択すると、これらが混ざってしまいやすく、結果として、レイアウトが変更された画面サイズでウェブサイトを見てしまうことになるからです。そのため、レイアウト変更が適切に行われているかどうかを確認するために、レイアウト変更が行われている正確な幅/高さでウェブサイトを徹底的にテストしてください。</dd> </dl> -<h2 id="Making_the_best_of_user_agent_sniffing" name="Making_the_best_of_user_agent_sniffing">最適なユーザーエージェントの判定</h2> +<h2 id="Making_the_best_of_user_agent_sniffing">最適なユーザーエージェントの判定</h2> <p>ユーザーエージェントの判定のよりよい代替案をすべて検討したうえで、ユーザーエージェントの判定が適切で正当化される可能性のある場合がまだいくつかあります。</p> -<p>そのような場合のひとつに、端末にタッチパネルがあるかどうかを検出する際に、ユーザーエージェントの判定をフォールバックとして使用するというものがあります。詳細は <a href="#Mobile_Device_Detection">モバイル端末の検出</a>の節を参照してください。</p> +<p>そのような場合のひとつに、端末にタッチパネルがあるかどうかを検出する際に、ユーザーエージェントの判定をフォールバックとして使用するというものがあります。詳細は <a href="#mobile_device_detection">モバイル端末の検出</a>の節を参照してください。</p> <p>もう一つの例として、自動更新されないブラウザーのバグを修正する場合があります。 Internet Explorer (Windows) と Webkit (iOS) がその好例です。バージョン 9 以前のInternet Explorer は、レンダリングのバグ、 CSS のバグ、 API のバグなど、信じられないほどの問題を抱えていました。しかし、バージョン 9 以前の Internet Explorer は特別な小さな <s>wasp</s> 例外だったため、利用可能なブラウザー固有の機能に基づいてブラウザーを検出するのは非常に簡単でした。 Webkit は、 Apple が iOS 上のすべてのブラウザーに内部的に Webkit を使用するように強制しているため、ユーザーは古い端末上でより良い、より更新されたブラウザーを取得する方法がありません。ほとんどのバグは検出できますが、バグによっては他よりも検出に手間がかかる場合があります。そのような場合は、ユーザーエージェント検出を使用してパフォーマンスを節約するのが有効です。たとえば、 Webkit 6 にはデバイスの向きが変わると、ブラウザーが {{domxref("MediaQueryList")}} リスナーを実行しない場合があるというバグがあります。このバグを回避するには、以下のコードを参照してください。</p> -<pre class="brush: js notranslate">var UA=navigator.userAgent, isWebkit=/\b(iPad|iPhone|iPod)\b/.test(UA) && +<pre class="brush: js">var UA=navigator.userAgent, isWebkit=/\b(iPad|iPhone|iPod)\b/.test(UA) && /WebKit/.test(UA) && !/Edge/.test(UA) && !window.MSStream; var mediaQueryUpdated = true, mqL = []; @@ -169,143 +166,143 @@ addEventListener("resize", setTimeout.bind(0,function(){ <p>ユーザーエージェント文字列のそれぞれの部分には統一性がないので、これは難しい部分です。</p> -<h3 id="Browser_Name" name="Browser_Name">ブラウザー名</h3> +<h3 id="Browser_Name">ブラウザー名</h3> -<p>開発者が「ブラウザーを判定したい」という場合、実際は「レンダリングエンジンを判定したい」場合であることがしばしばあります。実際に SeaMonkey と Firefox を、または Chromium と Chrome を区別したいのでしょうか。それとも、実際にはブラウザーがレンダリングエンジンに Gecko を使用しているか、 WebKit を使用しているかを確認したいだけでしょうか。これが必要なのであれば、ページのもっと下を見てください。</p> +<p>開発者が「ブラウザーを判定したい」という場合、実際は「レンダリングエンジンを判定したい」場合であることがしばしばあります。実際に SeaMonkey と Firefox を、または Chromium と Chrome を区別したいのでしょうか。それとも、実際にはブラウザーがレンダリングエンジンに Gecko を使用しているか、 WebKit を使用しているかを確認したいのしょうか。これが必要なのであれば、ページのもっと下を見てください。</p> <p>ほとんどのブラウザーは、 Internet Explorer の例外を除いて、名前とバージョンを <em>BrowserName/VersionNumber</em> の形式で設定します。しかし、ユーザーエージェント文字列はこのような形式の名前だけから成っている訳ではないので、ブラウザーの名前が分かるわけではなく、探している名前があるかどうかを確認することしかできません。しかし、ブラウザーによってはうそをつくこともあります。例えば Chrome は、 Chrome と Safari の両方の文字列を含みます。ですから Safari を判定するには、 Safari の文字列があって Chrome の文字列がないことを確認する必要がありますし、 Chromium は自分自身を Chrome と報告することがよくあり、 Seamonkey は自分自身を Firefox として報告することが時々あります。</p> <p>また、 BrowserName に単純な正規表現を使用しないように注意してください。ユーザーエージェント文字列には、 Keyword/Value 構文以外の文字列も含まれています。例えば、 Safari や Chrome では、 'like Gecko' のような文字列が含まれています。</p> <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">必ず含む</th> - <th scope="col">決して含まない</th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox</td> - <td>Firefox/xyz</td> - <td>Seamonkey/xyz</td> - <td></td> - </tr> - <tr> - <td>Seamonkey</td> - <td>Seamonkey/xyz</td> - <td></td> - <td></td> - </tr> - <tr> - <td>Chrome</td> - <td>Chrome/xyz</td> - <td>Chromium/xyz</td> - <td></td> - </tr> - <tr> - <td>Chromium</td> - <td>Chromium/xyz</td> - <td></td> - <td></td> - </tr> - <tr> - <td>Safari</td> - <td>Safari/xyz</td> - <td>Chrome/xyz または Chromium/xyz</td> - <td>Safari はバージョン番号を2つ提供しており、一方は技術的な Safari/xyz のトークン、もう一方はユーザーに分かりやすい Version/xyz のトークンです</td> - </tr> - <tr> - <td>Opera</td> - <td> - <p>OPR/xyz <sup>[1]</sup></p> - - <p>Opera/xyz</p> - </td> - <td></td> - <td> - <p><sup>[1]</sup> Opera 15+ (Blink-based engine)</p> - - <p><sup>[2]</sup> Opera 12- (Presto-based engine)</p> - </td> - </tr> - <tr> - <td>Internet Explorer</td> - <td> - <p>; MSIE xyz; <sup>[1]</sup></p> - - <p>Trident/7.0; .*rv:xyz <sup>[2]</sup></p> - </td> - <td></td> - <td> - <p><sup>[1]</sup> Internet Explorer 10-</p> - - <p><sup>[2]</sup> Internet Explorer 11</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">必ず含む</th> + <th scope="col">決して含まない</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox</td> + <td>Firefox/xyz</td> + <td>Seamonkey/xyz</td> + <td></td> + </tr> + <tr> + <td>Seamonkey</td> + <td>Seamonkey/xyz</td> + <td></td> + <td></td> + </tr> + <tr> + <td>Chrome</td> + <td>Chrome/xyz</td> + <td>Chromium/xyz</td> + <td></td> + </tr> + <tr> + <td>Chromium</td> + <td>Chromium/xyz</td> + <td></td> + <td></td> + </tr> + <tr> + <td>Safari</td> + <td>Safari/xyz</td> + <td>Chrome/xyz または Chromium/xyz</td> + <td>Safari はバージョン番号を2つ提供しており、一方は技術的な Safari/xyz のトークン、もう一方はユーザーに分かりやすい Version/xyz のトークンです</td> + </tr> + <tr> + <td>Opera</td> + <td> + <p>OPR/xyz <sup>[1]</sup></p> + + <p>Opera/xyz</p> + </td> + <td></td> + <td> + <p><sup>[1]</sup> Opera 15+ (Blink ベースのエンジン)</p> + + <p><sup>[2]</sup> Opera 12- (Presto ベースのエンジン)</p> + </td> + </tr> + <tr> + <td>Internet Explorer</td> + <td> + <p>; MSIE xyz; <sup>[1]</sup></p> + + <p>Trident/7.0; .*rv:xyz <sup>[2]</sup></p> + </td> + <td></td> + <td> + <p><sup>[1]</sup> Internet Explorer 10-</p> + + <p><sup>[2]</sup> Internet Explorer 11</p> + </td> + </tr> + </tbody> </table> <p>もちろん、他のブラウザーがこれらの一部をハイジャックしないという絶対的な保証はありません (過去に Chrome が Safari の文字列をハイジャックしたように)。そのため、ユーザーエージェント文字列を使用したブラウザーの判定は信頼性が低いので、バージョン番号をチェックするのみにしてください (過去のバージョンをハイジャックすることはあまりありません)。</p> -<h3 id="Browser_version" name="Browser_version">ブラウザーのバージョン</h3> +<h3 id="Browser_version">ブラウザーのバージョン</h3> <p>ブラウザーのバージョンは、例外はあるものの、多くがユーザーエージェント文字列の <em>BrowserName/VersionNumber</em> トークンの値の部分に入れられます。もちろんこれは Internet Explorer の場合は当てはまらず (MSIE トークンの直後にバージョン番号を入れる)、 Opera のバージョン10以降では、 Version/<em>VersionNumber</em> トークンが追加されています。</p> <p>ここで再度、探しているブラウザーの正しいトークンを取得していることを確認してください。他には妥当な番号が含まれているという保証はありません。</p> -<h3 id="Rendering_engine" name="Rendering_engine">レンダリングエンジン</h3> +<h3 id="Rendering_engine">レンダリングエンジン</h3> <p>前述のように、多くの場合はレンダリングエンジンを探した方が良い方法になります。これは、あまり知られていないブラウザーを除外しないためにも役立つでしょう。共通のレンダリングエンジンを持つブラウザーはページを同じ方法で表示します。一方で動作するものはもう一方でも動作するということを想定することができます。</p> -<p>主なレンダリングエンジンには、 Trident, Gecko, Presto, Blink, WebKit の5つがあります。レンダリングエンジンの名前を探すのが一般的であるため、たくさんのレンダリングエンジンが他の連らリングエンジンの名前も追加して検出されるようにしています。したがって、レンダリングエンジンを判定する際には誤判定をしないように注意を払うことが重要です。</p> +<p>主なレンダリングエンジンには、 Trident, Gecko, Presto, Blink, WebKit の5つがあります。レンダリングエンジンの名前を探すのが一般的であるため、たくさんのレンダリングエンジンが他のレンダリングエンジンの名前も追加して検出されるようにしています。したがって、レンダリングエンジンを判定する際には誤判定をしないように注意を払うことが重要です。</p> <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">必ず含む</th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr> - <td>Gecko</td> - <td>Gecko/xyz</td> - <td></td> - </tr> - <tr> - <td>WebKit</td> - <td>AppleWebKit/xyz</td> - <td>注意: WebKit ブラウザーは 'like Gecko' の文字列を追加するので、判定時に注意しないと Gecko と誤認することがあります。</td> - </tr> - <tr> - <td>Presto</td> - <td>Opera/xyz</td> - <td><strong>Note:</strong> Presto is no longer used in Opera browser builds >= version 15 (see 'Blink')</td> - </tr> - <tr> - <td>Trident</td> - <td>Trident/xyz</td> - <td>Internet Explorer put this token in the <em>comment</em> part of the User Agent String</td> - </tr> - <tr> - <td>EdgeHTML</td> - <td>Edge/xyz</td> - <td>The non-Chromium Edge puts its engine version after the <em>Edge/</em> token, not the application version.<br> - <strong>Note:</strong> EdgeHTML is no longer used in Edge browser builds >= version 79 (see 'Blink').</td> - </tr> - <tr> - <td>Blink</td> - <td>Chrome/xyz</td> - <td></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">必ず含む</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr> + <td>Gecko</td> + <td>Gecko/xyz</td> + <td></td> + </tr> + <tr> + <td>WebKit</td> + <td>AppleWebKit/xyz</td> + <td>注意: WebKit ブラウザーは 'like Gecko' の文字列を追加するので、判定時に注意しないと Gecko と誤認することがあります。</td> + </tr> + <tr> + <td>Presto</td> + <td>Opera/xyz</td> + <td><strong>注:</strong> Presto は Opera ブラウザーのバージョン 15 以降では使用されない ('Blink' を参照)</td> + </tr> + <tr> + <td>Trident</td> + <td>Trident/xyz</td> + <td>Internet Explorer はこのトークンをユーザーエージェント文字列の<em>コメント</em>部分に入れる</td> + </tr> + <tr> + <td>EdgeHTML</td> + <td>Edge/xyz</td> + <td>Chromium ではない Edge は、 <em>Edge/</em> のトークンの後にアプリケーションのバージョンではなく、エンジンのバージョンを入れる。<br> + <strong>注:</strong> EdgeHTML は Edge ブラウザーのバージョン 79 以降では使用されない ('Blink' を参照)。</td> + </tr> + <tr> + <td>Blink</td> + <td>Chrome/xyz</td> + <td></td> + </tr> + </tbody> </table> -<h2 id="Rendering_engine_version" name="Rendering_engine_version">レンダリングエンジンのバージョン</h2> +<h2 id="Rendering_engine_version">レンダリングエンジンのバージョン</h2> <p>ほとんどのレンダリングエンジンは、 Gecko を除いて <em>RenderingEngine/VersionNumber</em> のトークンにバージョン番号を入れています。 Gecko はユーザーエージェント文字列のコメント部分の中で、 <code>rv:</code> 文字列の後にバージョン番号を入れます。モバイル版の Gecko 14 とデスクトップ版の Gecko 17 から、この値を <code>Gecko/version</code> のトークン (以前のバージョンではビルド日付、その後は GeckoTrail と呼ばれる固定日付) に置きます。</p> @@ -315,62 +312,62 @@ addEventListener("resize", setTimeout.bind(0,function(){ <p>すべての場合と同様に、これらの文字列は将来変更される可能性があり、既にリリースされているブラウザーの判定と組み合わせて使用する必要があります。新しいバージョンのブラウザーが出現したときは、スクリプトを適合させるための技術調査が必要です。</p> -<h3 id="Mobile_Tablet_or_Desktop" name="Mobile_Tablet_or_Desktop">モバイルか、タブレットか、デスクトップか</h3> +<h3 id="Mobile_Tablet_or_Desktop">モバイルか、タブレットか、デスクトップか</h3> <p>ユーザーエージェントの判別を行う最も一般的な理由は、ブラウザーが実行されている端末の種類を判別することです。目的は、それぞれの種類の端末に別々な HTML を提供することです。</p> <ul> - <li>ブラウザーやレンダリングエンジンは、1種類の端末でしか動作しないと想定しないでください。ブラウザーやレンダリングエンジンごとに、異なる既定値を設定しないでください。</li> - <li>ブラウザーがモバイル、タブレット、デスクトップのいずれであるかを定義するために、 OS トークンを使用しないでください。 OS は複数の種類の端末 (Android はタブレットや携帯電話など) で動作します。</li> + <li>ブラウザーやレンダリングエンジンは、1種類の端末でしか動作しないと想定しないでください。ブラウザーやレンダリングエンジンごとに、異なる既定値を設定しないでください。</li> + <li>ブラウザーがモバイル、タブレット、デスクトップのいずれであるかを定義するために、 OS トークンを使用しないでください。 OS は複数の種類の端末 (Android はタブレットや携帯電話など) で動作します。</li> </ul> <p>次の表は主要なブラウザーのベンダーが、ブラウザーがモバイル端末上で動作していることを示す方法をまとめたものです。</p> <table> - <caption>各ブラウザーのユーザーエージェント文字列</caption> - <thead> - <tr> - <th scope="col">ブラウザー</th> - <th scope="col">ルール</th> - <th scope="col">例</th> - </tr> - </thead> - <tbody> - <tr> - <td>Mozilla (Gecko, Firefox)</td> - <td><a href="/ja/docs/Gecko_user_agent_string_reference"><strong>Mobile</strong> または <strong>Tablet</strong> のトークン</a>がコメントの中にある。</td> - <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td> - </tr> - <tr> - <td>WebKit ベースのもの (Android, Safari)</td> - <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3"><strong>Mobile Safari</strong> のトークン</a>がコメントの外にある。</td> - <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td> - </tr> - <tr> - <td>Blink ベースのもの (Chromium, Google Chrome, Opera 15 以降)</td> - <td><a href="https://developers.google.com/chrome/mobile/docs/user-agent"><strong>Mobile Safari</strong> のトークン</a>がコメントの外にある。</td> - <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td> - </tr> - <tr> - <td>Presto ベースのもの (Opera 12 まで)</td> - <td> - <p><a href="http://my.opera.com/community/openweb/idopera/"><strong>Opera Mobi/xyz</strong> のトークン</a>がコメントの中にある。 (Opera 12 まで)</p> - </td> - <td> - <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p> - </td> - </tr> - <tr> - <td>Internet Explorer</td> - <td><strong>IEMobile/xyz</strong> のトークンがコメントの中にある。</td> - <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td> - </tr> - <tr> - <td>Edge on Windows 10 Mobile</td> - <td><strong>Mobile/xyz</strong> & <strong>Edge/</strong> tokens outside the comment.</td> - <td>Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36 Edge/16.16299</td> - </tr> - </tbody> + <caption>各ブラウザーのユーザーエージェント文字列</caption> + <thead> + <tr> + <th scope="col">ブラウザー</th> + <th scope="col">ルール</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td>Mozilla (Gecko, Firefox)</td> + <td><a href="/ja/docs/Gecko_user_agent_string_reference"><strong>Mobile</strong> または <strong>Tablet</strong> のトークン</a>がコメントの中にある。</td> + <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td> + </tr> + <tr> + <td>WebKit ベースのもの (Android, Safari)</td> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3"><strong>Mobile Safari</strong> のトークン</a>がコメントの外にある。</td> + <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td> + </tr> + <tr> + <td>Blink ベースのもの (Chromium, Google Chrome, Opera 15 以降)</td> + <td><a href="https://developers.google.com/chrome/mobile/docs/user-agent"><strong>Mobile Safari</strong> のトークン</a>がコメントの外にある。</td> + <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td> + </tr> + <tr> + <td>Presto ベースのもの (Opera 12 まで)</td> + <td> + <p><a href="http://my.opera.com/community/openweb/idopera/"><strong>Opera Mobi/xyz</strong> のトークン</a>がコメントの中にある。 (Opera 12 まで)</p> + </td> + <td> + <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p> + </td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>IEMobile/xyz</strong> のトークンがコメントの中にある。</td> + <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td> + </tr> + <tr> + <td>Edge on Windows 10 Mobile</td> + <td><strong>Mobile/xyz</strong> & <strong>Edge/</strong> tokens outside the comment.</td> + <td>Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36 Edge/16.16299</td> + </tr> + </tbody> </table> <p>要するに、モバイル端末を検出するには、ユーザーエージェント文字列のどこかに文字列 “Mobi” があるかどうかを探すことをお勧めします。</p> diff --git a/files/ja/web/http/headers/host/index.html b/files/ja/web/http/headers/host/index.html index e26c8e5c7d..3775f38d25 100644 --- a/files/ja/web/http/headers/host/index.html +++ b/files/ja/web/http/headers/host/index.html @@ -45,7 +45,7 @@ translation_of: Web/HTTP/Headers/Host <h2 id="Examples" name="Examples">例</h2> -<pre class="notranslate">Host: developer.cdn.mozilla.net</pre> +<pre class="notranslate">Host: developer.mozilla.org</pre> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/javascript/reference/global_objects/number/index.html b/files/ja/web/javascript/reference/global_objects/number/index.html index dbac6b734c..73dd60324c 100644 --- a/files/ja/web/javascript/reference/global_objects/number/index.html +++ b/files/ja/web/javascript/reference/global_objects/number/index.html @@ -138,7 +138,7 @@ console.log(Number(d)) <h3 id="Convert_numeric_strings_and_null_to_numbers" name="Convert_numeric_strings_and_null_to_numbers">数字や null を数値に変換する</h3> -<pre class="brush: js notranslate" dir="rtl">Number('123') // 123 +<pre class="brush: js notranslate">Number('123') // 123 Number('123') === 123 /// true Number('12.3') // 12.3 Number('12.00') // 12 diff --git a/files/ja/web/javascript/reference/operators/remainder/index.html b/files/ja/web/javascript/reference/operators/remainder/index.html index 7bc17ee93d..0d757f4d3c 100644 --- a/files/ja/web/javascript/reference/operators/remainder/index.html +++ b/files/ja/web/javascript/reference/operators/remainder/index.html @@ -2,30 +2,28 @@ title: 剰余 (%) slug: Web/JavaScript/Reference/Operators/Remainder tags: - - JavaScript - - Language feature - - Operator - - Reference +- JavaScript +- Language feature +- Operator +- Reference translation_of: Web/JavaScript/Reference/Operators/Remainder --- <div>{{jsSidebar("Operators")}}</div> -<p>剰余演算子 (<code>%</code>) は、1つ目のオペランドが2つ目のオペランドで除算されたときに残った剰余を返します。 これは常に配当のサインを取ります。</p> +<p>剰余演算子 (<code>%</code>) は、 1 つ目のオペランドが 2 つ目のオペランドで除算されたときに残った剰余を返します。これは常に被除数の符号を取ります。</p> <div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> -<div></div> +<p>なお、多くの言語では ‘%’ はリマインダー演算子ですが、言語によっては (例えば <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python や Perl</a> では) モジュロ演算子になります。正の数同士の場合は、この 2 つの値は等価ですが、被除数と除数が異なる符号の場合は結果が異なります。 JavaScript でモジュロを得るには、 <code>a % n</code> の代わりに <code>((a % n ) + n ) % n</code> を使用してください。</p> +<h2 id="Syntax">構文</h2> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var> +<pre class="brush: js notranslate"><strong>演算子:</strong> <var>var1</var> % <var>var2</var> </pre> -<h2 id="例">例</h2> +<h2 id="Examples">例</h2> -<h3 id="正の値の剰余">正の値の剰余</h3> +<h3 id="Remainder_with_positive_dividend">正の値の剰余</h3> <pre class="brush: js notranslate"> 12 % 5 // 2 1 % -2 // 1 @@ -34,45 +32,51 @@ translation_of: Web/JavaScript/Reference/Operators/Remainder 5.5 % 2 // 1.5 </pre> -<h3 id="負の値の剰余">負の値の剰余</h3> +<h3 id="Remainder_with_negative_dividend">負の値の剰余</h3> <pre class="brush: js notranslate">-12 % 5 // -2 -1 % 2 // -1 -4 % 2 // -0</pre> -<h3 id="NaNの剰余">NaNの剰余</h3> +<h3 id="Remainder_with_NaN">NaN の剰余</h3> <pre class="brush: js notranslate">NaN % 2 // NaN</pre> -<h2 id="仕様">仕様</h2> +<h3 id="Remainder_with_Infinity">無限大の剰余</h3> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> - </tr> - </tbody> -</table> +<pre class="brush: js notranslate">Infinity % 2 // NaN +Infinity % 0 // NaN +Infinity % Infinity // NaN +</pre> -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> +<h2 id="Specifications">仕様書</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}} + </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("javascript.operators.remainder")}}</p> -<h2 id="関連項目">関連項目</h2> +<h2 id="See_also">関連項目</h2> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> </ul> diff --git a/files/ja/web/javascript/reference/statements/switch/index.html b/files/ja/web/javascript/reference/statements/switch/index.html index 91960fb4ca..9d2d33b627 100644 --- a/files/ja/web/javascript/reference/statements/switch/index.html +++ b/files/ja/web/javascript/reference/statements/switch/index.html @@ -86,9 +86,7 @@ console.log("Is there anything else you'd like?"); <h3 id="What_happens_if_I_forgot_a_break" name="What_happens_if_I_forgot_a_break"><code>break</code> を置かないとどうなるか</h3> -<p><code>break</code> を置かな買った場合、スクリプトは基準を満たす <code>case</code> から実行され、その後の <code>case</code> も</p> - -<p>条件に合うかに関係なく実行されます。</p> +<p><code>break</code> を置かなかった場合、スクリプトは基準を満たす <code>case</code> から実行され、その後の <code>case</code> も条件に合うかに関係なく実行されます。</p> <p>こちらの例をご覧ください。</p> |