.acms-container の深堀り（左だけ揃えたり右だけ揃えたりも）
a-blog cms Advent Calendar 2022 9日目の記事です。
a-blog cms には .acms-container という CSS のクラスがあり、 公式テーマに使われています。このエントリーではこの .acms-container クラスに関して
- systemテーマにある記述
- 公式テーマごとの違いと変数の変更方法
- 左だけ揃えたり右だけ揃えたりする方法
- Sassを使わない場合
を見ていきます。
systemテーマにある記述
/themes/system/src/scss/_grid.scss にある次の記述は、すべてのテーマに影響を与えています。systemテーマの内容は直接いじらないようにしてください。
.acms-container{
max-width: global.$acms-container; // 初期値 980px
margin-right: auto;
margin-left: auto;
padding-right: math.div(global.$grid-space, 2); // 初期値 20pxの半分で10px
padding-left: math.div(global.$grid-space, 2); // 初期値 20pxの半分で10px
@include global.box-sizing(border-box);
}$acms-container や $grid-space といった変数は /themes/system/src/scss/global/_variables.scss で定義されています。max-width が980px で左右の padding が10px、box-sizing が border-box なので、ブラウザ幅が980pxまでは acms-container 直下の要素は左右の余白を10pxに保っていて、ブラウザ幅が981px以上になると幅960pxで中央配置になることが分かります。
公式テーマごとの違いと変数の変更方法
beginner、site、UTSUWAの各公式テーマでは、この system テーマの設定を継承して上書きしています。
beginner テーマと site テーマ
/themes/テーマ名/src/scss/_base.scss に以下の記述があります。
@use "sass:math";
@use "global/acms-common" as acms;
@use "global/common" as global;
// …中略…
.acms-container {
max-width: global.$container; // 初期値 1140px
padding-right: math.div(acms.$grid-space, 2); // 初期値 20pxの半分で10px
padding-left: math.div(acms.$grid-space, 2); // 初期値 20pxの半分で10px
@if (global.$enable-iphonex == true) {
padding-right: calc(#{math.div(acms.$grid-space, 2)} + constant(safe-area-inset-right));
padding-left: calc(#{math.div(acms.$grid-space, 2)} + constant(safe-area-inset-left));
}
.acms-container {
padding: 0;
}
}名前空間が acms の変数は /themes/テーマ名/src/scss/global/_acms-common.scss において system テーマの変数が @forward で読み込まれています。acms.$grid-space を上書きしたい場合はこのファイルの with 節の値を変更すればオーケーです。
名前空間が global の変数は/themes/テーマ名/src/scss/global/_variables.scss で定義されているそのテーマ用の変数です。 beginner テーマ、 site テーマをカスタマイズする場合はこの変数を直接変更してコンパイルします。
iPhoneX のセーフエリア対応がされています。また、.acms-container が入れ子になっている場合はいちばん外側以外の .acms-container では左右の余白がゼロになることが分かります。
左右の margin については system テーマの値である auto がそのまま継承されるので、各テーマでは定義されていません。
UTSUWA テーマ
UTSUWA テーマでも基本は site、beginner テーマと同様ですが、padding-right、padding-left には system テーマではなく UTSUWA テーマの変数が読み込まれています。ここを変更したい場合は /themes/utsuwa/src/scss/global/_variables.scss の $col-gutter を直接変更します。
左だけ揃えたり右だけ揃えたりする方法
.acms-container クラスの左側だけ、右側だけを揃えて、反対側はブラウザの幅なりになっているよくあるデザインのためのクラスを作ってみましょう。Sass の書き方は下記のとおりになります。
site、beginner テーマの場合
.acms-container-left {
padding-left: math.div(acms.$grid-space, 2);
@include acms.box-sizing(border-box);
@if (global.$enable-iphonex == true) {
padding-left: calc(#{math.div(acms.$grid-space, 2)} + constant(safe-area-inset-left));
}
}
.acms-container-right {
padding-right: math.div(acms.$grid-space, 2);
@include acms.box-sizing(border-box);
@if (global.$enable-iphonex == true) {
padding-right: calc(#{math.div(acms.$grid-space, 2)} + constant(safe-area-inset-right));
}
}
@media screen and (min-width: global.$container) {
.acms-container-left {
margin-left: calc(50% - global.$container / 2);
}
.acms-container-right {
margin-right: calc(50% - global.$container / 2);
}
}UTUSWA テーマの場合
.acms-container-left {
padding-left: calc(global.$col-gutter / 2);
@include acms.box-sizing(border-box);
@if global.$enable-iphonex == true {
padding-left: calc(env(safe-area-inset-left) + (global.$col-gutter / 2));
}
}
.acms-container-right {
padding-right: calc(global.$col-gutter / 2);
@include acms.box-sizing(border-box);
@if global.$enable-iphonex == true {
padding-right: calc(env(safe-area-inset-right) + (global.$col-gutter / 2));
}
}
@media screen and (min-width: global.$container) {
.acms-container-left {
margin-left: calc(50% - global.$container / 2);
}
.acms-container-right {
margin-right: calc(50% - global.$container / 2);
}
}- 左側を揃える場合には padding-left、右側を揃える場合には padding-right を .acms-container クラスと同じにする
- box-sizing も .acms-container と揃えて border-box にする
- ブラウザ幅が .acms-container の max-width である global.$container を超える場合は、揃える側の margin を調整する
ということをやっています。
Sassを使わない場合
Sassを使わない場合はテーマのCSSファイルに下記のように記述します。デフォルトの場合はそのまま使えます。数値を変更する必要がある場合には調整してください。
site、beginner テーマの場合
.acms-container-left {
padding-left: 10px;
box-sizing: border-box;
padding-left: calc(10px + constant(safe-area-inset-left));
}
.acms-container-right {
padding-right: 10px;
box-sizing: border-box;
padding-right: calc(10px + constant(safe-area-inset-right));
}
@media screen and (min-width: 1140px) {
.acms-container-left {
margin-left: calc(50% - 570px);
}
.acms-container-right {
margin-right: calc(50% - 570px);
}
}UTSUWAテーマの場合
.acms-container-left {
padding-left: 1rem;
box-sizing: border-box;
padding-left: calc(env(safe-area-inset-left) + 1rem);
}
.acms-container-right {
padding-right: 1rem;
box-sizing: border-box;
padding-right: calc(env(safe-area-inset-right) + 1rem);
}
@media screen and (min-width: 72rem) {
.acms-container-left {
margin-left: calc(50% - 36rem);
}
.acms-container-right {
margin-right: calc(50% - 36rem);
}
}以上、.acms-container クラスの深堀りエントリーでした。.container-md、.container-sm、.narrow-containerといった、幅の狭いコンテナ用のクラスも同じ考え方で扱うことができます。公式テーマをカスタマイズする場合はもちろん、自作テーマで .acms- クラスを使用する場合にも参考にしてただけたら幸いです。
