2009年11月18日

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

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

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


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

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

(X)HTMLリファレンス系


標準的なWebページを作る全ての基本は、(X)HTMLの要素の役割を理解し、正しくマークアップすることに尽きます。そのため、リファレンスを読んで要素とその役割を覚えるだけでも非常に効果的です。W3Cのサイトをみれば全てが載っていますが、何せ英語、しかも専門用語ずらずらなので、分かりづらい!ということで日本語のページを中心に集めました。

(*が付いているのは英語のページです)
とほほのWWW入門
多くの方が閲覧したことがあるであろう、定番ページです。更新されていないため、ブラウザーの情報などが古いのがちょっと残念ですが、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からの新プロパティがわかりやすくのっています。


では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:22
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック