[B! グリッド] haraxのブックマーク

[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious

Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモまずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。アレンジは、下記のGrid—A—Liciousの実装例で。ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に

harax 2012/10/19

リンク

[CSS]表示サイズに合わせて最適なグリッドを構築するスタイルシート -SimpleGrid

デスクトップ用のブラウザだけでなく、iPhoneなどスマートフォンにも対応した、表示サイズに最適なレイアウトを適用するResponsive Web Design用のシンプルなグリッドシステムを紹介します。～720px ※画像クリックで拡大 [ad#ad-2] SimpleGrid 3つの特徴 Responsive Web Design SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。水平スクロールバーとは、さよならです。～720px 720px～ 985px～ 1235px～効率的なclass管理同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最初・中央・最後を個別のclassで管理します。スタイルシートはシンプルに SimpleGridは管理のしやすいシンプルなclass名を採

harax 2011/08/31

リンク

[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。コンテナとなる要素のclassに「grids」を加えます。子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。グリッドは、2分割、3分割、4分割、5分割が用意されています。 /* * Grid * A simple, flexible, fluid grid system that can flow nicely inside a fluid or a fixed container or play good with another Grid system. * Brajeshwar, http://

harax 2011/07/04

リンク

[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid

1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、

harax 2011/04/24

リンク

[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク

たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。 HTML 3カラムの例です。カラムの数にあわせて、div要素を配置します。 <div class="row"> <div class="cell" style="background-color:#aaa;">1</div> <div class="cell" style="background-color:#bbb;">2</div> <div class="cell" style="back

harax 2010/11/15

リンク

グリッドベースのサイトを作りたいなら『Tiny Fluid Grid』が便利 | 100SHIKI

ちと技術的なツールだが、メモ的にエントリー。用途にもよるだろうが格子状のラインに沿って要素を配置したサイトを作りたいならグリッドベースのデザインが便利だ。そう考えるとTiny Fluid Gridは知っておいてもいいだろう。このサイトでは作りたいグリッドのサイズを指定するだけで必要なCSSファイルをダウンロードすることができる。あとはこれをベースにサイトをデザインしていけばいいだけだ。最近のサイト作りはスピード勝負のようなところもある。こうしたツールをうまく使いこなしたいですね。