Web/Guide/Mobile を更新 (#1373)

- conflicting 版は古いので削除
- 2021/03/17 時点の英語版に同期

4 files changed, 19 insertions, 44 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 6210d112d9..39c177bda4 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -5244,7 +5244,7 @@
 /ja/docs/Web_Development	/ja/docs/conflicting/Web/Guide
 /ja/docs/Web_Development/Historical_artifacts_to_avoid	/ja/docs/conflicting/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web_Development/Introduction_to_Web_development	/ja/docs/conflicting/Web/Guide/Introduction_to_Web_development
-/ja/docs/Web_Development/Mobile	/ja/docs/conflicting/Web/Guide/Mobile
+/ja/docs/Web_Development/Mobile	/ja/docs/Web/Guide/Mobile
 /ja/docs/Web_Development/Mobile/Responsive_design	/ja/docs/conflicting/Web/Progressive_web_apps
 /ja/docs/Web_Development/Writing_forward-compatible_websites	/ja/docs/Web/Guide/Writing_forward-compatible_websites
 /ja/docs/Whitespace_in_the_DOM	/ja/docs/Web/API/Document_Object_Model/Whitespace
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 83ee157325..619112d948 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48585,12 +48585,6 @@
       "Yuuki Takahashi"
     ]
   },
-  "conflicting/Web/Guide/Mobile": {
-    "modified": "2019-03-23T23:27:19.500Z",
-    "contributors": [
-      "wbamberg"
-    ]
-  },
   "conflicting/Web/HTML/Element": {
     "modified": "2019-06-25T21:28:01.239Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/guide/mobile/index.html b/files/ja/conflicting/web/guide/mobile/index.html
deleted file mode 100644
index 028d0c71ed..0000000000
--- a/files/ja/conflicting/web/guide/mobile/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Mobile Web development
-slug: conflicting/Web/Guide/Mobile
-tags:
-  - Mobile
-  - NeedsTranslation
-  - TopicStub
-  - Web Development
-translation_of: Web/Guide/Mobile
-translation_of_original: Web_Development/Mobile
-original_slug: Web_Development/Mobile
----
-<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p>
-<ul>
-  <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li>
-  <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li>
-  <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li>
-  <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li>
-</ul>
diff --git a/files/ja/web/guide/mobile/index.html b/files/ja/web/guide/mobile/index.html
index 796f4e5f27..351f235341 100644
--- a/files/ja/web/guide/mobile/index.html
+++ b/files/ja/web/guide/mobile/index.html
@@ -6,44 +6,44 @@ tags:
   - NeedsExample
 translation_of: Web/Guide/Mobile
 ---
-<p>このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> のページを参照してください。または、 <a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> に興味があるかもしれません。</p>
+<p>このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 <a href="/ja/docs/Mozilla/Firefox_OS">Firefox OS</a> のページを参照してください。または、 <a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> に興味があるかもしれません。</p>
 
-<p><a href="#Designing_for_mobile_devices">モバイル端末向けの設計</a>と<a href="#Cross-browser_development">ブラウザー間の互換性</a>の2つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けの<a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルへの親和性</a>のガイドも参照してください。</p>
+<p><a href="#designing_for_mobile_devices">モバイル端末向けの設計</a>と<a href="#cross-browser_development">ブラウザー間の互換性</a>の2つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けの<a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルへの親和性</a>のガイドも参照してください。</p>
 
-<h2 id="Designing_for_mobile_devices" name="Designing_for_mobile_devices">モバイル端末向けの設計</h2>
+<h2 id="Designing_for_mobile_devices">モバイル端末向けの設計</h2>
 
 <p>モバイル端末は、デスクトップパソコンやノートパソコンと比較して、ハードウェアの特性がまったく異なります。画面は通常、明らかに小さくなりますが、ユーザーが端末を回転させると、画面の向きがポートレートモードとランドスケープモードの間で自動的に切り替わります。通常、ユーザー入力用のタッチスクリーンがあります。位置情報や画面の向きなどの API は、デスクトップでは未対応であったりあまり有用でなかったりしますので、これらの API はモバイルユーザーに、サイトと対話するための新しい方法を提供します。</p>
 
-<h3 id="Working_with_small_screens" name="Working_with_small_screens">小さな画面での作業</h3>
+<h3 id="Working_with_small_screens">小さな画面での作業</h3>
 
-<p><a href="/ja/docs/Web/Guide/Responsive_design">レスポンシブウェブデザイン</a>は、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。</p>
+<p><a href="/ja/docs/Web/Progressive_web_apps">レスポンシブウェブデザイン</a>は、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。</p>
 
 <ul>
  <li>流動的 CSS レイアウトにより、ブラウザーの大きさが変化したときにページを円滑に合わせる</li>
- <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を使用して、端末の画面の<a href="/ja/docs/Web/CSS/@media/width">幅</a>と<a href="/ja/docs/Web/CSS/@media/height">高さ</a>にふさわしい CSS の規則を条件付きで含める</li>
+ <li><a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>を使用して、端末の画面の<a href="/ja/docs/Web/CSS/@media/width">幅</a>と<a href="/ja/docs/Web/CSS/@media/height">高さ</a>にふさわしい CSS の規則を条件付きで含める</li>
 </ul>
 
 <p><a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag">viewport メタタグ</a>で、ブラウザーに対してユーザーの端末の適切な表示倍率でサイトを表示するよう指示します。</p>
 
-<h3 id="Working_with_touch_screens" name="Working_with_touch_screens">タッチ画面での操作</h3>
+<h3 id="Working_with_touch_screens">タッチ画面での操作</h3>
 
-<p>タッチ画面を使うには、 <a href="/ja/docs/Web/API/Touch_events">DOM タッチイベント</a>の作業をする必要があります。 CSS の {{cssxref(":hover")}} 擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a> を参照してください。</p>
+<p>タッチ画面を使うには、 <a href="/ja/docs/Web/API/Touch_events">DOM タッチイベント</a>の作業をする必要があります。 CSS の {{cssxref(":hover")}} 擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 <a href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a> を参照してください。</p>
 
 <p><a href="/ja/docs/Web/CSS/@media/pointer">pointer</a> または <a href="/ja/docs/Web/CSS/@media/any-pointer">any-pointer</a> メディアクエリを使用して、タッチ可能な端末で異なる CSS を読み込むことができます。</p>
 
-<h3 id="Optimizing_images" name="Optimizing_images">画像の最適化</h3>
+<h3 id="Optimizing_images">画像の最適化</h3>
 
 <p>端末の帯域幅が低かったり高価だったりするユーザーを支援するために、デバイスの画面サイズと解像度に適した画像をロードして画像を最適化することができます。 CSS でこれを行うには、画面の<a href="/ja/docs/Web/CSS/@media/height">高さ</a>、<a href="/ja/docs/Web/CSS/@media/width">幅</a>、<a href="/ja/docs/Web/CSS/@media/resolution">ピクセル比</a>でクエリを行います。</p>
 
 <p>CSS プロパティを使用して、画像を使用せずに<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">グラデーション</a>や<a href="/ja/docs/Web/CSS/box-shadow">影</a>などの視覚効果を実装することもできます。</p>
 
-<h3 id="Mobile_APIs" name="Mobile_APIs">モバイル API</h3>
+<h3 id="Mobile_APIs">モバイル API</h3>
 
 <p>最後に、<a href="/ja/docs/Web/API/Detecting_device_orientation">端末の向き</a>や<a href="/ja/docs/Web/API/Geolocation_API">位置情報</a>など、モバイル端末が提供する新しい可能性の利点を活用することができます。</p>
 
-<h2 id="Cross-browser_development" name="Cross-browser_development">クロスブラウザー開発</h2>
+<h2 id="Cross-browser_development">クロスブラウザー開発</h2>
 
-<h3 id="Write_cross-browser_code" name="Write_cross-browser_code">クロスブラウザーコードを書く</h3>
+<h3 id="Write_cross-browser_code">クロスブラウザーコードを書く</h3>
 
 <p>様々なモバイル端末で受け入れられ動作するウェブサイトを作成するには、以下のことが必要です。</p>
 
@@ -53,19 +53,19 @@ translation_of: Web/Guide/Mobile
  <li>ブラウザーがそれらの機能に対応していない場合は、利用可能な代替機能を提供してください。</li>
 </ul>
 
-<p>例えば、一部のテキストに背景としてグラデーションを、 <code>-webkit-linear-gradient</code> のようなベンダー接頭辞の付いたプロパティを使用して設定する場合、最も良いのは {{cssxref("linear-gradient")}} プロパティの他のベンダー接頭辞が付いたものを含めることです。それを行わない場合は、少なくとも既定の背景がテキストとコントラストが付いていることを確認してください。つまり、ページが少なくとも <code>linear-gradient</code> 規則の対象外のブラウザーで利用できるようにします。</p>
+<p>例えば、一部のテキストに背景としてグラデーションを、 <code>-webkit-linear-gradient</code> のようなベンダー接頭辞の付いたプロパティを使用して設定する場合、最も良いのは {{cssxref("linear-gradient()")}} プロパティの他のベンダー接頭辞が付いたものを含めることです。それを行わない場合は、少なくとも既定の背景がテキストとコントラストが付いていることを確認してください。つまり、ページが少なくとも <code>linear-gradient</code> 規則の対象外のブラウザーで利用できるようにします。</p>
 
-<p>この <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Gecko 固有のプロパティの一覧</a>と、この <a href="/ja/docs/Web/CSS/Webkit_Extensions">WebKit 固有のプロパティの一覧</a>、そして Peter Beverloo の <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a> を参照してください。</p>
+<p>この <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Gecko 固有のプロパティの一覧</a>と、この <a href="/ja/docs/Web/CSS/WebKit_Extensions">WebKit 固有のプロパティの一覧</a>、そして Peter Beverloo の <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a> を参照してください。</p>
 
-<p><a class="external" href="http://csslint.net/">CSS Lint</a> などのツールを使用すると、コード内のこのような問題を探すのに役立ちますし、 <a class="external" href="http://sass-lang.com/">SASS</a> や <a class="external" href="http://lesscss.org/">LESS</a> などのプリプロセッサーを使用すると、クロスブラウザーのコードを生成するのに役立つことがあります。</p>
+<p><a href="http://csslint.net/">CSS Lint</a> などのツールを使用すると、コード内のこのような問題を探すのに役立ちますし、 <a href="http://sass-lang.com/">SASS</a> や <a href="http://lesscss.org/">LESS</a> などのプリプロセッサーを使用すると、クロスブラウザーのコードを生成するのに役立つことがあります。</p>
 
-<h3 id="Take_care_with_user_agent_sniffing" name="Take_care_with_user_agent_sniffing">ユーザーエージェントの推測に注意</h3>
+<h3 id="Take_care_with_user_agent_sniffing">ユーザーエージェントの推測に注意</h3>
 
 <p>以上のような手法を使用して、ウェブサイトが画面の大きさやタッチ画面などといった特定の端末特性を検出し、それに適応することが望ましい形です。しかし、これは非現実的である場合があり、ウェブサイトがブラウザーのユーザーエージェント文字列を解析して、デスクトップ、タブレット、携帯電話を区別し、端末ごとに異なるコンテンツを提供することに手を出しがちです。</p>
 
-<p>これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。<a href="/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop">ユーザーエージェント文字列を使用して端末の種類を決定するガイド</a>を参照してください。</p>
+<p>これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。<a href="/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile.2c_tablet_or_desktop">ユーザーエージェント文字列を使用して端末の種類を決定するガイド</a>を参照してください。</p>
 
-<h3 id="Test_on_multiple_browsers" name="Test_on_multiple_browsers">複数のブラウザーでのテストTest on multiple browsers</h3>
+<h3 id="Test_on_multiple_browsers">複数のブラウザーでのテストTest on multiple browsers</h3>
 
 <p>ウェブサイトを複数のブラウザーでテストしてください。これは複数のプラットフォームでテストをするということです。 — 少なくとも iOS と Android です。</p>