initial commit

6 files changed, 410 insertions, 0 deletions

diff --git a/files/ja/web_development/index.html b/files/ja/web_development/index.html
new file mode 100644
index 0000000000..c386086d88
--- /dev/null
+++ b/files/ja/web_development/index.html
@@ -0,0 +1,80 @@
+---
+title: Web 開発
+slug: Web_Development
+tags:
+  - Web Development
+translation_of: Web/Guide
+---
+<p><strong>ウェブ開発</strong> は、ウェブサイトやウェブアプリケーションの開発のすべての側面を含んでいます。</p>
+
+<p>ここで見つけられる記事を熟読して、単純なウェブサイトから最新のウェブ技術を用いた複雑で非常にインタラクティブなウェブサイトまでを作成する方法を学んでください。</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation_topics" name="Documentation_topics">ドキュメンテーショントピックス</h2>
+
+    <h3 id="Technologies" name="Technologies">技術</h3>
+
+    <dl>
+     <dt><a class="internal" href="/ja/docs/Web_Development/Introduction_to_Web_development" title="ja/docs/Web Development/Introduction to Web development">ウェブ開発の初歩</a></dt>
+     <dd>Web 向けの開発方法を学ぶためのガイド。</dd>
+     <dt><a class="internal" href="/ja/docs/HTML" rel="internal">HTML</a></dt>
+     <dd>HyperText Markup Language はウェブページやブラウザーで表示される他のドキュメントを作成するための基本言語です。</dd>
+     <dt><a class="internal" href="/ja/docs/CSS" rel="internal">CSS</a></dt>
+     <dd>Cascading Style Sheets によって Web 上で高度なレイアウトとページデザインを行うことが可能になります。</dd>
+     <dt><a class="internal" href="/ja/docs/JavaScript" rel="internal">JavaScript</a></dt>
+     <dd>JavaScript はウェブアプリケーションを開発するために最も一般的に用いられているスクリプト言語です。Mozilla ベースのソフトウェアの開発にも用いられています。</dd>
+     <dt><a class="internal" href="/ja/docs/DOM" rel="internal">DOM</a></dt>
+     <dd>Document Object Model は HTML と XML ドキュメントのための API であり、見た目の表現を変更するために変更可能であるドキュメントの構造的な表現を提供します。</dd>
+     <dt><a class="internal" href="/ja/docs/AJAX" rel="internal">AJAX</a></dt>
+     <dd>Asynchronous JavaScript and XML はひとつの技術ではなく複数の技術の組み合わせです。動的なウェブアプリケーションを作成するために JavaScript と他のモダンなウェブ技術を共に用いることを指します。</dd>
+     <dt><a class="internal" href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a></dt>
+     <dd>Extensible HyperText Markup Language は HTML よりも厳格な構文を提供する XML ベースの HTML 風の言語です。</dd>
+     <dt><a class="internal" href="/ja/docs/SVG" rel="internal">SVG</a></dt>
+     <dd>Scalable Vector Graphics は 2D ベクターグラフィックを扱うための XML マークアップ言語です。</dd>
+    </dl>
+
+    <h3 id="Strategies" name="Strategies">方針</h3>
+
+    <dl>
+     <dt><a class="internal" href="/ja/docs/Web_Standards" title="ja/docs/Web Standards">Web 標準</a></dt>
+     <dd>オープンな Web と互換性を持つことであなたのウェブサイトまたはアプリケーションを最も多くのユーザーに提供するための方法を学んでください。</dd>
+     <dt><a href="/ja/docs/Web_Development/Responsive_Web_design" title="ja/docs/Web development/Responsive Web design">Responsive Web design</a></dt>
+     <dd>同じコンテンツを携帯電話から高解像度のデスクトップディスプレイまですべてのハードウェア環境で提供できるよう、CSS を使用してください。</dd>
+     <dt><a href="/ja/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt>
+     <dd>ブラウザーが更新されても壊れることのないウェブサイトを作成するためのベストプラクティスを紹介します。</dd>
+     <dt><a href="/ja/docs/Web_Development/Mobile" title="/ja/docs/Web development/Mobile">Mobile Web development</a></dt>
+     <dd>モバイル機器で表示されるウェブサイトを開発する際は、デスクトップブラウザー向けの開発に慣れた人々にはあまり知られていない独特の手法を必要とします。</dd>
+     <dt><a class="internal" href="/ja/docs/Mozilla_Web_Developer_FAQ" title="ja/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt>
+     <dd>ウェブ開発者からのよく聞かれる質問です。答えもあります!</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development" title="ja/docs/tag/Web_Development">すべてみる...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">コミュニティ</h2>
+
+    <ul>
+     <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a> (<a class="external" href="https://dev.mozilla.jp/hacksmozillaorg/" title="https://dev.mozilla.jp/hacksmozillaorg/">日本語訳</a>)</li>
+     <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li>
+     <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Tools" name="Tools">ツール</h2>
+
+    <ul>
+     <li><a href="/ja/docs/Tools" title="ja/docs/Tools">ツールのメインページ</a></li>
+     <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/1843">Firebug 拡張機能</a></li>
+     <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/60">Web Developer 拡張機能</a></li>
+     <li><a href="/ja/docs/Venkman" rel="internal">Venkman</a>: JavaScript デバッガー</li>
+     <li><a href="/ja/docs/DOM_Inspector" rel="internal" title="ja/docs/DOM Inspector">DOM Inspector</a></li>
+     <li><a href="/ja/docs/Tools/Scratchpad" title="ja/docs/Tools/Scratchpad">スクラッチパッド</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development:Tools" title="ja/docs/tag/Web_Development:Tools">すべてみる...</a></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web_development/introduction_to_web_development/index.html b/files/ja/web_development/introduction_to_web_development/index.html
new file mode 100644
index 0000000000..73086c9207
--- /dev/null
+++ b/files/ja/web_development/introduction_to_web_development/index.html
@@ -0,0 +1,113 @@
+---
+title: Introduction to Web development
+slug: Web_Development/Introduction_to_Web_development
+---
+<p>Web開発の初歩</p>
+
+<p>ここに示すリンクは、Web開発を始めたばかりの方であってもWebのすごさへの新しい領域に踏み込もうとしている方であっても手助けになるはずです。</p>
+
+<div class="note"><strong>注:</strong> 本ページの推奨リソースは変更される可能性があります。</div>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <p> </p>
+
+    <h2 id="項目">項目</h2>
+
+    <p> </p>
+
+    <h3 id="HTML">HTML</h3>
+
+    <ul>
+     <li><a class="external" href="http://dev.opera.com/articles/view/12-the-basics-of-html/" title="http://dev.opera.com/articles/view/12-the-basics-of-html/">Hypertext Mark-up Langage (HTML</a>)の基本 - HTMLとはいったい何か?</li>
+     <li><a class="external" href="http://reference.sitepoint.com/html/page-structure" title="http://reference.sitepoint.com/html/page-structure">webページの基本構造</a> - doctype とドキュメント'ツリー'</li>
+     <li><a class="external" href="http://reference.sitepoint.com/html/elements" title="http://reference.sitepoint.com/html/elements">基本的なHTML要素</a>  - カテゴリ別に説明された、構造、ヘッダー、リスト、フォーム要素ほか</li>
+     <li><a class="external" href="http://htmldog.com/guides/htmlbeginner/" title="http://htmldog.com/guides/htmlbeginner/">HTML初心者へのチュートリアル</a> - 上述の基礎を含めたチュートリアルと練習</li>
+     <li><a class="external" href="/ja/HTML/Element" title="https://developer.mozilla.org/ja/HTML/Element">MDC HTML要素リファレンスガイド</a> - 詳細を含めGecko/FirefoxがサポートするHTML要素の包括的ガイド</li>
+    </ul>
+
+    <dl>
+     <dt>はじめに </dt>
+    </dl>
+
+    <ul>
+    </ul>
+
+    <h3 id="CSS">CSS</h3>
+
+    <ul>
+     <li><a class="external" href="/ja/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">初心者のためのCSSのMDCガイド</a> - 基本的な概念と基礎をカバーするCSSのまさに初心者用ガイド</li>
+     <li><a class="external" href="/ja/CSS_Reference" title="https://developer.mozilla.org/ja/CSS_Reference">MDC CSSリファレンスガイド</a> - Gecko/Firefoxのレベルで詳細に記載したCSSの完全ガイド</li>
+     <li><a class="external" href="http://www.w3.org/MarkUp/Guide/Style" title="http://www.w3.org/MarkUp/Guide/Style">CSSでスタイリングするためのW3Cの紹介</a> - 初心者がwebページをスタイリングするための分かりやすいガイド</li>
+     <li><a class="external" href="/ja/Common_CSS_Questions" title="https://developer.mozilla.org/ja/Common_CSS_Questions">よくあるCSSの質問</a> - 初心者によくあるQ&amp;A</li>
+    </ul>
+
+    <ul>
+     <li><a class="external" href="http://www.html.net/tutorials/css/" title="http://www.html.net/tutorials/css/">中級レベルのCSSの概念</a> - グループ分け、pseudo-classesほか</li>
+    </ul>
+
+    <dl>
+     <dt>はじめに </dt>
+     <dt>中級者向け</dt>
+    </dl>
+
+    <ul>
+    </ul>
+
+    <h3 id="JavaScript">JavaScript</h3>
+
+    <ul>
+     <li><a class="external" href="/ja/JavaScript/Getting_Started" title="https://developer.mozilla.org/ja/JavaScript/Getting_Started">初心者向けMDC Javascriptガイド</a> - Javascriptとは何か? どうやって役に立つのか?</li>
+     <li><a class="external" href="/ja/JavaScript/Guide" title="https://developer.mozilla.org/ja/JavaScript/Guide">MDC JavaScriptリファレンスガイド</a> - 定期的にアップデートされる、初心者から上級者まですべてのレベルのための包括的ガイド</li>
+     <li><a class="external" href="http://yuiblog.com/crockford/" title="http://yuiblog.com/crockford/">Crockford on JavaScript</a> - Javascript言語に関し徹底的に追求したビデオシリーズ</li>
+    </ul>
+
+    <ul>
+     <li><a href="/ja/JavaScript/A_re-introduction_to_JavaScript" title="https://developer.mozilla.org/ja/a_re-introduction_to_javascript">Javascriptの再入門</a> - 中級者レベルの開発者向けJavascriptプログラミング言語の要約</li>
+     <li><a class="external" href="http://eloquentjavascript.net/contents.html" title="http://eloquentjavascript.net/contents.html">雄弁なJavaScript </a>- 中級から上級向けJavascript技術の包括ガイド</li>
+     <li><a class="external" href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" title="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">本質的なJavaScript設計パターン</a> - 本質的なJavascriptの設計パターンの紹介</li>
+     <li><a class="external" href="/ja/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/ja/Introduction_to_Object-Oriented_JavaScript">オブジェクト指向JavascriptのためのMDCの紹介</a> - Javascriptオブジェクトモデルについて学習する</li>
+     <li><a class="external" href="http://dev.opera.com/articles/view/javascript-best-practices/" title="http://dev.opera.com/articles/view/javascript-best-practices/">Christian HeilmannのJavaScript最適学習</a> - Javascriptを書くときお決まりの(そんなにお決まりでないものも)最適な練習について学習する</li>
+    </ul>
+
+    <ul>
+     <li><a class="external" href="http://ejohn.org/apps/learn/" title="http://ejohn.org/apps/learn/">上級者向けJavaScriptを学ぶ</a> - John Resigによる上級者向けJavaScriptガイド</li>
+     <li><a class="external" href="http://uk.video.yahoo.com/watch/111585/1027823" title="http://uk.video.yahoo.com/watch/111585/1027823">Crockford on Advanced JavaScript</a> - 上級者向けJavascript概念に関する3部構成のビデオシリーズ</li>
+    </ul>
+
+    <dl>
+     <dt>はじめに </dt>
+     <dt>中級者向け</dt>
+     <dt>上級者向け</dt>
+    </dl>
+
+    <ul>
+    </ul>
+   </td>
+   <td>
+    <h2 id="リソース">リソース</h2>
+
+    <dl>
+     <dt><a class="external" href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur" title="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur">Opera's Web Standards Curriculum</a></dt>
+     <dd>webデザイン、HTML、HTML5、CSS、Javascriptとそのアクセス法について。多くの分野を通じてweb開発の基礎を学習しようとしている初心者にとってここはよいスタートポイントになります。</dd>
+     <dt><a class="external" href="http://reference.sitepoint.com/" title="http://reference.sitepoint.com/">SitePoint</a></dt>
+     <dd>異なるブラウザーやブラウザーに関する既知のバグを通じてのサポートにも言及している、HTML、CSS、Javascriptを学習するために信頼できるサイト</dd>
+     <dt><a class="external" href="http://htmldog.com/" title="http://htmldog.com/">HTMLDog</a></dt>
+     <dd>初心者向け、HTMLとCSSに関する優秀で包括的なリファレンスサイト</dd>
+     <dt><a class="external" href="http://code.google.com/edu/submissions/html-css-javascript/" title="http://code.google.com/edu/submissions/html-css-javascript/">Google's HTML, CSS, and Javascript from the Ground Up</a></dt>
+     <dd>Googleのプロのweb開発者による易しいビデオチュートリアルがHTML、CSS、Javascriptの基本をカバーします</dd>
+     <dt><a class="external" href="http://www.csstutorial.net/" title="http://www.csstutorial.net/">CSSTutorial.net Beginner Tutorials</a></dt>
+     <dd>A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.</dd>
+     <dt><a class="external" href="http://www.tizag.com/cssT/" title="http://www.tizag.com/cssT/">Tizag CSS Tutorials</a></dt>
+     <dd>An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.</dd>
+     <dt><a class="external" href="http://jqfundamentals.com/book/book.html" title="http://jqfundamentals.com/book/book.html">jQuery Fundamentals</a></dt>
+     <dd>An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.</dd>
+     <dt><a class="external" href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/" title="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript From Null: A Video Series</a></dt>
+     <dd>A video series on JavaScript for absolute beginners looking for more 'visual'-based learning</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web_development/mobile/index.html b/files/ja/web_development/mobile/index.html
new file mode 100644
index 0000000000..112d15199d
--- /dev/null
+++ b/files/ja/web_development/mobile/index.html
@@ -0,0 +1,17 @@
+---
+title: Mobile Web development
+slug: Web_Development/Mobile
+tags:
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/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_development/mobile/responsive_design/index.html b/files/ja/web_development/mobile/responsive_design/index.html
new file mode 100644
index 0000000000..a8eeec1c40
--- /dev/null
+++ b/files/ja/web_development/mobile/responsive_design/index.html
@@ -0,0 +1,76 @@
+---
+title: レスポンシブデザイン
+slug: Web_Development/Mobile/Responsive_design
+tags:
+  - Apps
+  - Mobile
+  - Responsive Design
+  - Web Development
+translation_of: Web/Progressive_web_apps
+---
+<p>モバイル向けとデスクトップ向けの Web サイトの開発に対する <a href="/ja/docs/Web/Guide/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">別々のサイト</a> 手法に関連する問題に対する反応として、比較的新しい (実際は <a href="http://www.alistapart.com/articles/dao/">とても古い</a>) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a> で紹介され、<a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">レスポンシブ Web デザイン</a> として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。</p>
+
+<h2 id="長所">長所</h2>
+
+<p>最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。</p>
+
+<ol style="font-size: medium;">
+ <li>デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。</li>
+ <li>レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。</li>
+ <li>モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。</li>
+ <li>レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。</li>
+</ol>
+
+<p>この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。</p>
+
+<h2 id="短所">短所</h2>
+
+<p>この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。</p>
+
+<p>もし <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">フレキシブルなレイアウト</a> に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。</p>
+
+<p>最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。</p>
+
+<h2 id="この選択肢を選ぶとき">この選択肢を選ぶとき</h2>
+
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！</p>
+
+<h2 id="Examples" name="Examples" style="overflow: hidden;">用例</h2>
+
+<p>分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。</p>
+
+<ul>
+ <li><a href="http://teixido.co/">http://teixido.co/</a> – 私のお気に入りのレスポンシブデザインです。画像が上にあります！</li>
+ <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 読むのにおすすめの記事です。記事内のリンクも用例となっています。</li>
+ <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+ <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+ <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+
+<p>比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、<a href="http://www.lukew.com/ff/entry.asp?1117">まず小さい画面で作成する</a> のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">ここ</a> から利用できます。</p>
+
+<h2 id="モバイル_Web_開発手法">モバイル Web 開発手法</h2>
+
+<p>以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルの親しみやすさとは？</a></li>
+ <li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li>
+ <li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
+</ul>
+
+<h2 id="関連文書">関連文書</h2>
+
+<ul>
+ <li>追加リソース: <a href="/ja/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">レスポンシブ Web デザイン</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="元の文書">元の文書</h3>
+
+<p>Mozilla Webdev ブログの "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。</p>
+</div>
+
+<p> </p>
diff --git a/files/ja/web_development/responsive_web_design/index.html b/files/ja/web_development/responsive_web_design/index.html
new file mode 100644
index 0000000000..2a7b99afe6
--- /dev/null
+++ b/files/ja/web_development/responsive_web_design/index.html
@@ -0,0 +1,43 @@
+---
+title: レスポンシブ Web デザイン
+slug: Web_Development/Responsive_Web_design
+tags:
+  - Mobile
+  - Responsive Design
+  - Web Development
+translation_of: Web/Progressive_web_apps
+---
+<p>Web の利用者が Web サイトやアプリの利用でますますモバイルデバイスを使うようになるのにつれて、Web デザイナーや開発者は自身の制作物が従来のデスクトップコンピュータと同様にモバイルデバイスでも見栄えよく、また良好に動作するようにしなければなりません。著名なデザイナーである Luke Wroblewski 氏は、デスクトップ向けデザインの後付けではなく "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">Mobile First</a>" なデザインを提唱しています。モバイルデバイス向けのデザインを第一のターゲットとするか親切なおまけにするか、いずれにしても同一のコンテンツを携帯電話から大画面・高解像度のディスプレイまで、あらゆるハードウェアプラットフォームで利用できるようにするために CSS の力を活用できます。</p>
+<p>この手法は "レスポンシブ Web デザイン" として知られています。その方策には以下のようなものがあります:</p>
+<ul>
+  <li><strong>リキッドまたはフルードレイアウト</strong>: すべてのコンテナの幅をブラウザのビューポートに対するパーセンテージとして定義することで、コンテナはブラウザのウィンドウサイズの変化に応じて広がったり縮んだりします。</li>
+  <li><strong>メディアクエリ</strong>: 使用しているディスプレイの特性、例えばサイズ、解像度、アスペクト比、色深度などをもとに、別々のスタイルシートを適用します。</li>
+  <li><strong>フルードイメージ</strong>: 画像が最大でもディスプレイの幅全体を占めるように設定します。</li>
+</ul>
+<h2 id="Resources" name="Resources">リソース</h2>
+<h3 id="Overviews" name="Overviews">概要</h3>
+<ul>
+  <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a> (Ethan Marcotte 氏)</li>
+  <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a> (Rick Petit 氏)</li>
+  <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a> (Kayla Knight 氏)</li>
+  <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a> (Luke Wroblewski 氏)</li>
+</ul>
+<h3 id="Techniques" name="Techniques">技術</h3>
+<ul>
+  <li><a href="/ja/docs/CSS/Media_queries" title="CSS media queries">CSS メディアクエリ</a> リファレンスページ</li>
+  <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a> (Chris Coyier 氏)</li>
+  <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a> (Russ Weakley 氏)</li>
+  <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a> (Ethan Marcotte 氏)</li>
+  <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a> (Chris Kemm 氏)</li>
+  <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a> (Smashing Editorial Team)</li>
+</ul>
+<h3 id="Tools" name="Tools">ツール</h3>
+<ul>
+  <li><a href="/ja/docs/Tools/Responsive_Design_View" title="/ja/docs/Tools/Responsive_Design_View">レスポンシブデザインビュー</a> (Firefox)</li>
+</ul>
+<h3 id="Examples" name="Examples">実例</h3>
+<ul>
+  <li><a href="/ja/demos/devderby/2011/october" title="https://developer.mozilla.org/ja/demos/devderby/2011/october/">CSS メディアクエリによる DevDerby デモ</a></li>
+  <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a> (Joshua Johnson 氏)</li>
+  <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li>
+</ul>
diff --git a/files/ja/web_development/writing_forward-compatible_websites/index.html b/files/ja/web_development/writing_forward-compatible_websites/index.html
new file mode 100644
index 0000000000..aa0e54539d
--- /dev/null
+++ b/files/ja/web_development/writing_forward-compatible_websites/index.html
@@ -0,0 +1,81 @@
+---
+title: Writing forward-compatible websites
+slug: Web_Development/Writing_forward-compatible_websites
+tags:
+  - CSS
+  - Compatibility
+  - DOM
+  - HTML
+  - JavaScript
+  - Web Development
+translation_of: Web/Guide/Writing_forward-compatible_websites
+---
+<p>このページでは、新しいバージョンのブラウザが公開されても壊れることのない Web サイトを記述する方法を説明します。<br>
+  <br>
+  これはイントラネットや公衆向けでない Web サイトで特に重要です。私たちがあなたのコードを見ることができないので、それが壊れていることを確認できないのです。これらのすべてに従うことができない場合もありますが、可能な限り多くの事項に従うことで、Web サイトを将来にわたって有用な状態にすることの助けになります。</p>
+<h2 id="JavaScript">JavaScript</h2>
+<h3 id="onfoo_属性でグローバル変数へアクセスする際に_window._接頭辞を付加する"><code>onfoo</code> 属性でグローバル変数へアクセスする際に "<code>window</code>." 接頭辞を付加する</h3>
+<p>HTML の要素でイベントハンドラのコンテンツ属性 (<code>onclick</code>、 <code>onmouseover</code> など) が使用されているとき、それら属性でのすべての名前探索は始めに要素自身、次にフォームコントロール要素の場合はそのフォーム、そして document、さらに (あなたがグローバル変数を定義した) window の順に行われます。例えば、以下のマークアップがある場合は:</p>
+<pre>&lt;div onclick="alert(ownerDocument)"&gt;Click me&lt;/div&gt;
+</pre>
+<p>文字列をクリックすると <code>div</code> の <code>ownerDocument</code> をアラートで表示します。これは、<code>var ownerDocument</code> がグローバルスコープで宣言されている場合でも動作します。</p>
+<p>これが意味することは、イベントハンドラのコンテンツ属性でグローバル変数にアクセスするときやグローバルに宣言された任意の関数を呼び出すとき、あなたの関数や変数と同じ名前の新たな DOM プロパティが仕様書で要素やドキュメントに追加され、またそれをブラウザが実装した場合に、常に名前が衝突した時点で探索が終わってしまいます。これが起きると、突如関数が呼び出されなくなります。この現象は HTML5 の進展に伴い、さまざまなサイトで何度も発生しています。</p>
+<p>これを防ぐには、以下のように "window." を用いてグローバル変数にアクセスするのが最適です:</p>
+<pre>&lt;script&gt;
+  function localName() {
+    alert('Function localName has been called');
+  }
+&lt;/script&gt;
+&lt;div onclick="<strong>window.</strong>localName()"&gt;Clicking me should show an alert&lt;div&gt;
+</pre>
+<h3 id="自身で管理しないスクリプトを連結しない">自身で管理しないスクリプトを連結しない</h3>
+<p>ファイルレベルで使用される ECMAScript の <code>"use strict;"</code> ディレクティブは、ファイル全体に適用されます。このため、非 Strict モードの動作に依存するスクリプトを Strict モードのスクリプトに付加すると、スクリプトが動作しなくなります。</p>
+<h3 id="使用する_JavaScript_ライブラリの作者に、上記のガイドラインに従っているかを確認する">使用する JavaScript ライブラリの作者に、上記のガイドラインに従っているかを確認する</h3>
+<p>好みのライブラリの開発者に、上記のガイドラインに従うことを提案しましょう。彼らが従わない場合、ライブラリが将来も問題を起こさないとは信頼できません。残念ながら、ライブラリはこれらのガイドラインに逆らっています。</p>
+<h2 id="検出">検出</h2>
+<h3 id="特定の機能の検出">特定の機能の検出</h3>
+<p>ある機能を用いようとするとき、可能であればその機能を見つけるためにオブジェクト検出を行ってください。簡単な例として、<code>body.style</code> に <code>"filter"</code> があるかのテストが真になるブラウザは必ず Microsoft Internet Explorer であり、それゆえ例えばイベントハンドラで <code>window.event</code> オブジェクトが利用できるとは考えないでください。また、ある一定の DOM 機能をサポートしているブラウザは他の機能、特に非標準の DOM 機能もサポートしているとは考えないでください。あるいは逆に、他の機能をサポート<em>しない</em>とも考えないでください。例えば、script 要素で <code>onload</code> をサポートするブラウザは <code>onreadystatechange</code> をサポートしないと考えてはいけません。各ブラウザの動作が収束することにより、機能は追加や削除されます。また、不具合の修正も行います。これら 3 点は過去に発生しており、また今後も発生するでしょう。</p>
+<p>従ってある機能の存在有無と別の機能の存在有無に関連はありませんので、ある機能やオブジェクトの検出結果から別のことを予測しないでください。</p>
+<h3 id="UA_検出を行わない">UA 検出を行わない</h3>
+<p>これはある機能 (ユーザエージェント (UA) 文字列内に特定の文字列が含まれていること) が別の機能の有無を暗に示すと考えられている、特に一般的な実例です。</p>
+<h4 id="UA_検出が必要な場合は、過去のブラウザのバージョンにのみ行う">UA 検出が必要な場合は、過去のブラウザのバージョンにのみ行う</h4>
+<p>UA 検出に頼る必要がある場合は、特定のブラウザの過去のバージョンに対して用いてください。始めに、未知のブラウザおよびあなたがテストで用いているブラウザの現行バージョンと将来のバージョン向けのデフォルトのコードパスがあります。そして、デフォルトのコードパスが特定のブラウザの過去のバージョンで動作せず、またそのコードパスで機能の欠落を検出することで問題点を発見できないときは、該当する過去のバージョンのブラウザを検出することでそのブラウザ向けのハックを追加してかまいません。</p>
+<p>この提案において、"現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。例えばあなたのデフォルトのコードパスが Firefox Aurora で適切に動作するが、Firefox Beta や最新の release 版では不具合があるためにコードが動作しない場合は、テストを行った Aurora の Firefox バージョン番号を "現行" とみなし、一般向けに公開されていないものであっても Beta のバージョンを "過去" のバージョンと考えてください。</p>
+<h3 id="異なるブラウザ向けに分離したコードパスはむやみに作成しない">異なるブラウザ向けに分離したコードパスはむやみに作成しない</h3>
+<p>関係のあるコードパスの一つがすべてのブラウザで正しく動作するのに、わざわざオブジェクト検出や UA 検出に基づいて異なるコードを実行することは行わないでください。各ブラウザの動作がお互い収束するように変更され、そのために代替のコードパスを設定していたあなたのサイトが正常に動作しなくなってしまう可能性があります。</p>
+<h2 id="テストの実施">テストの実施</h2>
+<h3 id="すべての主要なエンジンについてテストを行う">すべての主要なエンジンについてテストを行う</h3>
+<p>コードは少なくとも Firefox、Chrome または Safari (これらは同じ WebKit エンジンを基にしているため)、Opera、Internet Explorer でテストを行ってください。すべての現行ブラウザや未知のブラウザ向けに単一のコードパスを持つためこの提案に従えば、そのコードパスがすべての主要なエンジンで動作することをテストすることで、コードが将来にわたって動作する可能性がとても高くなります。</p>
+<p>時々、各ブラウザがある機能を若干異なる形で実装します。主要なエンジンすべてで動作する単一のコードパスが得られた場合は、あなたが使用している機能の動作は各ブラウザ間で既に収束していることを意味します。一方、各ブラウザの動作が完全には収束していない場合は、どのエンジンの標準動作を支持するかが判明することに関係なくコードが動作します。</p>
+<h2 id="ブラウザ独自の機能や接頭辞">ブラウザ独自の機能や接頭辞</h2>
+<h3 id="現行あるいは将来のバージョンのブラウザを目標にするハックを行わない">現行あるいは将来のバージョンのブラウザを目標にするハックを行わない</h3>
+<p>これは、現在ある不具合間の相関関係が将来の不具合間の相関関係を暗に示すと考えられている一般的な事例です。現行バージョンでは解決している不具合に関するハックを、過去のバージョンのブラウザに対して適用することは問題ありません。ブラウザが不具合 X を修正すると、不具合 X が存在するリリースすべてには不具合 Y もあることが確実にわかり、不具合 X が存在することを不具合 Y の回避策の適用基準として用いることができます。</p>
+<p>この提案において、前出の UA 検出でのアドバイスのように "現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。</p>
+<h3 id="最新の非標準機能に依存することを避ける">最新の非標準機能に依存することを避ける</h3>
+<p>接頭辞ありの機能であっても、それを使用することは危険です。仕様書の進展に伴い、ブラウザの接頭辞ありの実装が仕様書に追随して変更されることがあります。またその機能が標準化されると、接頭辞ありのバージョンは削除されるでしょう。</p>
+<p>接頭辞が付加された非標準の機能は、実験やフィードバックを行うためにブラウザの開発者が提供しているものであり、一般に展開することを意味していません。これらの機能を使うことを選択した場合は、機能の変更に伴って頻繁にサイトの更新が必要であることを覚悟してください。</p>
+<h3 id="(標準化されていても)_広く実装されていない最新機能を用いる際は縮退処理のテストを行う">(標準化されていても) 広く実装されていない最新機能を用いる際は縮退処理のテストを行う</h3>
+<p>あなたが用いている機能を実装していないブラウザ でどう動作するか (そのようなブラウザを Web サイトの業務で日常使用していない場合は特に)、必ずテストを行ってください。</p>
+<h3 id="ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない">ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない</h3>
+<p>ベンダー接頭辞が付加されている機能は、その動作が将来変更されるかもしれません。ブラウザがある機能を接頭辞なしで公開しても、利用可能であれば接頭辞なし版を常に使用するようにすることで、過去のリリース向けに接頭辞あり版を使用することができます。良い例として、<code>make-it-pretty</code> プロパティの <code>"sometimes"</code> 値について接頭辞あり版とは異なる動作を接頭辞なし版に実装して公開した、<code>-vnd</code> CSS 接頭辞を用いるブラウザベンダー向けの記述を示します:</p>
+<pre class="brush: html">&lt;style&gt;
+  .pretty-element {
+    -vnd-make-it-pretty: sometimes;
+    make-it-pretty: sometimes;
+  }
+&lt;/style&gt;
+</pre>
+<p>上記の例で、規則中の宣言の順番は重要です。接頭辞のないものは、最後に置くことが必要です。</p>
+<h3 id="少なくとも一つのブラウザがサポートするまで、接頭辞のない_CSS_プロパティや_API_は使用しない">少なくとも一つのブラウザがサポートするまで、接頭辞のない CSS プロパティや API は使用しない</h3>
+<p>何らかの機能について接頭辞なし版がある程度広くサポートされるまでは、その動作が突然変更されることがあります。特に、実際に接頭辞なし版をサポートしているブラウザがない機能は使用しないでください。接頭辞あり版の文法と完成版の文法が同じであると考えてはいけません。</p>
+<h2 id="良好なコード">良好なコード</h2>
+<h3 id=">_の欠落を防ぐ"><code>&gt;</code> の欠落を防ぐ</h3>
+<p>検証ツールを用いることがこれを確実にする方法の一つですが、あなたの Web サイト全体を検証しないとしてもすべての <code>&gt;</code> 文字が置かれていることを確認してください。<code>&gt;</code> が欠落していると、後ろのタグの名前が前のタグの属性であると判断されて予期せぬ状況に陥る場合があります。これはしばらくの間は動作するかもしれませんが、仕様書でその属性に意味が与えられると動作しなくなります。以下の例は HTML5 をサポートしないブラウザでは動作しますが、HTML5 をサポートするブラウザでは動作しません:</p>
+<pre class="brush: html">&lt;form action="http://www.example.com"&gt;
+  &lt;input type="submit" value="Submit the form"
+&lt;/form&gt;
+</pre>
+<p>これは <code>input</code> タグで <code>&gt;</code> が欠落しているためです。</p>
+<h3 id="コード中で動作しない実験的な部分は残さない">コード中で動作しない実験的な部分は残さない</h3>
+<p>何か行いたいことがあって CSS プロパティを使用してみたが効果がなかった場合、そのプロパティは削除してください。将来、予期しない動作が発生する可能性があります。</p>
+<p>{{ languages( { "en": "en/Web_development/Writing_forward-compatible_websites"} ) }}</p>