E-riverstyle Vanguard

ちょっと前に、「自分がこうやってHTMLとCSSを覚えた」的なエントリーを読みました。そのエントリーのタイトルもURLも忘れましたが、それに便乗して、僕がどうやってHTMLとCSSを勉強して、身に付けたかを書きます。

HTMLとCSSの出会いというよりも、Dreamweaverに出会ったのが、今から6年前です。

当時、HTMLという名前は知っていましたが、それよりもDreamweaverの操作を覚えることが先決だと思っていました。

当時は、全く知識も無く、教えてくれる人もいなかったので、HTMLの大切さを知りませんでした。というのもDreamweaverはHTMLタグを自動で生成してくれるので、HTMLの知識など不要だと思っていたからです。

それゆえに、Dreamweaverの本を買い、その本を読みながらDreamweaverでWebページを作成していました。当時のDreamweaverのバージョンは、MX 2004が主流だったので、MX 2004の書籍を3冊ほど買いました。

最初は、初心者向けの本「できるDreamweaver MX 2004 」、続いて、中級から上級向けの「DREAMWEAVER MX 2004 スーパーリファレンス 」、さらにDreamweaverといえば、テンプレート機能からライブラリ機能です。これらの機能が書かれている本「Dreamweaver MX 2004 マスターブック」といった感じで書籍を購入していました。これぐらいになるとさすがにDreamweaverもわりと使いこなせるレベルまで来れました。

できるDreamweaver MX 2004 Windows XP対応 (できるシリーズ)

DREAMWEAVER MX 2004 スーパーリファレンス for Windows&Macintosh (SUPER REFERENCE)

Dreamweaver MX 2004 マスターブック for Windows & Macintosh

Dreamweaverの操作は覚えても、HTMLソースは汚く、フレームやテーブルを使ったレイアウトがほとんどで、平気でstyle属性を使っていたりと、Web標準からは、ほど遠いものでした。

ですが、フレームやテーブルレイアウトと、オールドファッションのWeb製作を経験できたことにより、後にWeb標準の大切さを認識できたと思います。

そして、Webについて深く知っていくにつれて、HTMLの大切さとCSSを知っていくわけで、HTMLの知識をつける為に、HTMLタグ辞典 を購入し、HTMLについて深く勉強すようになっていきました。

HTMLタグ辞典 第6版 XHTML対応

ここまで来るとCSSでのレイアウト作成が重要となってくるのは、どういうわけか必然と知っていくのですが、当時は、CSSに関する書籍は今ほど多くもありませんでした。ですので、無難に、「CSSスタイルシート辞典」を購入し、CSSについて勉強していっていました。

詳解 CSSスタイルシート辞典

しかし、問題はどうやってCSSでレイアウトを作っていくかでした。ですので、サンプル集の本が当時少ないなかでもあったので、「速習Webテクニック スタイルシート 上級レイアウト 」の本を購入し、CSSレイアウト組みの手法を身に付けました。また、偶然本屋で見つけたこの本「プロとして恥ずかしくないスタイルシートの大原則 」も、ものすごい重宝した1冊です。メニューの作成方法やボックスモデルの理解をこれで付けたと言っても過言ではありません。

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)

プロとして恥ずかしくないスタイルシートの大原則

これらの本で、ある程度、HTMLやCSSの知識を身に付け、難なく仕事ができるレベルまで、来れていました。

しかし、ある日、衝撃の本と出会います。この出会いが、僕のHTMLとCSSの知識を確実にしたことは間違いありません。その本というのが「Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト」です。

涙ものの本です。これ無くしては今の自分は語れないというぐらいです。この本があり、これで知識を確実にしたことにより、現在、Webの講師をすることができたりするぐらいです。僕の聖書と言っても過言ではありません。

この本を読んでから、どれだけ自分の知識が、中途半端すぎたのかがわかるぐらいでした。Webクリエイター必読の本だと思います。

僕の場合は、読みすぎて、ボロボロになっているほどです。

Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト

あとは、海外のCSSギャラリー集のサイトのソースと「Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト」の本を照り合わせながら、知識と技法を身に付けていきました。

また、「世界の「最先端」事例に学ぶ CSS ベスト・プラクティス」や「実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~」といった本も非常に参考になります。

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス （Web Designing Books)

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

特に、「実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~」は、Web標準はどういったものかや標準に準拠したレイアウトの作成方法なども載っているので、ものすごく勉強になると思います。

大体、こんな感じで僕はHTMLとCSSの知識を身に付けました。

まとめると、最初はDreamweaverからはいり、そこから発展させたといった感じです。

Dreamweaverの操作を覚えるのも良いですが、今だからいえるのですが、やはり大事なのはHTMLです。できるだけタグ打ちで覚え、「Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト」や「実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~」の本を読みながら勉強していくほうが、正しい知識を身に付けることができると思います。

乱文失礼しました。