HTML5の勉強

そろそろHTML5でサイトを作ってみなきゃと思いながら数ヶ月…。重い腰をようやく上げて、既存のサイトをHTML5に書き換えてみました。
Web Desining 2010/11（…結構古いんですが）の「Go HTML5, GO!」という記事や下記のページを参考にしながら、空いた時間にチマチマと。

• HTML5についてのおさらい - W3G Blog Studies
• 続HTML5についてのおさらい - W3G Blog Studies
• 1日でマスターできるHTML５まとめ。 - NAVER まとめ

やりながら少しずつ分かってきた事は、articleやsection、aside等の要素を使って今まで以上にページの階層構造を明確に定義できるという事。
正直、どういう構造が良いのか悩む場面も多いんですが、「このページがブログだったら？」と考えて階層を作っていくと案外設定しやすいです。

とはいえ、canvas要素もvideo要素も…、新しい技術はほとんど使っていないので、ホント、はじめの一歩って感じですが。
とりあえず、下記のサイトをHTML5で書き換えてみました。

…で、１つ困った事がありました。
今回、メディアクエリを使い、スマートフォンで表示した際にCSSを切り替えるという仕組みを採り入れてみたんですが、僕の使っているDreamweaver CS3上では、CSSが反映されず、生（？）のHTMLの状態で表示されてしまいます。

表示の確認は、実際のブラウザやシミュレーターを使って確認するので、手間は変わらないんですが、プレビューが役に立たないと、精神衛生上よろしくないと思います。
そろそろDreamweaverをバージョンアップしなければいけないという事でしょうか？
それとも、これを機にCodaを使ってみようかなぁ…。
まあ、もう少し情報収集してみますかね。

Web Designingの誌面から 2011.06

今回も今月のWeb Designing（2011年06月号）の「WD WEBSITE FRONT」から気になったサイトを勝手ながら紹介してみます。興味があればお付き合いの程よろしくお願いいたします。

「マイ・フェイバリット関西」 http://www.my-fav.jp/
関西エリアの沿線情報ガイド、いわゆる情報ポータルサイトです。
デザイン的に面白みがなかったり、雑多になりがちな種類のモノだと思うんですが、デザインと情報のバランスがなかなか良いと思います。参考にしたいですね。

「aguije inc.」 http://aguije.jp/
Web制作会社のサイト。
１ページにすべてのコンテンツが収められていますが、仕掛けが上手いので閲覧の負担にはなりません。逆に操作感が心地良いくらいです。
あえての短所を長所に変えるアイディアと技術、…ウマイです。

「Unfold」 http://unfold.no/
ノルウェーのデジタルクリエイティブ会社のサイト。
日本じゃなかなかこういうサイトはないですね。スクロールしていくと、どうなってんの？と思いますが、面白いです。こういう遊び心、フツーの人にはなかなか考えつかないと思います。イイですね！

「Magnum Pleasure Hunt」 http://pleasurehunt.mymagnum.com/
アイスクリームメーカーのスペシャルサイトです。お金かけて作ったんだろうな…、と思ってしまいます。かなり丁寧に作ってあるので結構遊べます。
ちょっとバカバカしい感じが好みです。

「XLARGE 20th ANNIVERSARY GO! OG BOX」 http://xlarge20th.jp/
写真を送るとオリジナルブランドロゴを作ってくれるんですが、その画像をトップページの演出に使っているトコロが心憎くくて楽しいです。