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

日本語の記事

日本語によるサポート

どのようにインターネット上のコンテンツを Input/Output しているか

Information Flow

自分の現状をメモです。図は Cacoo で作成。詳しくは英語版の方に解説を書きました。

Yahoo! Pipes でまとめるところが鍵です。すべてを Yahoo! Pipes でまとめて、FeedBurner 経由で Evernote に取り込むわけです。Google Reader でスターを付けた記事を InstaReader 経由で自動的に Instapaper に取り込み、それを iPad/iPhone で読むのも、高速処理を支援しているポイントです。

ほんとは Fastlader/Livedoor Reader の高速な UI がすばらしいのですが、サードパーティーアプリ/サービスの充実度から、Google Reader を選ばざるをえないのが現状。