斜めグリッドを使ったデザインのウェブサイト集
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー
[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名を採
[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
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
