可変グリッド：様々な画面サイズに対応するための洒落たやり方
技術情報・ノウハウ
2011-08-18
iPhoneやiPad、Android携帯など、手元で使えるモバイル機器から、ノートパソコン、デスクトップPC、大画面のシネマディスプレイなど、インターネットのサイトを閲覧するた…
画面サイズが、、
iPhoneやiPad、Android携帯など、手元で使えるモバイル機器から、ノートパソコン、デスクトップPC、大画面のシネマディスプレイなど、インターネットのサイトを閲覧するための機器のサイズは、どんどん多様になってきています。
使う側としては選択肢が広がるのは喜ばしいことですが、サイトをつくる側からすると様々な画面サイズを考慮した上でレイアウトを考えなければならないため、頭痛の種の一つと言えます。
様々なレイアウト手法
CSSによるデザイン技法の発展に伴い、この問題に対処するために、リキッドレイアウト、エラスティックレイアウトなどの様々な手法が編み出されてきましたが、今回ご紹介するのは、JavaScriptを活用した派生型です。
グリッドレイアウト
新聞や雑誌などのレイアウトデザインでは、大量の情報を一度に視認できるようにグリッドレイアウトという手法が使われます。
グリッドレイアウトとは、あらかじめ画面を垂直水平の仮想のガイドラインで分割しておき、文章や箱などの要素をそれに沿うように配置していくレイアウト手法です。
紙媒体では、配置する文書などの要素のサイズが予め決まっているのでいいのですが、Webサイト上の文章は、時によって長さが増減したりしますし、最初に述べたように、画面のサイズも場合によって違ってしまうため、そう簡単にはいきません。
javascriptによる可変グリッド
そこで登場するのがjavascriptのライブラリです。これにより、画面サイズの変更や、一つ一つの文章の大きさを自動的に計算し、画面上にきれいに敷き詰めることができるようになります。
いくつかのライブラリがjQueryのプラグインとして提供されています。
・jquery.vgird.js
http://blog.xlune.com/2009/09/jqueryvgrid.html
・jquery.masonry.js
http://masonry.desandro.com/
実際に使用されている例が以下のサイトで紹介されています。
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
可変グリッドレイアウトなWebデザイン集めてみました
GNOIBOXでも！
弊社開発のCMS「GNOIBOX」でも可変グリッドレイアウトのサイトを作成することができます。
現在可変グリッドレイアウトで作成しているサイトがオープンしましたらまたご紹介させていただきます！
