path: root/files/ja/learn/getting_started_with_the_web/index.html

---
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>