美しいバランスを生み出す黄金比をウェブページのレイアウトに使ってみたい人に役立つ -The Golden Grid | コリス

2012/06/05 373 users カラム グリッド コリス テンプレート 水平方向

黄金比（1:1.6180）をベースに作成されたグリッドを使った、ウェブページのレイアウトに役立つテンプレートとツールを紹介します。 The Golden Gridの仕組み The Golden Gridのセット内容 The Golden Gridの仕組み 「The Golden Grid」は960 Grid Systemに水平方向のガイドを加えたもので、グリッドを構成するカラムと溝を黄金比ベースに... 続きを読む

ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方

2012/02/09 778 users less jQuery Sass mootools CSS

最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、... 続きを読む

[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js | コリス

2011/04/17 104 users コリス jQuery スクリプト Media Queries

CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid S... 続きを読む

マンネリ化から抜け出し、新鮮なウェブデザインを生みだす10のアイデア | コリス

2011/03/01 300 users コリス ウェブデザイン Photoshop レイアウト 作業

いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。下記は各ポイントをピックアップして意訳したものです。カンバスはブランクから始めるPhotoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。用意されたレイアウトに頼らない960 Grid Systemな... 続きを読む

Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net

2010/07/09 1815 users net Web制作 順不同 ツール10選 沢山

Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。... 続きを読む

無駄なdiv要素やclassだらけのマークアップから卒業する方法 | コリス

2010/04/01 954 users Webdesigner Depot グリッドベース コリス

グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 は... 続きを読む

ページの幅960pxを基準にして、設計するグリッドデザイン | コリス

2008/03/25 461 users グリッドデザイン コリス 解像度 モニター 数字

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12,... 続きを読む