HTML5 と CSS3 をこれからはじめる人におすすめの情報

Old

New

HTML5/CSS3 ベースの WordPress テーマを作ったときに参考にしたリソースです。画像は旧デザインと新デザイン。新デザインはフレキシブルなレイアウトです。

これがおすすめ記事。

いくつか重要事項を引用します。

事実

はじめる前に、知っておくべき事があります。

There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.

Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done.

まだまだ発展途上であることは意識すべきです。アクセスするユーザーの層が幅広い場合、導入には慎重になった方が良いです。

Progressive Enhancement と Graceful Degradation

重要なコンセプト。これを知っておくと、HTML5 を活用できると思います。残念ながら、適切な日本語訳が思いつかないのでそのまま。

Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling.

フレームワーク

フレームワークを使うことはおすすめです。特に HTML5 初心者にはおすすめ。早くリリースできるし、フレームワークから学べることも多々あります。自分は Less Framework を選択しました。

グリッドシステム

HTML5/CSS3 には直接関係ないですが、美しいデザインを志すならぜひ。

自分は Pixcel Perfect を使ってレイアウトを行うために、画像を作りました。

992

その他のリソース

友人の Oli がおすすめの情報を教えてくれました。自分も開発する過程で聞きまくりました。Thanks Oli!

Oli の記事

日本人にも読みやすいように、簡単な英語で書いているとのこと。ユーザーフレンドリーな心遣い。

HTML5 と Firefox

日本語の記事

日本語によるサポート

HTML5 のデモ付きプレゼンテーション

HTML5 や CSS などの次世代技術を紹介するスライドを見ました。これを見て未来を感じてください。

Presentation on HTML5, APIs and CSS3 — slides have built-in interactive demos! http://01i.jp/html5slides Excellent! #html5 #css3

Via Oli’s tweet