HTML・CSS独学入門｜Amazon本・参考書・サイト学習・未経験初心者の独学勉強方法

Webサイト制作を始める前に理解したい事

「Webサイト」とは、複数の「Webページ」が集まったものです。

「Webサイト」が「雑誌」だとすると、その雑誌を構成する「1ページ1ページ」が、「Webページ」だという事ができます。

「Webサイト」の作成は、「HTML」や「CSS」を書くことが中心になります。

「Webサイト」を公開するまでには、様々な作業が必要ですので、まず、「Webサイト制作」の全体像を把握するために、「準備から公開までの流れ」を、大まかに理解していきます。

「Webサイト」の構成要素を理解する

「Webサイト」は、通常、複数の「Webページ」から構成されています。

さらに、この「Webページ」を分解すると、ページを構成する「HTMLファイル」の他に、「画像ファイル」「スタイルシート」などと呼ばれる「ファイル」など、「複数のファイルで構成されている」ことが分かります。

ここでは、僕のような「初心者」のために、「Webサイト」や「Webページ」を構成している「部品」にあたる、「ファイルの種類」と「それらの役割」を、まずは確認していきたいと思います。

「Webサイト」とは「Webページ」が集まった集合体

「Webサイト」とは、複数の「Webページ」の集合体のことです。

「個人」や「組織」が「インターネット上」に公開しており、日々、僕たちはこの「Webページ」の集合体である「Webサイト」を見ていることになります。

また、「Webサイト」は、「サイト」「ホームページ」とも呼ばれています。

「Webページ」は1度に表示される画面1つ1つのこと

「Webページ」とは、「ブラウザで1度に表示される画面のこと」を言います。

「Webページ」には、「テキスト」や「画像」「動画」などの「コンテンツ」が掲載され、「Webページ」のことは、単に「ページ」とも呼んだりします。

また、インターネット上にある全ての「Webページ」には、「URL」という、固有のアドレスが割り当てられており、ある「Webページ」の「URL」が、他と重複することはありえないため、インターネット利用者は、確実に見たいページを見ることが出来るようになっているのです。

「Webページ」は様々な「ファイル」で構成されている

「Webページ」は、「HTMLファイル」を中心として、「画像ファイル」「CSSファイル（レイアウトを調整する）」などの「複数のファイル」によって、構成されています。

「インターネット」で「サイト」を閲覧する時に使用している「ブラウザ」が、それら「Webページ」に関連するファイルを、「Webサーバー」から「ダウンロード」してきて、「1つのWebページ」として、まとめて表示してくれているため、僕たちが普段見ているような、体裁の良い「Webページ」が、見られるようになっているのです。

HTMLファイル

「Webページ」を作る際に最低限用意しなければならないのが、この「HTMLファイル」です。

この「HTMLファイル」は、「HTML（Hyper Text Markup Language）」という「コンピュータ言語」を利用して書かれています。

1枚の「HTMLファイル」が、1枚の「Webページ」となります。

「Webページ」に掲載したい「テキスト」や「画像」を、あらかじめ定義された「タグ」というモノを使って、書き表していきます。

画像ファイル

「Webページ」に「画像」を掲載する場合には、「画像ファイル」というモノを用意します。

「Webブラウザ」で表示できる「画像ファイル」は、だいたい決まっており、主に「JPRG」「PNG」「GIF」の「3種類」があります。

CSSファイル

「HTML言語」には、「Webページ」に掲載する「テキスト」や「画像」などの「コンテンツ」を書き表す機能はあるのですが、「Webページ」を「ブラウザ」で表示する時の「テキスト色」「背景色」「レイアウト」などを、調整する機能が備わっていません。

そこで、「HTML」を「レイアウトする」ための「スタイルシート」というモノを用意する必要があります。

この「スタイルシート」を作成するための「言語」が「CSS（Cascading Style Sheets）」と呼ばれる「言語」になります。

見た目もカッコよく、読みやすい「Webページ」を作るには、「HTML」だけではなく、この「CSS」が、セットで必要となるのです。