initial commit

20 files changed, 2959 insertions, 0 deletions

diff --git a/files/ja/learn/common_questions/available_text_editors/index.html b/files/ja/learn/common_questions/available_text_editors/index.html
new file mode 100644
index 0000000000..63f591f01a
--- /dev/null
+++ b/files/ja/learn/common_questions/available_text_editors/index.html
@@ -0,0 +1,296 @@
+---
+title: どんなテキストエディタが利用可能ですか？
+slug: Learn/Common_questions/Available_text_editors
+translation_of: Learn/Common_questions/Available_text_editors
+---
+<div>{{IncludeSubnav("/ja/Learn")}}</div>
+
+<div class="summary">
+<p>この記事では Web 開発用のテキストエディタをインストールする際に考慮すべき点をいくつか取り上げます。</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学習の前提:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/ウェブサイトを作成するのにどんなソフトウェアが必要か？">Web サイトを構築するために必要な様々なソフトウェア</a>について知っていること。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習の目標</th>
+   <td>Web 開発者としてのニーズに最適なテキストエディタを選択する方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>Web サイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディタを選びましょう。</p>
+
+<p>テキストエディタは、コンピュータサイエンスにとって基本的なものです（Web 開発はコンピュータサイエンスそのものですよね）。そのため、膨大な選択肢があります。理想を言えば、できるだけ多くのエディタを試して、ワークフローに適したものを見つけるのが良いです。とは言っても、取っ掛かりをつけるため、いくつかの指針をあげることにします。</p>
+
+<p>まず以下の点を検討しましょう。</p>
+
+<ul>
+ <li>どの OS (オペレーティングシステム) を使用するか？</li>
+ <li>どのような技術を扱うのか？</li>
+ <li>テキストエディタに、どのような基本機能を求めるか？</li>
+ <li>テキストエディタの機能を拡張したいか？</li>
+ <li>テキストエディタを使用している間、サポートやヘルプが必要か？</li>
+ <li>テキストエディタの使い勝手は重要か？</li>
+</ul>
+
+<p>ここまでで価格に言及していないことに注目してください。明らかにそれも重要ですが、製品価格は、その品質や機能とはあまり関係ありません。使いやすいテキストエディタを無料で手に入れることも可能なのです。</p>
+
+<p>人気のあるエディタの例を挙げてみましょう：</p>
+
+<table class="standard-table" style="height: 522px; width: 917px;">
+ <thead>
+  <tr>
+   <th scope="col">エディタ</th>
+   <th scope="col">ライセンス</th>
+   <th scope="col">価格</th>
+   <th scope="col">OS</th>
+   <th scope="col">サポート</th>
+   <th scope="col">ドキュメント</th>
+   <th scope="col">機能拡張</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://atom.io/">Atom</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://discuss.atom.io/categories" rel="external">Forum</a></td>
+   <td><a href="https://atom.io/docs/latest/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="https://atom.io/packages">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://brackets.io/" rel="external">Brackets</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
+   <td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td>
+   <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">$99</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">E-mail</a></td>
+   <td><a href="https://panic.com/coda/#book">eBook</a></td>
+   <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
+   <td>GPL 3</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">Mailing list</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Online Manual</a></td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">$75</td>
+   <td>Mac</td>
+   <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">E-mail</a></td>
+   <td>No end user doc,<br>
+    but <a href="http://wiki.macrabbit.com/">plug-in doc</a></td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Mailing list</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
+   <td><a href="https://help.gnome.org/users/gedit/stable/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
+   <td>MPL</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
+   <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Online Manual</a></td>
+   <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows</td>
+   <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
+   <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.pspad.com/">PSPad</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows</td>
+   <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
+   <td><a href="http://gogogadgetscott.info/pspad/">Online Help</a></td>
+   <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">$70</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
+   <td><a href="http://www.sublimetext.com/docs/3/">Official</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> Unofficial</a></td>
+   <td style="text-align: center;"><a href="https://sublime.wbond.net/">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://macromates.com/" rel="external">TextMate</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">$50</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">Mailing list</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
+   <td><a href="http://manual.macromates.com/en/">Online Manual</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
+   <td>クローズドソース</td>
+   <td style="text-align: center;">無料</td>
+   <td>Mac</td>
+   <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
+   <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF Manual</a></td>
+   <td style="text-align: center;">No</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.vim.org/" rel="external">Vim</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Specific open license</a></td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Mailing list</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&amp;direction=descending" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td>
+   <td><a href="https://github.com/microsoft/vscode">Open Source</a> under MIT licence/ Specific licence for product</td>
+   <td style="text-align: center;">無料</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://code.visualstudio.com/docs/supporting/faq">FAQ</a>     </td>
+   <td><a href="https://code.visualstudio.com/docs">Documentation</a></td>
+   <td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">Yes</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="アクティブラーニング">アクティブラーニング</h2>
+
+<p>現在利用可能なアクティブラーニングはありません。<a href="/ja/docs/MDN/Getting_started">貢献を考えてください</a>。</p>
+
+<h2 id="詳しく見てみましょう">詳しく見てみましょう</h2>
+
+<h3 id="エディタを選択する基準">エディタを選択する基準</h3>
+
+<p>それでは、テキストエディタを選ぶとき何を考慮すべきでしょうか？</p>
+
+<h4 id="どの_OS_(オペレーティングシステム)_を使用するか？">どの OS (オペレーティングシステム) を使用するか？</h4>
+
+<p>もちろんそれはあなたの選ぶことです。しかし、特定の OS でしか使えないエディタもあります。そのため、OSを切り替えて開発する場合には、選択肢が狭まります。システム上で実行できるのなら、どんなテキストエディタでも作業を行うことは<em>できます</em>。でも、クロスプラットフォームエディタを使用すると、OS 間の移行が容易になります。</p>
+
+<p>最初に、あなたが使う OS を選びます。次に、検討中のエディタがその OS をサポートしているか確認してください。ほとんどのエディタは  WindowsやMacのサポート状況を、そのWeb サイトで公開しています。OSのバージョンが限定されている （Windows 7 以降のみをサポートし、Vista はサポートしないなど）場合もあります。Ubuntu を使うのなら、Ubuntu ソフトウェアセンター内を検索することをお勧めします。ただし、Linux/UNIX の世界には多様性があり、ディストリビューションが違うと動作も異なったり、パッケージ間の互換性がなかったりします。あまり流通していないテキストエディタに関心を抱いたりすると、自分でソースからコンパイルする羽目になるかもしれません （気の弱い人にはお勧めできません）。</p>
+
+<h4 id="どのような技術を扱うのか？">どのような技術を扱うのか？</h4>
+
+<p>一般論を言えば、テキストエディタなら、どんなテキストファイルでも開くことができます。自分のメモ書き程度なら、それで十分です。しかし、Web開発を行い、{{Glossary("HTML")}}、{{Glossary("CSS")}}、あるいは{{Glossary("JavaScript")}}をで使ったりすると、ファイルはかなり大きくて複雑なものになります。 Webで扱う技術情報に基づいテキストエディタを選択して、作業を簡単にしましょう。多くのテキストエディタには次のようなサポート機能があります。</p>
+
+<ul>
+ <li><strong>コードの着色： </strong>使用する技術のキーワードを着色表示することで、ファイルが読みやすくなります。</li>
+ <li><strong>コードの補完： </strong>よく出てくる構造を自動的に補完して、入力を手助けしてくれます。例えば、 HTMLのタグを自動的に閉じたり、正しいCSS属性の候補を挙げるなど。</li>
+ <li><strong>コードスニペット： </strong>新規にHTML文書を作成していると、同じ構文が何度も出てきます。コードスニペットとして登録した文書の断片を埋めていくことで、何度も入力する労苦から解放されます。</li>
+</ul>
+
+<p>コードの着色はほとんどのテキストエディタがサポートしていますが、他の二つの機能はまだのものが多いのが現状です。使用する予定のテキストエディタが、 {{Glossary("HTML")}}、 {{Glossary("CSS")}}、それに {{Glossary("JavaScript")}}を着色できるか確認しておきましょう。</p>
+
+<h4 id="テキストエディタに、どのような基本機能を求めるか？">テキストエディタに、どのような基本機能を求めるか？</h4>
+
+<p>あなたのニーズと計画によりますが、以下の機能は多くの場合に有用です。I</p>
+
+<ul>
+ <li>文字列の検索と置換。単一ファイル、あるいは複数ファイルにわたって実行できるとよい。検索には{{Glossary("Regular Expression", "正規表現")}}、必要なら他のパターンを使う。</li>
+ <li>指定した行へ移動する。</li>
+ <li>大きなファイルの離れた場所を、画面を分割して表示する。</li>
+ <li>HTMLをブラウザ上で見えるように表示する。</li>
+ <li>散在する文字列を同時に選択する。</li>
+ <li>プロジェクトファイルとディレクトリを表示する。</li>
+ <li>自動整形機能で、コードを読みやすくする。</li>
+ <li>英文などのスペルチェックを行う。</li>
+</ul>
+
+<h4 id="テキストエディタの機能を拡張したいか？">テキストエディタの機能を拡張したいか？</h4>
+
+<p>拡張型のテキストエディタは、標準で組み込まれた機能こそ少ないが、必要に応じて機能を拡張することができます</p>
+
+<p>あなたの開発に必要な機能が明確でなかったり、使いたい機能がエディタに組み込まれていないときは、拡張型のエディタを検討するのがいいです。良いとされているエディタは、プラグインできる機能を多数持っており、自分で必要なものを探してインストールできるものもあります。</p>
+
+<p>多くの機能が必要だが、プラグインが多くなってエディタの動作速度が低下するようなら、統合開発環境（IDE: integrated development environment）を検討してみてください。IDEは、統一したインターフェースで多くのツールを使えるので、初心者には少々荷が重いかもしれません。そういう時は、機能を限定して使えばいいのです。有名なIDEの例を下に挙げておきます。</p>
+
+<ul>
+ <li><a href="http://www.aptana.com/">Aptana Studio</a></li>
+ <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
+ <li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li>
+ <li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li>
+ <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
+ <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
+</ul>
+
+<h4 id="テキストエディタを使用している間、サポートやヘルプが必要か？">テキストエディタを使用している間、サポートやヘルプが必要か？</h4>
+
+<p>一般にソフトウエアを使うときには、ヘルプがあるかないかを知っておくことは重要です。テキストエディタの場合は、以下の二種類のサポートがあるか調べておくといいです。</p>
+
+<ol>
+ <li>ユーザー向けのコンテンツ（FAQ、マニュアル、オンラインヘルプなど）</li>
+ <li>開発者や他のユーザーとのディスカッション（フォーラム、メール、チャットなど）</li>
+</ol>
+
+<p>使いかたを学ぶには、1．のコンテンツを読むのが有効です。インストールや使用上の問題を解決するには、他のユーザーの助けが役に立ちます。</p>
+
+<h4 id="テキストエディタの使い勝手は重要か？">テキストエディタの使い勝手は重要か？</h4>
+
+<p>たしかに、好みの問題かもしれません。いっぽうでは、表示色やボタンの位置など、UI（ユーザーインターフェース）のそこかしこをカスタマイズしたがる人もいます。変更可能な範囲はエディタごとに異なるので、導入前に調べておきましょう。色遣いを変えられるエディタは多くあります。しかし、カスタマイズしたいことがあまり多いようなら、統合開発環境を選んだ方が賢明です。</p>
+
+<h3 id="インストールとセットアップ">インストールとセットアップ</h3>
+
+<p>テキストエディタのインストールは、非常に分かりやすいのが普通です。その方法はプラットフォーム（OS）によって変わりますが、それほど難しいものではありません。:</p>
+
+<ul>
+ <li><strong>Windows： </strong>インストールファイルは通常、<code>.exe</code> や <code>.msi</code> の実行可能ファイルとして提供されます。また、圧縮ファイル（<code>.zip</code>、<code>.7z</code>、<code>.rar</code>など）として提供されることもあります。その場合は、解凍するソフトウエアが別途必要になりますが、<code>.zip</code> ファイルの解凍ソフトはWindowsに標準で付属してきます。</li>
+ <li><strong>Mac： </strong>エディタのWebサイトから、<code>.dmg</code> ファイルをダウンロードします。Apple Storeから簡単にインストールできるエディタもあります。 </li>
+ <li><strong>Linux： </strong>主要なディストリビューションについては、グラフィカルインターフェースのあるパッケージマネージャー（Ubuntu ソフトウエアセンター、mintInstall、GNOME Software、 &amp;cなど）からインストールできます。また、 パケージ済みの<code>.deb</code> や<code>.rpm</code> ファイルとして入手できることもできます。リポジトリサーバーからインストールすることも多いし、最悪の場合ソースコードを自分でコンパイルしなければならないこともあります。テキストエディタのWebサイトにあるインストール手順の説明を、じっくり調べることをお勧めします。</li>
+</ul>
+
+<p>新しいエディタをインストールしても、OSは既定エディタを変更しない限り、OSは前のエディタを使ってテキストファイルを開こうとします。ファイルをダブルクリックしたときに使う規定エディタを変更するには、以下のリンクにある説明を参照してください。</p>
+
+<ul>
+ <li>Windows
+  <ul>
+   <li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
+   <li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
+   <li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">older systems</a></li>
+  </ul>
+ </li>
+ <li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li>
+ <li>Linux
+  <ul>
+   <li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li>
+   <li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li>
+   <li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>良いテキストエディタが見つかったら、<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">基本的な作業環境</a>（テストサーバー）の構築に着手しましょう。あるいは、<a href="/ja/docs/Learn/Getting_started_with_the_web">最初のWebページ</a>を書いてみるのもいいでしょう。。</p>
diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
new file mode 100644
index 0000000000..4c3499402f
--- /dev/null
+++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
@@ -0,0 +1,172 @@
+---
+title: Web サイトが正しく機能することをどうやって確認しますか？
+slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly
+tags:
+  - ガイド
+  - トラブルシューティング
+  - ドキュメント
+  - 初心者
+translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly
+---
+<div class="summary">
+<p>この記事では、Webサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">Web サーバにファイルをアップロードする</a>方法を知る必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>自身の Web サイトで実行できるいくつかの基本的な問題を診断して解決する方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Summary">自身の Web サイトをオンラインで公開しましたか？ 素晴らしい！ ただ、それは適切に動作しているでしょうか？</p>
+
+<p>別の場所にある Web サーバ は、ローカル Web サーバとはまったく異なった動作をすることが多いため、オンラインになったら Web サイトをテストすることをお勧めします。画像が表示されない、ページが読み込まれない、または読み込みが遅くなるなど、多くの問題が発生するのに驚くかもしれません。ほとんどの場合、大したことではなく、簡単な間違いや Web ホスティング設定の問題です。</p>
+
+<p>これらの問題を診断して解決する方法を見てみましょう。</p>
+
+<h2 id="アクティブラーニング">アクティブラーニング</h2>
+
+<p><em>アクティブラーニングはまだありません。 <a href="/en-US/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p>
+
+<h2 id="より深く掘り下げる">より深く掘り下げる</h2>
+
+<h3 id="ブラウザでテストする">ブラウザでテストする</h3>
+
+<p>Web サイトが正しく機能しているかどうかを知りたければ、まずブラウザを起動し、テストしたいページに移動します。</p>
+
+<h4 id="ええと、そのイメージはどこですか？">ええと、そのイメージはどこですか？</h4>
+
+<p>個人的な Web サイト <code>http://demozilla.examplehostingprovider.net/</code> を見てみましょう。予想していた画像ではありません。</p>
+
+<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/9643/image-missing.png" style="height: 189px; width: 380px;"></p>
+
+<p>Firefox のネットワークツール (<strong>ツール</strong> ➤ <strong>Web 開発者</strong> ➤ <strong>ネットワーク</strong>) を開き、ページをリロードします。</p>
+
+<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/9645/error404.png" style="height: 304px; width: 562px;"></p>
+
+<p>一番下に「404」という問題があります。「404」は「リソースが見つかりません」という意味です。そのため、画像が表示されませんでした。</p>
+
+<h4 id="HTTP_ステータス">HTTP ステータス</h4>
+
+<p>サーバは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。</p>
+
+<dl>
+ <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt>
+ <dd>求めているリソースが配信されました。</dd>
+ <dt><strong>301: Moved permanently</strong></dt>
+ <dd>リソースは新しい場所に移動しました。あなたのブラウザでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。</dd>
+ <dt><strong>304: Not modified</strong></dt>
+ <dd>最後にファイルをリクエストしてからファイルが変更されていないため、ブラウザはキャッシュからバージョンを表示できるので、応答時間が短縮され、帯域幅がより効率的に使用されます。</dd>
+ <dt><strong>403: Forbidden</strong></dt>
+ <dd>そのリソースを表示することを許可されていません。通常それは設定ミス (例えばあなたのホスティングプロバイダがディレクトリへのアクセス権を与えるのを忘れた) と関係があります。</dd>
+ <dt><strong>404: Not found</strong></dt>
+ <dd>一目瞭然です。これを解決する方法を以下で説明します。</dd>
+ <dt><strong>500: Internal server error</strong></dt>
+ <dd>サーバで何か問題が発生しました。たとえば、サーバサイドの言語 ({{Glossary("PHP")}}、.Net など) が機能しなくなった、または Web サーバ自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダのサポートチームに頼るのが最善です。</dd>
+ <dt><strong>503: Service unavailable</strong></dt>
+ <dd>通常、短期間のシステム過負荷が原因です。サーバに何らかの問題があります。しばらくしてからもう一度試してください。</dd>
+</dl>
+
+<p>初心者が私たちの (単純な) Web サイトをチェックするとき、私たちは200、304、403、そして404を最もよく扱うでしょう。</p>
+
+<h4 id="404_を修正する">404 を修正する</h4>
+
+<p>では何が悪かったのでしょうか？</p>
+
+<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/9649/demozilla-images-list.png" style="height: 71px; width: 407px;"></p>
+
+<p>一見したところ、私たちが求める画像は正しい場所にあるようです...しかしネットワークツールは「404」を報告しました。 <span class="tlid-translation translation" lang="ja"><span title="">HTML コードに </span></span><code>unicorn_pic.png</code><span class="tlid-translation translation" lang="ja"><span title=""> ではなく </span></span><code>unicorn_pics.png</code><span class="tlid-translation translation" lang="ja"><span title=""> という入力ミスをしたことがわかりました。</span></span>画像の <code>src</code> 属性を変更して、コードエディタのタイプミスを修正します。</p>
+
+<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/9651/code-correct.png" style="height: 125px; width: 775px;"></p>
+
+<p>保存して<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">サーバにプッシュし</a>、ブラウザでページをリロードします。</p>
+
+<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/9655/image-corrected.png" style="height: 554px; width: 565px;"></p>
+
+<p>そこに行きます！{{Glossary("HTTP")}} ステータスをもう一度見てみましょう：</p>
+
+<ul>
+ <li><code>/</code> と <code>unicorn_pic.png</code> が <strong>200</strong> の場合は、ページと画像の再読み込みに成功したことを意味します。</li>
+ <li><code>basic.css</code> の <strong>304</strong>  は、このファイルが最後のリクエスト以降変更されていないことを意味します。したがって、ブラウザは新しいコピーを受信するのではなく、キャッシュ内のファイルを使用できます。</li>
+</ul>
+
+<p>さて、エラーを修正し、途中でいくつかの HTTP ステータスを学習しました。</p>
+
+<h3 id="よくあるエラー">よくあるエラー</h3>
+
+<p>最もよく見かけるエラーはこれらです：</p>
+
+<h4 id="アドレスのタイプミス">アドレスのタイプミス</h4>
+
+<p><code>http://demozilla.examplehostingprovider.net/</code> と入力したいのですが、入力が速すぎて「l」を忘れていました。</p>
+
+<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/9657/cannot-find-server.png" style="height: 425px; width: 908px;"></p>
+
+<p>アドレスが見つかりません。確かに。</p>
+
+<h4 id="404_エラー">404 エラー</h4>
+
+<p>多くの場合、エラーは単にタイプミスが原因ですが、リソースのアップロードを忘れたか、アップロード中にネットワーク接続が切断された可能性もあります。まずファイルパスの綴りと正確さを確認し、それでも問題が解決しない場合は、ファイルをもう一度アップロードしてください。おそらく問題は解決するでしょう。</p>
+
+<h4 id="JavaScript_エラー">JavaScript エラー</h4>
+
+<p>誰か (おそらくあなた) がそのページにスクリプトを追加する中で間違えました。これでページの読み込みが妨げられることはありませんが、問題が発生したと感じるでしょう。</p>
+
+<p>コンソールを開き (<strong>ツール</strong> ➤ <strong>Web 開発者</strong> ➤ <strong>Web コンソール</strong>)、ページをリロードします。</p>
+
+<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/9659/js-error.png" style="height: 511px; width: 523px;"></p>
+
+<p>この例では、エラーが何かを (非常に明確に) 学び、それを修正することができます (<a href="/ja/docs/Learn/JavaScript">別の一連</a>の記事で JavaScript について説明します)。</p>
+
+<h3 id="その他の事項を確認する">その他の事項を確認する</h3>
+
+<p>Web サイトが正しく機能していることを確認する簡単な方法、および発生する可能性がある最も一般的なエラーとそれらの修正方法を示しました。ページがこれらの基準を満たしているかどうかをテストすることもできます。</p>
+
+<h4 id="パフォーマンスはどうですか？">パフォーマンスはどうですか？</h4>
+
+<p>ページの読み込みは十分速いですか？ <a href="http://www.webpagetest.org/">WebPagetest.org</a> のようなリソースや <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> のようなブラウザアドオンをしようすることで、いくつか興味深いことが分かります。</p>
+
+<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p>
+
+<p>グレードは A から F までです。私たちのページはごくわずかで、ほとんどの基準を満たしています。しかし、{{Glossary("CDN")}} を使った方が良いでしょう。1つの画像だけを配信する場合はそれほど重要ではありませんが、広帯域幅の Web サイトで何千もの画像を配信する場合は重要になります。</p>
+
+<h4 id="サーバーは十分に応答しますか？">サーバーは十分に応答しますか？</h4>
+
+<p><code>ping</code> は指定したドメイン名をテストし、サーバが応答しているかどうかを知らせる便利なシェルツールです。</p>
+
+<pre class="line-numbers language-html notranslate"><code class="language-html">$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</code></pre>
+
+<p>便利なキーボードショートカット、すなわち <strong>Ctrl+C</strong> を覚えておいてください。Ctrl+C はランタイムに「割り込み」信号を送り、停止するように伝えます。ランタイムを停止しないと、<code>ping</code> は サーバに無期限に ping を実行します。</p>
+
+<h3 id="簡単なチェックリスト">簡単なチェックリスト</h3>
+
+<ul>
+ <li>404 をチェックします</li>
+ <li>すべての Web ページが期待通りに動作していることを確認します</li>
+ <li>それが一貫してレンダリングすることを確認するためにいくつかのブラウザで Web サイトをチェックしてください</li>
+</ul>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>おめでとうございます、Web サイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。</p>
+
+<ul>
+ <li>人々は世界中からあなたの Web サイトに来ることができるので、あなたはそれを<a href="/ja/docs/Learn/Common_questions/What_is_accessibility">誰にでもアクセス可能</a>にすることを考慮すべきです。</li>
+ <li>Web サイトのデザインは少し荒すぎますか？ <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS についてもっと学ぶ</a>時が来ました。</li>
+</ul>
diff --git a/files/ja/learn/common_questions/common_web_layouts/index.html b/files/ja/learn/common_questions/common_web_layouts/index.html
new file mode 100644
index 0000000000..88fc618791
--- /dev/null
+++ b/files/ja/learn/common_questions/common_web_layouts/index.html
@@ -0,0 +1,108 @@
+---
+title: 一般的な Web レイアウトには何が含まれていますか？
+slug: Learn/Common_questions/Common_web_layouts
+translation_of: Learn/Common_questions/Common_web_layouts
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>When designing pages for your website, it's good to have an idea of the most common layouts.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Make sure you've already thought about <a href="/en-US/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Learn where to put things on your webpages, and how to put them there.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary">Summary</h2>
+
+<p>There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site.</p>
+
+<p>Even now with the new focus on mobile Web, almost all mainstream webpages are built from these parts:</p>
+
+<dl>
+ <dt>Header</dt>
+ <dd>Visible at the top of every page on the site. Contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system.</dd>
+ <dt>Main content</dt>
+ <dd>The biggest region, containing content unique to the current page.</dd>
+ <dt>Stuff on the side</dt>
+ <dd>1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, everything not absolutely required by the page's main content.</dd>
+ <dt>Footer</dt>
+ <dd>Visible at the bottom of every page on the site. Like the header, contains less prominent global information like legal notices or contact info.</dd>
+</dl>
+
+<p>These elements are quite common in all form factors, but they can be laid out different ways. Here are some examples (<strong>1 </strong>represents header, <strong>2 </strong>footer; <strong>A </strong>main content; <strong>B1, B2 </strong>things on the side):</p>
+
+<p><strong>1-column layout.</strong> Especially important for mobile browsers so you don't clutter the small screen up.</p>
+
+<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>2-column layout.</strong> Often used to target tablets, since they have medium-size screens.</p>
+
+<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>3-column layouts</strong>. Only suitable for desktops with big screens. (Even many desktop-users prefer viewing things in small windows rather than full-screen.)</p>
+
+<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p>
+
+<p>The real fun begins when you start mixing them all together:</p>
+
+<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p>
+
+<p>These are just examples and you're quite free to lay things out as you want. You may notice that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. Also, the main content (A) matters most, so give it most of the space.</p>
+
+<p>These are rules of thumb you can draw on. There are complex designs and exceptions, of course. In other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. For now, it's best to keep your layout consistent throughout your site.</p>
+
+<h2 id="Active_learning">Active learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<p>Let's study some more concrete examples taken from well-known websites.</p>
+
+<h3 id="One-column_layout">One-column layout</h3>
+
+<p><strong><a href="http://www.invisionapp.com/" rel="external">Invision application</a></strong>. A typical one-column layout providing all the information linearly on one page.</p>
+
+<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;">        <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Quite straightforward. Just remember, many people will still browse your site from desktops, so make your content usable/readable there as well.</p>
+
+<h3 id="Two-column_layout.">Two-column layout.</h3>
+
+<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, a simple blog layout. Blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads).</p>
+
+<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;">        <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>In this example, look at the image (B1) right underneath the header. It's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. It doesn't really matter. What does matter is, if you put something right under the header, it should either be main content or <em>directly related </em>to the main content.</p>
+
+<h3 id="It's_a_trap">It's a trap</h3>
+
+<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. This is a bit trickier. It looks like a three-column layout...</p>
+
+<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;">        <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p>
+
+<p>...but it's not. B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.</p>
+
+<p>Why would you think it's a three-column layout? Because the image on the top-right is L-shaped, because B1 looks like a column supporting the shifted main content, and because the "M" and "I" of the MICA logo create a vertical line of force.</p>
+
+<p>This is a good example of a classic layout supporting some design creativity. Simple layouts are easier to implement, but allow yourself room to express your creativity in this area.</p>
+
+<h3 id="A_much_trickier_layout">A much trickier layout</h3>
+
+<p><strong>The <a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opera de Paris</a>.</strong></p>
+
+<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;">        <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p>
+
+<p>Basically a two-column layout, but you'll notice many tweaks here and there that visually break up the layout. Especially, the header overlaps the image of the main content. The way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. The Opera example looks more complex than the MICA example, but it's actually easier to implement (all right, "easy" <em>is </em>a relative concept).</p>
+
+<p>As you see, you can craft stunning websites even with just basic layouts. Have a look at your own favorite websites and ask yourself, where's the header, the footer, the main content, and the side content? That will inspire you for your own design and give you good hints for which designs work and which ones don't.</p>
diff --git a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html
new file mode 100644
index 0000000000..7c3da5fc1e
--- /dev/null
+++ b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html
@@ -0,0 +1,219 @@
+---
+title: どのようにすべてのタイプのユーザーを対象に設計できますか？
+slug: Learn/Common_questions/Design_for_all_types_of_users
+translation_of: Learn/Common_questions/Design_for_all_types_of_users
+---
+<div>{{IncludeSubnav("/ja/Learn")}}</div>
+
+<div class="summary">
+<p>この記事ではあらゆる種類のユーザーのための Web サイトを設計する基本的なヒントを紹介します。</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件</th>
+   <td>あなたはすでに<a href="/en-US/Learn/What_is_accessibility">アクセシビリティとは何か？</a>を読んでいますか？,ここではアクセシビリティについて詳細にカバーしていませんので</td>
+  </tr>
+  <tr>
+   <th scope="row">目的</th>
+   <td>ユニバーサルデザインとは、障害や技術的制約にかかわらず、すべての人のためのデザインを意味します。 この記事では、ユニバーサルデザインの最も重要なクイックウィンを紹介します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>ウェブサイトを構築する際に考えなければならない課題のトップの一つが<a href="https://en.wikipedia.org/wiki/Universal_design">ユニバーサルデザイン</a>です。障害、技術的な制約、文化、場所などに関わらず、すべてのユーザーが包含されるものです。</p>
+
+<h2 id="アクティブラーニング">アクティブラーニング</h2>
+
+<p><em>まだ、アクティブラーニングがありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="深く掘っていく">深く掘っていく</h2>
+
+<h3 id="カラーコントラスト">カラーコントラスト</h3>
+
+<p>テキストの読みやすさを維持するためにバックグラウンドカラーと一緒にテキストカラーとのコントラストを良くしなければなりません。視覚的に障害をもつ人々や路上でスマートフォンを使っている人々などを助けるために余計にやさしくしなければなりません。</p>
+
+<p>{{Glossary("W3C")}}は前景と背景の間の明るさの比のアルゴリズムの計算をして良いカラーの混合を定義しました。計算はかなり複雑なように見えますが、私たち自身の仕事で信頼できるツールにできました。 </p>
+
+<p>Pacielloグループ<a href="http://www.paciellogroup.com/resources/contrastanalyser/">カラーコントラストアナライザー</a>をダウンロードしてインストールしてみましょう。</p>
+
+<div class="note">
+<p>注意: あなたはオンライン上でコントラストチェッカーを選択的にウェブ用の<a href="http://webaim.org/resources/contrastchecker/">カラーコントラストチェッカー</a>のようなものをいくつか見つけることができるでしょう。カラーの値を画面上で見つけ出すのでローカルのカラーチェッカーを私たちはお薦めします。</p>
+</div>
+
+<p>例えば、どのようにカラーコントラストアナライザーを使えばいいのかこのページでカラーテストを行ってみましょう。</p>
+
+<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p>
+
+<p>テキストと背景明るさの比は 8.30:1 でそれは最小の標準を超えていて (4.5:1) 、視覚障害のある多くの人でもこのページを読めるようにすべきである。</p>
+
+<h3 id="フォントサイズ">フォントサイズ</h3>
+
+<p>ウェブサイトにおけるフォントサイズの相関位置と絶対位置のどちらも指定することができます。</p>
+
+<h4 id="絶対単位">絶対単位</h4>
+
+<p>絶対単位は比例を計算しません。しかし、サイズをストーンに設定して参照します。そうなので、話すために、そして、ピクセルで示すことが最も多いです。例えばCSSはこのように宣言されています。 </p>
+
+<pre>body { font-size:16px; }</pre>
+
+<p>… あなたがブラウザに言うと何かが起こるかもしれません。フォントサイズは16ピクセルにしなければなりません。モダンブラウザでは100%ズームと要素を設定した時にあなたが要求した16ピクセルのふりをすることによってこのルールを得ているかもしれません。</p>
+
+<p>もう何年間もインターネットエクスプローラーはインターネットエクスプローラー8になるあたりまで断固として16ピクセルは16ピクセルとして表示をしてきました。この場合では拡大することはなく、そしてそれはまだ周りにあることによってそのようにふるまわねばなりません。 </p>
+
+<h4 id="相関単位">相関単位</h4>
+
+<p><em>比例単位</em>と呼ばれているものも、相関単位は親要素に関連して計算されます。相関単位はアクセシビリティに親しみのあるもので、なぜならそれらは、ユーザーシステム上に設定され尊重されるものだからです。 </p>
+
+<p>相関単位は <code>em</code> 、<code>%</code> や <code>rem</code>:で表現されます。</p>
+
+<dl>
+ <dt>Percent-based sizes: <code>%</code></dt>
+ <dd>Thisこの単位は以前の要素で表現されたフォントサイズN%で示すように指示します。 もし、親がない場合、デフォルトのフォントサイズ計算による基本的なサイズがブラウザで考えられます。 (たいてい16ピクセルに同等になります。)</dd>
+ <dt>Em-based sizes: <code>em</code></dt>
+ <dd>This unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. It is said that "em" is the width of a capital “M” in the alphabet (roughly speaking, an “M” fits into a square).</dd>
+ <dt>Rem-based sizes: <code>rem</code></dt>
+ <dd>This unit is proportional to the root element's font size and is expressed as portions of 1, like <code>em</code>.</dd>
+</dl>
+
+<p>Suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a <code>span</code> with the <code>subheading</code> class, it too must be rendered at the default font size (usually 16px).</p>
+
+<p>Here is the HTML we're using:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Font size experiment&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;This is our main heading
+        &lt;span class="subheading"&gt;This is our subheading&lt;/span&gt;
+    &lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>A percent-based CSS will look like this:</p>
+
+<pre>body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */
+</pre>
+
+<p>The same problem expressed with ems:</p>
+
+<pre>body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */</pre>
+
+<p>As you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (Most designs are done in pixel-based software, so the math has to be done by the person coding the CSS).</p>
+
+<p>Enter <code>rem</code>. This unit is relative to the root element's size and not to any other parent. The CSS can be rewritten thus:</p>
+
+<pre>body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */
+h1 { font-size:2rem; } /* twice the size of the body, thus 32 pixels */
+span.subheading { font-size:1rem; } /* original size */</pre>
+
+<p>Easier, isn't it? This works as of <a href="http://caniuse.com/#search=rem">Internet Explorer 9 and in every other current browser</a>, so please feel free to use this unit.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You may notice Opera Mini does not support font sizing in rem. It will end up setting its own font size, so don't bother feeding it font units.</p>
+</div>
+
+<h4 id="Why_would_I_want_to_use_proportional_units">Why would I want to use proportional units?</h4>
+
+<p>Because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. Also, check your website's statistics: you may receive visits from older browsers.</p>
+
+<p>We would advise the following:</p>
+
+<ul>
+ <li>Describe fonts in <code>rem</code> units, most browsers will be very happy with them;</li>
+ <li>Let older browsers display fonts with their own internal engine. Browser's engines will ignore any property or value in the CSS if they can't cope with them, so that your website is still usable if not true to your designer's vision. Older browsers are on the way out anyway.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> Your mileage may vary. If you have to cater to older browsers, you'll have to use <code>em</code>s and do a bit more math.</p>
+</div>
+
+<h3 id="Line_width">Line width</h3>
+
+<p>There is a longstanding debate about line length on the web, but here's the story. Back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. The solution? Columns.</p>
+
+<p>Of course the problem doesn't go away when we switch to the Web. The reader's eyes act like a shuttle going from line to line. To make it easier on people's eyes, limit line width to around 60 or 70 characters.</p>
+
+<p>To achieve this, you can specify a size for your text's container. Let's consider this HTML:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Font size experiment&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;div class="container"&gt;
+    &lt;h1&gt;This is our main heading
+        &lt;span class="subheading"&gt;This is our subheading&lt;/span&gt;
+    &lt;/h1&gt;
+
+    &lt;p&gt;[lengthly text that spans many lines]&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>We have a <code>div</code> with class <code>container</code>. We can style the <code>div</code> either to set its width (using the <code>width</code> property) or its maximum width so that it never gets too large (using the <code>max-width</code> property). If you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the <code>max-width</code> property to allow up to 70 characters per line and no more:</p>
+
+<pre>div.container { max-width:70em; }</pre>
+
+<h3 id="Alternative_content_for_images_audio_and_video">Alternative content for images, audio, and video</h3>
+
+<p>Websites often include stuff besides plain text.</p>
+
+<h4 id="Images">Images</h4>
+
+<p>Images can be either decorative or informative, but there's no guarantee that your users can see them. For example,</p>
+
+<ul>
+ <li>Visually impaired users rely on a screen reader, which can only handle text.</li>
+ <li>Your readers may be using a very strict intranet that blocks images originating from a {{Glossary("CDN")}}.</li>
+ <li>Your readers may have disabled images to save bandwidth, especially on mobile devices (see below).</li>
+</ul>
+
+<dl>
+ <dt>Decorative images</dt>
+ <dd>They're just for decoration and don't convey any real information. They could most often be replaced by a background image. Make sure they feature an empty <code>alt</code> attribute: <code>&lt;img src="deco.gif" alt=""&gt;</code> so they don't clog up the text.</dd>
+ <dt>Informative images</dt>
+ <dd>They are used to convey information, hence their name. They can, for instance, feature a graph, or show a person's gesture, or any other information. At minimum, you must provide a relevant <code>alt</code> attribute.</dd>
+</dl>
+
+<p>If the image can be described succinctly, you can provide an <code>alt</code> attribute and nothing more. If the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a table providing the same data), or resort to a <code>longdesc </code>attribute. This attribute's value is a URL pointing towards a resource explicitly describing in detail the image's content.</p>
+
+<div class="note">
+<p>Note: the use and even the existence of <code>longdesc</code> has been debated for quite some time. Please refer to the W3C's <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> for the full explanation and thorough examples.</p>
+</div>
+
+<h4 id="Audiovideo">Audio/video</h4>
+
+<p>You must also provide alternatives to multimedia content.</p>
+
+<dl>
+ <dt>Subtitling/close-captioning</dt>
+ <dd>You should include captions in your video to cater to visitors who can't hear the audio. Some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train).</dd>
+ <dt>Transcript</dt>
+ <dd>Subtitles only work if somebody watches the video. Many users don't have time, or lack the proper plugin or codec. Additionally, search engines rely mainly on text to index your contents. For all these reasons, please provide a text transcript of the video/audio file.</dd>
+</dl>
+
+<h3 id="Image_compression">Image compression</h3>
+
+<p>Some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile devices. If you want a successful website, please compress your images. There are various tools to help you, either online or local:</p>
+
+<ul>
+ <li><strong>Installed software.</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (all platforms), <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li>
+ <li><strong>Online tools.</strong> Yahoo's <a href="http://smush.it/">smushit!</a>, Dynamic drive's <a href="http://tools.dynamicdrive.com/imageoptimizer/">Online Image Optimizer</a> (which can convert automatically from one format to another if it's more bandwidth-efficient)</li>
+</ul>
diff --git a/files/ja/learn/common_questions/how_does_the_internet_work/index.html b/files/ja/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..73899c4026
--- /dev/null
+++ b/files/ja/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,99 @@
+---
+title: インターネットはどのように動くのか
+slug: Learn/Common_questions/How_does_the_Internet_work
+tags:
+  - WebMechanics
+  - チュートリアル
+  - 初心者
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p>この記事はインターネットの仕組みとどのように動いているかを説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>ありませんが、最初に<a href="/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td><span class="short_text" id="result_box" lang="ja"><span>Web の技術インフラストラクチャの基礎と、インターネットと Web の違いについて学びます。</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p><strong>インターネット</strong>は Web のバックボーンであり、Web を可能にする技術基盤です。<span class="short_text" id="result_box" lang="ja"><span>最も基本的なインターネットは、すべてが一元的に通信を行う大規模なコンピュータネットワークです。</span></span></p>
+
+<p><a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88#%E6%AD%B4%E5%8F%B2" rel="external">インターネットの歴史はやや曖昧です</a>。1960年代に米軍の資金援助を受けて始まった調査プロジェクトに始まり、<span id="result_box" lang="ja"><span>多くの大学と民間企業の支援を受けて1980年代に公共インフラへと発展しました。インターネットを支える様々なテクノロジーは時間の経過とともに進化してきましたが、大きくは変わっていません。インターネットは、コンピュータを一元的に接続し、何が起きても接続を維持する方法を見つけます。</span></span></p>
+
+<h2 id="アクティブ・ラーニング">アクティブ・ラーニング</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: アーロン・タイタスによるインターネットの基礎を理解するための５分間ビデオ。</li>
+</ul>
+
+<h2 id="より深く">より深く</h2>
+
+<h3 id="単純なネットワーク">単純なネットワーク</h3>
+
+<p>２つのコンピューターが通信を必要とする時、物理的に (通常は<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%8D%E3%83%83%E3%83%88#%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB" rel="external">イーサネットケーブル</a>) や無線 (<a href="https://ja.wikipedia.org/wiki/Wi-Fi" rel="external">WiFi</a> や <a href="https://ja.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> など) で接続する必要があります。現在のすべてのコンピュータでは通信を維持することができます。</p>
+
+<div class="note">
+<p><strong>注記 :</strong> 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>このようなネットワークでは２つのコンピューターという制限はありません。あなたの望むように多くのコンピューターに接続することができます。しかしそれはすぐに複雑になります。例えば 10 台のコンピューターに接続しようとした場合、45 本のケーブルとそれぞれのコンピューターに 9 つのプラグ差込口が必要になります。</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>この問題を解決するために、それぞれのコンピュータが<em>ルーター</em>と呼ばれる特別な小さなコンピュータにつなぎます。この<em>ルータ</em>は一つの仕事だけを行います：電車<span id="result_box" lang="ja"><span>の信号機のように、特定のコンピュータから送信されたメッセージが正しい宛先コンピュータに到着することを確認します。</span> <span>コンピュータ B に メッセージを送信するには、コンピュータ A がメッセージをルータに送信し、メッセージをコンピュータ B に転送し、コンピュータ C にメッセージが配信されないようにする必要があります。</span></span></p>
+
+<p>一度ルーターをシステムに追加すると、ネットワークに繋がる 10 個のコンピュータは 10 個のケーブルが必要です。またそれぞれのコンピューターに一つのプラグ差込口が必要でルーターには 10 個のプラグ差込口が必要です。</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="ネットワークのネットワーク">ネットワークのネットワーク</h3>
+
+<p><span id="result_box" lang="ja"><span>ここまでは順調ですね。</span><span>しかし何百、何千、何十億ものコンピュータを接続する場合はどうですか？</span><span>もちろん、1台の</span></span><em>ルーター</em><span lang="ja"><span>ではそれほど規模を拡大することはできませんが、注意深く読んだ場合、</span></span><em>ルーター</em><span lang="ja"><span>は他のコンピュータと同じようにコンピュータと呼ばれており、２台の</span></span><em>ルーター</em><span lang="ja"><span>を接続するのに問題はないのでしょうか？</span><span>何も問題はありません。では、繋いでみましょう。</span></span></p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p><span class="short_text" id="result_box" lang="ja"><span>コンピュータをルータに、そしてルータをルータに接続することで、無限に拡張することができます。</span></span></p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p><span id="result_box" lang="ja"><span>このようなネットワークは、私たちがインターネットと呼ぶものに非常に近いものですが、何かが欠けています。</span><span>私たちは自分自身の目的のためにそのネットワークを構築しました。一方で他のネットワークもあります：あなたの友人、あなたの隣人、誰もが自分のコンピュータのネットワークを持つことができます。しかし、あなたの家と世界の間にケーブルを設置することは実際には可能ではありません。どうすればよいでしょうか？　想像してください。</span><span>あなたの家には電力や電話などといったもののケーブルが接続されています。</span></span><span id="result_box" lang="ja"><span>電話のインフラはすでに世界中の誰かとあなたの家を接続していますので、私たちが欲しい完璧なワイヤーです。</span> <span>私たちのネットワークを電話インフラに接続するには、</span></span><em>モデム</em><span lang="ja"><span>と呼ばれる特別な機器が必要です。</span> <span>このモデムは、私たちのネットワークからの情報を、電話インフラストラクチャによって管理可能な情報に変換します。また、逆もしかりです</span></span><span lang="ja"><span>。</span></span></p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>電話のインフラに接続します。次のステップは、私たちのネットワークから接続できるネットワークにメッセージを送信することです。そのために、ネットワークをインターネットサービスプロバイダ (Internet Service Provider:以下 ISP ) に接続します。ISP は、すべてをリンクする特別な<em>ルーター</em>を管理する会社で、他のISPのルータにもアクセスできます。 したがって、私たちのネットワークからのメッセージは、ISP ネットワークのネットワークを通して宛先のネットワークに運ばれます。インターネットは、このネットワーク全体のインフラで構成されています。</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="コンピューターを探す">コンピューターを探す</h3>
+
+<p>もしコンピューターにメッセージを送りたい場合、どれかを特定する必要があります。 <span id="result_box" lang="ja"><span>したがって、ネットワークにリンクしたコンピュータは、自身を識別するための固有のアドレスがあり、これは「IPアドレス」(IP は</span></span><em>インターネットプロトコル</em><span lang="ja"><span>を意味します) と呼ばれます。</span><span>これは、ドットで区切られた一連の4つの数字からなるアドレスです (例 : </span></span><code>192.168.2.10</code><span lang="ja"><span>)。</span></span></p>
+
+<p><span id="result_box" lang="ja"><span>それはコンピュータにとって完璧ですが、このようなアドレスを人間が</span></span><span lang="ja"><span>覚えることは難しいです。そこで</span></span><span id="result_box" lang="ja"><span>簡単にするために、<em>ドメイン名</em>と呼ばれる人間がわかりやすい名前で IP アドレスを置き換えることができます。</span>例えば<span>、</span></span><code>google.com</code><span lang="ja"><span> はトップの IP アドレス</span></span><code>173.194.121.32</code><span lang="ja"><span>で使用されるドメイン名です。</span><span>ドメイン名を使用することは、インターネット経由でコンピュータにアクセスする最も簡単な方法です。</span></span></p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="インターネットとウェブ">インターネットとウェブ</h3>
+
+<p><span id="result_box" lang="ja"><span>ご存知のとおり、Web ブラウザで Web を閲覧する場合、通常はドメイン名を使用して Web サイトにアクセスします。これはインターネットとウェブが同じである</span></span><span lang="ja"><span>ことを意味するのでしょうか？実はそれほど単純な話ではありません。私たちが見てきたように、インターネットは何十億ものコンピュータをすべて接続できる技術インフラです。</span></span><span id="result_box" lang="ja"><span>これらのコンピュータの中には、一部のコンピュータ (<em>Web サーバー</em>と呼ばれる</span></span><span lang="ja"><span>) が Web ブラウザに分かりやすいメッセージを送信することができます。</span><span><em>インターネット</em>はインフラですが、<em>Web</em> はインフラの上に構築されたサービスです。</span> <span>電子メールや</span></span> {{Glossary("IRC")}} <span lang="ja"><span>など、インターネット上に構築されたいくつかのサービスがあります。</span></span></p>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+ <li><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違いは？</a></li>
+ <li><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは何ですか？</a></li>
+</ul>
diff --git a/files/ja/learn/common_questions/how_much_does_it_cost/index.html b/files/ja/learn/common_questions/how_much_does_it_cost/index.html
new file mode 100644
index 0000000000..d931cb0900
--- /dev/null
+++ b/files/ja/learn/common_questions/how_much_does_it_cost/index.html
@@ -0,0 +1,155 @@
+---
+title: Web で何かをするためにどのくらいコストがかかりますか？
+slug: Learn/Common_questions/How_much_does_it_cost
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Web に参加することは、見かけほど容易ではありません。この記事では、あなたがどのくらい費用をかける必要があるのか、そしてその理由について説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学習の前提:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/ウェブサイトを作成するのにどんなソフトウェアが必要か？">どのソフトウェアが必要か</a>、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイトなどの違い</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは何か</a>を理解しているべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習の目標:</th>
+   <td>Web サイトを作成するための完全なプロセスを確認し、各ステップにかかる費用を確認します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="要約">要約</h2>
+
+<p><span class="seoSummary">Web サイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。</span></p>
+
+<h2 id="ソフトウェア">ソフトウェア</h2>
+
+<h3 id="テキストエディタ">テキストエディタ</h3>
+
+<p>Windows のメモ帳、Linux の Gedit、Mac の TextEdit などのテキストエディタを使った経験はおありでしょう。色分けしたり、文法をチェックしたり、コードの構築を手助けしたりするエディタを選択すれば、コードを書くのが楽になります。</p>
+
+<p>無料のエディタは多くあります。たとえば、<a href="https://atom.io/">Atom</a>、<a href="http://brackets.io/">Brackets</a>、<a href="http://bluefish.openoffice.nl/">Bluefish</a>、<a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>、<a href="http://eclipse.org/">Eclipse</a>、<a href="https://netbeans.org/">Netbeans</a>などです。また<a href="http://www.sublimetext.com/">Sublime Text</a>のように好きなだけ試用できるが、料金を支払ったほうが良いものもあります。なかには、<a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>,のように、購入ライセンスによって、価格が数百円から２万円の間になるものもあります。<a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>は数万円から数十万円しますが、Visual Studio Expressは個人やオープンソースプロジェクトでは無料で使えます。 有料ソフトウエアには、無料の試用期間を設けているものもあります。</p>
+
+<p>最初に何種類かのエディタを試して、用途に合うのはどれか調べるといいでしょう。T {{Glossary("HTML")}}や{{Glossary("CSS")}}、それに{{Glossary("Javascript")}}で簡単なコードを書くのであれば、単純なエディタをお勧めします。</p>
+
+<p>テキストエディタの品質と使いやすさは、あまり価格と連動しません。実際に使ってみて、目的に合うか調べるようにしてください。例えばSublime Textは安価ですが、多くの無料プラグインがあり、拡張性が高いエディタです。</p>
+
+<h3 id="画像エディタ">画像エディタ</h3>
+
+<p>あなたが使用しているシステムには、単純な画像編集ソフトまたはビューアーが搭載されているでしょう。WindowsではPaint、UbuntuではEye of Gnome、MacではPreviewです。これらのプログラムは比較的制限されているので、レイヤー、エフェクト、およびグループ化を追加するなどのために高機能なエディタが、すぐに必要になります。</p>
+
+<p>編集ソフトは無料 (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>)、やや高価 (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, less than $100)、または数百ドル (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>)のものもあります。</p>
+
+<p>これらは似たような機能を持っているので、どれを使用しても構いません。この中には様々な機能を網羅しているソフトもありますが、すべての機能を使う日は決して来ないでしょう。 ある時点で他の設計者とプロジェクトを交換する必要がある場合は、彼らがどのツールを使用しているかを調べる必要があります。 編集ソフトは完成したプロジェクトを標準のファイル形式にエクスポートできますが、各編集ソフトは進行中のプロジェクトを独自の特別な形式で保存します。 インターネット上のほとんどの画像は著作権で保護されているので、使用する前にファイルのライセンスを確認することをお勧めします。 <a href="https://pixabay.com/">Pixabay</a> のようなサイトは、CC0ライセンスの下で画像提供を行なっているので、商用利用のための変更・編集を加えても公開することができます。</p>
+
+<h3 id="メディアエディタ">メディアエディタ</h3>
+
+<p>If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).</p>
+
+<p>For audio files, you can find free software (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), or paying up to a few hundred dollars (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Likewise, video-editing software can be free (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> for Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> for Mac), less than $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), or several hundred dollars (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). The software you received with your digital camera may cover all your needs.</p>
+
+<h3 id="パブリッシングツール">パブリッシングツール</h3>
+
+<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<p>Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.</p>
+
+<p>If you want to install an (S)FTP client, there are several reliable and free options: for example, <a href="https://filezilla-project.org/">FileZilla</a> for all platforms, <a href="http://winscp.net/">WinSCP</a> for Windows, <a href="https://cyberduck.io/">Cyberduck</a> for Mac or Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">and more</a>.</p>
+
+<p>Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.</p>
+
+<h2 id="ブラウザ">ブラウザ</h2>
+
+<p>あなたはすでにブラウザを持っているか、無料でそれを手に入れることができます。必要に応じて、ここから Firefox または Google Chrome をダウンロードしてください。</p>
+
+<h2 id="Web_アクセス">Web アクセス</h2>
+
+<h3 id="コンピュータ_モデム">コンピュータ / モデム</h3>
+
+<p>You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.</p>
+
+<p>Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.</p>
+
+<p>You need to upload content to a remote server (see <em>Hosting</em> below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.</p>
+
+<h3 id="ISP_access">ISP access</h3>
+
+<p>Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:</p>
+
+<ul>
+ <li>Low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some CSS and JavaScript. That will likely cost you a few dozen dollars, including the rent for the modem.</li>
+ <li>On the other hand, you'll need a high-bandwidth connections, such as DSL, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. It could cost the same as low-bandwidth access, upwards to several hundred dollars per month for more professional needs.</li>
+</ul>
+
+<h2 id="Hosting">Hosting</h2>
+
+<h3 id="Understanding_bandwidth">Understanding bandwidth</h3>
+
+<p>Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.</p>
+
+<div class="note">
+<p>Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.</p>
+</div>
+
+<h3 id="Domain_names">Domain names</h3>
+
+<p>Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (<a href="https://www.1and1.com/">1&amp;1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a> for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:</p>
+
+<ul>
+ <li>Local obligations: some country top-level domain names are more costly, as different countries set different prices.</li>
+ <li>Services associated with the domain name: some registrars provide spam protection by hiding your postal address and email address behind their own addresses: the postal address can be provided in care of the registrar, and your email address can be obscured via your registrar's alias.</li>
+</ul>
+
+<h3 id="Do-it-yourself_hosting_vs._“packaged”_hosting">Do-it-yourself hosting vs. “packaged” hosting</h3>
+
+<p>When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), upload pre-made or your own templates.</p>
+
+<p>You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). For the latter, you won't have to pay anything, but you may have less control over templating and other options.</p>
+
+<h3 id="Free_hosting_vs._paid_hosting">Free hosting vs. paid hosting</h3>
+
+<p>You might ask, why should I pay for my hosting when there are so many free services?</p>
+
+<ul>
+ <li>You have more freedom when you pay. Your website is yours, and you can migrate seamlessly from one hosting provider to the next.</li>
+ <li>Free hosting providers may add advertising to your content, beyond your control.</li>
+</ul>
+
+<p>It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is <span>guaranteed </span>by most paid sites. Most hosting providers give you a huge discount to start with.</p>
+
+<p>Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.</p>
+
+<h2 id="Professional_website_agencies_and_hosting">Professional website agencies and hosting</h2>
+
+<p>If you desire a professional website, you will likely ask a web agency to do it for you.<br>
+ <br>
+ Here, costs depend on multiple factors, such as:</p>
+
+<ul>
+ <li>Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website?</li>
+ <li>Will you want to update it regularly? Or will it be a static website?</li>
+ <li>Must the website connect to your company’s IT structure to gather content (say, internal data)?</li>
+ <li>Do you want some shiny new feature that is the rage of the moment? At the time of writing, clients are seeking single pages with complex parallax</li>
+ <li>Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas</li>
+</ul>
+
+<p>...and for hosting:</p>
+
+<ul>
+ <li>Do you want redundant servers, in case your server goes down?</li>
+ <li>Is 95% percent reliability adequate, or do you need professional, around-the-clock service?</li>
+ <li>Do you want high-profile, ultra-responsive dedicated servers, or can you cope with a slower, shared machine?</li>
+</ul>
+
+<p>Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p>
+
+<ul>
+ <li>Read on about <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li>
+ <li>If you're more focused on design, take a look at the <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li>
+</ul>
diff --git a/files/ja/learn/common_questions/html_features_for_accessibility/index.html b/files/ja/learn/common_questions/html_features_for_accessibility/index.html
new file mode 100644
index 0000000000..4139cf51e8
--- /dev/null
+++ b/files/ja/learn/common_questions/html_features_for_accessibility/index.html
@@ -0,0 +1,55 @@
+---
+title: アクセシビリティをよくする HTML の機能にはどんなものがある？
+slug: Learn/Common_questions/HTML_features_for_accessibility
+tags:
+  - Accessibility
+  - Beginner
+  - HTML
+  - Learn
+  - NeedsContent
+translation_of: Learn/Common_questions/HTML_features_for_accessibility
+---
+<p>{{draft}}</p>
+
+<p class="summary">以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。</p>
+
+<h2 id="Tabbing" name="Tabbing">タブ移動</h2>
+
+<p>ポインティングデバイスを使用しない、または使用できないユーザーは、リンクを <kbd>Tab</kbd> で移動できます。なので、リンクは論理的なタブ移動の順序になっている必要があります。<code>tabindex</code> 属性を使用すると、この順序を定義できます。HTML が線形である場合(そうあるべきなのですが)、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="here.html" tabindex="1"&gt;Here&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="there.html" tabindex="3"&gt;There&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="anywhere.html" tabindex="2"&gt;Anywhere&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>この例（これは純粋にデモンストレーションとして使用されています - こうはしないでください）では、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。</p>
+
+<h2 id="Link_Titles" name="Link_Titles">リンクタイトル</h2>
+
+<p>自己記述的ではないリンクがある場合、またはリンク先がより詳細に説明されていることでメリットが得られる場合は、<code>title</code> 属性を使用してリンクに情報を追加できます。</p>
+
+<pre class="brush: html">&lt;p&gt;I'm really bad at writing link text. &lt;a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology."&gt;Click here&lt;/a&gt; to find out more.&lt;/p&gt;</pre>
+
+<h2 id="Access_Keys" name="Access_Keys">アクセスキー</h2>
+
+<p><em>アクセスキー</em>を使用すると、<em>キーボードショートカット</em>をリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが <kbd>Alt</kbd> キーまたは <kbd>Ctrl</kbd> キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。</p>
+
+<pre class="brush: html">&lt;a href="somepage.html" accesskey="s"&gt;Some page&lt;/a&gt;</pre>
+
+<h2 id="Skip_Links" name="Skip_Links">スキップリンク</h2>
+
+<p>タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;The Heading&lt;/h1&gt;
+  &lt;a href="#content"&gt;Skip to content&lt;/a&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!-- navigation stuff --&gt;
+&lt;/nav&gt;
+
+&lt;section id="content"&gt;
+  &lt;!--your content --&gt;
+&lt;/section&gt;</pre>
diff --git a/files/ja/learn/common_questions/index.html b/files/ja/learn/common_questions/index.html
new file mode 100644
index 0000000000..d9990bb91e
--- /dev/null
+++ b/files/ja/learn/common_questions/index.html
@@ -0,0 +1,136 @@
+---
+title: よくある質問
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">学習エリアのこのセクションでは、浮かんでくるかもしれないけれども、学習ルートの本筋 (例 <a href="/ja/docs/Learn/HTML">HTML</a> や <a href="/ja/docs/Learn/CSS">CSS</a> 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。</p>
+
+<h2 id="How_the_Web_works" name="How_the_Web_works">ウェブはどのように動いているのか</h2>
+
+<p>このセクションでは、ウェブのメカニズムについてのウェブのエコシステムや動作に関係する質問に答えます。</p>
+
+<dl>
+ <dt>
+ <h3 id="How_does_the_Internet_work" name="How_does_the_Internet_work"><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどうやって動いているの？</a></h3>
+ </dt>
+</dl>
+
+<dl>
+ <dd><strong>インターネット</strong>は、ウェブの骨組みで、ウェブを可能としている技術的なインフラです。ごく簡単に言うと、インターネットとは、おたがいに通信しあうたくさんのコンピューターが繋がってできた巨大なネットワークです。この記事では、おおまなにインターネットがどのように動いているのかを説明します。</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_Web_server_and_search_engine" name="What_is_the_difference_between_webpage_website_Web_server_and_search_engine"><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">ウェブページ、ウェブサイト、ウェブサーバー、検索エンジン、これらは何が違うの？</a></h3>
+ </dt>
+ <dd>この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどの、ウェブに関係するいろいろな考えについて話します。これらの用語は、ウェブに馴染みのない人にとって、よく混同されたり間違って使われる元になっています。それぞれの意味を発見していきましょう！</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks" name="What_are_hyperlinks"><a href="/ja/docs/Learn/Common_questions/What_is_a_URL">ハイパーリンクって何？</a></h3>
+ </dt>
+ <dd>この記事では、ハイパーリンクがどのようなもので、なぜ大切なのかを説明しています。</dd>
+ <dt>
+ <h3 id="What_is_a_URL" name="What_is_a_URL"><a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL って何？</a></h3>
+ </dt>
+ <dd>{{Glossary("Hypertext")}} と {{Glossary("HTTP")}} では、URL とはインターネットのキーとなる考えです。URL は {{Glossary("Browser","ブラウザー")}} が利用する仕組みで、ウェブ上にあるあらゆるリソースを手に入れるために使われます。</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name" name="What_is_a_domain_name"><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名って何？</a></h3>
+ </dt>
+ <dd>ドメイン名は、インターネットのインフラにとって大切なパーツの一つです。インターネット上のウェブサーバーのために、人が読みやすいアドレスを使えるようにしてくれます。</dd>
+ <dt>
+ <h3 id="What_is_a_Web_server" name="What_is_a_Web_server"><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーって何?</a></h3>
+ </dt>
+ <dd>「ウェブサーバー」という言葉は、ウェブ上でクライアントにウェブサイトを送信するハードウェアまたはソフトウェアを指します。ときにはその両方を指します。この記事では、ウェブサーバーがどのように動いていて、どうして大切なのかを説明しています。</dd>
+</dl>
+
+<h2 id="Tools_and_setup" name="Tools_and_setup">ツールとセットアップ</h2>
+
+<p>ウェブサイトを作るためのツールやソフトウェアに関係する質問です。</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web" name="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">ウェブサイトを作るにはどんなソフトウェアが必要？</a></h3>
+ </dt>
+ <dd>この記事では、ウェブサイトの編集、アップロード、閲覧に、それぞれどのようなソフトウェアコンポーネントが必要になるか説明します。</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website" name="What_software_do_I_need_to_build_a_website"><a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">ウェブ上で何かをするのにどれくらいお金がかかるの？</a></h3>
+ </dt>
+ <dd>ウェブサイトを立ち上げる場合、いっさいお金をかけずにすむこともあれば、高額な費用がかかることもあります。この記事では、ウェブ開発で使用するツールやサービスにどれくらい費用がかかるか、お金をかけた場合、かけなかった場合に、それぞれどのようなことができるか、を説明します。</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available" name="What_text_editors_are_available"><a href="/ja/docs/Learn/Common_questions/Available_text_editors">どんなテキストエディタが必要？</a></h3>
+ </dt>
+ <dd>この記事では、ウェブ開発で使用するテキストエディタを選択、インストールするときに、考慮すべき点について取り上げます。</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools" name="What_are_browser_developer_tools"><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールとは何？</a></h3>
+ </dt>
+ <dd>すべてのブラウザーには、HTML、CSS、その他のウェブ用コードをデバッグするための開発者ツールが用意されています。この記事では、お使いのブラウザーの開発者ツールの基本機能の使い方について説明します。</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly" name="How_do_you_make_sure_your_website_works_properly"><a href="/ja/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">ウェブサイトが意図したとおりに動作しないとき、どうすればいい？</a></h3>
+ </dt>
+ <dd>あなたが開発してオンラインに公開したウェブサイト、本当に意図したとおりに動作していますか？ この記事では、基本的なトラブルシューティングの手順について説明します。</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server" name="How_do_you_set_up_a_local_testing_server"><a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカル環境にテスト用サーバーを用意するには、どうすればいい？</a></h3>
+ </dt>
+ <dd>この記事では、使用中のマシンにローカルテスト用のサーバーを準備し、使用する方法について説明します。</dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_Web_server" name="How_do_you_upload_files_to_a_Web_server"><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">ウェブサーバーにファイルをアップロードするにはどうすればいい？</a></h3>
+ </dt>
+</dl>
+
+<dl>
+ <dd>ウェブサイトをオンラインで公開して、別のコンピューターからアクセスできるようにするには、FTP ツールがよく使用されます。この記事では、FTP ツールを使ってウェブサイトを公開する方法を説明します。</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages" name="How_do_I_use_GitHub_Pages"><a href="/ja/docs/Learn/Common_questions/Using_GitHub_Pages">GitHub ページを使うにはどうすればいい？</a></h3>
+ </dt>
+ <dd>この記事では、GitHub の GitHub ページ (gh-pages) 機能を使ってコンテンツを公開する方法を説明します。</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine" name="How_do_you_host_your_website_on_Google_App_Engine"><a href="/ja/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Google App Engine を使ってウェブサイトを公開するにはどうすればいい？</a></h3>
+ </dt>
+ <dd>作成したウェブサイトを配置する場所をお探しですか？ この記事では、Google App Engine を使ってウェブサイトを公開する (ホスティングする) 手順を説明します。</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance" name="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/ja/docs/Tools/Performance">ウェブサイトのデバッグ／パフォーマンス向上に役立つツールにはどのようなものがある？</a></h3>
+ </dt>
+ <dd>リンク先では、FireFox の開発者ツールを使って、ウェブサイトのデバッグ、パフォーマンス向上を行うための記事が一覧にまとめられています。これらの記事では、メモリーの使用状況、JavaScript の呼び出しツリー、レンダリングされた DOM ノードの数、その他について確認する方法などが紹介されています。</dd>
+</dl>
+
+<h2 id="Design_and_accessibility" name="Design_and_accessibility">デザインとアクセシビリティ</h2>
+
+<p>このセクションでは、ページのデザイン、ページ構成、アクセシビリティについての質問などを取り上げています。</p>
+
+<h3 id="How_do_I_start_to_design_my_website" name="How_do_I_start_to_design_my_website"><a href="/ja/docs/Learn/Common_questions/Thinking_before_coding">ウェブサイトの設計では何から始めればいい？</a></h3>
+
+<dl>
+ <dd>この記事では、すべてのプロジェクトにおいてきわめて重要な第一歩、「そのプロジェクトで何を実現したいのか」を定義する方法を説明します。</dd>
+ <dt>
+ <h3 id="What_do_common_Web_layouts_contain" name="What_do_common_Web_layouts_contain"><a href="/ja/docs/Learn/Common_questions/Common_web_layouts">よくあるウェブページのレイアウトには何が含まれてる？</a></h3>
+ </dt>
+ <dd>ウェブサイトを設計するとき、まずは一般的なレイアウトについて知っておくとよいでしょう。この記事では、よくあるウェブレイアウトについていくつか取り上げ、どのような要素で構成されているかを見ていきます。</dd>
+ <dt>
+ <h3 id="What_is_accessibility" name="What_is_accessibility"><a href="/ja/docs/Learn/Common_questions/What_is_accessibility">アクセシビリティって何？</a></h3>
+ </dt>
+ <dd>この記事では、ウェブアクセシビリティの基本的な概念について紹介します。</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users" name="How_can_we_design_for_all_types_of_users"><a href="/ja/docs/Learn/Common_questions/Design_for_all_types_of_users">どんなユーザーでも使えるようにデザインするにはどうすればいい？</a></h3>
+ </dt>
+ <dd>この記事では、どのようなユーザーでも利用できるウェブサイトを作成するための基本的なテクニックを説明します。これには、手軽にアクセシビリティを実現する方法や、その他の情報などが含まれます。</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility" name="What_HTML_features_promote_accessibility"><a href="/ja/docs/Learn/Common_questions/HTML_features_for_accessibility">アクセシビリティをよくする HTML の機能にはどんなものがある？</a></h3>
+ </dt>
+ <dd>この記事では、さまざまな障害をもつユーザーがよりウェブサイトを利用しやすいよう使用される、各種の HTML の機能について説明します。</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions" name="HTML_CSS_and_JavaScript_questions">HTML、CSS、JavaScript の質問</h2>
+
+<p>HTML/CSS のよくある問題の解決方法については、次の記事を読んでみてください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Howto">よくある問題の解決に HTML を使う</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Howto">よくある問題の解決に CSS を使う</a></li>
+ <li>
+  <p><a href="/ja/docs/Learn/JavaScript/Howto">よくある問題の解決に JavaScript を使う</a></p>
+ </li>
+</ul>
diff --git a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..34646a106f
--- /dev/null
+++ b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,120 @@
+---
+title: ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？
+slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
+tags:
+  - NeedsActiveLearning
+  - WebMechanics
+  - 初心者
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p><span class="seoSummary">この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどのウェブに関係する色々な概念に関して解説します。これらの用語はウェブの初心者を混乱させたり、間違って使われたりしています。それぞれの意味を学びましょう。</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどのように動くのか</a>を知っておく必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いを説明できるようになること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary" name="Summary">要約</h2>
+
+<p>あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく (興味をお持ちなら<a href="/ja/docs/Glossary">用語集</a>があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。</p>
+
+<p>これらの用語と技術の詳細に関して詳しく説明しますが、これらを簡単に定義することが良いスタートるになるでしょう。</p>
+
+<dl>
+ <dt>ウェブページ</dt>
+ <dd>Firefox や Google Chrome、Opera、Microsoft Internet Explorer、Edge、Apple の Safari などのウェブブラウザーで表示可能な文書です。これらはよく単に「ページ」とも呼ばれることもあります。</dd>
+ <dt>ウェブサイト</dt>
+ <dd>グループ化され、通常はさまざまな方法で一緒に接続されたウェブページの集まりです。よく「ウェブサイト」または単に「サイト」と呼ばれます。</dd>
+ <dt>ウェブサーバー</dt>
+ <dd>インターネット上でウェブサイトをホスティングするコンピューターです。</dd>
+ <dt>検索エンジン</dt>
+ <dd>他のウェブページを見つけるのに役立つウェブサービスで、 Google、Bing、Yahoo、DuckDuckGo などがあります。検索エンジンは通常、ウェブブラウザーから (例えば、Firefox、Chrome などのアドレスバーで直接検索エンジンによる検索を実行することができる)、またはウェブページ (例えば <a href="https://www.bing.com/">bing.com</a> や <a href="https://duckduckgo.com/">duckduckgo.com</a>) を介してアクセスされます。</dd>
+</dl>
+
+<p>公共図書館に簡単に例えてみましょう。図書館に行ったときに一般的に行うことは次の通りです。</p>
+
+<ol>
+ <li>検索インデックスを探して、読みたい書籍のタイトルを探します。</li>
+ <li>その書籍のカタログ番号をメモします。</li>
+ <li>書籍が収蔵されている特定の書架へ行き、カタログ番号を見つけて、本を入手します。</li>
+</ol>
+
+<p>ウェブサーバーと図書館を比較してみましょう。</p>
+
+<ul>
+ <li>図書館はウェブサーバーのようなものです。いくつかの書架があり、複数のウェブサイトをホスティングしているウェブサーバーに似ています。</li>
+ <li>図書館の様々な書架 (科学、数学、歴史など) はウェブサイトのようなものです。それぞれの書架は個々のウェブサイトのようなものです (同じ本が複数の書架にあることはありません)。</li>
+ <li>それぞれの書架にある書籍はウェブページのようなものです。1 つのウェブサイトに複数のウェブページがあることがあります。たとえば、科学の書架 (ウェブサイト) には、熱、音、熱力学、静力学などに関する書籍があります (ウェブページ)。ウェブページはそれぞれ固有の場所 (URL) で見つかります。</li>
+ <li>検索インデックスは検索エンジンのようなものです。それぞれの書籍は図書館内にカタログ番号で特定できる独自の場所にあります (同じ場所に2冊の本を保管することはできません)。</li>
+</ul>
+
+<h2 id="Active_learning" name="Active_learning">アクティブラーニング</h2>
+
+<p><em>利用可能なアクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">ぜひ協力をご検討ください</a>。</em></p>
+
+<h2 id="Deeper_dive" name="Deeper_dive">より深い追求</h2>
+
+<p>それでは、それらの 4 つの用語がどのように関連しているのか、なぜそれらが互いに混同されているのかについて詳しく調べてみましょう。</p>
+
+<h3 id="web_page" name="web_page">ウェブページ</h3>
+
+<p><strong>ウェブページ</strong>は{{Glossary("browser","ブラウザー")}}で表示することができる簡単な文書です。文書は {{Glossary("HTML")}} 言語で書かれています (<a href="/ja/docs/Web/HTML">他の記事</a>で詳しく説明しています)。ウェブページには、次のような様々な種類のリソースを埋め込むことができます。</p>
+
+<ul>
+ <li><em>スタイル情報</em> — ページの見た目の制御</li>
+ <li><em>スクリプト</em> — ページへのインタラクティブ機能を追加</li>
+ <li><em>メディア</em> — 画像、音楽、動画など</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ: </strong>ブラウザーは {{Glossary("PDF")}} ファイルや画像などのような他の文書も表示することができますが、<strong>ウェブページ</strong>という用語は、特に HTML 文書を指します。それ以外の場合、単に<strong>文書 (またはドキュメント)</strong> という用語を使用します。</p>
+</div>
+
+<p>ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達することができます。ページにアクセスするには、そのアドレスをブラウザーのアドレスバーに入力するだけです。</p>
+
+<p style="text-align: center;"><img alt="ブラウザーのアドレスバーにあるウェブページのアドレスの例" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
+
+<h3 id="Web_site" name="Web_site">ウェブサイト</h3>
+
+<p><em>ウェブサイト</em>はリンクされたウェブページ (および関連するリソース) の集合で、固有のドメイン名を共有しています。指定されたウェブサイトの各ウェブページは明示的なリンク — 多くの場合はクリック可能なテキストの部分の形 — を提供しており、ユーザーがウェブサイトのあるページから他のページに移動することができます。</p>
+
+<p>ウェブサイトにアクセスするために、ブラウザーのアドレスバーにドメイン名を入力すると、ブラウザーはウェブサイトのメインウェブページ、または<em>ホームページ</em> (略して「ホーム」と呼ばれる) を表示します。</p>
+
+<p><img alt="ブラウザーのアドレスバーにあるウェブサイトのドメイン名の例" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
+
+<p><em>ウェブページ</em>と<em>ウェブサイト</em>は、特に1枚だけの<em>ウェブページ</em>を含む<em>ウェブサイト</em>である場合に混同しやすくなります。このようなウェブサイトは<em>単一ページのウェブサイト</em>と呼ばれることがあります。</p>
+
+<h3 id="Web_server" name="Web_server">ウェブサーバー</h3>
+
+<p><em>ウェブサーバー</em>は、1つ以上の<em>ウェブサイト</em>をホスティングするコンピューターです。「ホスティング」はすべての<em>ウェブページ</em>や補助的なファイルをコンピューター上で利用できるようにするという意味です。<em>ウェブサーバー</em>は、任意のユーザーのリクエストに応じて、ホスティング中の<em>ウェブサイト</em>から任意の<em>ウェブページ</em>をユーザーのブラウザーに送信します。</p>
+
+<p><em>ウェブサイト</em>と<em>ウェブサーバー</em>を混同しないようにしてください。例えば、誰かが「私のウェブサイトから応答がありません」と言うのを聞いた場合、実際には<em>ウェブサーバー</em>が応答していないのであり、その結果として<em>ウェブサイト</em>が利用できないのです。もっと重要なことは、ウェブサーバーは複数のウェブサイトをホスティングすることができるため、<em>ウェブサーバー</em>という言葉はウェブサイトを特定するために使用することはできず、大きな混乱を招く可能性があります。先に挙げた例で、「私のウェブサイトから応答がありません」と言った場合、そのウェブサーバー上のウェブサイトがすべて利用できないことになります。</p>
+
+<h3 id="Search_engine" name="Search_engine">検索エンジン</h3>
+
+<p>検索エンジンはよくウェブに関する誤解のもとになります。検索エンジンは特殊な種類のウェブサイトで、ユーザーが<em>他の</em>ウェブサイトを見つけるのを助けるものです。</p>
+
+<p><a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> など、たくさんあります。一般的なものもあれば、特定のトピックについて専門化されたものもあります。好きなものを使いましょう。</p>
+
+<p>多くのウェブの初心者は、検索エンジンとブラウザーを混同しています。明確にしましょう。<em><strong>ブラウザー</strong></em>はソフトウェアの一つで、ウェブページを受け取り表示するものです。<strong><em>検索エンジン</em></strong>はウェブサイトであり、人々が他のウェブサイトからウェブページを探すのを手助けします。この混乱は、ブラウザーを起動したとき、ブラウザーが検索エンジンのホームページを表示しているために発生します。これは、ブラウザーで最初にやりたいことが表示させるウェブページであることが明らかであるため、よく分かります。インフラ (ブラウザーなど) とサービス (検索エンジンなど) を混同しないでください。この区別はかなり役立ちますが、専門家によっては曖昧に話すこともあるので、心配しないでください。</p>
+
+<p>こちらは、 Firefox のインスタンスが既定のスタートアップページとして Google 検索ボックスを表示している様子です。</p>
+
+<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
+
+<h2 id="Next_steps" name="Next_steps">次の段階</h2>
+
+<ul>
+ <li>より深く掘り下げる: <a href="/docs/Learn/What_is_a_web_server">ウェブサーバーって何？</a></li>
+ <li>ウェブページがどのようにウェブサイトにリンクされているかを見る: <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブのリンクを理解する</a></li>
+</ul>
diff --git a/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..fc0c346dfd
--- /dev/null
+++ b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,110 @@
+---
+title: ローカルのテストサーバーはどのようにセットアップしますか？
+slug: Learn/Common_questions/set_up_a_local_testing_server
+tags:
+  - Express
+  - Flask
+  - Node
+  - PHP
+  - Python
+  - django
+  - lamp
+  - サーバ
+  - サーバーサイド
+  - 初心者
+  - 学習
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>この記事では、マシン上に簡単なローカルテストサーバを設定する方法と、その使い方の基本について説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>最初に<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>や <a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバについて</a>知っておく必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ローカルのテストサーバを設定する方法を学習します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ローカルファイルとリモートファイル">ローカルファイルとリモートファイル</h2>
+
+<p>ほとんどの学習領域では、ブラウザでサンプルを直接開くだけで済みます。HTML ファイルをダブルクリックするか、ブラウザウィンドウにドラッグ ＆ ドロップするか、ファイル &gt; 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。</p>
+
+<p>Web アドレスのパスが <code>file://</code> で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、GitHub でホストされている例 (または他のリモートサーバの例) を見ると、Web アドレスは <code>http://</code> または <code>https://</code> で始まっており、ファイルが HTTP 経由で受信されたことを示します。</p>
+
+<h2 id="ローカルファイルのテストに関する問題">ローカルファイルのテストに関する問題</h2>
+
+<p>一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、</p>
+
+<ul>
+ <li><strong>それらは非同期リクエストを特徴とします。</strong>一部のブラウザ (Chrome を含む) は、ローカルファイルからサンプルを実行するだけでは非同期リクエストは実行しません (<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータの取得</a>を参照)。これはセキュリティ上の制限があるためです (Web セキュリティの詳細については、<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Web サイトのセキュリティ</a>を参照してください)</li>
+ <li><strong>それらはサーバサイドの言語を備えています。</strong>サーバサイドの言語 (PHP や Python など) では、コードを解釈して結果を提供する特別なサーバが必要です</li>
+</ul>
+
+<h2 id="シンプルなローカル_HTTP_サーバの実行">シンプルなローカル HTTP サーバの実行</h2>
+
+<p>非同期リクエストの問題を回避するには、ローカル Web サーバを介して実行することによって、そのようなサンプルをテストする必要があります。私たちの目的のためにこれを行う最も簡単な方法の1つは、Python の <code>SimpleHTTPServer</code> モジュールを使うことです。</p>
+
+<p>これをするためには：</p>
+
+<ol>
+ <li>
+  <p>Python をインストールします。Linux または Mac OS X を使用している場合は、既にシステム上で使用可能になっているはずです。Windows ユーザの方は、Python ホームページからインストーラを入手し、インストーラの指示に従ってインストールすることができます：</p>
+
+  <ul>
+   <li><a href="https://www.python.org/">python.org</a> に進みます</li>
+   <li>ダウンロードセクションの下で、Python "3.xxx" のリンクをクリックします</li>
+   <li>ページ下部の Windows x86 実行可能インストーラを選択してダウンロードします</li>
+   <li>ダウンロードしたら、それを実行します</li>
+   <li>インストーラの最初のページで、"Add Python 3.xxx to PATH" チェックボックスをオンにします</li>
+   <li>[インストール]をクリックし、インストールが完了したら[閉じる]をクリックします</li>
+  </ul>
+ </li>
+ <li>
+  <p>コマンドプロンプト (Windows)/ターミナル (OS X/Linux) を開きます。Python がインストールされていることを確認するには、次のコマンドを入力します</p>
+
+  <pre class="brush: bash">python -V</pre>
+ </li>
+ <li>
+  <p>これによりバージョン番号が返されます。OK の場合は、<code>cd</code> コマンドを使用してサンプルが入っているディレクトリに移動します</p>
+
+  <pre class="brush: bash"># include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..</pre>
+ </li>
+ <li>
+  <p>ディレクトリの中でサーバを起動するコマンドを入力します</p>
+
+  <pre class="brush: bash"># If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>デフォルトでは、これはローカル Web サーバ上のディレクトリの内容を 8000 番ポート上で実行します。このサーバにアクセスするには、Web ブラウザで <code>localhost:8000</code> のURL に移動します。ここにディレクトリの内容が表示されるので、実行する HTML ファイルをクリックします</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>メモ</strong>: すでに 8000 番ポートで何かが稼働している場合は、server コマンドを実行して別のポート番号を選択することができます。例えば <code>python3 -m http.server 7800</code> (Python 3.x) または <code>python -m SimpleHTTPServer 7800</code> (Python 2.x) です。これで <code>localhost:7800</code> でコンテンツにアクセスできます。</p>
+</div>
+
+<h2 id="サーバサイドの言語をローカルで実行する">サーバサイドの言語をローカルで実行する</h2>
+
+<p>Python の SimpleHTTPServer (python 2.0) http.server (python 3.0) モジュールは便利ですが、Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバサイドの言語に依存します。いくつかの例があります：</p>
+
+<ul>
+ <li>Python のサーバサイドコードを実行するには、Python Web フレームワークを使用する必要があります。Django フレームワークの使い方については、<a href="/ja/docs/Learn/Server-side/Django">Django Web Framework (Python)</a> を参照してください。<a href="http://flask.pocoo.org/">Flask</a> はまた、Django の代わりとしても良い (わずかに重量の少ない) 代替品です。これを実行するには <a href="/ja/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP をインストール</a>し、 <code>pip3 install flask</code> を使用して Flask をインストールする必要があります。この段階で、<code>python3 python-example.py</code> を使ってPython Flaskのサンプルを実行し、ブラウザの <code>localhost:5000</code> に遷移することができます</li>
+ <li>Node.js (JavaScript) サーバサイドコードを実行するには、生のノードまたはその上に構築されたフレームワークを使用する必要があります。Express は良い選択です - <a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a> を参照してください</li>
+ <li>PHP サーバサイドコードを実行するには、<a href="http://php.net/manual/ja/features.commandline.webserver.php">PHP の組み込み開発サーバ</a>を起動します</li>
+</ul>
+
+<pre class="shellcode">$ cd path/to/your/php/code
+$ php -S localhost:8000</pre>
diff --git a/files/ja/learn/common_questions/thinking_before_coding/index.html b/files/ja/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..ec555fe4c4
--- /dev/null
+++ b/files/ja/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,177 @@
+---
+title: どのように Web サイトのデザインを始めるのか?
+slug: Learn/Common_questions/Thinking_before_coding
+tags:
+  - Beginner
+  - Composing
+  - NeedsActiveLearning
+  - needsSchema
+  - 初心者
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">この記事では、すべてのプロジェクトの重要な第一歩として、そのプロジェクトで達成したいことを定義します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">目的</th>
+   <td>目標を定義してウェブプロジェクトの方向性を明らかにする方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p><span class="seoSummary">ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。</span></p>
+
+<p>あなたがアイデアを得てそれをウェブサイトにしたいときには、何かをする前に答えるべきいくつかの質問があります：</p>
+
+<ul>
+ <li>本当にしたいことは何ですか？</li>
+ <li>ウェブサイトは目標達成にどのように役立つでしょうか？</li>
+ <li>目標を達成するために何をどのような順序で実行する必要がありますか？</li>
+</ul>
+
+<p>これらはすべてプロジェクトのアイデア化と呼ばれ、初心者であれ、経験豊富な開発者であれ、目標を達成するための最初のステップです。</p>
+
+<h2 id="アクティブラーニング">アクティブラーニング</h2>
+
+<p><em>アクティブラーニングはまだありません。<a href="https://developer.mozilla.org/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="より深いダイビング">より深いダイビング</h2>
+
+<p>プロジェクトは技術的側面から始まることはありません。ミュージシャンは、最初にプレイしたいことのアイデアがない限り、決して音楽を作ってはいけません。これは画家、作家、ウェブ開発者にとっても同じことです。テクニックは 2番目に来ます。</p>
+
+<p>技術は明らかに重要です。ミュージシャンは楽器をマスターする必要があります。しかし、良いミュージシャンは、アイデアなしに良い音楽を生み出すことはできません。したがって、コードやツールなどの技術的な側面に飛び込む前に最初のステップに戻り、実行したいことを詳細に決定する必要があります。</p>
+
+<p>はじめに友人と 1時間ディスカッションするのは良いことですが、不十分です。<span class="tlid-translation translation"><span title="">自分のアイデアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイデアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。</span></span></p>
+
+<div class="note">
+<p><strong>メモ:</strong> プロジェクトのアイデア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルが<a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">プロジェクトの理念</a>、<a href="http://en.wikipedia.org/wiki/Project_planning">プロジェクト計画</a>、および<a href="http://en.wikipedia.org/wiki/Project_management">プロジェクト管理</a>と呼ぶものを処理する簡単な方法を紹介します。</p>
+</div>
+
+<h3 id="本当にしたいことは何ですか？">本当にしたいことは何ですか？</h3>
+
+<p>他のすべてを動かすので、これは答えるべき最も重要な問いです。到達したいすべての目標を列挙してください。お金を稼ぐための商品の販売、政治的意見の表明、新しい友達の会合、ミュージシャンとのギグ、猫の写真の収集など、それは何でもかまいません。</p>
+
+<p>あなたがミュージシャンだとしましょう。あなたは次のことができます：</p>
+
+<ul>
+ <li>人々にあなたの音楽を聞いてもらう</li>
+ <li>グッズを売る</li>
+ <li>他のミュージシャンに会う</li>
+ <li>あなたの音楽について話す</li>
+ <li>ビデオを通して音楽を教える</li>
+ <li>あなたの猫の写真を公開する</li>
+ <li>新しいガールフレンド/ボーイフレンドを探す</li>
+</ul>
+
+<p>そのようなリストを取得したら優先順位を付ける必要があります。目標を最も重要なものからそうでないものに順番に並べます。</p>
+
+<ol>
+ <li>新しいガールフレンド/ボーイフレンドを探す</li>
+ <li>人々にあなたの音楽を聞いてもらう</li>
+ <li>あなたの音楽について話す</li>
+ <li>他のミュージシャンに会う</li>
+ <li>グッズを売る</li>
+ <li>ビデオを通して音楽を教える</li>
+ <li>あなたの猫の写真を公開する</li>
+</ol>
+
+<p>このシンプルなエクササイズ−−目標を作成し、並び替えること−−は意思決定をするうえでの助けになります。(これらの機能を実装し、これらのサービスを使用して、これらのデザインを作成しますか？)</p>
+
+<p>これで、優先順位付けされた目標リストが作成されたので、次の質問に移りましょう。</p>
+
+<h3 id="ウェブサイトを使ってどのように目標を達成する？">ウェブサイトを使ってどのように目標を達成する？</h3>
+
+<p>あなたは目標のリストを持っており、それらの目標を達成するためにウェブサイトが必要だと感じます。本気ですか？</p>
+
+<p>例を振り返りましょう。音楽に関連する 5 つの目標があります。私生活に関連した1つの目標 (あなたの重要な他者を見つけること)、そして全く無関係の猫の写真です。これらすべての目標をカバーするために単一のウェブサイトを構築することは合理的ですか？それも必要ですか？結局のところ、既存のウェブサービスのスコアは、新しいウェブサイトを構築せずにあなたを目標に導くかもしれません。</p>
+
+<p>ガール/ボーイフレンドを見つけることは、まったく新しいサイトを構築するのではなく、既存のリソースを使用することが理にかなっている主要なケースです。どうして？なぜなら、実際にガール/ボーイフレンドを探すよりも、ウェブサイトの構築と保守に多くの時間を費やすからです。私たちの目標は最も重要なものなので、ゼロから始めるのではなく、既存のツールを活用することに力を注ぐべきです。繰り返しになりますが、写真を紹介するためにすでにたくさんのウェブサ ービスが用意されているので、新しいサイトを構築するだけの価値はありません。</p>
+
+<p>他の 5 つの目標はすべて音楽に関連しています。もちろん、これらの目標に対応できるウェブサービスは数多くありますが、この場合は専用のウェブサイトを構築することが理にかなっています。このようなウェブサイトは、私たちが 1 つの場所 (目標 3,5、および 6 に適しています) に公開し、私たちと公共の間の交流を促進する (目標2 と 4 に良い) すべてのものを集約する最良の方法です。一言で言えば、これらの目標はすべて同じトピックを中心にしているため、すべてを 1 か所にまとめて目標を達成し、フォロワーが私たちとつながるのを助けます。</p>
+
+<p>ウェブサイトはどのように私の目標を達成するのに役立ちますか？それに答えることによって、あなたの目標に到達し、無駄な労力から自分自身を救う最良の方法を見つけることができます。</p>
+
+<h3 id="目標を達成するために何をどのような順序で実行する必要がありますか？">目標を達成するために何をどのような順序で実行する必要がありますか？</h3>
+
+<p>あなたが達成したいことが分かったら、今度はその目標を実行可能なステップに変えてください。副題として、あなたの目標は必ずしも石で設定されているわけではありません。プロジェクトの中でも、予期せぬ障害物が横切ったり、心が変わったりしても、時間の経過と共に進化します。</p>
+
+<p>長い説明をするのではなく、この表の例に戻ってみましょう。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">目標</th>
+   <th scope="col">すべきこと</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">人々にあなたの音楽を聞いてもらう</td>
+   <td>
+    <ol>
+     <li>音楽を録音する</li>
+     <li>オンラインで使用可能なオーディオファイルをいくつか準備します (既存のウェブサービスでこれを行うことができますか？)</li>
+     <li>あなたのウェブサイトのどこかであなたの音楽に他の人がアクセスできるようにする</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">あなたの音楽について話す</td>
+   <td>
+    <ol>
+     <li>ディスカッションを始めるためにいくつかの記事を書く</li>
+     <li>記事の外観を定義する</li>
+     <li>それらの記事をウェブサイトに公開する(これを行う方法は？)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">他のミュージシャンに会う</td>
+   <td>
+    <ol>
+     <li>他の人があなたに連絡する方法を提供します (E メール？Facebook？電話？手紙？)</li>
+     <li>人々があなたのウェブサイトからそれらの連絡先チャンネルをどのように見つけるかを定義する</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">グッズを売る</td>
+   <td>
+    <ol>
+     <li>グッズを作る</li>
+     <li>グッズを保管する</li>
+     <li>配送を処理する方法を見つける</li>
+     <li>支払いを処理する方法を見つける</li>
+     <li>あなたのサイトに人々が注文するためのメカニズムを作ります</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">ビデオを通して音楽を教える</td>
+   <td>
+    <ol>
+     <li>ビデオレッスンを録画する</li>
+     <li>オンラインで表示可能なビデオファイルを準備します (これも既存のウェブサービスで可能ですか？)</li>
+     <li>あなたのウェブサイトのどこかであなたのビデオに他の人がアクセスできるようにする</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>気づくべき 2 つのことがあります。第1 に、これらのアイテムの一部はウェブ関連 (例えば音楽を録音し、記事を書く) ではありません。これらのオフライン活動は、プロジェクトのウェブ側よりも重要な役割を果たすことがよくあります。たとえば、販売では、人々が注文するウェブサイトを構築するよりも、供給、支払い、出荷を処理する方がはるかに重要で時間がかかります。</p>
+
+<p>第2 に、実行可能なステップを設定することで、答える必要がある新しい質問につながります。通常、当初考えていたよりも多くの疑問が出てきます。(例えば、これをすべて自分で行う方法を学ぶべきか、誰かにそれをさせるか、サードパーティサービスを使用するように頼んでください)。</p>
+
+<h2 id="結論">結論</h2>
+
+<p>ご覧のとおり、「ウェブサイトを作ってみたい」というシンプルなアイデアでも、考えれば考えるほど ToDo リストが長くなっていきます。嘆きたくなるでしょうが、パニックになる必要はありません。すべての質問に答える必要も、リストの項目の全てを行う必要もありません。大切なことは、あなたは何がしたくて、どのように到達するかというビジョンを持てるかどうかなのです。クリアなビジョンを頭に入れたら、それをいつ、どのように行うかを決める事が必要です。 簡単にはできないような大きなタスクは、実行可能な小さなステップに分割しましょう。小さなステップを一つずつこなすことで、ついには大きな成果を達成することができるでしょう。</p>
+
+<p>この記事から、ウェブサイトを作成するための大まかな計画を立てることができるはずです。次の記事は、<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>です。</p>
diff --git a/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..92c533f108
--- /dev/null
+++ b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,177 @@
+---
+title: どのようにファイルを Web サーバにアップロードしますか？
+slug: Learn/Common_questions/Upload_files_to_a_web_server
+tags:
+  - FTP
+  - GitHub
+  - WebMechanics
+  - rsync
+  - sftp
+  - アップロード
+  - ホスティング
+  - 初心者
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学習の前提</th>
+   <td><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバが何であるか</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名の仕組み</a>を知っていなければなりません。また、<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">基本的な環境の設定方法</a>や<a href="/ja/docs/Learn/Getting_started_with_the_web">簡単な Web ページの作成方法</a>も理解しておく必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習の目的</th>
+   <td>FTP を使用してファイルをサーバにプッシュする方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>シンプルな Web ページを作成している場合 (例として <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を参照)、Web サーバ上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。</p>
+
+<h2 id="SFTP">SFTP</h2>
+
+<p> SFTP クライアントには、いくつもの選択肢があります。ここのデモは <a href="https://filezilla-project.org/">FileZilla</a> を使うことにします。 Windows、macOS、Linux で使え、無料だからです。FileZilla をインストールするには、<a href="https://filezilla-project.org/download.php?type=client">FileZilla ダウンロードページ</a>に移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラファイルからインストールします。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: もちろん他にもたくさんのオプションがあります。詳細については<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost#Publishing_tools.3A_FTP_client">パブリッシングツール</a>を参照してください。</p>
+</div>
+
+<p>FileZilla アプリケーションを開きます。次のようなものが表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
+
+<h3 id="ログイン">ログイン</h3>
+
+<p>この例では、ホスティングプロバイダ (私たちの HTTP Web サーバをホストするサービス) は架空の会社 "Example Hosting Provider" であり、URL は次のようになります：<code>mypersonalwebsite.examplehostingprovider.net</code></p>
+
+<p>私たちはアカウントを開設し、その情報を受け取ったばかりです：</p>
+
+<blockquote>
+<p>Example Hosting Provider でアカウントを開設しましたことをお祝いします。</p>
+
+<p>アカウント: <code>demozilla</code></p>
+
+<p>あなたのWebサイトは <code>demozilla.examplehostingprovider.net</code> で表示されます。</p>
+
+<p>このアカウントに公開するには、SFTP を使用して次の資格情報で接続してください：</p>
+
+<ul>
+ <li>SFTP サーバ: <code>sftp://demozilla.examplehostingprovider.net</code></li>
+ <li>ユーザ名: <code>demozilla</code></li>
+ <li>パスワード: <code>quickbrownfox</code></li>
+ <li>ポート: <code>5548</code></li>
+ <li>Web 上に公開するには、ファイルを <code>Public/htdocs</code> ディレクトリに置きます</li>
+</ul>
+</blockquote>
+
+<p>最初に <code>http://demozilla.examplehostingprovider.net/</code> を見てみましょう。見ての通り、まだそこには何もありません：</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
+
+<div class="note">
+<p><strong>メモ</strong>: ホスティングプロバイダによっては、最初にあなたの Web アドレスに行ったときに、「このWebサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。</p>
+</div>
+
+<p>SFTP クライアントを遠隔のサーバに接続するには、次の手順を実行します。</p>
+
+<ol>
+ <li>メインメニューから <em>ファイル &gt; サイトマネージャ と選択します</em></li>
+ <li>[サイトマネージャ] ウィンドウで、[新規サイト] ボタンをクリックし、提供されたスペースにサイト名を <strong>demozilla</strong> として入力します</li>
+ <li>ホスティングプロバイダから提供された SFTP サーバのホストを<em> Host:</em> フィールドに入力します</li>
+ <li>[ログオンの種類] ドロップダウンで [標準] を選択し、提供されたユーザ名とパスワードを該当するフィールドに入力します</li>
+ <li>正しいポートおよびその他の情報を入力します</li>
+</ol>
+
+<p>ウィンドウは次のようになります：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
+
+<p>次に Connect を押して SFTP サーバに接続します。</p>
+
+<p>注意: ホスティングプロバイダがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。FTP は本質的に安全ではないため、使用しないでください。</p>
+
+<h3 id="こちらとあちら：ローカルビューとリモートビュー">こちらとあちら：ローカルビューとリモートビュー</h3>
+
+<p>一度接続すると、画面は次のようになります (私たちはあなた自身のアイデアを伝えるために例を挙げています)。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
+
+<p>あなたが見ているものを調べてみましょう：</p>
+
+<ul>
+ <li>中央の左ペインには、ローカルファイルが表示されます。Web サイトを保存しているディレクトリ (例: <code>mdn</code>) に移動します</li>
+ <li>中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、<code>users/demozilla</code>) にログインしています</li>
+ <li>今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピュータと SFTP サーバ間の接続状態を示すメッセージのログ、SFTP クライアントとサーバ間のすべてのインタラクションのライブログです</li>
+</ul>
+
+<h3 id="サーバへのアップロード">サーバへのアップロード</h3>
+
+<p>私たちのホスト命令の例では、「Web 上に公開するには、ファイルを <code>Public/htdocs</code> ディレクトリに入れてください」となっています。右ペインの指定されたディレクトリに移動する必要があります。このディレクトリは実質的にあなたの Web サイトのルートで、<code>index.html</code> ファイルやその他のアセットがどこに行くかを示します。</p>
+
+<p>ファイルを置く正しいリモートディレクトリが見つかったら、サーバにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ &amp; ドロップする必要があります。</p>
+
+<h3 id="本当にオンラインですか？">本当にオンラインですか？</h3>
+
+<p>これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザでWebサイト (例えば <code>http://demozilla.examplehostingprovider.net/</code>) に戻って再確認することができます。</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
+
+<p>そしてやりました！ Web サイトは動いています！</p>
+
+<h2 id="Rsync">Rsync</h2>
+
+<p>{{Glossary("Rsync")}} はローカルからリモートへのファイル同期ツールで、ほとんどの Unix ベースのシステム (macOS や Linux など) で一般的に利用可能ですが、Windows 版も存在します。</p>
+
+<p>デフォルトではコマンドラインで使用されるため、SFTP よりも高度なツールと見なされています。基本的なコマンドはこんな感じです：</p>
+
+<pre class="brush: bash line-numbers"><code>rsync [-options] SOURCE user@x.x.x.x:DESTINATION</code></pre>
+
+<ul>
+ <li><code>-options</code> はダッシュの後に1つ以上の文字が続きます。たとえば、詳細エラーメッセージの場合は <code>-v</code>、バックアップを作成する場合は <code>-b</code> です。完全なリストは <a href="https://linux.die.net/man/1/rsync">rsync の man ページ</a>にあります ("Options summary" を検索してください)。</li>
+ <li><code>SOURCE</code> は、ファイルのコピー元となるローカルファイルまたはディレクトリへのパスです。</li>
+ <li><code>user@</code> は、ファイルのコピー先となるリモートサーバ上のユーザの資格情報です。</li>
+ <li><code>x.x.x.x</code> はリモートサーバのIPアドレスです。</li>
+ <li><code>DESTINATION</code> は、リモートサーバ上のディレクトリまたはファイルをコピーする場所へのパスです。</li>
+</ul>
+
+<p>あなたはホスティングプロバイダからそのような詳細を得る必要があるでしょう。</p>
+
+<p>詳細およびその他の例については、 <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a> を参照してください。</p>
+
+<p>もちろん、FTP の時と同じように安全な接続のもとで使用することをお勧めします。Rsync の場合は <code>-e</code> オプションを使用して、SSH を介した接続を確立するための SSH 詳細を指定します。例えば：</p>
+
+<pre class="brush: bash line-numbers"><code>rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</code></pre>
+
+<p>必要なものの詳細については、<a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a> を参照してください。</p>
+
+<h3 id="Rsync_GUI_ツール">Rsync GUI ツール</h3>
+
+<p>他のコマンドラインツールと同様に、コマンドラインの使用に慣れていない人向けに Rsync 用の GUI ツールもあります。<a href="https://acrosync.com/mac.html">Acrosync</a> はそのようなツールの1つで、Windows と macOS で利用可能です。</p>
+
+<p>繰り返しになりますが、ホスティングプロバイダから接続認証情報を取得する必要がありますが、この方法でそれらを入力するための GUI が得られます。</p>
+
+
+
+<h2 id="GitHub">GitHub</h2>
+
+<p>GitHub では、<a href="https://pages.github.com/">GitHub pages</a> (gh-pages) を介して Web サイトを公開することができます。</p>
+
+<p>これの使い方の基本については、<a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a>の <a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a>の記事で説明しているので、ここでは繰り返しません。</p>
+
+<p>ただし、GitHub で Web サイトをホストすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> をご覧ください。</p>
+
+
+
+<h2 id="ファイルをアップロードするその他の方法">ファイルをアップロードするその他の方法</h2>
+
+<p>FTP プロトコルは、Web サイトを公開するためのよく知られた方法の1つですが、唯一の方法ではありません。 他にもいくつかのやり方があります。</p>
+
+<ul>
+ <li><strong>Web インターフェイス</strong>。リモートファイルアップロードサービスのフロントエンドとして機能する HTML インターフェイス。ホスティングサービスから提供されます。</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>。より高度なファイル管理を可能にする {{Glossary("HTTP")}} プロトコルの拡張。</li>
+</ul>
diff --git a/files/ja/learn/common_questions/using_github_pages/index.html b/files/ja/learn/common_questions/using_github_pages/index.html
new file mode 100644
index 0000000000..2e68d87607
--- /dev/null
+++ b/files/ja/learn/common_questions/using_github_pages/index.html
@@ -0,0 +1,108 @@
+---
+title: GitHub Pagesを使うには？
+slug: Learn/Common_questions/Using_Github_pages
+tags:
+  - Beginner
+  - GitHub
+  - Guide
+  - Web
+  - gh-pages
+  - git
+  - publish
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summary"><a href="https://github.com/">GitHub</a> は "ソーシャル・コーディング" のサイトです。<a href="http://git-scm.com/">Git</a> <strong>バージョン管理システム</strong>のストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。</p>
+
+<h2 id="Publishing_content" name="Publishing_content">公開コンテンツ</h2>
+
+<p>GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のある<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">バージョン管理システム</a>です。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。GitHub は <a href="https://pages.github.com/">GitHub ページ</a>と呼ばれる非常に便利な機能を持っています。これはあなたがウェブ上にライブでウェブサイトのコードを公開することを可能にします。</p>
+
+<h3 id="Basic_Github_setup" name="Basic_Github_setup">Github の基本設定</h3>
+
+<ol>
+ <li>初めに、システムに <a href="http://git-scm.com/downloads">Git をインストール</a>してください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。</li>
+ <li>次に、<a href="https://github.com/join">GitHub アカウント</a>に<a href="/ja/docs/">サインアップ</a>します。それは単純かつ簡単です。</li>
+ <li>サインアップしたら、ユーザー名とパスワードを使って <a href="https://github.com">github.com</a>  にログインします。</li>
+</ol>
+
+<h3 id="Preparing_your_code_for_upload" name="Preparing_your_code_for_upload">ソースコードのアップロード準備</h3>
+
+<p>Github リポジトリーに好きなコードを保存できますが、GitHub ページ機能を最大限に活用するには、コードを典型的なウェブサイトとして構成する必要があります。主なエントリーポイントは、<code>index.html</code> という HTML ファイルです。</p>
+
+<p>次に進む前に、自身のコードディレクトリーを Git リポジトリとして初期化する必要があります。このために、以下のことを実行してください:</p>
+
+<ol>
+ <li>コマンドラインで <code>test-site</code> のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、<code>cd</code> コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの <code>test-site</code> というディレクトリーに配置した場合は、次のように入力します:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>コマンドラインが、あなたのウェブサイトディレクトリーの中を指しているとき、ディレクトリーを git リポジトリにそのまま変えるように <code>git</code> ツールに指示する、次のコマンドを入力してください:
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="An_aside_on_command_line_interfaces" name="An_aside_on_command_line_interfaces">コマンドラインインターフェイスの余談</h4>
+
+<p>Github にコードをアップロードする最良の方法は、コマンドラインを使用することです。これは、ユーザーインターフェイス内をクリックするのではなく、ファイルを作成・プログラム実行のような動作のためのコマンドを入力するウィンドウです。それは次のようなものです:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>補足: </strong>コマンドラインに不安がある場合は、<a href="/ja/docs/">Git グラフィカルユーザーインターフェイス</a>を使用して、同じ作業を行うことも検討できます。</p>
+</div>
+
+<p><span id="command-line">すべてのオペレーティングシステムには、コマンドラインツールが付属しています：</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: Windows のキーを押して、<em>コマンドプロンプト</em>と入力し、表示されるリストから選択すると、<strong>コマンドプロンプト</strong>にアクセスできます。Windows は、Linux や OS X とは異なる、独自のコマンド規約を持っているので、下記のコマンドは、あなたのマシンでは異なるかもしれません。</li>
+ <li><strong>OS X</strong>: <strong>ターミナル</strong>は、<em>アプリケーション &gt; ユーティリティ</em>にあります。</li>
+ <li><strong>Linux</strong>: 通常、<em>Ctrl + Alt + T</em> で端末を起動できます。それでもうまくいかない場合は、アプリバーまたはメニューで<strong>ターミナル</strong>を探します。</li>
+</ul>
+
+<p>これには最初は、少し戸惑うかもしれませんが、心配しないでください — すぐに基本のコツをつかむでしょう。上記のようにコマンドを入力して、Enter キーを押すことで、端末で動作するようにコンピューターに指示します。</p>
+
+<h3 id="Creating_a_repo_for_your_code" name="Creating_a_repo_for_your_code">ソースコードのリポジトリの作成</h3>
+
+<ol>
+ <li>次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、<em>新しいリポジトリー</em> を選択します。</li>
+ <li>このページの <em>リポジトリー名ボックス</em> に、ソースコードのリポジトリー名 (例: <em>my-repository</em>) を入力します。</li>
+ <li>また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです：<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li><em>Create repository</em> をクリックします。これにより、次のページに移動します:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Uploading_your_files_to_GitHub" name="Uploading_your_files_to_GitHub">GitHub へのファイル格納</h3>
+
+<ol>
+ <li>現在のページで、あなたはセクションに興味を持っています... <em>または、コマンドラインから既存のリポジトリーをプッシュします。</em>このセクションに 2 行のコードがリストされているはずです。最初の行全体をコピーしてコマンドラインに貼り付け、Enter キーを押します。コマンドは次のようなものです:
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
+ </li>
+ <li>次に、以下の 2 つのコマンドを入力し、それぞれの後に Enter キーを押します。これらは GitHub にアップロードするためのコードを用意し、Git にこれらのファイルを管理するように依頼します。
+  <pre class="brush: bash">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する「または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします：
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>ここで、リポジトリーの gh-pages ブランチを作成する必要があります。現在のページを更新すると、以下のようなリポジトリページが表示されます。<em>Branch: <strong>master</strong></em> というボタンを押し、テキスト入力に <em>gh-pages</em> と入力してから <em>Create branch: gh-pages</em> という青いボタンを押す必要があります。これにより、gh-pages という特別な場所に公開されている、特別なコードブランチが作成されます。URL は、<em>username.github.io/my-repository-name</em> の形式を取ります。したがって、この例の場合、URL は <em>https://chrisdavidmills.github.io/my-repository</em> になります。表示されているページは index.html ページです。<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
+ <li>新しいブラウザータブで、GitHub Pages のウェブアドレスに移動すると、サイトがオンラインなります！友人にそれを電子メールで送って、あなたの習熟を披露してください。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 困った場合は、<a href="https://pages.github.com/">GitHub Pages ホームページ</a>も大いに役立ちます。</p>
+</div>
+
+<h3 id="Further_GitHub_knowledge" name="Further_GitHub_knowledge">GitHub の詳細</h3>
+
+<p>テストサイトにさらに変更を加えて、GitHub にアップロードしたい場合は、以前と同じようにファイルに変更を加えるだけです。それから、以下のコマンドを入力して (それぞれ Enter キーを押して) GitHub にそれらの変更をプッシュする必要があります:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p><em>another commit</em> をより適切なメッセージに置換して、今行った変更を説明できます。</p>
+
+<p>私たちは、Git の表面を引っ掻いてみたにすぎません。詳細については、<a href="https://help.github.com/index.html">GitHub ヘルプサイト </a>から始めてください。</p>
diff --git a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html
new file mode 100644
index 0000000000..4e3fe1667b
--- /dev/null
+++ b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -0,0 +1,182 @@
+---
+title: ブラウザー開発者ツールとは？
+slug: Learn/Common_questions/What_are_browser_developer_tools
+tags:
+  - Beginner
+  - Browser
+  - CSS
+  - CodingScripting
+  - Dev Tools
+  - HTML
+  - JavaScript
+  - Learn
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/ja/Learn")}}</div>
+
+<div class="summary">
+<p>近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/en-US/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p>
+</div>
+
+<h2 id="How_to_open_the_devtools_in_your_browser" name="How_to_open_the_devtools_in_your_browser">ブラウザ開発者ツールの開き方</h2>
+
+<p>開発者ツールはブラウザのサブウィンドウの中にいます。大体こんな感じに...。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p>
+
+<p>どのように開くのでしょうか？これには 3 つの方法があります。</p>
+
+<ul>
+ <li><em><strong>キーボードで開く </strong>以下のブラウザを除いては、Ctrl + Shift + I</em> で開きます。
+
+  <ul>
+   <li><strong>Internet Explorer</strong> では <em>F12</em> キーで開きます。</li>
+   <li><strong>Mac OS X</strong> では <em><span class="Unicode">⌘ + ⌥ + I</span></em><span class="Unicode"> キーで開きます。</span></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>メニューバーで開く</strong></em></span>
+  <ul>
+   <li><strong>Firefox </strong>では <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> メニュー <span class="Unicode"><em><span class="Unicode">➤</span></em></span><em> Web開発 ➤ 開発者ツールを開く</em></li>
+   <li><strong>Chrome </strong>では、<em>メニュー<span class="Unicode"> ➤</span> その他のツール ➤ 開発者ツール</em></li>
+   <li><strong>Safari</strong> では <em><span class="Unicode">開発 ➤</span> Web インスペクタ</em> (もし、開発メニューが表示されていない場合は <em>Safari<span class="Unicode"> ➤</span> 設定 ➤ 詳細 を開いて、メニューバーに[開発]メニューを表示</em> のチェックボックスをオンにします。) </li>
+   <li><strong>Opera</strong> では <em><span class="Unicode">開発者用ツール ➤</span> Web インスペクタ</em></li>
+  </ul>
+ </li>
+ <li><strong><em>コンテキストメニューで開く</em></strong><em> ウェブページ上の項目で、長押しまたは右クリック </em>(Mac では Ctrl + クリック) し、表示されたコンテキストメニューより <em>要素を調査</em> を選択してください。(さらに！この方法では右クリックで選択した要素がハイライトされて表示されます。)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="The_Inspector_DOM_explorer_and_CSS_editor" name="The_Inspector_DOM_explorer_and_CSS_editor">インスペクタ: DOM の内容が見られる CSS エディター</h2>
+
+<p>開発者ツールはたいてい最初にインスペクタが開きます。インスペクタの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、HTML と CSS をその場で簡単に編集し、ブラウザのビューポートに表示されている結果に反映することができます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p>
+
+<p>もしインスペクタが表示されていない場合、</p>
+
+<ul>
+ <li>インスペクタタブをタップまたはクリックしてください。</li>
+ <li>Internet Explorer では、<em>DOM Explorer または</em> Ctrl + 1 を押してください。</li>
+ <li>Safari では、それに類するような名前はついていませんが、HTML が見えるでしょう。もし、画面に表示するように何も選択していなければ、スタイルボタンを押すことで CSS が見られます。</li>
+</ul>
+
+<h3 id="Exploring_the_DOM_inspector" name="Exploring_the_DOM_inspector">DOM インスペクタについて詳しく知る</h3>
+
+<p>まずは、DOM インスペクタ上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザによって異なりますが、重要な機能はほぼ同じです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p>
+
+<ul>
+ <li><strong>ノードを削除</strong> (要素を削除の場合もあり) は現在選択中の要素を削除します。</li>
+ <li><strong>HTML として編集</strong> (属性を追加や、テキストの編集の場合もあり) はその場で HTML を編集し、結果を見ることができます。テストやデバッグの際にとても便利です。</li>
+ <li><strong>hover / active / focus</strong> 要素を強制的に選択した状態にトグルします。その状態での見た目を確認することができます。</li>
+ <li><strong>コピー</strong> 現在選択されている項目の HTML をコピーします。</li>
+ <li>CSS パスをコピーする や、XPath をコピーする といったメニューがあるブラウザもあります。これは CSS のセレクターや、現在の HTML要素への XPath 表現のコピーを可能とするものです。</li>
+</ul>
+
+<p>それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。</p>
+
+<h3 id="Exploring_the_CSS_editor" name="Exploring_the_CSS_editor">CSS エディターについて詳しく知る</h3>
+
+<p>最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="border: 1px solid black; display: block; height: 281px; margin: 0px auto; width: 500px;"></p>
+
+<p>以下の機能は特に便利です。</p>
+
+<ul>
+ <li>現在の要素に適用されている CSS ルールが詳細度の高い順に表示されています。</li>
+ <li>それぞれの宣言の隣にあるチェックボックスをクリックして、その宣言が消されるとどうなるかを試すことができます。</li>
+ <li>一括指定プロパティ (ショートハンドプロパティ) の隣にある矢印を開くと、各個別指定プロパティ (ロングハンドプロパティ) に対応する現在の値が表示されます。</li>
+ <li>各プロパティの名前か値をクリックすると、テキストボックスが表示され、変更することで、見た目のプレビューをその場で確認することができます。</li>
+ <li>各宣言の隣には、その宣言が書かれているファイル名と行数が表示されています。ほとんどの場合、クリックすると開発ツールのその場所にジャンプし、編集したり保存したりすることが可能です。</li>
+ <li>閉じ中括弧をクリックすることで、新しい行に新しくルールを追加するためのテキストボックスを表示させることができます。</li>
+</ul>
+
+<p>CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。</p>
+
+<ul>
+ <li><em>計算済み</em>: このタブはブラウザによって求められた、現在選択中の要素に適用されている設定値が見られます。</li>
+ <li><em>ボックスモデル</em>: このタブは現在選択中の要素に適用されているボックスモデルがどれだけの大きさになっているかが一覧できます。</li>
+ <li><em>フォント</em>: Firefox ではこのタブに現在選択中の要素のフォント設定が表示されます。</li>
+</ul>
+
+<h3 id="Find_out_more" name="Find_out_more">もっと知りたいときは...</h3>
+
+<p>各ブラウザのインスペクタの詳細については以下をご覧ください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Page_Inspector">Firefox インスペクタ</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">Internet Explorer DOM エクスプローラー (英語)</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM インスペクタ</a> (Opera のインスペクタもこれと同じ動作です)</li>
+ <li><a href="https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/">Safari DOM インスペクタおよびスタイルエクスプローラー (英語)</a></li>
+</ul>
+
+<h2 id="The_JavaScript_console">The JavaScript console</h2>
+
+<p>The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:</p>
+
+<p>If the developer tools are already open, click or press the Console tab.</p>
+
+<p>If not, Firefox allows you to open the console directly using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or using the menu command: Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">or </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console. </em>On other browser, open the developer tools and then click the Console tab.</p>
+
+<p>This will give you a window like the following:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p>
+
+<p>To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>Now try entering the following incorrect versions of the code and see what you get.</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!</p>
+
+<h3 id="Find_out_more_2">Find out more</h3>
+
+<p>Find more out about the JavaScript console in different browsers:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera's inspector works the same as this)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
+</ul>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_are_hyperlinks/index.html b/files/ja/learn/common_questions/what_are_hyperlinks/index.html
new file mode 100644
index 0000000000..97b37bfe75
--- /dev/null
+++ b/files/ja/learn/common_questions/what_are_hyperlinks/index.html
@@ -0,0 +1,95 @@
+---
+title: ハイパーリンクとは？
+slug: Learn/Common_questions/What_are_hyperlinks
+tags:
+  - Beginner
+  - Infrastructure
+  - Navigation
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>を理解し、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>に精通している必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>Web 上のリンクとその重要性について学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>ハイパーリンクは通常リンクと呼ばれ、Web の背後にある基本概念です。リンクとは何かを説明するために、Web アーキテクチャの基本に戻る必要があります。</p>
+
+<p>Web の発明者でもあるティム・バーナーズ・リーは、1989年に Web を支える3つの柱について語りました。</p>
+
+<ol>
+ <li>{{Glossary("URL")}}、Web 文書を追跡するアドレスシステム</li>
+ <li>{{Glossary("HTTP")}}、URL が与えられたときに文書を見つけるための転送プロトコル</li>
+ <li>{{Glossary("HTML")}}、埋め込み<em>ハイパーリンク</em>を可能にする文書フォーマット</li>
+</ol>
+
+<p>3つの柱からわかるように、Web 上のすべてのものはドキュメントとそのアクセス方法を中心に展開されています。Web の当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、Web は画像、ビデオ、およびバイナリデータへのアクセスを提供するように進化しましたが、これらの改善によって3つの柱が変わることはほとんどありませんでした。</p>
+
+<p>Web が登場する前は、ドキュメントにアクセスして別のドキュメントに移動することは非常に困難でした。人が読めるので、URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザはリンクをアクティブにすることで対象の文書にすぐにアクセスできます。</p>
+
+<p>下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから際立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまでTabキーを押してEnterキーまたはスペースバーを押します。</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>リンクは、Web をとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代の Web デザインにとって重要であることについて説明します。</p>
+
+<h2 id="より深いダイブ">より深いダイブ</h2>
+
+<p>すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。</p>
+
+<h3 id="リンクの種類">リンクの種類</h3>
+
+<dl>
+ <dt>内部リンク</dt>
+ <dd>両方ともあなたの Web サイトに属している 2 つの Web ページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、Web サイトのようなものはありません (もちろん、1ページの Web サイトでもない限りはですが)。</dd>
+ <dt>外部リンク</dt>
+ <dd>あなたの Web ページから他の誰かの Web ページへのリンク。Web は Web ページのネットワークであるため、外部リンクがなければ Web はありません。あなたの Web ページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。</dd>
+ <dt>被リンク</dt>
+ <dd>他の人の Web ページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。</dd>
+</dl>
+
+<p>Web サイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事で Web サイトナビゲーションの設計について説明しますが、原則として、新しい Web ページを追加するときは必ず、他のページの少なくとも1つがその新しいページにリンクしていることを確認してください。一方、サイトに10ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。</p>
+
+<p>始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です。(詳細については下記を参照してください)。</p>
+
+<h3 id="アンカー">アンカー</h3>
+
+<p>ほとんどのリンクは2つの Web ページを結び付けています。 <strong>アンカー</strong>は1つの文書の2つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザは新しい文書をロードするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="リンクと検索エンジン">リンクと検索エンジン</h3>
+
+<p>リンクはユーザにとっても検索エンジンにとっても重要です。 検索エンジンは、Web ページをクロールするたびに、その Web ページで利用可能なリンクをたどって Web サイトにインデックスを付けます。検索エンジンは、リンクをたどって Web サイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリが対象のWebページにアクセスするのに適しているかを判断します。</p>
+
+<p>リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。</p>
+
+<ul>
+ <li>リンクの<em>表示テキスト</em>は、どの検索クエリが特定の URL を検索するかに影響します。</li>
+ <li>Web ページの<em>被リンク</em>が多いほど、検索結果のランクは高くなります。</li>
+ <li><em>外部リンク</em>は、元の Web ページと遷移先の Web ページの両方の検索ランキングに影響を与えますが、その程度は不明です。</li>
+</ul>
+
+<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (検索エンジン最適化) は、検索結果で Web サイトを上位にランク付けする方法の研究です。Web サイトのリンクの使用を改善することは、1つの役に立つ SEO テクニックです。</p>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>それでは、いくつか Web ページにリンクを設定しましょう。</p>
+
+<ul>
+ <li>すべてのリンクが URL を指しているので、より理論的な背景を得るには、<a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL とその構造</a>について学びます。</li>
+ <li>もう少し実用的なものが欲しいですか？ <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>モジュールの記事「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」で、リンクの実装方法について詳しく説明しています。</li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_is_a_domain_name/index.html b/files/ja/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..37d78285c8
--- /dev/null
+++ b/files/ja/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,160 @@
+---
+title: ドメイン名とは何ですか？
+slug: Learn/Common_questions/What_is_a_domain_name
+tags:
+  - Web
+  - イントロダクション
+  - インフラ
+  - ウェブ
+  - ドメイン名
+  - 初心者
+  - 導入
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>この記事ではドメイン名について説明し、何であるか、どのように構造化されているのか、そして取得する方法を説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL とは何か</a>を理解している必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ドメイン名とはどのようなもので、どのように働くのか、なぜ重要なのかを学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><span class="seoSummary">ドメイン名はインターネット基盤の重要な部分です。インターネット上で利用できるあらゆるウェブサーバーに対して、人間が読めるアドレスを提供します。</span></p>
+
+<p>インターネットに接続しているコンピューターはすべて、パブリック {{Glossary("IP")}} アドレスからアクセスでき、これは IPv4 では32ビット (通常、ドットで区切られた 0〜255 までの4桁の数値 (例: <code>173.194.121.32</code>) として記述される)、 IPv6 では128ビット (通常はコロンで区切られた4桁の16進数の8つのグループ (例: <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>)として記述される) で構成されます。コンピューターはこれらのアドレスを簡単に処理できますが、人間にとってはだれがサーバーを運営しているのか、またはウェブサイトがどのようなサービスを提供しているかを理解するのは困難です。 IP アドレスは覚えにくく、時間の経過とともに変わる可能性があります。これらすべての問題を解決するために、ドメイン名と呼ばれる人間が読めるアドレスを使用します。</p>
+
+<h2 id="Deeper_dive" name="Deeper_dive">より深い追求</h2>
+
+<h3 id="Structure_of_domain_names" name="Structure_of_domain_names">ドメイン名の構造</h3>
+
+<p>ドメイン名は単純な構造であり、ドットで区切られたいくつかの部分 (1つの部分だけの場合もあれば、2つ、3つの場合も...) からできており、<strong>右から左に向かって読まれます</strong>。</p>
+
+<p><img alt="MDN のドメイン名の構造" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+
+<p>これらのそれぞれの部分は、ドメイン名全体に関する特定の情報を提供します。</p>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (トップレベルドメイン)</dt>
+ <dd>TLD は最も一般的な情報を提供します。 TLD は、ドメイン名の背後にあるサービスの全般的な目的をユーザーに伝えます。多くの一般的な TLD (<code>.com</code>, <code>.org</code>, <code>.net</code>) はウェブサービスが特定の基準を満たしていることを要求しませんが、 TLD によってはより厳密な基準を適用するため、目的がより明確になります。例えば、
+ <ul>
+  <li><code>.jp</code>, <code>.us</code>, <code>.fr</code>, <code>.se</code> などのローカル TLD では、サービスを特定の言語で提供しているか、特定の国でホスティングされていることを要求します。これらは、特定の言語や国のリソースであることを示しているとみなされます。</li>
+  <li><code>.gov</code> や <code>.go.jp</code> を含む TLD は、政府機関のみが使用できます。</li>
+  <li><code>.edu</code> や <code>.ac.jp</code> のような TLD は教育・学術機関のみで使用されていると見なされます。</li>
+ </ul>
+ TLD にはラテン文字だけでなく特殊文字も含めることができ、長さは最大63文字ですが、ほとんどは2〜3文字です。</dd>
+ <dt>ラベル (またはコンポーネント)</dt>
+ <dd>ラベルは TLD の後に続くものです。ラベルは1文字から完全な一文まで何でも構いません。 TLD の直前にあるラベルは、<em>二次レベルドメイン</em> (SLD) とも呼ばれます。ドメイン名は多数のラベル (またはコンポーネント) を持つことができますが、ドメイン名を構成するのにラベルを3つ持つことが必須でも必要でもありません。例えば、 www.inf.ed.ac.uk は正しいドメイン名です。制御権のあるドメイン (例えば <a href="https://mozilla.org">mozilla.org</a>) には、 <a href="https://developer.mozilla.org">developer.mozilla.org</a> や <a href="https://iot.mozilla.org/">https://iot.mozilla.org/</a> のように、互いに異なる内容で「サブドメイン」を作成することができます。</dd>
+</dl>
+
+<h3 id="Buying_a_domain_name" name="Buying_a_domain_name">ドメイン名の購入</h3>
+
+<h4 id="Who_owns_a_domain_name" name="Who_owns_a_domain_name">誰がドメイン名を所有しているか</h4>
+
+<p>「ドメイン名を買う」ことはできません。これは、未使用のドメイン名が最終的に他の人が再び使用できるようになるためです。すべてのドメイン名が購入されてしまうと、ウェブはすぐにロックされていて誰も利用ができない未使用のドメイン名であふれてしまいます。</p>
+
+<p>代わりに、1年間または数年間ドメイン名を使用する権利を購入します。この権利は更新することができ、他の人々の応募よりも更新の方が優先されます。しかし、決してドメイン名を所有するわけではありません。</p>
+
+<p>登録機関と呼ばれる会社は、ドメイン名のレジストリを使用して、あなたをドメイン名に結び付ける技術的および管理的情報を維持します。</p>
+
+<div class="note">
+<p><strong>メモ : </strong>ドメイン名によっては、追跡を担当している登録機関ではない可能性があります。たとえば、<code>.fire</code> の下のすべてのドメイン名は Amazon によって管理されています。</p>
+</div>
+
+<h4 id="Finding_an_available_domain_name" name="Finding_an_available_domain_name">利用可能なドメイン名を探す</h4>
+
+<p>特定のドメイン名が利用可能かどうかを調べるには、</p>
+
+<ul>
+ <li>ドメイン名の登録機関のウェブサイトにアクセスしてください。ほとんどの登録機関は、「whois」と呼ばれるドメイン名が利用できるかどうかを知ることができるサービスを提供しています。</li>
+ <li>あるいは、シェルを内蔵しているシステムを使用している場合は <code>whois</code> コマンドを入力して下さい。 <code>mozilla.org</code> の場合は次のようになります。</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>ご覧のとおり、 <code>mozilla.org</code> を登録することはできません。 Mozilla Foundation がすでに登録しているからです。</p>
+
+<p>一方、 <code>afunkydomainname.org</code> を登録できるかどうか確認しましょう。</p>
+
+<pre>$ whois afunkydomainname.org
+NOT FOUND
+</pre>
+
+<p>ご覧のとおり、ドメインは (執筆時点で) <code>whois</code> データベースには存在しませんので、登録を依頼することができます。知っておくと良いでしょう！</p>
+
+<h4 id="Getting_a_domain_name" name="Getting_a_domain_name">ドメイン名の取得</h4>
+
+<p>プロセスは非常に簡単です。</p>
+
+<ol>
+ <li>登録機関のウェブサイトにアクセスします。</li>
+ <li>通常、「ドメイン名を取得する」という操作があります。それをクリックします。</li>
+ <li>フォームに必要事項をすべて記入してください。希望するドメイン名のスペルを間違えていないことを特に確認してください。支払いが済んだら、手遅れです。</li>
+ <li>登録機関は、ドメイン名が正しく登録されたことを知らせます。数時間以内に、すべての DNS サーバーがあなたの DNS 情報を受信するでしょう。</li>
+</ol>
+
+<div class="note">
+<p><strong>メモ:</strong> この過程で、登録機関は現実世界の住所を尋ねます。国によっては、有効な住所を提供できないと登録機関がドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。</p>
+</div>
+
+<h4 id="DNS_refreshing" name="DNS_refreshing">DNS の更新</h4>
+
+<p>DNS データベースは世界中のすべての DNS サーバーに格納されており、これらのサーバーはすべて「権威ネームサーバー」または「トップレベル DNS サーバー」と呼ばれるいくつかの特別なサーバーを参照しています。これらはシステムを管理する上司サーバーのようなものです。</p>
+
+<p>登録機関が特定のドメインの情報を作成または更新するたびに、すべての DNS データベース内で情報を更新する必要があります。指定されたドメインについて知っている DNS サーバーはそれぞれ、しばらく情報を保持し、その後で情報を自動的に無効化して更新します (DNS サーバーが権威サーバーに照会し、そこから更新された情報を取得します)。したがって、このドメイン名について知っている DNS サーバーが最新の情報を入手するには時間がかかります。</p>
+
+<h3 id="How_does_a_DNS_request_work" name="How_does_a_DNS_request_work">DNS リクエストはどのように機能するのか</h3>
+
+<p>すでに見たように、ブラウザーにウェブページを表示したい場合は、 IP アドレスよりもドメイン名を入力する方が簡単です。プロセスを見てみましょう。</p>
+
+<ol>
+ <li>ブラウザーのロケーションバーに <code>mozilla.org</code> と入力してください。</li>
+ <li>ブラウザーは、このドメイン名で識別される IP アドレスを (ローカル DNS キャッシュを使用して) すでに認識しているかどうかをコンピューターに確認します。存在する場合、ドメイン名は IP アドレスに変換され、ブラウザーはウェブサーバーとコンテンツをネゴシエートします。話は終わりです。</li>
+ <li>どの IP が <code>mozilla.org</code> の名前の背後にあるのかわからない場合は、DNS サーバーに問い合わせます。DNS サーバーの役割は、登録されている各ドメイン名に一致する IP アドレスをコンピューターに通知することです。</li>
+ <li>コンピューターがリクエストされた IP アドレスを認識したので、ブラウザーはウェブサーバーとコンテンツをネゴシエートできます。</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<p>さて、私たちはプロセスとアーキテクチャについて多くのことを話しました。そろそろ次に進みましょう。</p>
+
+<ul>
+ <li>実際にやってみたいのであれば、そろそろ<a href="/ja/docs/Learn/Common_questions/Common_web_layouts">ウェブページの構造</a>の設計と構造を探求するのがよいでしょう。</li>
+ <li>また、ウェブサイトを構築するためのいくつかの面で費用がかかることも注目に値します。<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">ウェブサイトを構築するのにかかる費用</a>を参照してください。</li>
+ <li>あるいはウィキペディアで<a href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%90%8D">ドメイン名</a>についてもっと読んでください。</li>
+ <li>DNS がどのように機能するかについての楽しくカラフルな説明も<a href="https://howdns.works/">ここ</a>にあります。</li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_is_a_url/index.html b/files/ja/learn/common_questions/what_is_a_url/index.html
new file mode 100644
index 0000000000..433ead1fa4
--- /dev/null
+++ b/files/ja/learn/common_questions/what_is_a_url/index.html
@@ -0,0 +1,159 @@
+---
+title: URL とは何か
+slug: Learn/Common_questions/What_is_a_URL
+tags:
+  - Infrastructure
+  - URL
+  - urls
+  - インフラ
+  - リソース
+  - 初心者
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>この記事では Uniform Resource Locators (URL) について説明し、その内容と構造を説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーとは何か</a>、および <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブ上のリンクの背後にある概念</a>を知る必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>URL の内容とウェブ上での URL の仕組みを学習します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><span class="seoSummary"><strong><dfn>URL</dfn></strong> は{{Glossary("Hypertext", "ハイパーテキスト")}}や {{Glossary("HTTP")}} とともに、ウェブの重要な概念の一つです。{{Glossary("Browser", "ブラウザー")}}がウェブ上の公開されたリソースを取得するために使用するメカニズムです。</span></p>
+
+<p><strong>URL</strong> は <em>Uniform Resource Locator</em> の略です。URL はウェブ上の特定の一意のリソースのアドレスにすぎません。理論的には、それぞれ有効な URL は一意のリソースを指しています。そのようなリソースは HTML ページ、 CSS 文書、画像などである可能性があります。実際には一部例外もあります。最も一般的なものは、もはや存在しないリソースや移動したリソースを指す URL です。URL で表されるリソースと URL 自体はウェブサーバーによって処理されるため、ウェブサーバーの所有者がそのリソースとその関連 URL を慎重に管理する必要があります。</p>
+
+<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2>
+
+<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">協力してください</a>。</em></p>
+
+<h2 id="Deeper_dive" name="Deeper_dive">より深く</h2>
+
+<h3 id="Basics_anatomy_of_a_URL" name="Basics_anatomy_of_a_URL">基本: URL の解剖</h3>
+
+<p>URL の例を次に示します。</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>これらの URL のいずれかをブラウザーのアドレスバーに入力して、関連するページ (リソース) をロードするように指示することができます。</p>
+
+<p>URL はさまざまな部分で構成されていますが、必須のものと任意のものもあります。次の URL を使用して最も重要な部分を見てみましょう。</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<dl>
+ <dt><img alt="プロトコル" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http</code> はプロトコルです。 URL の最初の部分は、ブラウザーが使用するプロトコルを示します。プロトコルとは、コンピューターネットワークを介してデータを交換または転送するための設定方法です。通常、ウェブサイトの場合は HTTP プロトコルまたはそのセキュアバージョンの HTTPS です。ウェブにはこれらの2つのうちの1つが必要ですが、ブラウザーは <code>mailto:</code> (メールクライアントを開くため) や <code>ftp:</code> などの他のプロトコルを扱う方法も知っていますので、そのようなプロトコルを見ても驚かないでください。</dd>
+ <dt><img alt="ドメイン名" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> はドメイン名です。リクエストされるウェブサーバーを示します。他にも {{Glossary("IP address", "IP アドレス")}} を直接使用することも可能ですが、あまり便利ではないため、ウェブ上では頻繁に使用されることはありません。</dd>
+ <dt><img alt="ポート番号" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> はポート番号です。これはウェブサーバー上のリソースにアクセスするために使用される技術的な「ゲート」を示します。ウェブサーバーが HTTP プロトコルの標準ポート (HTTP の場合は80、 HTTPS の場合は443) を使用してそのリソースへのアクセスを許可する場合、通常は省略されます。それ以外の場合は必須です。</dd>
+ <dt><img alt="ファイルへのパス" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> は、ウェブサーバー上のリソースへのパスです。初期のウェブでは、このようなパスはウェブサーバー上の物理的なファイルの場所を表していました。今日ではほとんどの場合、物理的なものではなくウェブサーバーによって処理される抽象的なものです。</dd>
+ <dt><img alt="引数" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> は、ウェブサーバーに提供される追加の引数です。これらの引数は <code>&amp;</code> 記号で区切られたキー/値のペアのリストです。ウェブサーバーは、リソースを返す前にこれらの引数を使用して追加の処理を行うことができます。各ウェブサーバーには引数に関する独自のルールがありますので、特定のウェブサーバーが引数を処理するかどうかを確認する確実な方法は、ウェブサーバーの所有者に問い合わせることだけです。</dd>
+ <dt><img alt="アンカー" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> は、リソース自体の別の部分へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表し、ブラウザーにそのブックマークされた場所にあるコンテンツを表示するための指示を与えます。たとえば、 HTML 文書では、ブラウザーはアンカーが定義されている位置までスクロールします。ビデオやオーディオ文書では、ブラウザーはアンカーが表す時刻に移動しようとします。 <strong>#</strong> の後の部分は<strong>フラグメント識別子</strong>とも呼ばれ、リクエストとともにサーバーに送信されることはありません。</dd>
+</dl>
+
+<p>{{Note('URL に関する<a href="https://ja.wikipedia.org/wiki/Uniform_Resource_Locator">他の部分と規則</a>もありますが、それらは通常のユーザーやウェブ開発者には関係ありません。これについて心配する必要はありません。完全に機能する URL を構築して使用するためにそれらを知る必要はありません。')}}</p>
+
+<p>URL を通常の郵送先住所のように考えるといいかもしれません。<em>プロトコル</em>は、使用したい郵便サービスを表し、<em>ドメイン名</em>は都市または町であり、<em>ポート番号</em>は郵便番号のようなものです。<em>パス</em>は郵便物が配信される建物を表します。<em>引数</em>は建物内の部屋番号などの追加情報を表します。最後に、<em>アンカー</em>は郵便物の宛先に当たる実際の人物を表します。</p>
+
+<h3 id="How_to_use_URLs" name="How_to_use_URLs">URL の使い方</h3>
+
+<p>ブラウザーのアドレスバーの中に正しく URL を入力すれば、それに対応するリソースを得ることができます。しかし、これは氷山の一角にすぎません。</p>
+
+<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">後で説明する</a> {{Glossary("HTML")}} 言語では、 URL を幅広く使用しています。</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} 要素により、他の文書へのリンクを生成する</li>
+ <li>{{HTMLElement("link")}} や {{HTMLElement("script")}} のような様々な要素を介して、文書を関連するリソースと結びつける</li>
+ <li>画像 ({{HTMLElement("img")}} 要素による)、動画 ({{HTMLElement("video")}} 要素による)、音声と音楽 ({{HTMLElement("audio")}} 要素による) などのメディアを表示する</li>
+ <li>{{HTMLElement("iframe")}} 要素により、他の HTML 文書を表示する</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>&lt;script&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;video&gt;</code> を使用する場合など、ページの一部としてリソースを読み込む URL を指定する場合は、HTTP と HTTPS の URL のみを使用してください。たとえば FTP を使用しても、特に安全になることはなく、、多くのブラウザーでは対応していません。</p>
+</div>
+
+<p>{{Glossary("CSS")}} や {{Glossary("JavaScript")}} などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。</p>
+
+<h3 id="Absolute_URLs_vs_relative_URLs" name="Absolute_URLs_vs_relative_URLs">絶対 URL と相対 URL</h3>
+
+<p>上記で見たものは<em>絶対 URL</em> と呼ばれていますが、<em>相対 URL</em> と呼ばれるものもあります。その違いが何を意味するのかをもっと詳しく調べてみましょう。</p>
+
+<p>URL の必須部分は、その URL が使用されているコンテキストによって大きく異なります。ブラウザーのアドレスバーでは、 URL にはコンテキストがありません。そのため、上で見たように、完全 (または<em>絶対</em>) URL を指定する必要があります。プロトコル (ブラウザーは既定で HTTP を使用します) やポート番号 (対象となるウェブサーバーが通常以外のポートを使用している場合にのみ必要) を含める必要はありませんが、 URL の他の部分はすべて必要です。</p>
+
+<p>HTML ページ内など、文書内で URL が使用されている場合は状況が少し異なります。ブラウザーはすでに文書自身の URL を持っているので、この情報を文書内で利用される URL の欠けている部分を補うために利用することができます。<em>絶対 URL</em> と<em>相対 URL</em> は、 URL の<em>パス</em>の部分を見るだけで区別することができます。 URL のパスの部分が "<code>/</code>" の文字で始まっていれば、ブラウザーは現在の文書で指定されているコンテキストを参照せずに、サーバーの最上位のルートからそのリソースを取得します。</p>
+
+<p>これを明確にするためにいくつかの例を見てみましょう。</p>
+
+<h4 id="Examples_of_absolute_URLs" name="Examples_of_absolute_URLs">絶対 URL の例</h4>
+
+<dl>
+ <dt>完全 URL (以前に使用したものと同じ)</dt>
+ <dd>
+ <pre>https://developer.mozilla.org/en-US/docs/Learn</pre>
+ </dd>
+ <dt>暗黙のプロトコル</dt>
+ <dd>
+ <pre>//developer.mozilla.org/en-US/docs/Learn</pre>
+
+ <p>この場合、ブラウザーはその URL をホストしている文書を読み込むために使用されたものと同じプロトコルで、その URL を呼び出します。</p>
+ </dd>
+ <dt>暗黙のドメイン名</dt>
+ <dd>
+ <pre>/en-US/docs/Learn</pre>
+
+ <p>これは、 HTML 文書内の絶対 URL の最も一般的な使用例です。ブラウザーは、その URL をホストしている文書を読み込むために使用されたものと同じプロトコルおよび同じドメイン名を使用します。<strong>メモ:</strong> プロトコルを省略せずにドメイン名だけ省略することはできません。</p>
+ </dd>
+</dl>
+
+<h4 id="Examples_of_relative_URLs" name="Examples_of_relative_URLs">相対 URL の例</h4>
+
+<p>次の例をよく理解するために、これらの URL が <code>https://developer.mozilla.org/en-US/docs/Learn</code> という URL にある文書内から呼び出されると仮定しましょう。</p>
+
+<dl>
+ <dt>サブリソース</dt>
+ <dd>
+ <pre>Skills/Infrastructure/Understanding_URLs
+</pre>
+ URL が <code>/</code> で始まっていないので、ブラウザーは現在のリソースを含んでいるディレクトリのサブディレクトリでその文書を見つけようとします。そのため、この例では本当に達したい URL である <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code> に到達します。</dd>
+ <dt>ディレクトリツリーを遡る</dt>
+ <dd>
+ <pre>../CSS/display</pre>
+
+ <p>この場合、 UNIX ファイルシステムの世界から継承された <code>../</code> の表記規則を使用して、ブラウザーに1つのディレクトリから上に移動したいことを伝えます。つまり、 <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code> という URL にアクセスしたいわけで、これは <code>https://developer.mozilla.org/en-US/docs/CSS/display</code> のように単純化できます。</p>
+ </dd>
+</dl>
+
+<h3 id="Semantic_URLs" name="Semantic_URLs">セマンティック URL</h3>
+
+<p>URL はとても技術的な香りがするにもかかわらず、人間が読めるウェブサイトの入口を表します。覚えることができ、誰でもブラウザーのアドレスバーに入力することができます。人々はウェブの中核にいるので、<a href="https://en.wikipedia.org/wiki/Semantic_URL"><em>セマンティック URL</em></a> と呼ばれるものを構築することがベストプラクティスと考えられています。セマンティック URL は、技術的な知識に関係なく、誰でも理解できる固有の意味を持つ単語を使用します。</p>
+
+<p>言語的セマンティックはもちろんコンピューターとは無関係です。おそらくランダムな文字を組み合わせたように見える URL を見たことがあるでしょう。しかし、人間が読める URL を作成することには多くの利点があります。</p>
+
+<ul>
+ <li>操作することがより簡単になります。</li>
+ <li>ウェブ上でどこにいるのか、何をしているのか、何を読んでいるのか、何と対話しているかといった観点のことが、ユーザーにとって明確になります。</li>
+ <li>検索エンジンによっては、関連するページを分類するためにこれらのセマンティックを使用することがあります。</li>
+</ul>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは</a></li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_is_a_web_server/index.html b/files/ja/learn/common_questions/what_is_a_web_server/index.html
new file mode 100644
index 0000000000..1278ee5d38
--- /dev/null
+++ b/files/ja/learn/common_questions/what_is_a_web_server/index.html
@@ -0,0 +1,119 @@
+---
+title: Web サーバとは
+slug: Learn/Common_questions/What_is_a_web_server
+tags:
+  - Beginner
+  - インフラ
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p><span class="seoSummary">この記事では、Webサーバとは何か、Webサーバの仕組み、なぜWebサーバが重要なのかを復習します。</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学習の前提:</th>
+   <td>すでに<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>を知っており、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Webページ、Webサイト、Webサーバ、検索エンジンの違いを理解していること</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習の目的:</th>
+   <td>Webサーバとは何かを学び、その仕組みに関して全般的な理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>「Webサーバ」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。</p>
+
+<ol>
+ <li>ハードウェアの観点では、Webサーバとは、WebサーバソフトウェアとWebサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、Webに接続された他の端末と物理的なデータ交換に対応しています。</li>
+ <li>ソフトウェアの観点では、Webサーバとは、ホストにあるファイルに対する、Webユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は <em>HTTP サーバです。</em> HTTP サーバは {{Glossary("URL")}} (Webアドレス) および {{Glossary("HTTP")}} (ブラウザーがWebページを閲覧するためのプロトコル) を理解するソフトウェアのことです。格納しているWebサイトのドメイン名 (<code>mozilla.org</code> など) を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。</li>
+</ol>
+
+<p>最も基本的な水準では、ブラウザーはWebサーバが保持しているファイルが必要になったらいつでも、 HTTP でファイルをリクエストします。リクエストが正しいWebサーバ (ハードウェア) に届くと、 <em>HTTP サーバ</em> (ソフトウェア) がリクエストを受け付け、リクエストされた文書を探し (ない場合は <a href="/ja/docs/Web/HTTP/Status/404">404</a> レスポンスが返される)、ブラウザーに HTTP を通して送り返します。</p>
+
+<p><img alt="HTTP を通したクライアント/サーバー接続の基本的な説明" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>Webサイトを公開するには、静的または動的Webサーバが必要です。</p>
+
+<p><strong>静的Webサーバ</strong>、はスタックとも呼ばれますが、コンピューター (ハードウェア) と HTTP サーバ (ソフトウェア) から構成されます。サーバが保持しているファイルをブラウザーへ「そのまま」送るので、「静的」と呼ばれます。</p>
+
+<p><strong>動的Webサーバ</strong>は、静的Webサーバと追加のソフトウェアからなります。追加ソフトウエアは、一般的には<em>アプリケーションサーバと</em><em>データベースからなります</em>。アプリケーションサーバが、 保持しているファイルを変更してから、HTTP サーバを通してブラウザーに送信するので「動的」と呼ばれます。</p>
+
+<p>例えば、ブラウザーで見ることができる最終的なWebページを生成するために、アプリケーションサーバはデータベースからのコンテンツで HTML のテンプレートを埋めることがあります。 MDN やウィキペディアのようなサイトは非常に多くのWebページを持っていますが、実際の HTML 文書が存在するわけではなく、巨大なデータベースとわずかな HTML テンプレートのみが存在しているのです。この構成をとることで、より速く、より簡単にコンテンツを保守したり配信したりすることができます。</p>
+
+<h2 id="Active_learning" name="Active_learning">アクティブラーニング</h2>
+
+<p><em>まだアクティブラーニングはありません。<a href="/ja/docs/MDN/Getting_started">ご協力をお願いします</a>。</em></p>
+
+<h2 id="Deeper_dive" name="Deeper_dive">より深く学ぶ</h2>
+
+<p>すでに述べたとおり、Webページを呼び出すために、ブラウザーはWebサーバにリクエストを送信し、Webサーバは自身のストレージスペースからリクエストされたファイルを探し始めます。ファイルを見つけると、サーバはファイルを読み込み、必要に応じて処理を行い、ブラウザーに送信します。それらのプロセスを詳細に見てみましょう。</p>
+
+<h3 id="Hosting_files" name="Hosting_files">ファイルの格納</h3>
+
+<p>Webサーバは最初に、Webサイトの HTML 文書およびその関連資産である画像、 CSS スタイルシート、 JavaScript ファイル、フォント、動画などのファイルを格納する必要があります。</p>
+
+<p>技術的には、Webサーバとは別のコンピューターにこれらのファイルをすべて保持するようにもできます。しかし、次のような理由で、専用のWebサーバにすべてを格納したほうがはるかに便利です。</p>
+
+<ul>
+ <li>Webサーバは常に動作している</li>
+ <li>常にインターネットに接続されている</li>
+ <li>常に固定の IP アドレスを持っている ({{Glossary("ISP", "プロバイダー")}}は家庭用の回線に固定 IP アドレスを提供しているとは限らない)</li>
+ <li>サードパーティのプロバイダーによって管理されている</li>
+</ul>
+
+<p>これらすべての理由から、良いホスティングのプロバイダーを探すことは、Webサイトを構築する上で重要な部分です。様々なサービス会社が提供するものを探し、ニーズや予算に合う一つを選択しましょう (無料から月当たり数千ドルまでのサービスがあります)。詳しくは<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">この記事</a>にあります。</p>
+
+<p>Webのホスティングサービスを構成したら、後は<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">Webサーバにファイルをアップロードする</a>だけです。</p>
+
+<h3 id="Communicating_through_HTTP" name="Communicating_through_HTTP">HTTP による通信</h3>
+
+<p>次に、Webサーバは {{Glossary("HTTP")}} (<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol) への対応を提供しています。名前にある通り、 HTTP はコンピューター間でハイパーテキスト (リンクされたWeb文書) を転送する方法を定義しています。</p>
+
+<p>{{Glossary("Protocol", "プロトコル")}}は二台のコンピューター間で通信をする規則を設定します。 HTTP はテキストによる、ステートレス（下記参照）のプロトコルです。</p>
+
+<dl>
+ <dt>テキストによる</dt>
+ <dd>すべてのコマンドがプレーンテキストで、人間が読める形です。</dd>
+ <dt>ステートレス</dt>
+ <dd>サーバもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバが必要になります。 (以降の記事で様々な技術を説明します。)</dd>
+</dl>
+
+<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="https://developer.mozilla.org/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p>
+
+<ul>
+ <li><em>クライアント</em>だけが HTTP リクエストを作成することができ、<em>サーバ</em>だけに送ることができます。サーバは<em>クライアント</em>の HTTP リクエストに<em>返答</em>することだけができます。</li>
+ <li>HTTP でファイルをリクエストするとき、クライアントはファイルの {{Glossary("URL")}} を示さなければなりません。</li>
+ <li>Webサーバはすべての HTTP リクエストに応えます。処理できない場合でも、エラーメッセージを返す必要があります。</li>
+</ul>
+
+<p><a href="/ja/docs/Web/HTTP/Status/404"><img alt="エラーページの例として、 MDN の 404 ページ" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>Webサーバにおいて、 HTTP サーバは受信したリクエストを処理してレスポンスを返す責任があります。</p>
+
+<ol>
+ <li>リクエストを受信すると、 HTTP サーバは最初にリクエストされた URL が既存のファイルに一致するかどうかをチェックします。</li>
+ <li>もしあれば、Webサーバはブラウザーにファイルを送り返します。なければ、アプリケーションサーバが必要なファイルを作成します。</li>
+ <li>どちらの処理もできない場合、Webサーバは {{HTTPStatus("404", "404 Not Found")}} としてよく知られているエラーメッセージをブラウザーに返します。 (このエラーはよく起こるので、多くのWebデザイナーが、<a href="http://www.404notfound.fr/" rel="external">404 エラーページ</a>のデザインに時間を割くことになります。)</li>
+</ol>
+
+<h3 id="Static_vs._dynamic_content" name="Static_vs._dynamic_content">動的コンテンツと静的コンテンツ</h3>
+
+<p>大まかに言って、サーバは静的コンテンツと動的コンテンツのどちらかを提供することができます。「静的」は「そのまま提供する」という意味です。静的なWebサイトは構築するのが最も簡単なので、最初に静的サイトを作成することをお勧めします。</p>
+
+<p>「動的」はサーバがコンテンツを処理したり、データベースからその場で作成したりすることを意味します。この方法は、柔軟なページを提供できる反面、技術的難易度が高く、Webサイトの構築が複雑になります。</p>
+
+<p>例を挙げれば、今あなたが見ているページがそれです。この Web サーバには、データベースから記事コンテンツを取り出し、整形し、HTML テンプレート内に配置し、結果を送信するためのアプリケーションサーバがあります。この場合、アプリケーションサーバは <a href="/ja/docs/MDN/Kuma">Kuma</a> と呼ばれ、 (<a href="https://www.djangoproject.com/">Django</a> フレームワークを使用した) <a href="https://www.python.org/">Python</a> 言語で構築されています。 Mozilla チームは Kuma を MDN の特定のニーズのために作成しましたが、他のたくさんの技術で構築された同様のアプリケーションがたくさんあります。</p>
+
+<p>アプリケーションサーバは多くの種類があり、特定のサーバを選ぶのはとても難しいといえます。あるものは、ブログ、Wiki、 E ショップなどに特殊化しています。いっぽう、 {{Glossary("CMS")}} (Content Management System) と呼ばれるものはより一般的です。動的Webサイトを構築するときは、ニーズに合ったツールの選択に時間をかけましょう。Webサーバプログラミングを学習しようとするのでなければ (これ自体はエキサイティングな領域ですが)、独自のアプリケーションサーバを作成する必要はありません。それは{{Interwiki("wikipedia", "車輪の再発明")}}のような、無用な努力になるからです。</p>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<p>Web サーバのことがよく分かったら、次のステップに進みましょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">Webで何かをするのにいくらかかるのか</a>を知る</li>
+ <li><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">Webサイトを作成するのに必要な様々なソフトウェア</a>についてもっと学ぶ</li>
+ <li><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">ファイルをWebサーバにアップロードするには</a>のような、実践的な記事を読む</li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_is_accessibility/index.html b/files/ja/learn/common_questions/what_is_accessibility/index.html
new file mode 100644
index 0000000000..2790e3bcd2
--- /dev/null
+++ b/files/ja/learn/common_questions/what_is_accessibility/index.html
@@ -0,0 +1,90 @@
+---
+title: What is accessibility?
+slug: Learn/Common_questions/What_is_accessibility
+translation_of: Learn/Common_questions/What_is_accessibility
+---
+<div class="summary">
+<p>この記事はwebアクセシビリティの背景にある基本的なコンセプトを紹介します。</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">対象:</th>
+   <td>アクセスビリティが何なのか、なぜ重要なのかを学ぶ</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>物理的、技術的制限のせいで、たぶんあなたの訪問者はあなたの望むような体験をあなたのウェブサイトからできません。 この記事では一般的なアクセシビリティの原則や平易ないくつかの規則を示します。</p>
+
+<h2 id="能動的学習">能動的学習</h2>
+
+<p><em>まだ可能な能動的学習がありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="深く掘っていく">深く掘っていく</h2>
+
+<h3 id="アクセスビリティ_一般的な原則">アクセスビリティ: 一般的な原則</h3>
+
+<p>まず、我々は負の制限に伴うアクセスビリティに関連付けられなければならないだろう。このビルはアクセスブルでなければならず、そうなのでトイレのサイズやエレベーターの設置場所のこれらの規制に従わなければならない。</p>
+
+<p>それはアクセスビリティで考えられる狭い方法である。人々に委ねたり、より多くの顧客に出す、びっくりするような方法を考えてみて下さい。 ブラジルにいる人々に英語のサイトをどのように出しますか？ スマートフォンのブラウザが重く、大きなデスクトップモニターにデザインされたウェブサイトが乱雑であったり、帯域が制限されていないことなどできますか？それらは別の場所に行くべきでしょう。一般的に<em>ターゲット顧客の観点から我々のプロダクトを考え、変化を採用しなければなりません。</em>従って、アクセスビリティなのです。</p>
+
+<h3 id="ウェブアクセシビリティ">ウェブアクセシビリティ</h3>
+
+<p>ウェブの特定の文脈において、アクセシビリティは障害、場所、技術的な制約、他の事情などにも関わらずコンテンツからの利益を誰もが得られることを意味します。 </p>
+
+<p>ビデオについて考えてみましょう</p>
+
+<dl>
+ <dt>聴覚障害</dt>
+ <dd>ビデオを聴覚障害の人はどのようにみるのでしょうか？  字幕を提供しなくてはなりませんし、 —　もしくはそうであってもより良いのはフルテキストの写しです。</dd>
+ <dd>もしくはその人に適応したボリュームに調整してあげることができます。</dd>
+ <dt>視覚障害</dt>
+ <dd>もう一度、ビデオを上映することなしにテキストの写しを説明してあげたり、音声説明を提供することができます。 (ビデオで何が起こっているか述べる画面外の音声)</dd>
+ <dt>中断する能力</dt>
+ <dd>ユーザーがビデオで何か理解できない事態に見舞われるかもしれません。ビデオを止めて、字幕や情報のプロセス読むでしょう。 </dd>
+ <dt>キーボードの能力</dt>
+ <dd>ビデオの内外のタブを使うことで、仕掛けなしにビデオの再生中断をします。</dd>
+</dl>
+
+<h4 id="ウェブアクセスビリティの基本">ウェブアクセスビリティの基本</h4>
+
+<p>いくつかの必要性を基本的なウェブアクセスビリティは含みます。</p>
+
+<ul>
+ <li>あなたのサイトは意味を伝える画像がいつでも必要になります。見ようとするユーザーや低速回線のユーザーに選択的なテキストとして含む必要があります。</li>
+ <li>すべてのユーザーが専らキーボードでグラフィカルインターフェース(メニューを折りたたまないような) 操作できることを確かめなさい。(例えばタブやリターンキーで).</li>
+ <li>テキストのはっきりと明示的な言語の指定を提供しなさい。そして、スクリーンリーダーは適切に読まれます。</li>
+ <li>ユーザーがキーボードで仕掛けなし(少なくともタブの出入りだけで)で単独にすべてのページ上のウィジットナビゲートできるよう確かめなさい。</li>
+</ul>
+
+<p>そして、今、始めよう。</p>
+
+<h3 id="アクセスビリティのチャンピオンたち">アクセスビリティのチャンピオンたち</h3>
+
+<p>1999年以来, the {{Glossary("W3C")}} は{{Glossary("WAI","Web Accessibility Initiative")}}と呼ばれるグループを動かしてきた。このグループはガイドライン、マテリアル、国際的なリソースを通じてアクセスビリティを促進してきた。</p>
+
+<h2 id="より詳細には">より詳細には</h2>
+
+<p>以下を参照して下さい:</p>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Accessibility">ウキィペディアの記事</a> （アクセスビリティに関する）</li>
+ <li><a href="http://www.w3.org/WAI/">WAI (W3Cのアクセスビリティイニシアティブ)</a></li>
+</ul>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>アクセスビリティはウェブデザインや技術構造の両方にインパクトを与えることができます。</p>
+
+<ul>
+ <li>私たちはデザインの観点から, <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li>
+ <li>もし、技術的な側面の興味を持ったら、 <a href="/en-US/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li>
+</ul>
diff --git a/files/ja/learn/common_questions/what_software_do_i_need/index.html b/files/ja/learn/common_questions/what_software_do_i_need/index.html
new file mode 100644
index 0000000000..9b042b3c06
--- /dev/null
+++ b/files/ja/learn/common_questions/what_software_do_i_need/index.html
@@ -0,0 +1,222 @@
+---
+title: Web サイトを作成するのにどんなソフトウェアが必要か？
+slug: Learn/Common_questions/What_software_do_I_need
+tags:
+  - NeedsActiveLearning
+  - WebMechanics
+  - 初心者
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>この記事では、Webサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学習の前提:</th>
+   <td><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>を理解しておいてください。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習の目的:</th>
+   <td>Web サイトを編集、アップロード、閲覧するときに必要なソフトウェアについて学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。</p>
+
+<p>次のようなツールが必要です。</p>
+
+<ul>
+ <li>Web ページの作成と編集</li>
+ <li>Web サーバにファイルをアップロードする</li>
+ <li>Web サイトを見る</li>
+</ul>
+
+<p>ほぼすべてのオペレーティングシステムには、デフォルトでテキストエディタとブラウザが含まれており、Web サイトの閲覧に使用できます。結果的には、通常はファイルを Web サーバに転送するためのソフトウェアを入手するだけで済みます。</p>
+
+<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2>
+
+<p><em>実習はまだありません。<a href="/ja/docs/MDN/Getting_started">あなたの力をお貸しください</a>。</em></p>
+
+<h2 id="Dig_deeper" name="Dig_deeper">より深く掘り下げる</h2>
+
+<h3 id="Creating_and_editing_webpages" name="Creating_and_editing_webpages">Webページの作成と編集</h3>
+
+<p>Webサイトを作成したり編集したりするために、テキストエディターが必要です。テキストエディターは、形式を持たないテキストファイルの作成や修正を行います。 <strong>{{Glossary("RTF")}}</strong> のような他の形式では、太字や下線のような書式を追加することができます。しかし、これらの形式はWebページの作成には適していません。Webサイトを構築する際に幅広い作業に使用するので、どのテキストエディターを使用するかを考えておきましょう。</p>
+
+<p>すべてのデスクトップ OS には、基本的なテキストエディターが付属しています。これらのエディターはすべて簡単なものですが、Webページのコーディングのための特別な機能は持っていません。そこで、お望みなら、利用可能なサードパーティのツールがたくさんあります。サードパーティのテキストエディターには、構文の色付け、自動補完、セクションの折りたたみ、コード検索などの便利な追加機能がよくついています。エディターの簡単なリストを挙げておきます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">OS</th>
+   <th scope="col">内蔵エディター</th>
+   <th scope="col">サードパーティのエディター</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3" rel="external">メモ帳</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li>
+     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%83%83%E3%83%88" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="https://ja.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li>
+     <li><a href="https://ja.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="https://ja.wikipedia.org/wiki/Kate" rel="external">Kate</a> (KDE)</li>
+     <li><a href="https://ja.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td></td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>こちらは、高度なテキストエディターのスクリーンショット例です。</p>
+
+<p><img alt="Notepad++ のスクリーンショット" src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>
+
+<p>こちらは、オンラインのテキストエディターのスクリーンショット例です。</p>
+
+<p><img alt="ShiftEdit のスクリーンショット" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="height: 311px; width: 475px;"></p>
+
+<h3 id="Uploading_files_on_the_Web" name="Uploading_files_on_the_Web">Web上へのファイルのアップロード</h3>
+
+<p>Web サイトを公開する準備が整ったら、Web ページを Web サーバにアップロードする必要があります。さまざまなプロバイダからサーバ上のスペースを購入できます (<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Web で何かをするためにどのくらいコストがかかりますか？</a>を参照)。どのプロバイダを使用するかが決まったら、プロバイダは通常、SFTP URL、ユーザ名、パスワード、およびそれらのサーバへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、<a href="https://ja.wikipedia.org/wiki/Rsync">RSync</a> や <a href="https://help.github.com/en/articles/using-a-custom-domain-with-github-pages">Git/GitHub</a> のような他のアップロードシステムが普及し始めていることを覚えておいてください。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ: </strong>FTP は本質的に安全ではありません。ホスティングプロバイダが安全な接続、例えば  SSH を介した SFTP または RSync の使用を許可していることを確認してください。</p>
+</div>
+
+<p>Web サーバを作成する際、Web サーバにファイルをアップロードすることは非常に重要なステップなので、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">別の記事</a>で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">OS</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">FTP ソフトウェア</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://winscp.net" rel="external">WinSCP</a></li>
+     <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li>
+    </ul>
+   </td>
+   <td colspan="1" rowspan="3">
+    <ul>
+     <li><a href="https://filezilla-project.org/">FileZilla</a> (すべての OS)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)</li>
+     <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://cyberduck.de/">Cyberduck</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a> (すべての OS)</li>
+    </ul>
+   </td>
+   <td colspan="1"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Browsing_websites" name="Browsing_websites">Webサイトの閲覧</h3>
+
+<p>ご存知の通り、Webサイトを閲覧するためにはWebブラウザが必要です。 私用でブラウザ使う時には、<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%B8%80%E8%A6%A7">たくさんのブラウザ</a>の選択肢がありますが、あなたがWebサイトを開発している時には、あなたのWebサイトがほとんどの人々のために働くことを確認するために、少なくとも以下のブラウザで動作確認、テストをする必要があります。</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/ja/firefox/new/" rel="external">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.co.jp/chrome/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/ja/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>特定のグループ (技術プラットフォームや国など) を対象にする場合は、追加で <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, <a href="http://www.ucweb.com/ucbrowser/" rel="external">UC Browser</a> などブラウザでサイトをテストする必要があります。</p>
+
+<p>しかし、ブラウザによっては特定のオペレーティングシステムでしか動作しないものがあるため、テストをすることは複雑になります。 Apple Safari は iOS と Mac OS 上で動作し、 Internet Explorer は Windows 上でのみ動作します。 <a href="http://browsershots.org/" rel="external">Browsershots</a> や <a href="http://www.browserstack.com/" rel="external">Browserstack</a> のようなサービスを利用するのが最善です。 Browsershots は、様々なブラウザで見た場合のWebサイトのスナップショットを提供します。 Browserstack は実際には仮想マシンへの完全なリモートアクセスを提供し、最も一般的な環境でサイトをテストすることができます。他にも、独自の仮想マシンをセットアップする方法もありますが、それにはいくらかの専門知識が必要です。 (もしこの方法を使うのであれば、 Microsoft は <a href="https://modern.ie" rel="external">modern.ie</a>　ですぐに使える仮想マシンを含む開発者のためのいくつかのツールを提供しています。)</p>
+
+<p>是非、実際のデバイス、特に実際のモバイル機器でいくつかのテストを実行してください。モバイル機器のシミュレーションは、進化中の新技術であり、デスクトップのシミュレーションよりも信頼性が低いです。もちろん、モバイル機器はお金を必要としますので、 <a href="http://opendevicelab.com/">Open Device Lab</a> の取り組みを見てみることをお勧めします。多くのプラットフォームでテストする場合は、過度な出費を抑えて機器を共有することもできます。</p>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<ul>
+ <li>一部のソフトウェアは無料ですが、すべてではありません。<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">Web上で何かをするのにいくらのコストがかかるかを調べましょう</a>。</li>
+ <li>テキストエディターについてさらに学びたいのなら、<a href="/ja/docs/Learn/Common_questions/Available_text_editors">テキストエディターの選び方とインストール方法</a>に関する記事をお読みください。</li>
+ <li>Web上にWebサイトを公開する方法が分からないのであれば、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">"Webサーバにファイルをアップロードする方法"</a>を参照してください。</li>
+</ul>