CSS変数(正確にはCSSカスタムプロパティ)についてざっくりと。
サイト幅
:root {
--site-width: 1000px;
--site-width-padding: 40px;
--scroll-bar-width: 17px;
--site-width-media-query: 1057px;
}
- コンテンツ領域 = 1000px
- ブラウザ端からコンテンツ領域までの余白が40px(左右20pxづつ)
- スクロールバーを常に表示しているのでその幅17px
- これらをひっくるめた幅が1057px
これらと、以下のメディアクエリ
- PCのブレークポイント769px
- 横スクロールなしで表示できる幅1057px
を組み合わせています。
変更例
コンテンツ領域を1200pxにしたい場合は、
:root {
--site-width: 1200px;
--site-width-padding: 40px;
--scroll-bar-width: 17px;
--site-width-media-query: 1257px;
}
となります。
※common.cssとサイトごとの固有cssの2カ所に記述しています。
他は色やウェイト
color、font-weight程度しか使っていません。任意に追加してください。