まさ@ブログ書き込み中

自由に生きるための英語、プログラミング、考えごとについて色々書いています。

【サイトの作り方】僕が実践した初心者向けHTML&CSS学習法【入門】

f:id:masaincebu:20180731065802p:plain

 

プログラミングを学んでWebサイトを自分で作ってみたいけど、どんな勉強法が効果的かわからない。

 

そんな人に向けて、僕が実践したHTMLとCSSの学習法について紹介したいと思います。

 

この勉強法に沿ってやることで、効率的にHTMLとCSSで自分の好きなWebサイトを作成することができるようになります

 

HTMLとCSSは他のプログラミング言語に比べて習得しやすいので、ぜひ最後まで読んで実践してください。

 

HTMLとCSSの違い

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページにある情報の構造化をするために使われます。

 

例えば、このブログの一番上にある「まさ@ブログ書き込み中」という文字はこのようにHTMLで書かれているため、トップページへのリンクとなっています。

 

<a href="https://www.masalog.site/">まさ@ブログ書き込み中</a>

 

ここでは<a>...</a>と文字を囲むことによってリンクを作るaタグ(アンカータグ)を使って「この文字はリンクですよ」と文字情報を構造化しています。

 

一方CSSとはCascading Style Sheets(カスケード・スタイル・シート)の略で、HTMLで構造化された情報を装飾するために使われます。

 

例えば、この記事のタイトルのリンクは(PC版では)青文字になっていますね。これはこのようにCSSが書かれているからです。

 

a.entry-title-link {
 color: #4169e1;
}

 

「#4169e1」は「ロイヤルブルー」を表すカラーコードです。

 

HTMLとCSSの学び方

ここまででWebサイトを作るにはHTMLとCSSの両方が必要だということがわかったと思います。

 

次に、僕が実践したHTMLとCSSの学習法を紹介します。結論から言うと以下の三つです。

 

  1. ProgateのHTMLとCSSのコースを受ける
  2. 本を読む
  3. 自分でサイトを実際に作ってみる

 

ProgateのHTMLとCSSのコースを受ける

Progate(プロゲート)は日本で有名なプログラミング学習サイトです。ここでは数多くのプログラミング言語が学べます。HTMLとCSSも基本無料で学べます

 

Progateの良いところは実際に手を動かしてコードを書きながら学べるところです。書いたコードがどう反映するかも確認することができます。

 

説明もとてもわかりやすく、デザインも可愛くて、学ぶのが楽しくなるように色々な工夫がなされています。

 

基本料金は無料なので、ぜひ会員登録してください。

prog-8.com

 

本を読む

Progateは入門者が学び始めるには最高のサイトなのですが、情報量がすこし足りないのが難点です。

 

実際にWebサイトを作るときには、もう少し知識が必要になってきます。それをカバーするためにHTMLとCSSに関する本を読むことをオススメします。

 

僕は『よくわかるHTML5+CSS3の教科書【第2版】』を読みました。この一冊でHTMLとCSSの知識は十分です。

よくわかるHTML5+CSS3の教科書【第2版】

よくわかるHTML5+CSS3の教科書【第2版】

 

 

本書は挿絵や丁寧な説明があって読みやすいと思いますが、330ページ近くもあるのですべてを完璧に覚えようとせず、ざっと目を通しておく感覚で読むといいと思います。

 

実際にWebサイトを作る時に困ったらその都度この本に立ち返れば良いだけなので。

 

自分でサイトを作ってみる 

ここまで来れば自分のサイトを作ることができるようになります。ここが大事なのですが、実際に作ってみることが一番の学びになります

 

Progateをやっただけ、本を読んだだけで「HTMLとCSSはわかった」という人がいるのですが、僕はそれは大間違いだと思っています。「知っていること」と「わかっていること、できること」の間には大きな差があるからです。

 

また、実際にサイトを作ることでProgateや本には無い知識やテクニックも学ぶことができます。ぜひこの最後のステップまでやりきってください。

 

まとめ

Webサイトを作るためには情報を構造化するHTMLと、デザインをつけるためのCSSを学ぶ必要があります。

 

Progate → 本 → サイト作成の順番で学ぶのがオススメです。一番大事なのは、最後のステップであるサイト作成です。

 

学習法はわかったので、あとは実行に移すだけです。まずはProgateの会員登録からどうぞ。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]