先日のエントリーで紹介した「HTML5 Boilerplate」を使って、お粗末ながらレスポンシブサイトを作ってみました。

initializrを使えばあらかたレイアウトが組まれている状態ですので、後はスタイルシートとHTMLを使って自分好みのサイトに仕立てあげることが出来ます。

レスポンシブサイトのサンプル

素のテンプレートからあまり大きくレイアウトを変更していませんので、この程度のカスタマイズであれば、ものの数時間で完成できちゃいます。レスポンシブデザインの骨子はウインドウサイズを取得して、それによって読み込むスタイルを切り分けるということになりますので、あまり大掛かりな変更を加えない限り、HTMLとCSSに手を加えるだけで完結してしまいます。

ただ、ちょっと難しいというか、厄介だと感じたのは、サイズやブラウザごとにスタイルが定義してあって、それを考慮に入れて手を加えないと一方ではいい感じになっても、もう一方では…。みたいなことが頻繁に起こってしまいます。後はHTML5で記述されているので、とてもシンプルなソースですが、見慣れていないと少しわかりにくいかもしれません。でも慣れてしまうと4.0の<div>~</div>だらけのソースよりかはるかに楽ですけどね。

因みにあらかじめスタイルを決めておくべき画面サイズは、以下のような感じ。

  • オールサイズ対応
  • 横幅1140ピクセル~
  • I横幅480ピクセル(場合によっては320px)~
  • 横幅768ピクセル~

デバイスごとに更新の手間やソースの管理をしなくて済むし、クローラー対策やインデックス化の手間の省略などSEOの観点でも有利とされているので、一度試してみてはどうでしょうか?

HTML5 WEBテンプレート集「HTML5 Boilerplate 4」