レイアウトは、ブレークポイントを持たないレスポンシブグリッドです。「1 列の最小幅」を決めるだけで、画面幅に応じてボックスが自動で折り返します。各ボックスには自由にブロックを入れられ、ボックス全体をリンクにしたり、背景画像を敷いたりできます。制作会社の現場で「カラムブロックの幅調整に時間を取られる」問題を無くすためのブロックです。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
基本的な使い方
- 「shitate unique blocks」からレイアウトを追加します。最初はボックスが 3 つ入っています。
- 各ボックスの中に、段落・画像・見出し・ボタンなど任意のブロックを入れます。
- ボックスを増やすときは末尾の「＋」（ボックスの追加）を押します。
- サイドバーの「最小カラム幅」で 1 列の最小幅を決めます。狭い画面ではこの幅を下回らないように列数が減り、最終的に 1 列になります。
エディターでの設定画面
設定項目
レイアウト（親）
- 最小カラム幅 — 例:
16rem（初期値）、240px。CSS 変数--st-colとして出力されます。 - 幅広・全幅の配置、ブロック間隔、パディング、色（背景・文字）— コアの設定が使えます。
ボックス（子）
- リンク（ツールバー） — コアのボタンブロックと同じ操作感です。リンクアイコンからポップオーバーで URL と「新しいタブで開く」を設定し、「リンクを解除」で外します。設定するとボックス全体がクリック領域になります。
- リンクのラベル（サイドバー） — スクリーンリーダー向けのリンク名。ボックスをリンクにした場合は必ず入れてください（オーバーレイのリンク自体は中身が空なので、これが無いと名前のないリンクになります）。
- 背景画像（サイドバー） — cover・中央配置で敷かれます。
- パディング、色、枠線（角丸・色・太さ）— コアの設定が使えます。
リンク付きボックスの動き
リンクを設定したボックスは、末尾に透明なリンク（<a class="-link">）が追加され、ボックス全体を覆います。ボックスの中に置いたリンクやボタン、フォームの入力欄はその上に持ち上げられるので、個別に動作します（dialog ブロックの中身は対象外です）。JavaScript は使いません。
カラムブロックとの相互変換
ブロックの変換メニューで、コアの「カラム」ブロックとレイアウトを相互に変換できます。各カラムが各ボックスに対応します。カラムの幅指定など、ブロック固有の設定は引き継がれません。
出力される HTML と CSS
<div class="sb-layout" style="--st-col:16rem">
<div class="sb-box" style="background-image:url(…)">
…中身…
<a class="-link" href="…" aria-label="…"></a> ← リンク設定時のみ
</div>
</div>グリッドは repeat(auto-fit, minmax(min(var(--st-col, 16rem), 100%), 1fr))、間隔はコアのブロック間隔（無ければ --st-space-l）です。ボックス内の要素の間隔は --st-space-l で、先頭と末尾の余白は自動で 0 になります。
/* 背景画像付きボックスの文字を白く、下寄せに */
.sb-box[style*="background-image"] {
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 16rem;
}注意点
- 「最小カラム幅」は検証されずにそのまま CSS に入ります。単位を忘れると効かなくなります。
- ボックスはレイアウトの中にしか置けません。
- 背景画像は CSS の background なので、alt は付かず遅延読み込みもされません。意味のある画像は画像ブロックで入れてください。
- 1.6.1 以前に保存したボックス（
-box/-box__link、さらに古い-box__content）は、エディターで開くと自動で新しい形式に移行されます。開いていない古いページには新しい CSS が当たらないので、一度保存し直してください。