blob: 149ced54f218ef0eb25c28adbf0bd3fe87324217 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
---
title: ウェブ入門
slug: Learn/Getting_started_with_the_web
tags:
- Beginner
- CSS
- Design
- Guide
- HTML
- Index
- 'l10n:priority'
- publishing
- theory
translation_of: Learn/Getting_started_with_the_web
---
<div>{{LearnSidebar}}</div>
<div class="summary">
<p><em>ウェブ入門</em>は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際にウェブに公開します。</p>
</div>
<h2 id="The_story_of_your_first_website">初めてのウェブサイトの旅</h2>
<p>プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。</p>
<p>以下の記事を順番に読んでいけば、まったくの初心者でも初めてのウェブページをオンラインに公開できるでしょう。さあ、はじめましょう！</p>
<h3 id="Installing_basic_software">基本的なソフトウェアのインストール</h3>
<p>ウェブサイトを作るためのツールはたくさんあります。ウェブ開発を始めたばかりの頃は、テキストエディターやフレームワーク、テストツールといったいろいろなソフトウェアが山のようにあって、混乱してしまうかもしれません。そこで、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>では、基本的なウェブ開発を始めるのに必要なソフトウェアをインストールする方法を手順を追って紹介します。</p>
<h3 id="What_will_your_website_look_like">ウェブサイトをどんな外見にするか</h3>
<p>ウェブサイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたのウェブサイトにはどんな情報を載せますか？フォントや色はどうしたいですか？<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>では、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。</p>
<h3 id="Dealing_with_files">ファイルの扱い</h3>
<p>ウェブサイトを作るにはたくさんのファイルが必要です。テキストコンテンツのファイル、コードのファイル、スタイルシートのファイル、画像などのメディアコンテンツのファイルなどがあります。ウェブサイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>では、ウェブサイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。</p>
<h3 id="HTML_basics">HTML の基本</h3>
<p>Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ) は、ウェブのコンテンツを構造化し、意味や目的を指定するために使うコードです。例えば、コンテンツが文章なのか箇条書きなのか。ページに挿入した画像はあるか。データの表はあるか。 <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>では、分からなくならないように、HTML に親しめるように丁寧に説明します。</p>
<h3 id="CSS_basics">CSS の基本</h3>
<p>Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、ウェブサイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、ウェブサイトを好きなように飾り付けることができます。<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>では、こうした飾り付けの方法について説明します。</p>
<h3 id="JavaScript_basics">JavaScript の基本</h3>
<p>JavaScript は、ウェブサイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。 <a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。</p>
<h3 id="Publishing_your_website">ウェブサイトの公開</h3>
<p>ウェブサイトのコードを書き終えて、ウェブサイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">サンプルコードの公開</a>では、簡単なサンプルコードを最小限の手間でオンラインに公開する方法を説明しています。</p>
<h3 id="How_the_web_works">ウェブのしくみ</h3>
<p>あなたがお気に入りのウェブサイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a>では、あなたがパソコンでウェブページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">ウェブDemystified</a>: ウェブの基本を説明した素晴らしい動画のシリーズで、完全な初心者がウェブ開発できるようにするためのものです。 <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 作。</p>
<li><a href="/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: この記事では、ウェブの役立つ背景 — どうやってできたのか、ウェブ標準技術とはなにか、どう連携させるか、"ウェブ開発者" がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。</li>
</ul>
|
