正しい HTML・CSS を学べるサイト

初めに

このウェブサイトを作り始めて約7年。開設当時は「ホームページビルダー」の「どこでも配置モード」でサイトを作っていましたが、現在は HTML 4.01 Strict に準拠して、Valid な CSS も書けるようになりました。

…なんのこっちゃとお思いの方もいるでしょう。私は正しい HTML と CSS を覚えるまでに随分と遠回りをしてしまった、ということです。今から思うとまったく無駄なことをたくさんやってきたと思います。

これからウェブサイトを作ろうと思っている人は、初めから正しい HTML と CSS を覚えることが、一番の近道であることをまず知ってください。そして、間違いは間違いとして覚えていくのが一番楽なやり方です。

とはいっても、何が正しいのかサッパリ分からない人のために、私が正しい HTML と CSS を学べるサイトを紹介します。本当は私がチュートリアルを書ければ良いのですが、すでにたくさんの優良サイトがあることと、私の説明がとても下手であることによって断念しましたw。

「正しい」とは?何が間違ってるの?

さっきから「正しい HTML・CSS」と繰り返していますが、何が正しいのか、間違っているとどうなのか、などというお話を簡単に。HTML とは、CSS とは何ぞや、という話は HTML と CSS の役割分担を参照。要するに、ウェブサイトは HTML というものと CSS というものの2つを組み合わせて作るものだ、ということです。

まず「正しい HTML・CSS」とは何か、です。これは、決められた仕様に従って書かれていることです。HTML にも CSS にも仕様はありますので、それを守って書いていることが重要です。

正しく書かれた HTML・CSS は、ブラウザが理解しやすいので正しく表示されます。たくさんの人に見てもらうためにも、良いことなのです。

一方、書き方を間違えている場合はどうかというと、ブラウザが理解する際、間違った部分をどう解釈するかによって表示結果が変わってしまい、意図しない表示になったり、あまりにもひどいと表示されないこともありえます。情報がちゃんと見てもらえないのでは、意味がありませんよね。

HTML と CSS は正しく書いたほうが、人間にもブラウザにも優しいのです。

正しい HTML を学ぶ意識の持ち方

正しい HTML を学んでいく上での意識の持ち方。

HTML は W3C という団体が勧告を出しており、基本的に W3C の勧告に従って書ければ OK です。これから紹介するサイトは、この W3C の勧告を噛み砕いて分かりやすく説明しているサイトだと思ってください。

さて、HTML にはバージョンというか、種類がいくつかありますが、皆さんがこれから覚える HTML は HTML 4.01 Strict というものです。これは、使ってはいけないものは最初から使っちゃダメと決められているので、自然と正しいものが覚えられます。XHTML や HTML5 といった進化形みたいなモノもありますが、XHTML は現時点で特にメリットなし、HTML5 はまだデビュー前なので、特に意識しなくていいです。HTML 4.01 を覚えておけば、XHTML への移行も HTML5 への移行も簡単なので、とにかく HTML 4.01 Strict を覚えましょう。

HTML 自体も、私のようにいろいろと遠回りして今日に至っているので、古い情報は現在の考え方からすると間違っているという可能性がかなりあります。HTML の歴史を学び、「これは古い情報で、今では間違いとされてるからもう使えないな」というような見極めができるようになることも必要です。

HTML を書くソフトは、最初はシンプルに「メモ帳」で書いてください。余計な入力支援を使わずに自分で書けるようになりましょう。間違っても「ホームページビルダー」みたいな「目で見て作れる」ソフトは買わないでください。面倒に感じるかもしれませんが、タグを手打ちしましょう。一通り手打ちを覚えたら、ez-HTML などの入力支援がついたエディタに移行しても良いでしょう。

以下の正しい HTML を学べるサイトを見ながら、自分でも実際にページを作ってみましょう。アップロードしなくとも、ブラウザで開いて見ることはできます。見てやってみたくなったものは自分で作ってみましょう。

正しい HTML を学べるサイト

サイトごとに解説を入れてます。

ごく簡単な HTML の説明

HTML を覚えるなら、まずこのページの「簡単な HTML の説明」を見ていくだけで一通り覚えられます。「1. HTML って何だ?」から「6. 正しい HTML のための若干の知識」までを熟読しましょう。「7. テーブル」と「10. フォーム」も見ておきましょう。8. と 9. はスタイルシートの解説です。

XHTML への移行を前提とした書き方がされているので、例えば「6. 正しい HTML のための若干の知識」のページ内の「XML 名前空間によるタグセットの明示」の章や「XML 宣言と文字コード情報」内の「XML 宣言」の章などはあまり気にしなくていいです。

