可変グリッドレイアウト(リキッドレイアウト)のサイトやWordPressテーマなど集めました | 52ページ

ブラウザウインドウにあわせてコンテンツが可変する可変グリッドレイアウト(リキッドレイアウトやフレキシブルレイアウト、海外ではFluid Grid Layout)と呼ぶそうです。

以前はFlashで作成するサイトが得意とする表現でしたがJavascriptでできるようになったことから数年前にいろいろなサイトに使われていましたよね。

ウインドウ全体に広がるのはインパクトあるので写真中心系のサイトは見栄えがよくなりますが、テキストが入るコンテンツは若干読みにくくなりますので、用途に合わせて使い分ける形がよいですね。

この可変レイアウトですが、ブラウザ全体に可変する場合と一定の幅を最大としてそれ以下の場合に可変するサイトがあります。サイズを固定してウインドウサイズによってカラムを切り替えるというのはCSS3のMedia Queries(メディアクエリ)の考え方と同じですよね。

今回は「国内」「海外」サイトと「Wordpressのテーマ」を集めてみました。

可変グリッドのレイアウトの作成にはjQueryベースのカスタマイズもたくさんでているので、すぐに作れますので興味のある方は参考のサイトを見て好みのレイアウトを見つけてみてください。

国内サイト

Pen Online

Pen Online
http://www.pen-online.jp/

アマナ

アマナ
http://amana.jp/

Mondo Alfa

Mondo Alfa
http://mondo.alfaromeo-jp.com/

かみぐ – かみの工作所直営店

かみぐ - かみの工作所直営店
http://www.kamigu.jp/

Hellomag

Hellomag
http://www.hellomag.jp/

OUWN

OUWN
http://ouwn.jp/

タイヨーエレック

タイヨーエレック
http://www.taiyoelec.co.jp/company/

東京トヨペット

東京トヨペット
http://www.tokyo-toyopet.co.jp/

DRAFT

DRAFT
http://www.draft.jp/

Super me inc.

Super me inc.
http://superme.jp/

高城浩之建築研究所

高城浩之建築研究所
http://www.h-takagi.com/

フェイバリットリレー Favorite Relay

フェイバリットリレー Favorite Relay
http://www.b-kobe.com/favorite/

Refsign Magazine Kyoto

Refsign Magazine Kyoto
http://blog.refsign.net/

CHECK IT OR KYOTO

CHECK IT OR KYOTO
http://www.checkitorgo.com/kyoto/

ARCPHILIA Inc.

ARCPHILIA Inc.
http://www.arcphilia.co.jp/

CONDENSE

CONDENSE
http://www.condense-c.com/

D&DEPARTMENT PROJECT

D&DEPARTMENT PROJECT
http://www.d-department.com/jp/

Publik:

Publik:
http://publik.jp/

wanderlust hotel

wanderlust hotel
http://wanderlusthotel.com/

日経電子版 広報部

日経電子版 広報部
http://pr.nikkei.com/

daily vitamins

daily vitamins
http://dailyvitamin.jp/category/energy-kick/

twenty * twenty

twenty * twenty
http://www.20-20.jp/

Marble

Marble
http://www.marble-co.net/

quadro

quadro
http://rmd.quadro-web.com/

Concept Conception*

Concept Conception*
http://www.conceptconception.com/

ビルコム

ビルコム
http://www.bil.jp/

BLANK

BLANK
http://www.blank.com.pt/

Shinya Inamura Design Studio

Shinya Inamura Design Studio
http://shinyainamura.com/

charary – キャラリー

charary - キャラリー
http://www.charary.com/

YOU CHOOSE

YOU CHOOSE
http://youchoose.camelstudio.jp/

aModel casting

aModel casting
http://amodel.jp/

Tango Gameworks

Tango Gameworks
http://tangogameworks.com/jp/

デザイン事務所 サガ

デザイン事務所 サガ
http://www.sagainc.co.jp/

週刊ウェブデザイン

週刊ウェブデザイン
http://www.dailywebdesign.com/

大阪人間科学大学

大阪人間科学大学
http://www.ohs.ac.jp/

三軒茶屋栄通り商店街

三軒茶屋栄通り商店街
http://sancha.jp/

伊藤内科医院

伊藤内科医院
http://ito-naika.net/

MONOMDEZ

MONOMDEZ
http://monodez.com/

海外サイト

CreativeDepart

CreativeDepart
http://www.creativedepart.com/

Reform & Revolution

Reform & Revolution
http://reformrevolution.com/

tomtor

tomtor
http://www.tomtor.com/

This Also

This Also
http://thisalso.com/

Xpaider

Xpaider
http://xpaider.com/

WordPressテーマ

Grid Locker

http://gridlocker.dizenoco.com/
http://gridlocker.dizenoco.com/

Liquid Magazin

Liquid Magazin
http://themeforest.net/item/liquid-magazine-unique-fluid-grid-layout/full_screen_preview/60637

shaken-grid

shaken-grid
http://demo.shakenandstirredweb.com/shaken-grid/

Shaken Grid (Lite)

Shaken Grid (Lite)
http://shakenandstirredweb.com/themes/

FolioGrid

FolioGrid
http://www.frogsthemes.com/themes/wordpress/foliogrid-pro/

MANSION

MANSION
http://graphpaperpress.com/themes/mansion/

tanzaku

tanzaku
http://www.tripleships.com/works/tanzaku/

GRID WordPress

GRID WordPress
http://straightline.jp/36

Grid-A-Licious

Grid-A-Licious
http://cargocollective.com/suprb/#17924/Grid-A-Licious

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事