第30回　初心者向けHTML＆CSS参考サイトまとめテーブルレイアウトを卒業しよう

初心者向けHTML＆CSS参考サイトまとめ

ネタに困ったときの最終手段。「まとめ」をします。

今回は、これからHTML＆CSSに挑戦する方、または始めたばかりの方にお役立ていただけるような、比較的易しいサイトをまとめてみました。

(X)HTMLリファレンス系

DREAMWEAVER で CSS スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。

標準的なWebページを作る全ての基本は、(X)HTMLの要素の役割を理解し、正しくマークアップすることに尽きます。そのため、リファレンスを読んで要素とその役割を覚えるだけでも非常に効果的です。

W3Cのサイトをみれば全てが載っていますが、何せ英語、しかも専門用語ずらずらなので、分かりづらい！ということで日本語のページを中心に集めました。

(*が付いているのは英語のページです)

とほほのＷＷＷ入門: 多くの方が閲覧したことがあるであろう、定番ページです。更新されていないため、ブラウザーの情報などが古いのがちょっと残念ですが、HTMl4.01の各要素の役割がわかりやすく解説されています。CSSやJavaScriptもあり。
HTMLクイックリファレンス: こちらも比較的初心者向けの平易な言葉での解説があります。目的別で調べることができるものナイスです。CSSやJavaScriptもあり。
Webウェブデザインレッスン: XHTML1.0およびHTML4.01のstrictに準拠した一覧があります。また、概念などの解説やチュートリアルも充実しています。CSSもあり。
WWWWARD: XHTML1.1の詳細な仕様、解説が載っています。初心者の方には少し難しい用語も多いかもしれませんが、各要素の概要は是非読んでおきたいところです。
W3Schools Online Web Tutorials *: 英語ですが、情報量がすごいです。また、ページ内にエディタ機能が搭載されていて、実際にソースコードを入力し、結果を確認することができます。HTMLリファレンスへのリンク
Safari Reference Library *: こちらも英語ですが、Appleが提供しているリファレンス集です。HTML以外のリファレンスにもCSSやJavaScript、iPhone向けなど膨大な量のドキュメントがあります。HTMLリファレンスへのリンク

CSSリファレンス系

上記のサイトにはCSSのリファレンスを含んでいるものがおおいので、ここは少なめに。

正しい知識を得たい人の爲のCSS2リファレンス: 非常に詳解なCSSリファレンスです。そのため、初めて学ぶ方にはやや難易ですが、独学の知識を正しくかみ砕きたい方向け。
CSS Dencitie: CSSの基本からリファレンスまで豊富な情報がそろっています。ブラウザーのバグ情報もあるため、非常に役立つはずです。
CSS Cheat Sheet (V2) - Cheat Sheets - Added Bytes *: PDF、PNG形式でCSSのチートシートが公開されています。ダウンロードしておくと、ちょっと確認したいときなど便利です。（チートシートとは、いわるゆカンニングペーパーみたいなものです。）

Web標準（アクセシビリティ・ユーザビリティ）

昨今はWeb標準に関する情報も豊富です。これから始める方は是非、最初に正しい知識・考え方を得てしまいましょう。

Web標準Blog | メソッド | ミツエーリンクス: 株式会社ミツエーリンクスが提供する、Web標準に関する話題を取り扱うブログです。幅広い話題で非常に有益な記事がたくさんあります。特にW3C関連の翻訳、解説の情報は英語イヤーンな人にとても役立つはず。
Web標準カリキュラム: Opera社が公開している、英語のカリキュラムの邦訳です。先ほどのミツエーリンクスさんがローカライズを担当されたもので、まだ訳されたドキュメントは多くないですが、Web標準に興味がある方は必読！な内容です。
ウェブユーザビリティ向上を支援するWebsite Usability Info: ユーザービリティやアクセシビリティに関するTipsや考え方などを提供しているサイトです。きっとこれまで意識していなかった新しい視点を得られるはずです。

おまけ：HTML5＆CSS3

目下策定中のHTML5とCSS3についても情報がどんどん増えています。来るべき将来に今から備えておきましょう。勧告されてからでは思いっきり出遅れてしまうかも。

HTML5 を学ぶための情報源まとめ | WWW WATCH: HTML5関連ページを色々あつめていたのですが、他に素晴らしいまとめ記事がありました。こちらの記事を見ればほぼ完璧かとおもいます。こちらの記事でもオススメされているHTML5.JPは特に、熟読する価値大ありです。
CSS3 . Info - All you ever needed to know about CSS3 *: CSS3に関するさまざまな情報があります。特にCSS3 PreviewsにはCSS3からの新プロパティがわかりやすくのっています。

では次回もお楽しみに。（こう）