美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap
Post on:2012年10月31日
黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012103105.png)
Golden Bootstrap
Golden Bootstrap -GitHub
Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。
// Grid system and page structure ... @import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap
ファイルをインクルードすると、黄金比用の3つの変数を利用できます。
@goldenRatio: 1.6180339887498948482; @goldenLarge: 1/@goldenRatio; @goldenSmall: 1-@goldenLarge;
「@goldenRatio」で黄金比を定義し、1:1.6をsmallとlargeで利用します。
この黄金比をレイアウトに使用した実用的なデモもあります。
まずは、ページ全体のレイアウトから。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103106-01.png)
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103106-02.png)
各カラムのHTMLは非常にシンプルです。
HTML
<div class="golden-small">...</div> <div class="golden-large">...</div>
「small」が小さい方「large」が大きい方で1:1.6になり、全体の幅はラッパーで指定します。
カラムレイアウトのデモもFixedとFluidの2種類が用意されています。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103107-01.png)
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103107-02.png)
グリッドやカラム以外に、エレメントのサイズにも適用できます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103107-03.png)
2つのフォームエレメントがそれぞれ黄金比のサイズに
sponsors