「少し詳しい HTML の説明」は別に読まなくても良いですが、覚えずとも読んでおくと、あとあと役立つかもしれません。「よい HTML、わるい HTML」は参考になるでしょう。XHTML の話がやたら出てくるので、「XHTML から次世代ウェブへ」にある「XHTML1.0 の書き方と留意点」だけでも見ておくと雰囲気が分かるでしょう。

Web for Beginner 作成支援

ごく簡単な HTML の説明を読んだあとに、こちらのサイトの「HTML 基礎講座」を頭から読んでいくと、確認ができるでしょう。

CSS の話や色の話など HTML 以外の話も多いので、「ごく簡単な HTML の説明には出てこなかったな、初めて聞く話だな、よく分からないや」と思ったら読み飛ばしても大丈夫でしょう。CSS を勉強しているときに、また読んでみましょう。

「HTML 応用編」も役立ちます。「HTML 4.01 リファレンス」や「改定 HTML リファレンス」には要素ごとの詳しい説明があります。「HTML 非推奨要素属性」は、過去に使われており、現在は非推奨となっている要素や属性が紹介されています。HTML の歴史が垣間見れるでしょう。

HTML の定義のための覚書

「HTML 講座」の 1. から 5. までを熟読しましょう。特に「4. DOCTYPE 宣言について」の話は上の2サイトではこれほど分かりやすく説明されていないため、ここで勉強して HTML 4.01 Strict の文書型宣言を自分のソースに追加しておきましょう。

「HTML を勉強する前に」も、意識の持ち方を知るために見ておくと良いでしょう。最初は「歴史的かなづかひ」が気になるかもしれませんが、良サイトですw。

正しい理解の爲の HTML 覺書

今まで勉強してきたものがよくまとまっているのがこのサイトでしょう。「基礎知識」のほうを流し読みして復習し、「リファレンス」も頭から眺めて再確認しましょう。

「あの要素はどうだったっけ…?」と調べる際にも役立つサイトです。

Another HTML-lint Gateway

上記のサイトなどを見て作った自分の HTML が正しいかどうかを確認してもらえます。ソースをコピペするか、アップロードしたページの URL を貼って「チェック」を選びます。すると問題のある箇所と、何がいけないかの解説が出てくるので、指摘されたところは直していきましょう。

注意された場所は、内容によって減点されていきます。灰色のメッセージは減点はされませんが、直したほうが良いモノです。エラーがなければ100点満点の表示が出るので、基本的には100点になるように正しい HTML を覚えていきましょう。

1ページで騙るホームページ作成

ここまでの知識があれば、皮肉っぽい書き方に笑いながらも「よくまとまっているなぁ」と思えるページですw。

正しい CSS を学ぶ意識の持ち方

「正しい HTML を学べるサイト」で学んで作ったページが、とても味気ないのは何度か見てきたでしょうか。いよいよこの味気ないページが、CSS で華やかになっていくでしょう。

CSS を覚えていく前に、まずはそれを適用させる HTML の知識がなくては話になりません。最悪でも「p 要素は見出しでしょうか、段落でしょうか?」程度のことは理解しておきましょうw。

CSS の基本ルールは多くないので、あとはプロパティの種類と、それぞれのプロパティの書き方を覚えていくことになります。さながら英単語帳を覚えていく感じかもしれません。

また、CSS はブラウザがいまだに完全対応していないので、覚えたものが思ったとおりに表示されないことがあります。そういったブラウザの未対応部分やバグの回避の仕方や、裏技的な記述の仕方を覚えていく必要もあります。…が、ここでは特にそういう話はしません。それより前に正しい CSS を覚えましょう。

現在は CSS3 の話が出てきてますが、まだデビュー前なので、皆さんは CSS2 というものを勉強していくと思ってください。

正しい CSS を学べるサイト

ごく簡単な HTML の説明

「8. スタイルシート1 - 設定方法」と「9. スタイルシート2 - プロパティ」で、CSS がどんなものか、どのようにスタイルを指定していくのか、初歩の初歩が分かるようになっています。文字色を指定したり、見出しに枠線をつけるといったことはできるようになるでしょう。

World Wide Web Guide - CSS

「1. 前提知識」で上のページの復習と新たな知識をつけて、「2. 色と背景」以降でプロパティを見ていきましょう。基本的に進んでいくほど使用頻度が少ないプロパティになっていくので、9. あたりからは流し読みでもいいかと思います。

Web for Beginner 作成支援

「CSS リファレンス」でプロパティをどんどん見ていくことができます。「逆引きリファレンス」でやりたいことから探していくこともできます。

正しい知識を得たい人の爲の CSS2 リファレンス

ここを頭から見ていくことで、基礎知識の復習からプロパティの確認までが行えます。

W3C CSS 検証サービス

自分が書いた CSS が正しいかどうかチェックしてもらえます。「By Direct Input」を選べばスタイルシートをコピペしてチェックしてもらえます。

結果は英語での解説になりますが、分かりやすく指摘されているので、すぐ直せるでしょう。