IDEA * IDEAドットインストール代表のライフハックブログ
[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://
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });
[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という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System
チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 Child Selector System [ad#ad-2] Child Selector Systemの主な特徴 超軽量サイズ（0.31KB） 使い方はとても簡単 余分なHTMLは最小限 コンテナはパーソナライズ可能（%, px, em） カラムのネストをサポート 条件付きコメントを使用すれば、IE5.5にも対応 Child Selector Systemのスタイルシート スタイルシートは超軽量で、下記のコードで全部です。 単位で使用している「%」は、「px, em」などに変更して使用することもできます。 div{float:left;width:100%} .right>div{float:right} .one>div{wid
960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
ブラウザのサイズに合わせてグリッドも変更する -Fluid Grid system
可変グリッドシステム用のスタイルシートのフレームワーク「Fluid Grid system」を紹介します。 Fluid Grid system ※グリッド表示は右上の「SHOW GRID」をクリック 上記ページではブラウザのサイズを小さくすると、それに合わせてグリッドも小さく変更されます。 ブラウザのサイズを小さくしたキャプチャ 「Fluid Grid system」は成果物としてのレイアウトと同様、プロトタイプでも素早く使えるように設計されたものです。 デザイナーは素早くレイアウトがデザインでき、しっかりと設計された水平や垂直のリズムをもつ複雑なページの変更をすることもできます。 ダウンロードできるデモファイルには、6カラムと9カラムのレイアウトが用意されています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
