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

• 初めに
• 「正しい」とは？何が間違っているの？
• 正しい HTML を学ぶ意識の持ち方
• 正しい HTML を学べるサイト
• 正しい CSS を学ぶ意識の持ち方
• 正しい CSS を学べるサイト

初めに

2009年で、このウェブサイトを作り始めて約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」を選べばスタイルシートをコピペしてチェックしてもらえる。

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