initial commit

9 files changed, 1586 insertions, 0 deletions

diff --git a/files/ja/learn/getting_started_with_the_web/css_basics/index.html b/files/ja/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..86fb5b8ee5
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,295 @@
+---
+title: CSS の基本
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - CSS
+  - CodingScripting
+  - Styling
+  - Web
+  - 'l10n:priority'
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「<em>CSS の基本</em>」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか？そのような場所でコンテンツを画面に表示させるにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。</p>
+</div>
+
+<h2 id="So_what_is_CSS_really" name="So_what_is_CSS_really">それでは CSS とは何でしょうか？</h2>
+
+<p>HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。<strong>CSS はスタイルシート言語です</strong>。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>それでは試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを <code>style.css</code> として <code>styles</code> ディレクトリに保存します。</p>
+
+<p>しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a><span lang="ja"><span>と </span></span><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を読み、まず何をする必要があるのかを見てください)</p>
+
+<ol>
+ <li><code>index.html</code> ファイルを開き、head ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に以下の行を貼り付けます
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li><code>index.html</code> を保存し、ブラウザで読み込みます。このように表示されるでしょう :</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">段落テキスト(<code>&lt;p&gt;</code>と<code>&lt;/p&gt;</code>で囲んだ文字)が赤色になりましたか？おめでとうございます！今はじめて CSS を書き、成功しました！</p>
+
+<h3 id="Anatomy_of_a_CSS_ruleset" name="Anatomy_of_a_CSS_ruleset">CSS ルールセットの構造</h3>
+
+<p>上記の CSS をもう少し詳しく見てみましょう:</p>
+
+<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>全体の構造は<strong>ルールセット</strong>と呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :</p>
+
+<dl>
+ <dt>{{原語併記("セレクタ", "selector")}}</dt>
+ <dd>ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。</dd>
+ <dt>{{原語併記("宣言", "declaration")}}</dt>
+ <dd><code>color: red;</code> のような単一のルールで、要素の<strong>プロパティ</strong>のうちどの要素をスタイルするかを指定します。</dd>
+ <dt>{{原語併記("プロパティ", "property")}}</dt>
+ <dd>指定された HTML 要素のスタイルを設定する方法 (この場合 <code>color</code> は {{htmlelement("p")}} 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。</dd>
+ <dt>{{原語併記("プロパティ値", "property value")}}</dt>
+ <dd>プロパティの右側にはコロンの後に<strong>プロパティ値</strong>があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。</dd>
+</dl>
+
+<p>構文の他の重要な部分に注意してください:</p>
+
+<ul>
+ <li>各ルールセット (セレクタを除く) は中括弧 (<code>{}</code>) で囲む必要があります。</li>
+ <li>各宣言内ではコロン (<code>:</code>) を使用してプロパティを値から分離する必要があります。</li>
+ <li>各規則セット内でセミコロン (<code>;</code>) を使用し、各宣言を次の規則と区切る必要があります。</li>
+</ul>
+
+<p>したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Selecting_multiple_elements" name="Selecting_multiple_elements">複数の要素を選択する</h3>
+
+<p>複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。例えば:</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Different_types_of_selectors" name="Different_types_of_selectors">さまざまな種類のセレクタ</h3>
+
+<p>多くのさまざまな種類のセレクタがあります。上の項目では、特定のHTMLドキュメント内の特定のタイプのすべての要素を選択する<strong>要素セレクタ</strong>だけを取り上げました。しかしそれ以上に細かい選択をすることができます。一般的なタイプのセレクタを次に示します:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクタ名</th>
+   <th scope="col">何を選択するか</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>要素セレクタ (時々タグまたは型セレクタと呼ばれます)</td>
+   <td>指定された型のすべての HTML 要素</td>
+   <td><code>p</code><br>
+    <code>&lt;p&gt;</code> を選択</td>
+  </tr>
+  <tr>
+   <td>ID セレクタ</td>
+   <td>ページ上の指定された ID を持つ要素。 特定のHTMLページでは、1つのIDにつき1つの要素（そしてもちろん1つの要素につき1つのID）しか許されません。</td>
+   <td><code>#my-id</code><br>
+    <code>&lt;p id="my-id"&gt;</code> または <code>&lt;a id="my-id"&gt;</code> を選択</td>
+  </tr>
+  <tr>
+   <td>クラスセレクタ</td>
+   <td>指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます)</td>
+   <td><code>.my-class</code><br>
+    <code>&lt;p class="my-class"&gt;</code> 及び <code>&lt;a class="my-class"&gt;</code> を選択</td>
+  </tr>
+  <tr>
+   <td>属性セレクタ</td>
+   <td>指定された属性を持つページ上の要素</td>
+   <td><code>img[src]</code><br>
+    <code>&lt;img src="myimage.png"&gt;</code> を選択するが、<code>&lt;img&gt; は選択しない</code></td>
+  </tr>
+  <tr>
+   <td>擬似クラスセレクタ</td>
+   <td>指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。</td>
+   <td><code>a:hover</code><br>
+    <code>&lt;a&gt;</code> を選択するが、マウスポインターがリンク上にあるときのみ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>セレクタの種類は多く、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタガイド</a>により詳しい一覧があります。</p>
+
+<h2 id="Fonts_and_text" name="Fonts_and_text">フォントとテキスト</h2>
+
+<p>CSS の基本をいくつか勉強しましたので、<code>style.css</code> ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。</p>
+
+<ol>
+ <li>まず最初に、どこかの安全に保存した<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Font"> Google フォントの出力</a>を見つけてください。{{htmlelement("link")}} 要素を <code>index.html</code> の上部 (<code>&lt;head&gt;</code> タグと <code>&lt;/head&gt;</code> タグの間) のどこかに追加します。これは次のようになります:
+
+  <pre class="brush: html notranslate">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+
+  <p>このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。</p>
+ </li>
+ <li>次に <code>style.css</code> ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。</li>
+ <li>代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の <code>font-family</code> 行に置き換えます。(この <code>font-family</code> は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<code>&lt;html&gt;</code> はページ全体の親要素です。その中のすべての要素は同じ <code>font-size</code> と <code>font-family</code> を継承します):
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>注</strong>: 「px」の意味を説明するコメントを追加しました。<code>/*</code> と <code>*/</code> の間にある CSS ドキュメント内のものは <strong>CSS コメント</strong>です。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。</p>
+  </div>
+ </li>
+ <li>HTML ボディ ({{htmlelement("h1")}}、{{htmlelement("li")}}、{{htmlelement("p")}}) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>これらの <code>px</code> 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Boxes_boxes_its_all_about_boxes" name="Boxes_boxes_it's_all_about_boxes">ボックス、ボックス、ボックスについてのすべてのこと</h2>
+
+<p>CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>当然のことながら、CSS レイアウトは主に<em>ボックスモデル</em>に基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:</p>
+
+<ul>
+ <li><code>padding</code>: コンテンツのまわりのスペース (例えば段落テキストの周り)</li>
+ <li><code>border</code>: <code>padding</code> のすぐ外側にある実線</li>
+ <li><code>margin</code>: 要素の外側の周りの空間</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>このセクションでは次のものを使用します :</p>
+
+<ul>
+ <li><code>width</code> (要素の)</li>
+ <li><code>background-color</code>: <span class="short_text" id="result_box" lang="ja"><span>要素の内容と padding の背後にある色</span></span></li>
+ <li><code>color</code>: 要素のコンテンツ (通常はテキスト) の色</li>
+ <li><code>text-shadow</code>: 要素内のテキストに影を設定する</li>
+ <li><code>display</code>: 要素の表示モードを設定します (これについてはまだ心配しないでください)</li>
+</ul>
+
+<p>では、ページに CSS を追加しましょう！これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。</p>
+
+<h3 id="Changing_the_page_color" name="Changing_the_page_color">ページの色を変更する</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>このルールはページ全体の背景色に設定を行います。上記のカラーコードを、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Theme_color">サイトを計画する際に選択した</a>色に変更します。</p>
+
+<h3 id="Sorting_the_body_out" name="Sorting_the_body_out">ボディのスタイリング</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — これにより body は常に 600 ピクセルの幅になります。</li>
+ <li><code>margin: 0 auto;</code> — <code> margin</code> や <code>padding</code> などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は 0 になります )。2 番目の値は左右です (<a href="/ja/docs/Web/CSS/margin#Values">ここ</a>で <code>auto</code> は利用可能な水平スペースを左右に均等に分割します)。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/margin#Values">margin の構文</a>で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。</li>
+ <li><code>background-color: #FF9500;</code> — 前と同じようにこれは要素の背景色を設定します。このプロジェクトでは <code>body</code> に <code>html</code> 要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。<code>white</code> や何でも好きなものを自由に使用してください。</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — <code>padding</code> に 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。<code>margin</code> と同様に、<a href="/ja/docs/Web/CSS/padding#Syntax">パディング構文</a>で説明されているように、1つ、2つ、または3つの値を使用することもできます。</li>
+ <li><code>border: 5px solid black;</code> — これは <code>body</code> の全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。</li>
+</ul>
+
+<h3 id="Positioning_and_styling_our_main_page_title" name="Positioning_and_styling_our_main_page_title">メインページタイトルの配置とスタイリング</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p><code>body</code> の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが {{htmlelement("h1")}} 要素 (他の中でも) に<strong>デフォルトのスタイル</strong>を適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、<code>margin: 0;</code> を設定してデフォルトのスタイルを上書きします。</p>
+
+<p>次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを <code>html</code> の背景色と同じ色にしました。</p>
+
+<p>私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する <code>text-shadow</code> です。その 4 つの値は次のとおりです。</p>
+
+<ul>
+ <li>最初のピクセル値は、テキストからのシャドウの<strong>水平オフセット</strong>を設定します。移動する距離は負の値で、左に移動する必要があります。</li>
+ <li>2 番目のピクセル値は、テキストからシャドウの<strong>垂直オフセット</strong>を設定します　(この例では、どれだけ下に移動するか)。負の値では上に移動します。</li>
+ <li>3 番目のピクセル値は影の<strong>ぼかし半径</strong>を設定します。値が大きいほど影がぼやけることを意味します。</li>
+ <li>4 番目の色は影の基本色を設定します。</li>
+</ul>
+
+<p>繰り返しますが、さまざまな値を試してみてください。</p>
+
+<h3 id="Centering_the_image" name="Centering_the_image">画像のセンタリング</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>最後に画像をよりよく見えるように中央に配置します。以前は <code>body</code> のために実施したことと同じようにもう一度 <code>margin: 0 auto</code> トリックを使うことができましたが、何か別のことをする必要もあります。<code>body</code> 要素は<strong>ブロックレベル</strong>です。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。一方、イメージは<strong>インライン</strong>要素でありできないことを意味します。画像にマージンを適用するには、<code>display: block;</code> を使用して画像のブロックレベルの動作を指定する必要があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <code>&lt;img&gt;</code> 要素の {{cssxref("width")}} プロパティを小さな値、例えば <code>400 px;</code> に設定することで、 CSS を使用してイメージのサイズを変更します。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: あなたがまだ <code>display: block;</code> とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、<a href="/ja/docs/Web/CSS/display">display のリファレンスページ</a><span lang="ja">を参照してください。</span></p>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>この記事のすべての手順に従っている場合は、次のようなページが表示されます (<a href="http://mdn.github.io/beginner-html-site-styled/">このリンクから我々が作成したバージョンを見る</a>こともできます)。</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>もしわからなくなった場合、<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">Github の完成したサンプルコード</a>と作業内容を常に比較することができます。</p>
+
+<p>ここでは、CSS の表面に少し触れただけです。詳細については、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS">CSS の学習トピック</a><span lang="ja">をご覧ください。 </span></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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">ウェブサイトの公開</a></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..cdc3e3a336
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,117 @@
+---
+title: ファイルの扱い
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+tags:
+  - Beginner
+  - CodingScripting
+  - Files
+  - HTML
+  - 'l10n:priority'
+  - theory
+  - website
+  - ガイド
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p>
+</div>
+
+<h2 id="Where_should_your_website_live_on_your_computer" name="Where_should_your_website_live_on_your_computer">コンピュータ上で Web サイトがあるべき場所</h2>
+
+<p>自分のコンピュータ上の Web サイトでローカルに作業している時、関連するすべてのファイルを、サーバ上に公開された Web サイトのファイル構造のミラーである単一のフォルダに保持する必要があります。このフォルダは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダの中、またはハードディスクのルートなどに置いてください。</p>
+
+<ol>
+ <li>Web サイトプロジェクトを保存する場所を選択してください。ここでは <code>web-projects</code> (またはそれに類するもの) という新しいフォルダを作成します。これは Web サイトのプロジェクト全てを保持するところです。</li>
+ <li>この最初のフォルダの中に、最初の Web サイトを格納する別のフォルダを作成します。それを <code>test-site</code> (またはもっと想像力のあるもの) と呼びましょう。</li>
+</ol>
+
+<h2 id="An_aside_on_casing_and_spacing" name="An_aside_on_casing_and_spacing">大文字と空白の除外</h2>
+
+<p>この記事を通して、フォルダやファイルに空白のない全て小文字で名前を付けるよう求めていることに気が付くでしょう。その理由は次の通りです。</p>
+
+<ol>
+ <li>多くのコンピュータ、特に Web サーバでは、大文字と小文字が区別されます。例えば、あなたの Web サイトの <code>test-site/MyImage.jpg</code> に画像を置いて、別のファイルから画像を <code>test-site/myimage.jpg</code> として呼び出せば、それは動作しないかもしれません。</li>
+ <li>ブラウザ、Web サーバ、プログラミング言語は、空白の扱いが一貫していません。例えば、ファイル名に空白を使用すると、システムによってはそのファイル名を 2 つのファイル名として扱うことがあります。サーバによっては、ファイル名の空白を "%20" (URI の空白の文字コード) に置き換えるので、リンクが壊れてしまう結果になります。<code>my_file.html</code> のように単語をアンダースコアで区切るよりは、<code>my-file.html</code> のようにハイフンで区切る方がよいでしょう。</li>
+</ol>
+
+<p>簡単に言えば、ファイル名にはハイフンを使うべきです。Google の検索エンジンはハイフンを単語の区切りとして扱いますが、アンダースコアはそうしません。このような理由から、少なくとも自分で判断できるようになるまでは、フォルダやファイルの名前を空白のない小文字にして、ダッシュで区切った方がいいでしょう。そうすれば、転んで道路に倒れることが少なくなるでしょう。</p>
+
+<h2 id="What_structure_should_your_website_have" name="What_structure_should_your_website_have">Web サイトはどのような構成にするべきか</h2>
+
+<p><span>次に、テストサイトがどのような構造を持つべきかを見てみましょう。私たちが作成する Web サイトプロジェクトで最も一般的なのは、index の HTML ファイルと、画像、スタイルシート、スクリプトファイルを入れるフォルダです。作成してみましょう。</span></p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。テキストエディターを使用して、<code>index.html</code> という名前の新しいファイルを作成し、<code>test-site</code> フォルダ内に保存します。</li>
+ <li><strong><code>images</code> フォルダ</strong>: このフォルダにはサイトで使用するすべての画像を入れます。<code>test-site</code> フォルダの中に <code>images</code> という名前のフォルダを作成します。</li>
+ <li><strong><code>styles</code> フォルダ</strong>: このフォルダには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。<code>test-site</code> のフォルダの中に <code>styles</code> というフォルダを作成します。</li>
+ <li><strong><code>scripts</code> フォルダ </strong>: このフォルダには、サイトにインタラクティブ機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）が含まれます。<code>test-site</code> のフォルダの中に <code>scripts</code> というフォルダを作成します。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: Windows では、既定で有効になっている<strong>既知のファイルの種類の拡張子を表示しない</strong>というオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、Windows エクスプローラーで <strong>[フォルダオプション...]</strong> オプションを選択し、<strong>[登録されている拡張子は表示しない]</strong> チェックボックスをオフにし、<strong>[OK]</strong> をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、Web で検索してください。</p>
+</div>
+
+<h2 id="File_paths" name="File_paths">ファイルパス</h2>
+
+<p>ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、<code>index.html</code> ファイルに短い HTML を挿入し、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどのような外見にするか</a>の記事で選択した画像を表示させます。あるいは、コンピュータ上またはウェブ上の既存の画像を自由に選択して、以下の手順で使用することができます。</p>
+
+<ol>
+ <li>以前に選択した画像を <code>images</code> フォルダにコピーします。</li>
+ <li><code>index.html</code> ファイルを開き、次のコードをファイルに挿入します。それが今のところ何を意味するのか気にしないでください。シリーズの後半で構造を詳しく見ていきます。
+  <pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li><code>&lt;img src="" alt="My test image"&gt;</code> という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は <em>images</em> ディレクトリ内にあり、<code>index.html</code> と同じディレクトリにあります。ファイル構造の中で <code>index.html</code> からその画像に移動するのに必要なファイルパスは <code>images/your-image-filename</code> です。例えば、私たちの画像は firefox-icon.png と呼ばれ、ファイルパスは <code>images/firefox-icon.png</code> です。</li>
+ <li><code>src=""</code> コードの二重引用符の間の HTML コードにファイルパスを挿入します。</li>
+ <li>HTML ファイルを保存し、Web ブラウザに読み込みます (ファイルをダブルクリックします)。新しい Web ページに画像が表示されます。</li>
+</ol>
+
+<p><img alt="地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>ファイルパスの一般的なルールは次の通りです。</p>
+
+<ul>
+ <li>呼び出し元の HTML ファイルと同じディレクトリにある対象ファイルにリンクするには、ファイル名を使用します。例えば <code>my-image.jpg</code>。</li>
+ <li>サブディレクトリ内のファイルを参照するには、パスの前にディレクトリ名とスラッシュを入力します。例えば <code>subdirectory/my-image.jpg</code>。</li>
+ <li>呼び出し元の HTML ファイルの<strong>上階層</strong>のディレクトリ内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、<code>index.html</code> が <code>test-site</code> のサブフォルダ内にあり、<code>my-image.jpg</code> が <code>test-site</code> 内にある場合、<code>../my-image.jpg</code> を使用して <code>index.html</code> から <code>my-image.jpg</code> を参照できます。</li>
+ <li>例えば <code>../subdirectory/another-subdirectory/my-image.jpg</code> など、好きなだけ組み合わせることができます。</li>
+</ul>
+
+<p>今のところ、これが知る必要があるすべてです。</p>
+
+<div class="note">
+<p><strong>注 </strong>: Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します。(例 : <code>C:\windows</code>)。これは HTML では使用できません。Windows で Web サイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。</p>
+</div>
+
+<h2 id="What_else_should_be_done" name="What_else_should_be_done">他にするべきこと</h2>
+
+<p>今のところは以上です。フォルダ構造は次のようになります。</p>
+
+<p><img alt="macOS X の finder におけるファイル構造。images フォルダーに画像が入っており、scripts と styles フォルダーは空で、あと index.html がある" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..8aaecfed16
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,110 @@
+---
+title: Web のしくみ
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+tags:
+  - DNS
+  - HTTP
+  - IP
+  - Infrastructure
+  - TCP
+  - 'l10n:priority'
+  - クライアント
+  - サーバー
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Web のしくみ</em>では、あなたがコンピュータや携帯電話の Web ブラウザで Web ページを見るときに起こることを簡単に説明します。</p>
+</div>
+
+<p>この理論は、Web のコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。</p>
+
+<h2 id="Clients_and_servers" name="Clients_and_servers">クライアントとサーバ</h2>
+
+<p>Web に接続されたコンピュータは<strong>{{原語併記("クライアント", "client")}}</strong>と<strong>{{原語併記("サーバ", "server")}}</strong>と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。</p>
+
+<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p>
+
+<ul>
+ <li>クライアントは、一般的な Web ユーザーが使うインターネットに接続されたデバイス (例えば Wi-Fi に接続されているコンピュータや、モバイルネットワークに接続されているスマートフォン) と、これらのデバイスで利用できる Web にアクセスするソフトウェア (ふつうは Firefox や Chrome などの Web ブラウザ) のことです。</li>
+ <li>サーバとは、Web ページ、サイト、アプリを保存しているコンピュータのことです。クライアントデバイスが Web ページにアクセスしたいときは、Web ページのコピーがサーバからクライアントにダウンロードされ、ユーザーの Web ブラウザに表示されます。</li>
+</ul>
+
+<h2 id="The_other_parts_of_the_toolbox" name="The_other_parts_of_the_toolbox">道具箱の他の部分</h2>
+
+<p>もちろん上で説明したクライアントとサーバだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。</p>
+
+<p>いま、Web が道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えれば、あなたの自宅のようなものです。反対の端はサーバで、そこは例えれば、あなたが何かを買うお店のようなものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>クライアントとサーバに加えて、以下のものにも触れなければなりません。</p>
+
+<ul>
+ <li><strong>インターネット接続</strong>： Web 上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。</li>
+ <li><strong>TCP/IP</strong>： Transmission Control Protocol と Internet Protocol は、どのように Web 上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。</li>
+ <li><strong>DNS</strong>： Domain Name Servers は Web サイトの住所録のようなものです。ブラウザに Web アドレスを入力すると、ブラウザは Web サイトを取得する前に DNS を見て、Web サイトの本当のアドレスを探します。ブラウザは Web サイトがどのサーバにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。</li>
+ <li><strong>HTTP：</strong> Hypertext Transfer Protocol は、クライアントとサーバが対話をする方法を定義するアプリケーション{{Glossary("Protocol" , "プロトコル")}}です。これは商品を注文するための言語のようなものです。</li>
+ <li><strong>コンポーネントファイル：</strong> Web サイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。
+  <ul>
+   <li><strong>コードファイル</strong>: Web サイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。</li>
+   <li><strong>アセット</strong>: これは画像、音楽、動画、Word 文書、PDF といった Web サイトを構成するコード以外のすべての材料の集合的な名前です。</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="So_what_happens_exactly" name="So_what_happens_exactly">ならば何が起こるのか</h2>
+
+<p>ブラウザに Web アドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは)，</p>
+
+<ol>
+ <li>ブラウザは DNS サーバにアクセスし、Web サイトのあるサーバの実際のアドレスを探します (<strong>お店の住所を見つけます</strong>)</li>
+ <li>ブラウザはサーバに HTTP リクエストメッセージを送信して、Web サイトのコピーをクライアントに送るよう求めます (<strong>お店に行ってものを注文します</strong>)。このメッセージ、およびクライアントとサーバ間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます</li>
+ <li>サーバがクライアントのリクエストを承認すると、サーバはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんその Web サイトを見ることができます。どうぞ！」という意味です。そして Web サイトのファイルを、データパケットと呼ばれる一連の小さな{{原語併記("塊", "chunk")}}としてブラウザに送信し始めます (<strong>お店は商品を渡し、あなたは自宅に持って帰ります</strong>)</li>
+ <li>ブラウザは小さな塊を完全な Web サイトに組み立て、表示します (<strong>玄関にものが到着しました</strong> — 新しいピカピカのものです、すばらしい！)</li>
+</ol>
+
+<h2 id="DNS_explained" name="DNS_explained">DNS の説明</h2>
+
+<p>実際の Web アドレスは、お気に入りの Web サイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際の Web アドレスは <code>63.245.217.105</code> のような特殊な数字です。</p>
+
+<p>これは、{{Glossary("IP Address", "IP アドレス")}} と呼ばれ、Web 上の一意の場所を表します。しかし、覚えにくいと思いませんか？だから、ドメインネームサーバが発明されたのです。これらは特別なサーバで、ブラウザに入力した Web アドレス ("mozilla.org" など) と Web サイトの実際の (IP) アドレスを対応させます。</p>
+
+<p>Web サイトには、IP アドレスを使用して直接アクセスできます。<a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a> のようなツールにドメインを打ち込むことで、Web サイトの IP アドレスを見つけることができます。</p>
+
+<h2 id="Packets_explained" name="Packets_explained">パケットの説明</h2>
+
+<p>先ほど、データがサーバからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、Web 上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じ Web サイトを同時にダウンロードできます。Web サイトが単一の大きな塊として送信されるとすると、一度に1人のユーザーしかダウンロードできなくなるため、Web がとても非効率的になり、使うのが楽しくなくなるでしょう。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどのように動くのか</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Credit" name="Credit">クレジット表示</h2>
+
+<p>道路の写真: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/html_basics/index.html b/files/ja/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..aeaba9696e
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,239 @@
+---
+title: HTML の基本
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - CodingScripting
+  - HTML
+  - Web
+  - 'l10n:priority'
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML とその機能の基本的な理解ができるように説明します。</p>
+</div>
+
+<h2 id="So_what_is_HTML_really" name="So_what_is_HTML_really">そもそも HTML とは</h2>
+
+<p>HTML はプログラミング言語ではありません。<em>マークアップ言語</em>と言って、コンテンツの構造を決めるものです。 HTML は <strong>{{Glossary("element", "要素")}}</strong> の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。{{Glossary("tag", "タグ")}} は言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。</p>
+
+<pre class="notranslate">My cat is very grumpy</pre>
+
+<p>上の文を単体で表示したいなら、段落タグ ({{htmlelement("p")}}) で文を囲うことでこれが段落であると指定することができます。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomy_of_an_HTML_element" name="Anatomy_of_an_HTML_element">HTML 要素の中身</h3>
+
+<p>この段落要素についてもうちょっと詳しく見ていきましょう。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>要素は主に以下のようなもので構成されています:</p>
+
+<ol>
+ <li><strong>{{原語併記("開始タグ", "opening tag")}}:</strong> これは、要素の名前(今回は p)を<strong>山括弧</strong>で囲ったものです。どこから要素が始まっているのかやどこで効果が始まるのかを表しています。今回の場合どこから段落が始まるかを表しています。</li>
+ <li><strong>{{原語併記("終了タグ", "closing tag")}}:</strong> これは、要素名の前に<strong>スラッシュ</strong>が入っていることを除いて開始タグと同じです。どこで要素が終わっているかを表しています。今回の場合どこで段落が終わるかを表しています。終了タグの書き忘れは、初心者のよくある間違いで、正しく表示されません。</li>
+ <li><strong>{{原語併記("コンテンツ", "content")}}:</strong> 要素の内容です。今回の場合はただの文字です。</li>
+ <li><strong>{{原語併記("要素", "element")}}:</strong> 開始タグ、終了タグ、コンテンツで要素を構成します。</li>
+</ol>
+
+<p>要素は{{原語併記("属性", "Attribute")}}を持つことが出来ます。このような感じです:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは <code>class</code> が属性の<em>名前</em>で <code>editor-note</code> が属性の<em>値</em>です。 <code>class</code> 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。</p>
+
+<p>属性は次のような形式です。</p>
+
+<ol>
+ <li>要素名 (すでにいくつか属性がある場合はひとつ前の属性) との間の空白</li>
+ <li>属性名とそれに続く等号</li>
+ <li>引用符で囲まれた属性の値</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: ASCII の空白 (または <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code> 文字) を含まない単純な属性値は引用符を付けないままにすることができますが、コードの一貫性と理解を容易にするため、すべての属性値を引用することをお勧めします。</p>
+</div>
+
+<h3 id="Nesting_elements" name="Nesting_elements">要素のネスト</h3>
+
+<p>要素の中に他の要素を入れることも出来ます。これを<strong>ネスト</strong>(または入れ子)と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を {{htmlelement("strong")}} 要素に入れて単語の強調を表すことが出来ます。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;私のネコは&lt;strong&gt;とっても&lt;/strong&gt;機嫌が悪い。&lt;/p&gt;</pre>
+
+<p>しかしながら要素のネストは正しく行われなければなりません。上記の例ではまず始めに {{htmlelement("p")}} 要素が開始され、その次に {{htmlelement("strong")}} 要素が開始されています。そうしたならば、必ず {{htmlelement("strong")}} 要素、 {{htmlelement("p")}} 要素の順で終了しなければなりません。次の例は間違いです。</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;私の猫は&lt;strong&gt;とっても機嫌が悪い。&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、 Web ブラウザはあなたがしようとしていたことを推測してもっともよいと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！</p>
+
+<h3 id="Empty_elements" name="Empty_elements">空要素</h3>
+
+<p>コンテンツを持たない要素もあります。そのような要素を<strong>{{原語併記("空要素", "empty elements")}} </strong>と呼びます。 {{htmlelement("img")}} 要素を例に見ていきましょう。</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>この要素は 2 つの属性を持っていますが終了タグ <code>&lt;/img&gt;</code> はありませんし、内部にコンテンツもありません。これは image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。</p>
+
+<h3 id="Anatomy_of_an_HTML_document" name="Anatomy_of_an_HTML_document">HTML 文書の構造</h3>
+
+<p>ここまでは HTML 要素についてみてきました。しかし要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。<a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>で出てきた <code>index.html</code> に書いてあるコードをもう一度見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>この中にあるものは以下の通りです。</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — {{htmlelement("html")}} 要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — {{htmlelement("head")}} 要素です。この要素は HTML ページの、閲覧者に向けて表示<em>されない</em>コンテンツをまとめるための入れ物です。<code>&lt;head&gt;</code>要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — この要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。指定しない理由は特に無く、指定することで後から出てくる様々な問題を避けることが出来ます。</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — {{htmlelement("title")}} 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — {{htmlelement("body")}} 要素です。 <code>&lt;body&gt;</code> 要素はページの閲覧者に対して見せたいもの<em>すべて</em>を含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。</li>
+</ul>
+
+<h2 id="Images" name="Images">画像</h2>
+
+<p>もう一度 {{htmlelement("img")}} 要素について見ていくことにしましょう。</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>前に説明したように、これは書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ <code>src</code> (source) 属性を指定する事によってその画像を表示できます。</p>
+
+<p>また、 <code>alt</code> (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。</p>
+
+<ol>
+ <li>目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の <code>alt</code> 属性の内容を読み上げます。</li>
+ <li>何らかの理由で画像の表示に失敗した場合。例えば、 <code>src</code> 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p><code>alt</code> 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。上の「My test image」はあまり良い例ではありません。 Firefox のロゴの代替文字列として適切なのは、「地球を囲む燃えるような狐の Firefox ロゴ」というようなものです。</p>
+
+<p>あなたが用意した画像に良い代替文字列を付けてみましょう。</p>
+
+<div class="note">
+<p>注記: アクセシビリティについて詳しくは <a href="/docs/Web/Accessibility">MDN のアクセシビリティのページ</a>を参照してください。</p>
+</div>
+
+<h2 id="Marking_up_text" name="Marking_up_text">テキストのマークアップ</h2>
+
+<p>この章では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。</p>
+
+<h3 id="Headings" name="Headings">見出し</h3>
+
+<p>見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。 HTML では {{htmlelement("h1")}} から {{htmlelement("h6")}} の 6段階の見出しが用意されていますが、よく使うのはせいぜい 3 つから 4 つほどでしょう。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>それでは、あなたの HTML の {{htmlelement("img")}} 要素の上に適切なタイトルを付けてみましょう。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 見出しレベル1には暗黙のスタイルがあることがわかります。テキストを大きくしたり太字にしたりするために見出し要素を使用しないでください。これらは<a href="/ja/docs/Learn/Accessibility/HTML#Text_content">アクセシビリティ</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">SEO などのその他の理由</a>で使用されます。レベルをスキップせずに、ページ上に意味のある一連の見出しを作成してください。</p>
+</div>
+
+<h3 id="Paragraphs" name="Paragraphs">段落</h3>
+
+<p>先に説明したように、 {{htmlelement("p")}} 要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使うことになるでしょう。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>試しに {{htmlelement("img")}} 要素のすぐ下にいくつか段落を作り、文章を書いてみましょう。(文章は <em><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトはどんな見た目にしたいですか？</a></em>から持ってきても良いです。)</p>
+
+<h3 id="Lists" name="Lists">リスト</h3>
+
+<p>多くの Web のコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。</p>
+
+<ol>
+ <li><strong>番号なしリスト</strong>は、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは {{htmlelement("ul")}} 要素で囲みます。</li>
+ <li><strong>番号付きリスト</strong>は料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは {{htmlelement("ol")}} 要素で囲みます。</li>
+</ol>
+
+<p>リストの中に入るそれぞれのアイテムは {{htmlelement("li")}} (list item) 要素の中に書きます。</p>
+
+<p>例えば、次の段落の一部をリストにしたい場合、</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>以下のようにマークアップします。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>あなたのページに番号付きリストと番号なしリストを追加してみましょう。</p>
+
+<h2 id="Links" name="Links">リンク</h2>
+
+<p>リンクはとても重要です ―― これが Web をひとつの Web にします。リンクを追加するには、シンプルな要素 {{htmlelement("a")}} を使えばよいです。 <code>a</code> は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。</p>
+
+<ol>
+ <li>リンクにしたい文字を選びます。今回は "Mozila Manifesto" を選びました。</li>
+ <li>選んだ文字を {{htmlelement("a")}} 要素で囲みます。
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>このように {{htmlelement("a")}} 要素に <code>href</code> 属性を追加します。
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>このリンクがリンクしたい Web アドレスをこの属性の値に書き込みます。
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>アドレスの先頭にある <code>https://</code> や <code>http://</code> の部分 (<em>プロトコル</em>と言います) を書き忘れると、予期せぬ結果となってしまうかもしれません。リンクを作ったら、ちゃんとそれが遷移したいところに行ってくれるかを確かめましょう。</p>
+
+<div class="note">
+<p><code>href</code> は属性名として変に思うかもしれません。覚えにくかったら、 <code>href</code> は <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> を表しているということを覚えておきましょう。</p>
+</div>
+
+<p>もしまだやってないのなら、ページにリンクを追加してみましょう。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>ここまでの説明に沿ってやってきたのなら、下のようなページが出来上がっているはずです (<a href="http://mdn.github.io/beginner-html-site/">ここ</a>でも見られます)。<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>もし途中で行き詰まってしまったなら、 GitHub にある<a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">完成版のコード例</a>と見比べてみてください。</p>
+
+<p>この記事では HTML の表面的な部分だけを勉強しました。もっと知りたい場合は <a href="/ja/docs/Learn/HTML">HTML を学ぶ</a>を読んでみてくだい。</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/index.html b/files/ja/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..6471ecabd2
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,65 @@
+---
+title: Web 入門
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - HTML
+  - Index
+  - 'l10n:priority'
+  - publishing
+  - ガイド
+  - デザイン
+  - 学習
+  - 理論
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際に Web に公開します。</p>
+</div>
+
+<h2 id="The_story_of_your_first_website" name="The_story_of_your_first_website">初めての Web サイトの旅</h2>
+
+<p>プロが作るような Web サイトを作るのはとても大変な作業です。Web 開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単な Web サイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。</p>
+
+<p>以下の記事を順番に読んでいけば、Web サイトを作ったことがない全くの初心者でも、自身の Web サイトを作って、Web に公開できるようになります。さあ、はじめましょう！</p>
+
+<h3 id="Installing_basic_software" name="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></h3>
+
+<p>Web サイトを作るためのツールはたくさんあります。Web 開発を始めたばかりの頃は、テキストエディタやフレームワーク、テストツールといったいろいろなソフトウェアが山のようにあって、混乱してしまうかもしれません。そこで、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>では、基本的な Web 開発を始めるあなたのために私たちが選んだツールを紹介して、ツールのインストールの手順をひとつずつ順番に説明しています。</p>
+
+<h3 id="What_will_your_website_look_like" name="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></h3>
+
+<p>Web サイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたの Web サイトにはどんな情報を載せますか？フォントや色はどうしたいですか？<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"> Web サイトをどんな外見にするか</a>では、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。</p>
+
+<h3 id="Dealing_with_files" name="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></h3>
+
+<p>Web サイトを作るにはたくさんのファイルが必要です。テキストコンテンツのファイル、コードのファイル、スタイルシートのファイル、画像などのメディアコンテンツのファイルなどがあります。Web サイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>では、Web サイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。</p>
+
+<h3 id="HTML_basics" name="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></h3>
+
+<p>Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ) は、Web サイトのコンテンツに構造を指定して、それぞれの部分がどういう意味や目的を持っているのかを指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>では、分からなくならないように、HTML に親しめるように丁寧に説明します。</p>
+
+<h3 id="CSS_basics" name="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></h3>
+
+<p>Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、Web サイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、Web サイトを好きなように飾り付けることができます。<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>では、こうした飾り付けの方法について説明します。</p>
+
+<h3 id="JavaScript_basics" name="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></h3>
+
+<p>JavaScript は、Web サイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。</p>
+
+<h3 id="Publishing_your_website" name="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Web サイトの公開</a></h3>
+
+<p>Web サイトのコードを書き終えて、Web サイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/ウェブサイトを公開する"> サイトの公開</a>では、あなたが書いた簡単なコードをオンラインにして世界中に公開するための簡単な方法を説明します。</p>
+
+<h3 id="How_the_web_works" name="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></h3>
+
+<p>あなたがお気に入りの Web サイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works"> のしくみ</a>では、あなたがパソコンで Web ページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: 完全な初心者を対象とした、Web 開発までの Web の基本を説明した動画の素晴らしいシリーズ。<a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 作。</p>
+
+<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: この記事では、Web の役立つ背景 — どうやってできたのか、Web 標準技術とはなにか、どう連携させるか、" Web 開発者" がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。</p>
diff --git a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..f8432d7d97
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,80 @@
+---
+title: 基本的なソフトウェアのインストール
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - WebMechanics
+  - 'l10n:priority'
+  - セットアップ
+  - ツール
+  - テキストエディタ
+  - ブラウザ
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>「基本的なソフトウェアのインストール」</em>では、あなたが簡単な Web 開発をするのに必要なツールを紹介して、それらのツールを適切にインストールする方法について説明します。</p>
+</div>
+
+<h2 id="What_tools_do_the_professionals_use" name="What_tools_do_the_professionals_use">プロフェッショナルはどんなツールを使っている？</h2>
+
+<ul>
+ <li><strong>コンピューター</strong> 当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとした Web 開発のためには、Windows、Mac、Linux などが実行されているデスクトップパソコンやノートパソコンを使った方がいいです。</li>
+ <li><strong>テキストエディター</strong> コードを書くために必要です。テキストエディター (たとえば <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://notepad-plus-plus.org/">Notepad++</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>、<a href="https://www.vim.org/">VIM</a>) でも、複合的な機能を持つソフトウェア (<a href="https://www.adobe.com/jp/products/dreamweaver.html">Dreamweaver</a> や <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>) でも構いません。Office 文書のエディタは、Web ブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。</li>
+ <li><strong>Web ブラウザー</strong> 自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、<a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a> や <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> などです。携帯電話などのモバイルデバイスで Web サイトがどのように表示されるのかもテストするべきです。また、Web サイトを見る人たちが使うかもしれない古いブラウザー (IE 8-10 など) でもできればテストした方が良いです。<span class="tlid-translation translation" lang="ja"><span title="">テキストベースのターミナル Web ブラウザーである </span></span><a href="https://lynx.browser.org/">Lynx</a><span class="tlid-translation translation" lang="ja"><span title=""> は、視覚障害のあるユーザーがサイトをどのように体験しているかを見るのに最適です。</span></span></li>
+ <li><strong>画像編集ソフト</strong> (<a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/jp/products/photoshop.html">Photoshop</a> など) Web ページの画像を作成するために必要になります。</li>
+ <li><strong>バージョン管理システム</strong> 複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、<a href="http://git-scm.com/">Git</a> が最も有名なバージョン管理システムであり、<a href="http://git-scm.com/">Git</a> に基づいたコードホスティングサービスの <a href="https://github.com/">GitHub</a> もとても有名です。</li>
+ <li><strong>FTP プログラム</strong> Web ページを公開する時にファイルをサーバーにアップロードするために必要です (この目的で、だんだんと、FTP の代わりに <a href="http://git-scm.com/">Git</a> が用いられつつあります)。(S)FTP の機能が含まれている、<a href="https://cyberduck.io/">Cyberduck</a>、<a href="http://fetchsoftworks.com/">Fetch</a>、<a href="https://filezilla-project.org/">FileZilla</a> などのプログラムを使うと良いでしょう。</li>
+ <li><strong>自動化システム</strong>、<a href="http://gruntjs.com/">Grunt</a> または <a href="https://gulpjs.com/">Gulp</a> のようなソフトウェアを使うと、同じような繰り返し作業を自動的に実行することができます。たとえば、コードのサイズを自動的に小さくしたり、エラーがないかどうかを自動で確認することができます。</li>
+ <li>テンプレート、ライブラリ、フレームワークなど。これらを利用すると、Web サイトを作る時によく使われるコードを短時間で用意することができます。</li>
+ <li>他にも便利なツールがたくさんあります！</li>
+</ul>
+
+<h2 id="What_tools_do_I_actually_need_right_now" name="What_tools_do_I_actually_need_right_now">今の私にはどんなツールが必要？</h2>
+
+<p>上のリストにはたくさんのツールが書かれていて、ちょっと恐ろしかったかもしれませんね。でも大丈夫です。Web 開発を始めるのには、まだ上のツールをほとんど知らなくても問題ありません。これから私たちが、Web 開発に必要最小限のツールのセットアップの仕方を説明しておきます。必要なものは、テキストエディタと最新の Web ブラウザーだけで十分です。</p>
+
+<h3 id="Installing_a_text_editor" name="Installing_a_text_editor">テキストエディタのインストール</h3>
+
+<p>あなたのコンピューターには、おそらく初めから基本的なテキストエディタがインストールされているはずです。Windows には<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3">メモ帳</a>が、MacOS には<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">テキストエディット</a>が、Linux の場合はディストリビューションによっていろいろですが、Ubuntu には <a href="https://ja.wikipedia.org/wiki/Gedit">gedit</a> が初めからインストールされているはずです。</p>
+
+<p>ただ、Web 開発をする時には、メモ帳やテキストエディットのようなソフトウェアよりも、もっと高機能なプログラムを使うべきです。私たちのおすすめのソフトウェアは、 <a href="https://code.visualstudio.com/">Visual Studio Code</a> です。これは無料で利用することができ、ライブプレビューやコードヒントを提供します。</p>
+
+<h3 id="Installing_modern_web_browsers" name="Installing_modern_web_browsers">最新の Web ブラウザーのインストール</h3>
+
+<p>次に、これから私たちが書くコードをテストするためのブラウザーをいくつかインストールしましょう。あなたが使っているオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://brave.com">Brave</a>。</li>
+ <li>Windows: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a>、<a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>、<a href="https://brave.com">Brave</a>  (Windows 10 には Edge がデフォルトで付属していますが、Windows 7 以降の場合は、IE Internet Explorer 11 をインストールすることができます。そうでない場合には、Internet Explorer 以外のブラウザーをインストールしてください)</li>
+ <li>Mac: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="https://brave.com">Brave</a> (Safari は、iOS と MacOS に初めからインストールされています)</li>
+</ul>
+
+<p>次に進む前に、テストに使えるように最低でも 2 つのブラウザーをインストールするようにしてください。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: Internet Explorer は最新の Web 機能と互換性がなく、プロジェクトを実行できない場合があります。現在は Internet Explorer を使用している人はほとんどいないので、通常はあなたの Web プロジェクトとそれの互換性について心配する必要はありません — 間違いなく学習中はあまり心配する必要はありません。</p>
+</div>
+
+<h3 id="Installing_a_local_web_server" name="Installing_a_local_web_server">ローカルの Web サーバーのインストール</h3>
+
+<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカルテストサーバーのインストール方法</a>にて、その方法が見つかります。</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..61095df0eb
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,437 @@
+---
+title: JavaScript の基本
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - JavaScript
+  - Learn
+  - Web
+  - codescripting
+  - 'l10n:priority'
+  - 初心者
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p>
+</div>
+
+<h2 id="What_is_JavaScript_really" name="What_is_JavaScript_really">そもそも JavaScript とは何か</h2>
+
+<p>{{Glossary("JavaScript")}} (略して "JS") <span id="result_box" lang="ja"><span>は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、 Web サイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</span></span></p>
+
+<p>JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。</p>
+
+<p>JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p>
+
+<ul>
+ <li>ブラウザのアプリケーションプログラミングインターフェイス({{Glossary("API")}})。 Web ブラウザに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザの Web カメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、 Web ブラウザに組み込まれた API。</li>
+ <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。</li>
+ <li>すばやくサイトやアプリケーションを構築することができ、HTML に組み込み可能なサードパーティのフレームワークやライブラリ。</li>
+</ul>
+
+<p>この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、<a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>、およびMDN の他の部分で詳しく学ぶことができます。</p>
+
+<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザの API 機能についてもいくつか説明します。楽しみましょう！</p>
+
+<h2 id="A_hello_world_example" name="A_hello_world_example">"Hello world" の例</h2>
+
+<p>上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。</p>
+
+<p>しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、<em>"hello world!"</em> を表示する例 (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">基本的なプログラミング例の標準</a>) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。</p>
+
+<div class="warning">
+<p><strong>重要</strong>: これまでこのコースに沿って進めてきていない場合は、<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">このサンプルコードをダウンロードして</a>作業を進めてください。</p>
+</div>
+
+<ol>
+ <li>最初に、あなたのテストサイトに行って、「<code>scripts</code>」という名前(かぎ括弧は除く)の新しいフォルダを作成してください。それから、作成した scripts フォルダの中で <code>main.js</code> という新しいファイルを作成してください。それを <code>scripts</code> フォルダに保存してください。</li>
+ <li>次に、 <code>index.html</code> ファイルの <code>&lt;/body&gt;</code> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。
+  <pre class="brush: html notranslate">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>これは CSS の {{htmlelement("link")}} 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。</li>
+ <li><code>main.js</code> ファイルに次のコードを追加してください。
+  <pre class="brush: js notranslate">const myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで <code>index.html</code> を読み込んでください。<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。</p>
+</div>
+
+<h3 id="What_happened" name="What_happened">何が起きたか</h3>
+
+<p>JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p>
+
+<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。</p>
+
+<div class="note">
+<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/DOM/DOM_Reference">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p>
+</div>
+
+<h2 id="Language_basics_crash_course" name="Language_basics_crash_course">言語の短期集中コース</h2>
+
+<p>どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！</p>
+
+<div class="warning">
+<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/Learn/Discover_browser_developer_tools">ブラウザ開発ツールを探る</a>を参照してください。</p>
+</div>
+
+<h3 id="Variables" name="Variables">変数</h3>
+
+<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) まはた <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p>
+
+<pre class="brush: js notranslate">let myVariable;</pre>
+
+<div class="note">
+<p><strong>注 </strong>: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> を参照してください。</p>
+</div>
+
+<div class="note">
+<p><strong>注 </strong>: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables">変数の命名規則についてはこの記事</a>を参照してください)。自信がない場合は、有効かどうか<a href="https://mothereff.in/js-variables">変数名を調べる</a>ことができます。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: JavaScript は大文字と小文字を区別します。<code>myVariable</code> は <code>myvariable</code> とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: <code>var</code> と <code>let</code> のより詳しい違いは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">var と let の違い</a>を見てください。</p>
+</div>
+
+<p>変数を宣言したら、以下のように値を割り当てることができます。</p>
+
+<pre class="brush: js notranslate">myVariable = 'Bob';</pre>
+
+<p>好みに応じて、両方の操作を同一の行で行うことができます。</p>
+
+<pre class="brush: js notranslate">let myVariable = 'Bob';</pre>
+
+<p>変数の値は、名前で呼び出すだけで取得することができます。</p>
+
+<pre class="brush: js notranslate">myVariable;</pre>
+
+<p>変数に値を代入した後で、変更することもできます。</p>
+
+<pre class="notranslate">let myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>なお、変数は様々な<a href="/ja/docs/Web/JavaScript/Data_structures">データ型</a>の値を保持することもできます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">データ型</th>
+   <th scope="col">説明</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。</td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>数。数字には引用符がありません。</td>
+   <td><code>let myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>真偽値。 <code>true</code> と <code>false</code> は JS では特別なキーワードであり、引用符は必要ない。</td>
+   <td><code>let myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>単一の参照で複数の値を格納できる構造です。</td>
+   <td><code>let myVariable = [1,'Bob','Steve',10];</code><br>
+    配列の各メンバーはこのように参照してください。<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, など。</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。</td>
+   <td><code>let myVariable = document.querySelector('h1');</code><br>
+    上記の例も同様です。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。</p>
+
+<h3 id="Comments" name="Comments">コメント</h3>
+
+<p>コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。</p>
+
+<pre class="brush: js notranslate">/*
+挟まれているすべてがコメントです。
+*/</pre>
+
+<p>コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">// これはコメントです
+</pre>
+
+<h3 id="Operators" name="Operators">演算子</h3>
+
+<p>{{Glossary("operator", "演算子")}}は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">演算子</th>
+   <th scope="col">説明</th>
+   <th scope="col">シンボル</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">追加/連結</th>
+   <td>2 つの数字を加えるか、2 つの文字列を結合します。</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    'Hello ' + 'world!';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">減算、乗算、除算</th>
+   <td>基本的な数学の計算を実施します。</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // JavaScript で乗算はアスタリスク<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">代入</th>
+   <td>すでに出てきました。変数に値を割り当てます。</td>
+   <td><code>=</code></td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">等価</th>
+   <td>2 つの値と型が互いに等しいかどうかを調べ、<code>true</code> / <code>false</code> (真偽値)の結果を返します。</td>
+   <td><code>===</code></td>
+   <td><code>let myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">否定、非等価</th>
+   <td>その後にあるものと論理的に反対の値を返します。たとえば <code>true</code> を <code>false</code> に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しく<em>ない</em>かどうかをテストします。</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>"Not" の場合、基本式は <code>true</code> ですが、それを否定しているので比較結果は <code>false</code> になります。</p>
+
+    <p><code>let myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p><span class="tlid-translation translation"><span title="">「等しくない」は、基本的に同じ結果を異なる構文で与えます。</span></span>ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p>
+
+    <p><code><code>let myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、<a href="/ja/docs/Web/JavaScript/Reference/Operators">式と演算子</a>を参照してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに <code>'35' + '25'</code> と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 <code>35 + 25</code> を入力すれば、正しい結果が得られます。</p>
+</div>
+
+<h3 id="Conditionals" name="Conditionals">条件文</h3>
+
+<p>条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は <code>if ... else </code> 文です。例えば以下の通りです。</p>
+
+<pre class="brush: js notranslate">let iceCream = 'チョコレート';
+if(iceCream === 'チョコレート') {
+  alert('やった、チョコレートアイス大好き！');
+} else {
+  alert('あれれ、でもチョコレートは私のお気に入り......');
+}</pre>
+
+<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、<code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p>
+
+<h3 id="Functions" name="Functions">関数</h3>
+
+<p>{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>これらの関数、<code>document.querySelector</code> と <code>alert</code> は、必要なときにいつでも使えるようブラウザに組み込まれています。</p>
+
+<p>もし変数名に見えるものがあったとしても、その後に括弧 <code>()</code> が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである{{Glossary("Argument", "引数")}}を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。</p>
+
+<p>例えば、<code>alert()</code> 関数はブラウザのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。</p>
+
+<p>嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。</p>
+
+<pre class="brush: js notranslate">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです :</p>
+
+<pre class="brush: js notranslate">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>注 </strong>: <a href="/ja/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 文は <code>result</code> の値を関数内から関数の外に戻すことをブラウザに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "<code>スコープ</code>")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p>
+</div>
+
+<h3 id="Events" name="Events">イベント</h3>
+
+<p>Web サイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/Events/click">click イベント</a>で、マウスで何かをクリックするとブラウザによって発火されるものです。これを実行するには、コンソールに以下のように入力してから、現在の Web ページ上をクリックしてください。</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('痛っ! つつくのはやめて!');
+}</pre>
+
+<p>要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、<code><a href="/ja/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> ハンドラのプロパティに、クリックイベントで実行したいコードを含む匿名 (つまり名前がない) 関数を代入します。</p>
+
+<p>なお、</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre>
+
+<p>は以下のものと同等です。</p>
+
+<pre class="brush: js notranslate">let myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>短くしただけです。</p>
+
+<h2 id="Supercharging_our_example_website" name="Supercharging_our_example_website">Web サイトの例を膨らませる</h2>
+
+<p>ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。</p>
+
+<h3 id="Adding_an_image_changer" name="Adding_an_image_changer">画像の切り替えの追加</h3>
+
+<p>このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。</p>
+
+<ol>
+ <li>まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。</li>
+ <li>この画像を <code>images</code> フォルダに保存してください。</li>
+ <li>この画像の名前を 'firefox2.png' (引用符なし) に変更してください。</li>
+ <li><code>main.js</code> ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。)
+  <pre class="brush: js notranslate">let myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    let mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li><code>index.html</code> をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。</li>
+</ol>
+
+<p>{{htmlelement("img")}} 要素への参照を変数 <code>myImage</code> に格納します。次にこの変数の <code>onclick</code> イベントハンドラプロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。</p>
+
+<ol>
+ <li>画像の <code>src</code> 属性の値を取得します。</li>
+ <li>条件文を使って、<code>src</code> の値が元の画像のパスと等しいかどうかをチェックします。
+  <ol>
+   <li>そうであれば、<code>src</code> の値を 2番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。</li>
+   <li>そうでない(すでに変更されている)場合、<code>src</code> の値を元の画像のパスに戻して、元の状態に戻ります。</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Adding_a_personalized_welcome_message" name="Adding_a_personalized_welcome_message">パーソナライズされた挨拶メッセージの追加</h3>
+
+<p>次に、もう 1 つの小さなコードを追加し、ユーザがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザがサイトを離れて後で戻った時にも保存されるようにします。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使用して保存しましょう。したがって、必要な時にいつでもユーザと挨拶メッセージを変更できるオプションも用意しましょう。</p>
+
+<ol>
+ <li><code>index.html</code> では、 {{htmlelement("script")}} 要素の直前に次の行を追加します :
+
+  <pre class="brush: html notranslate">&lt;button&gt;ユーザを変更&lt;/button&gt;</pre>
+ </li>
+ <li><code>main.js</code> では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
+  <pre class="brush: js notranslate">let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。
+  <pre class="brush: js notranslate">function setUserName() {
+  let myName = prompt('あなたの名前を入力してください。');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla はすばらしいよ、' + myName;
+}</pre>
+  この関数では <a href="/ja/docs/Web/API/Window.prompt"><code>prompt()</code></a> 関数を使用して、<code>alert()</code> のようにダイアログボックスを表示しています。しかし、<code>prompt()</code> はユーザにデータを入力するよう求め、ユーザが <strong>OK</strong> を押した後に変数にそのデータを格納します。この場合、ユーザに名前を入力するよう求めます。次に、<code>localStorage</code> と呼ばれる API を呼び出すことで、ブラウザにデータを格納して後で受け取ることができます。localStorage の <code>setItem()</code> 関数を使って、<code>'name'</code> と呼ばれるデータを作成し、<code>myName</code> に入っているユーザから入力されたデータを格納します。最後に、見出しの <code>textContent</code> に文字列と新しく格納されたユーザの名前を設定します。</li>
+ <li>次に、この <code>if ... else</code> ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。
+  <pre class="brush: js notranslate">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla はすばらしいよ、' + storedName;
+}</pre>
+  このブロックでは、最初に <code>name</code> のデータが存在しているかどうかをチェックするために否定演算子(! で表される論理否定)を使用しています。存在しない場合は、作成するために <code>setUserName()</code> 関数が実行されます。存在する場合は(つまり、以前の訪問時にユーザが設定した場合)、 <code>getItem()</code> を使用して格納された名前を受け取り、 <code>setUserName()</code> の中で行ったのと同様に、見出しの <code>textContent</code> に文字列とユーザの名前を設定します。</li>
+ <li>最後に、以下の <code>onclick</code> イベントハンドラをボタンに設定します。クリックすると、<code>setUserName()</code> 関数が実行されます。これでユーザがボタンを押すことで、好きな時に新しい名前を設定できるようになります。
+  <pre class="brush: js notranslate">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は <code>localStorage</code> 内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。</p>
+
+<h3 id="A_user_name_of_null">A user name of null?</h3>
+
+<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。</p>
+
+<p>また何も入れずに OK を押してみてください — 結果として"Mozilla is cool,"というタイトルが表示され、これは理由が明白です。</p>
+
+<p>この問題を避けるには、ユーザーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます:</p>
+
+<pre class="brush: js notranslate">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  if(!myName || myName === null) {
+    setUserName();
+  } else {
+    localStorage.setItem('name', myName);
+    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+  }
+}</pre>
+
+<p>人間の言語では — <code>myName</code> に値がない場合や、<code>null</code>の場合、 最初から <code>setUserName()</code> を実行します。値がない場合 (上記の式が真でない場合)には、<code>localStorage</code> に値をセットして、見出しのテキストにもセットします。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (<a href="https://mdn.github.io/beginner-html-site-scripted/">こちらで作成した版を表示する</a>こともできます)。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>行き詰まったら、自分の作業を <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github 上の完成したサンプルコード</a>と比べてみてください。</p>
+
+<p>私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、<a href="/ja/docs/Learn/JavaScript">JavaScript の学習トピック</a>に進んでください。</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..88eb4cf626
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,110 @@
+---
+title: Web サイトをどんな外見にするか
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Assets
+  - Composing
+  - Deprecated
+  - Plan
+  - 'l10n:priority'
+  - コンテンツ
+  - デザイン
+  - フォント
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>「<em>Web サイトをどのような外見にするか</em>」では、「どんな情報を Web サイトで提供するか」、「どのフォントと色を使うのか」、「私の Web サイトは何をするのか」といった、コードを書き始める<em>前に</em>あなたの Web サイトについて計画したりデザインするべき事柄について説明します。</p>
+</div>
+
+<h2 id="First_things_first_planning" name="First_things_first_planning">まず最初に: 計画を立てる</h2>
+
+<p>始める前に、いくつか考えておかなければいけないことがあります。あなたの Web サイトは実際に何をすべきでしょうか？普通 Web サイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、一つの見出し、一つの画像、そして少しの文章をもつシンプルな Web ページを作ることから始めましょう。</p>
+
+<p>まずはじめに、次の質問に答える必要があります。</p>
+
+<ol>
+ <li><strong>何について書かれた Web サイトですか？</strong> 犬、ニューヨーク、それともパックマン？</li>
+ <li><strong>テーマについてどんなことを書きますか？</strong> タイトルと少しの文章、それからページに表示させたい画像を考えます。</li>
+ <li><strong>Web サイトをどんな見た目にしますか？</strong> シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？</li>
+</ol>
+
+<div class="note">
+<p><strong>注記</strong>: 複雑なプロジェクトでは、カラー、フォント、ページのアイテム間のスペース、適切な文章のスタイルなど、詳細なガイドラインが必要です。これは、デザインガイドやデザインシステムやブランドブックと呼ばれます。一例として、 <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>があります。</p>
+</div>
+
+<h2 id="Sketching_out_your_design" name="Sketching_out_your_design">デザインを大まかに描き出す</h2>
+
+<p>次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルな Web ページでは、描き出すものもあまりないですが、Web サイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>注記</strong>: 現実の複雑な Web サイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディタや Web の技術を使って、デジタルのモックアップを作るのです。</p>
+
+<p>多くの場合、Web の開発チームには、グラフィックデザイナーと{{Glossary("UX", "ユーザーエクスペリエンス")}} (UX) デザイナーがいます。グラフィックデザイナーは、名前の通り Web サイト上の目に見えるイメージなどを作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーが Web サイトでどういう経験をし、どのようにインタラクションするかということを考えます。</p>
+</div>
+
+<h2 id="Choosing_your_assets" name="Choosing_your_assets">アセットを選ぶ</h2>
+
+<p>この時点で、あなたの Web ページについて、将来どう表現したいかをまとめ始めるとよいでしょう。</p>
+
+<h3 id="Text" name="Text">文章・テキスト</h3>
+
+<p>あなたが先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。</p>
+
+<h3 id="Theme_color" name="Theme_color">テーマカラー</h3>
+
+<p>色を選ぶときは、<a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">色選択ツール</a> (カラーピッカー: Firefox のアドオンやアプリもあります) のサイトへ行き、自分の好みの色を見つけましょう。色をクリックすると、 <code>#660066</code> のような6文字の奇妙なコードが出てきます。これは<em>ヘキサコード</em> (16進法コード) と呼ばれ、あなたの選んだ色を表しています。今はどこか安全なところにコピーしておきましょう。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p>
+
+<h3 id="Images" name="Images">画像・イメージ</h3>
+
+<p>画像を探すには、<a href="https://www.google.com/imghp?gws_rd=ssl">Google 画像検索</a>にアクセスし、ぴったりなものを探しましょう。</p>
+
+<ol>
+ <li>欲しい画像が見つかったら、クリックして拡大表示にします。</li>
+ <li>画像を右クリック (Mac では Ctrl +クリック) し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像の Web アドレスをコピーします。</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>なお、Web 上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してしまう可能性を減らすために、 Google のライセンスフィルターを使うと良いでしょう。 <em>ツール</em>ボタンをクリックすると、<em>ライセンス</em>オプションが下に表示されます。<em>再使用が許可された画像</em>などの選択肢を選択してください。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Font" name="Font">フォント</h3>
+
+<p>次のような手順でフォントを選びます。</p>
+
+<ol>
+ <li><a href="http://www.google.com/fonts">Google Fonts</a> に行き、ページをスクロールして気に入ったフォントを見つけます。右側のコントロールを使って、結果をフィルタすることもできます。</li>
+ <li>使いたいフォントの上にある<strong>プラス</strong> (追加) アイコンをクリックします。</li>
+ <li>ページ下部のパネルにある "* Family Selected"<em> </em>と書かれたボタンをクリックします ("*" は選択したフォントの数によって変わります)。</li>
+ <li>ポップアップボックスに、Google が用意してくれた数行のコードが表示されるので、あとでテキストエディタに入力する時のためにコピーしておきます。</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 359px; width: 600px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどのような外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Web サイトの公開</a></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>
diff --git a/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html b/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html
new file mode 100644
index 0000000000..df7bdd555e
--- /dev/null
+++ b/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html
@@ -0,0 +1,133 @@
+---
+title: Web サイトの公開
+slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する
+tags:
+  - FTP
+  - GitHub
+  - Google App Engine
+  - Learn
+  - Web
+  - 'l10n:priority'
+  - publishing
+  - web server
+  - コードスクリプティング
+  - 初心者
+  - 学習
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。</p>
+</div>
+
+<h2 id="What_are_the_options" name="What_are_the_options">どんな選択肢があるのか?</h2>
+
+<p>Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。</p>
+
+<h3 id="Getting_hosting_and_a_domain_name" name="Getting_hosting_and_a_domain_name">ホストとドメイン名を手に入れる</h3>
+
+<p>もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。</p>
+
+<ul>
+ <li>ホスト — つまり、ホスティング会社の <a href="https://developer.mozilla.org/ja/Learn/What_is_a_web_server"> Web サーバー</a>上のファイルを置く場所のこと。あなたが、 Web サイトをその場所に置けば、 Web サーバーが、ユーザーのリクエストに応えて、コンテンツを扱ってくれます。</li>
+ <li>ドメイン名 — ほかの人があなたの Web サイトを見つけるための、他と同じもののないアドレスのことです。たとえば、<code>http://www.mozilla.org</code> や <code>http://www.bbc.co.uk</code> などがそれにあたります。あなたは<strong>ドメインレジストラー </strong>(ドメイン名を扱う管理者) から、何年の間ドメイン名を借りることになります。</li>
+</ul>
+
+<p>多くのプロの手による Web サイトはこんな風にして、公開されているわけです。</p>
+
+<p>加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、{{Glossary("FTP", "File Transfer Protocol (FTP)")}} プログラムが必要です (詳しくは、<a href="/ja/Learn/How_much_does_it_cost#Software">どれくらいお金がかかるか: ソフトウェア</a>のページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tips_for_finding_hosting_and_domains" name="Tips_for_finding_hosting_and_domains">ホスティングとドメインを見つけるための TIPS(ヒント)</h4>
+
+<ul>
+ <li>MDN は特定の商用ホスティング会社やドメイン名レジストラを宣伝していません。ホスティング会社やレジストラを探すには、「 Web ホスティング」と「ドメイン名」で検索してください。すべてのレジストラは、希望するドメイン名が利用可能かどうかを確認できる機能を持っています</li>
+ <li>あなたの家やオフィスの {{Glossary("ISP", "インターネットサービスプロバイダー")}} では、小さな Web サイトのための限定的なホスティングを提供しているかもしれません。利用できる機能は限られていますが、最初の実験には最適かもしれません</li>
+ <li><a href="https://neocities.org/">Neocities</a>、Google Sites、<a href="https://www.blogger.com">Blogger</a>、<a href="https://wordpress.com/">WordPress</a> のような無料のサービスもあります。お金を払った分だけ得をすることもありますが、初期の実験にはこれらのリソースで十分な場合もあります</li>
+ <li>ホスティングやドメインを提供している会社も多いです</li>
+</ul>
+
+<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine" name="Using_an_online_tool_like_GitHub_or_Google_App_Engine">GitHub や Google App Engine のようなオンラインツールを利用する</h3>
+
+<p>特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> は、「ソーシャルコーディング」サイトです。そこでは、あなたは<strong> Git バージョン管理システム</strong>の中のストレージで、コードリポジトリをアップロードできます。そうすることで、あなたはコードプロジェクトに協力することができて、このシステムは既定でオープンソースです。つまりは、世界のだれでも、あなたのコードを利用したり、そこから学んだり、改善したりすることができるのです。GitHub には <a href="https://pages.github.com/">GitHub Pages</a> と呼ばれる、とても便利な機能があります。それはあなたに Web 上に、 Web サイトのコードを公開するのを助けてくれます。</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> は、アプリケーションを Google のインフラ上で、ビルドや実行させることができる強力なプラットフォームです。マルチレイヤ― Web アプリケーションをゼロから作ったり、静的な Web サイトをホストしたり、いずれの場合でもそうです。<a href="/ja/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine"> Web サイトを Google App Engine でホストするには?</a> を見てみましょう。</li>
+</ul>
+
+<p>これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。</p>
+
+<h3 id="Using_a_web-based_IDE_such_as_CodePen" name="Using_a_web-based_IDE_such_as_CodePen">CodePen のような、 Web ベースの IDE を用いる方法。</h3>
+
+<p>Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。</p>
+
+<p>生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。</p>
+
+<p>これらを試してみて、一番あなたに合ったものを見つけてみましょう。</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publishing_via_GitHub" name="Publishing_via_GitHub">GitHub 経由での公開</h2>
+
+<p>では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。</p>
+
+<ol>
+ <li>まず、 <a href="https://github.com/">GitHub にサインアップして</a>、あなたのメールアドレスを確認しましょう。</li>
+ <li>次に ファイルを入れるための<a href="https://github.com/new">リポジトリを作りましょう。</a></li>
+ <li>このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。<br>
+  例えば、私たちの友人である bob smith ならば、<br>
+  bobsmith.github.io と入力することになります。<br>
+  さらに、<span style="color: #000000; font-family: 'Arial'; font-size: 13px; font-style: normal; font-weight: 400; text-decoration: none;">{{原語併記("</span>README つきでこのリポジトリを初期化", "Initialize this repository with a README")}}をチェックして、<span style="color: #000000; font-family: 'Arial'; font-size: 13px; font-style: normal; font-weight: 400; text-decoration: none;">{{原語併記("</span>リポジトリの作成", "Create repository")}}をクリックします。<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。<br>
+
+  <div class="note">
+  <p><strong>注</strong>: フォルダの中に <code>index.html</code> の名前のファイルがあるかを確認しましょう。</p>
+  </div>
+ </li>
+ <li>
+  <p>では、あなたの Web サイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、<a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a> に移動しましょう。</p>
+
+  <div class="note">
+  <p><strong>注</strong>: あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。</p>
+  </div>
+ </li>
+</ol>
+
+<p>もっと詳しく知りたい人は <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a> を見てください。</p>
+
+<h2 id="Further_reading" name="Further_reading">参考文献</h2>
+
+<ul>
+ <li><a href="/ja/Learn/What_is_a_web_server">Web サーバーとは何か</a></li>
+ <li><a href="/ja/Learn/Understanding_domain_names">ドメイン名を理解する</a></li>
+ <li><a href="/ja/Learn/How_much_does_it_cost">Web サイトで何かするのにいくらかかるか?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Codecademy の良いチュートリアルで、もう少し詳しく追加のテクニック含めて示しています。</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> Scott Murray による利用できるサービスについての使えるアイデアがあります。</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
+ <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
+ <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
+ <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
+ <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
+ <li id="Publishing_your_website"><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></li>
+ <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
+</ul>