目次
計算式
種類は中央揃えを想定
コンテンツ幅を求める計算式
コンテンツ幅＝（分割数）×（幅）＋（分割数−1）×（ガター）
コンテンツ幅がに合わせて幅を調整したい場合
幅=（コンテンツ幅−（（分割数−1）×（ガター）））÷（分割数）
PC表示
分割数12・ガター24を共通条件とすると、各コンテンツ幅での設定は下記表の通り。
| コンテンツ幅 | 960px | 1080px | 1128px | 1200px |
|---|---|---|---|---|
| 幅 | 58 | 68 | 72 | 78 |
| 分割数 | 12 | 12 | 12 | 12 |
| ガター | 24 | 24 | 24 | 24 |
分割数12・ガター40を共通条件とすると、各コンテンツ幅での設定は下記表の通り。
| コンテンツ幅 | 960px | 1080px | 1128px | 1200px |
|---|---|---|---|---|
| 幅 | 43 | 53 | 57 | 70 |
| 分割数 | 12 | 12 | 12 | 12 |
| ガター | 40 | 40 | 40 | 40 |
タブレットやスマホは適用外
タブレットやスマホ表示を作成する時は、レスポンシブを想定していると思うので、PC表示作成時と違って画面幅の90％で表示すると思う。
その場合は、種類をストレッチにして幅を調整せず、余白調整する方がいい。
タブレットは6分割・余白40px
スマホは2分割・余白20px
