タグ: HTML5

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

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

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

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

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

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

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

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

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



HTML5はもはや次世代規格といえないほど、ニーズや要求が高まってきています。ウチの会社でも脱フラッシュだの、レスポンシブデザイン(ウインドウ幅に合わせてレイアウトを最適化させる方法。PCとスマホサイトの両立に使えるとして俄かに話題になっている技術)に対応せよだの、コレがWEB制作や開発者以外からでも指摘を受けるようになって来ました。

こちとら必死こいてXHTMLのマークアップ方法を覚えていったのに、その努力を一切合切水の泡にせよと言うのか?と愚痴りたくなりますが、現実問題スマートフォン、タブレットがここまで浸透してきたらやっぱり無視は出来ません。

でもご安心あれ、常に最先端を求められるWEB制作・開発の現場を助けるお役立ちツールがあるんです!それがこちら、

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

あらかじめ基礎の構築が完了している雛形集なので、一から構築していく必要もなく、また用途や目的に沿ってカスタマイズすればいいので、喫緊な開発の場合重宝すること間違いなしです。

もちろん、今はやりのスマートフォン、タブレットに対応したテンプレートや、Ratinaディスプレイを搭載したMacBook Proといった高DPIデバイス向けのサンプルメディアクエリなど、今もっとも対応を求められている問題について充実の内容となっています。

なお、更に踏み込んで、「Get Custom Build」から、すでにあらかたカスタマイズされたライブラリをダウンロードでき、中にはレスポンシブデザインのライブラリもあるじゃないですか!スマホサイトも作らなきゃ、でもPCサイトと両立できないって言うWebマスターも多いと思いますので、これをつかってレスポンシブデザインに挑戦してみては?