top > コラム > ホームページ制作 > 初心者のためのHTMLとCSSの効率的な覚え方

初心者のためのHTMLとCSSの効率的な覚え方

ホームページの作り方と言っても、どのように勉強すればよいのかわからないですよね。

専門学校の非常勤講師の方が1年生にHTMLとCSSを教える方法を紹介されています。逆を返せば、このように勉強すれば、効率良く覚えることができますね。

ちなみに私は独学で約3ヶ月程度でひととおり自分でWebサイトが作れるようになりました。この3ヶ月という期間ですが学生であったためかなりの時間を利用できました。一日平均数時間くらいはやってたと思います。

本格的にWebデザイナーやコーダーを目指す方と、自分で店舗のWebサイトを作りたい、という方で全く勉強法が異なります。ここでは、後者の、自分で店舗のWebサイトを作りたい方向けの方法です。

本格的にWebデザイナーやコーダーを目指す方であれば、まずは、HTMLの歴史とか仕様などから入ったほうがよいのですが、それを初心者の方に最初に教えてしまうと本当にチンプンカンプンになってしまいますので、逆に、完成されたホームページを修正していく方法をお勧めします。

1.HTMLテンプレートをいじってみる

一番良いのは、書籍タイプのHTMLテンプレートを利用することです。2,500円程度お金がかかってしまいますが、かなり細やかに編集方法が書いてあるので、何もコードのことがわからなくてもとりあえずはホームページが完成してしまいます!


何もわからなくてもとりあえずホームページができてしまえば、なんだか嬉しいですよね!ホームページ作りがちょっと楽しくなってきますよね!そういう気持ちをまず最初に持つことが大切なんです。

2.HTMLタグについて調べる

何もわからない状態でとりあえずはホームページを作ってみると、「あれ?これって何だろう?」って思うことがたくさん出てくると思います。それがHTMLタグであれば、辞書やリファレンスサイトで調べてみましょう。


わからないことが出てきたら調べる。この繰り返しが大切です。

3.デザインを変更してみる

色々わかってきたら、今度はデザインを変更してみたくなりますよね。デザインを変更するにはCSSという言語を学ぶ必要があります。HTMLタグに比べたらぐんと敷居が高くなってしまいます。まずは、やりたいことを逆引き辞典で調べてみましょう。最初は、文字の大きさを変えるとか背景色を変えるとかそういう簡単なところから始めてみると良いです。

4.レイアウトを変更してみる

次はレイアウトの変更です。これもCSSで行います。このあたりから辞書だけではどうにもならなくなってきます。「ボックスモデル」の概念が必要になってきます。時間があれば仕様書を読まれると良いです。かなり細やかなルール設定がされていますので、ちょっとわけわからなくなってくるところですね。

段組などの設定あたりから、中級向けになっていきますので内容も難しくなってきます。以下の記事や書籍がわかりやすいです。

5.仕様を理解する

ここまでくれば、基本的なことはわかってきたと思います。最後にできればちゃんとHTMLやCSSの仕様を理解すると完璧です。

HTMLというのはプログラムですから、仕様というものがあります。つまり決まった書き方があります。HTMLタグだけであれば非常に簡単な話になるのですが、実はもっと複雑です。

例えば、プログラムというのは何でもそうなのですがバージョンというものがありまして、それによって若干ソースコードの記述方法が異なります。特にHTMLはブラウザに依存するプログラムですので、同じソースコードを記述しても、閲覧するブラウザの種類やバージョンによっては動作が異なる場合があります。

最初に紹介したブログでは、初めてHTMLを勉強するのであれば、HTMLのバージョンは「HTML5」を選択するのが好ましいとのことですが、最新のブラウザやスマートフォン向けにホームページを制作するなら問題ありませんが、Internet Explorerの最新ではないバージョンだとHTML5そのものを認識してくれない場合もありますので注意です。ただし、専用のJavaScriptを利用すれば古いバージョンのInternet ExplorerでもHTML5を有効にすることは可能です。

個人的なホームーページを制作するならHTML5で問題無いと思いますが、企業サイトなどどんな環境の人でも見れないといけない場合は、HTML4.01(あるいはXHTML1.0)というバージョンを使用するのが好ましいでしょう。

HTML5のソースコードは非常にシンプルであるのですが、概念が非常に難しいです。つまり、コンテンツ全てに意味を持たせなければなりません。例えば、メニューひとつとっても、ナビゲーションなのか、関連記事のリンクなのか、によってマークアップ(HTMLタグを記述すること)が異なってきます。そういう意味ではHTML5は非常に難しい言語だと思っています。

あと、HTML5をデバッグする(バグを修正する)ツールがまだ少ないということです。一応、以下のソースコードチェックサービスがあります。

DreamWeaverというソフトであれば、HTML5に対応したホームページを作るためのデバッグ機能が備わっています。

また、HTML5のガイドラインブックというのは多いのですが、実用的な書籍というのがあまりありません。本当の初心者の方が現段階でHTML5から始めてしまうのは、環境的に難しいかなという気がします。

[2015/1/18追記]
2014年10月28日に、HTML5がW3Cの勧告になりました。つまり、これはどういうことかと言うと、HTML5の仕様が固まり、マークアップの書き方(ルール)がこれ以上変更されることはない、ということです。ただし、だからと言って、全てのブラウザでHTML5が使えるということではありません。

今後は、ブラウザの最新版だけを動作対象にする場合に限り、HTML5を利用しても問題ないかと思います。

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る