訪問してくださり~有難うございます!2020年3月の月間PVは19万1061PVになりました!

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

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

注意

この記事は、プログラミング未経験・初心者の「僕」が、「毎日2時間だけ」、独学で「HTML・CSS」の学習をして、学んだこと・実践したことを、自分なりに整理して、只、忘れないように「メモ」をしていくだけの記事です。僕と同じように、プログラミングを、本当に0から始める「初心者」のためだけに書いています。また、日々学んだことは、この記事に、随時、追記していく形で更新をしていきますので、全然内容が書いていないと思われるかもしれませんが、この記事に関しては、自分の理解に合わせて書いていきたいと思っています。できれば長い目で、見守ってください。

最新の更新日
  • 2019年12月5日に更新

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」が、セットで必要となるのです。