LyoutのFramework

ページのDesignで、一番悩むのが、layoutでしょう。
1200pxの、Responsive Layoutの例最大幅を、1200px として考えている。
CSSでは幅は、すべて、%指定です。BOX間の隙間は、60pxに統一しています。

お勧めのCSS_Framwork⇒Semantic-ui.com ただし、Commandレベルでの操作ができない方には、
お勧めできません!⇒node.js必須

◆ ひと昔前までは・・・

ひと昔前までは、横幅960pxを、基本として設定していたグリッドレイアウトも、 現在では、横幅1200pxを、基本としたものに、変わりつつある。

この時代のLyoutToolとしては、960 Grid Systemがある。
また、gridulatorなど、コンテンツの幅と分割するグリッドの数を指定するツールも、 存在したが、
ディスプレイ表示幅1,280px以上が標準となっている現在では、1200pxを基準とした、グリッドレイアウトが、主流といえる。

Half Columns

One Half (570px)
One Half (570px)

Third Columns

One Third (340px)
One Third (340px)
One Third (340px)

Third 1:2 Columns

One Third (340px)
Two Third (740px)

Third 2:1 Columns

Two Third (740px)
One Third (340px)

Quarter 1/4 1/4 1/4 1/4 Columns

One Quarter (270px)
One Quarter (270px)
One Quarter (270px)
One Quarter (270px)

Quarter 1/4 1/4 1/2 Columns

One Quarter (270px)
One Quarter (270px)
Two Quarter (570px)

Quarter 1/2 1/4 1/4 Columns

Two Quarter (570px)
One Quarter (270px)
One Quarter (270px)

Quarter 1/4 1/2 1/4 Columns

One Quarter (270px)
Two Quarter (570px)
One Quarter (270px)

Quarter 1/4 3/4 Columns

One Quarter (270px)
Three Quarter (870px)

Quarter 3/4 1/4 Columns

Three Quarter (870px)
One Quarter (270px)

Fifth Columns 1/5 1/5 1/5 1/5 1/5 Columns

One Fifth (210px)
One Fifth (210px)
One Fifth (210px)
One Fifth (210px)
One Fifth (210px)

Fifth Columns 1/5 1/5 1/5 2/5 Columns

One Fifth (210px)
One Fifth (210px)
One Fifth (210px)
Two Fifth (480px)

Fifth Columns 1/5 1/5 3/5 Columns

One Fifth (210px)
One Fifth (210px)
Three Fifth (750px)

Fifth Columns 1/5 4/5 Columns

One Fifth (210px)
Four Fifth (960px)

Fifth Columns 2/5 3/5 Columns

Two Fifth (450px)
Three Fifth (690px)

Sixth 1/6 1/6 1/6 1/6 1/6 1/6 Columns

One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
One Sixth (170px)

Sixth 1/6 1/6 1/6 1/6 1/3 Columns

One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
Two Sixth (370px)

Sixth 1/6 1/6 1/6 1/2 Columns

One Sixth (170px)
One Sixth (170px)
One Sixth (170px)
Three Sixth (570px)

Sixth 1/6 1/6 2/3 Columns

One Sixth (170px)
One Sixth (170px)
Four Sixth (770px)

Sixth 1/6 5/6 Columns

One Sixth (170px)
Five Sixth (970px)

Sixth 1/3 1/6 1/2 Columns

Two Sixth (400px)
One Sixth (170px)
Three Sixth (570px)