1.Webサイトが表示される仕組み
Webサイトとはインターネット上で公開されている複数のWebページのまとまりのことです。
Webページを表示するには？
「サーバー」と呼ばれるコンピューターに、HTML・CSS・JavaScript・画像などのファイルデータを設置し、それらをインターネットを介してパソコンやスマートフォンにダウンロードします。ダウンロードしたデータをWebブラウザを使って閲覧します。
HTML・CSS・JavaScriptの役割
WebブラウザはHTMLというマークアップ言語を読み取り、文書構造化して表示することができます。HTMLを骨組みとして、CSSや画像によって装飾・レイアウトを美しく整えます。さらにJavaScriptでアニメーションや複雑な動作を付け加えます。
Webブラウザについて
Webサイトを表示するブラウザには様々な種類があり、有名なものではGoogle Chrome（グーグル・クローム）、Safari（サファリ）、Firefox（ファイヤー・フォックス）、Edge（エッジ）などが存在します。
これらのブラウザはノートパソコンやデスクトップパソコンだけでなく、スマートフォンの中にもタブレットの中にも存在します。液晶テレビやPlayStation4やNintendo Switchなどのゲーム機にも存在します。身近な色々なデバイスでWebサイトを表示することができます。
Webサイトを作るには？
Webページ（HTMLやCSS）はテキストエディタ（メモ帳など）を使って作ることができます。 みなさんがブラウザで検索して表示するほとんどのホームページはHTMLとCSSでつくられています。
試しにメモ帳（Macの場合はテキストエディット）を使って、Webページを作ってみましょう。
2.HTMLとは？
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）というマークアップ言語のことです。マークアップ言語とは文書構造を記述するためにつくられた言語です。 HTMLで記述することでブラウザに文書構造を理解させ、Webページを表示することができます。
HTMLファイルの作成方法
HTMLはエディタを使って作成することができます。文書ファイルの拡張子を「.html」で保存することでHTMLが作成できます。
HTMLの記述方法
HTMLはタグで文章構造を記述していきます。タグというのは「<p>Hello, World!</p>」と記述されている「<p>」と「</p>」の部分になります。
<p>Hello, World!</p>
最初の「<p>」が開始タグ、次の「</p>」が閉じタグです。 この開始タグと閉じタグに文字を囲んで文書構造をつくっていくと、Webページで表示できるHTMLを作成することができます。 タグで囲まない例外もありますが、基本的には開始タグと閉じタグで囲まれる記述方法で文章構造を作成していきます。詳しくは「HTMLとCSSの基礎知識」で説明します。
タグはたくさんの種類があるので、どのようなタグがどのような形で文章構造で使われるのかは今後実践で学んでいきましょう。
実際に、HTMLを作成する実践はコーディングの章でおこなっていきます。
3.CSSとは？
CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）というスタイルシート言語のことです。 HTMLなどのマークアップ言語のレイアウトなどの見た目を表現するための言語です。CSSを使うことで、HTMLを装飾することができます。
CSSファイルの作成方法
CSSもHTMLと同じでエディタで作成することができます。 文書ファイルの拡張子を「.css」で保存することで、CSSとしてファイルを作成することができます。
CSSの記述方法
CSSはセレクタとプロパティと値を記述して、スタイルを指定していきます。
p { color: red; }
「p」がセレクタ、「color」がプロパティ、値が「red」になります。セレクタは指定したい箇所、ここではp要素が記述されています。p要素以外にも様々なセレクタを指定できるので、様々なHTML要素にCSSで装飾をおこなうことができます。プロパティは適用するスタイル。そして、値がそのプロパティの値。それらを指定することで、この例では文字色の指定をおこなっています。
CSSのプロパティにも多くの種類があるので、詳しくは「HTMLとCSSの基礎知識」で説明します。
CSSの参照方法
CSSの参照方法は3種類あります。
１つ目はHTMLタグ内にスタイル属性を直接記述して、「<p style=”color: red;”>Hello World</p>」のように装飾する方法です。
２つ目はHTMLファイル内に「<style>〜</style>」というCSSをまとめて書き込む場所を用意し、その中に書き込む方法です。
３つ目はHTMLファイルとCSSファイルを別々に用意し、HTMLからCSSを呼び出す方法です。こういった手法をCSSの外部ファイル化と呼びます。
詳しくは「HTMLとCSSの基礎知識」で説明します。
実際に、CSSを作成する実践はコーディングの章でおこなっていきます。
