LAB

レイアウトブロック

LAYOUT BLOCKS

レイアウトブロック

ページの骨格を組み立てる7つのブロックです。グリッド・セクション・パララックスなど、デザインの構造を自在に組めます。

grid（グリッド）

CSS Gridをベースにしたカラムレイアウトブロックです。ホバーエフェクトや影・角丸の組み合わせで、カード型のリスト表示を作るのに向いています。

デモ（3カラム・ホバーあり）

カード A

ホバー時に浮き上がるエフェクトが適用されます。リンク先へのナビゲーションと相性が良いです。

カード B

columnsMd を 2 にすることでタブレット時は2カラム、スマホ時は1カラムに切り替わります。

カード C

shadow と radius を組み合わせることでカード感が出やすくなります。

デモ（2カラム・エフェクトなし）

左カラム

エフェクトなしのシンプルな2カラムレイアウトです。テキスト＋画像の対比表示に便利です。

右カラム

gap を lg にするとカラム間のスペースを広く取れます。コンテンツに余白が必要なときに向いています。

カスタマイズ

columns
PC表示のカラム数を指定します（1〜6）
columnsMd
タブレット表示のカラム数を指定します
columnsSm
スマホ表示のカラム数を指定します
gap
sm / md / lg — カラム間のスペースを調整できます
shadow
none / sm / md / lg — グリッドアイテムの影を設定できます
radius
none / sm / md / lg — グリッドアイテムの角丸を設定できます
hoverEffect
true にするとホバー時に浮き上がるアニメーションが適用されます

broken-grid（ブロークングリッド）

画像とテキストを意図的にずらして配置するレイアウトブロックです。整列を崩すことでデザインに動きと個性を出すのに向いています。

デモ（画像左）

左配置のブロークングリッド

画像を左に配置し、テキストブロックを右にずらして重ねるレイアウトです。overlapX でX軸のオーバーラップ量、offsetY でY軸のずれ量を調整できます。

デモ（画像右）

右配置のブロークングリッド

画像を右に配置したバリエーションです。交互に組み合わせることで、サービス紹介ページのリズム感を作るのに便利です。

カスタマイズ

mediaUrl
表示する画像のURLを指定します
mediaPosition
left / right — 画像を左右どちらに配置するかを選べます
overlapX
X軸方向のオーバーラップ量を数値で指定します
offsetY
Y軸方向のオフセット量を数値で指定します

section（セクション）

背景（カラー・画像・動画・グラデーション）とオーバーレイを自由に設定できるセクションブロックです。ページのビジュアル構成を作るのに向いています。

デモ（背景なし）

シンプルなセクション

bgType を none にすると、背景なしのシンプルなセクションとして使えます。コンテンツ幅と縦方向の揃えを設定するのに便利です。

デモ（動画背景）

動画背景セクション

動画をループ再生しながらオーバーレイをかけた背景表示です。ヒーローセクションや印象的な区切りに向いています。

カスタマイズ

bgType
none / color / image / video / gradient — 背景の種類を選べます
mediaUrl
背景画像・動画のURLを指定します
overlayColor
背景に重ねるオーバーレイの色を指定します
overlayOpacity
オーバーレイの不透明度（0〜100）を指定します
minHeight
セクションの最小高さをvh単位で指定できます
contentWidth
full / wide / content — コンテンツの最大幅を選べます

parallax（パララックス）

スクロールに合わせて背景画像がゆっくり動くパララックス効果を持ったセクションブロックです。視覚的な奥行きを演出するのに向いています。

デモ

パララックスセクション

スクロール時に背景画像がゆっくり動きます。speed で動きの速さを調整できます。

カスタマイズ

mediaUrl
パララックス背景に使用する画像のURLを指定します
overlayColor
背景に重ねるオーバーレイの色を指定します
overlayOpacity
オーバーレイの不透明度（0〜100）を指定します
speed
slow / normal / fast — パララックスの動きの速さを選べます
minHeight
セクションの最小高さをvh単位で指定できます

horizontal-scroll（横スクロール）

コンテンツを横方向にスクロールして表示するブロックです。ギャラリーやタイムライン的な横スクロール体験を作るのに向いています。

デモ（3パネル）

パネル 1

snap を true にするとスナップスクロールが有効になります。パネルがきれいに区切れて止まります。

パネル 2

横スクロールでステップを表現したり、ギャラリーを横並びに展示したりするのに便利です。

パネル 3

各パネルはブロックエディターで自由にコンテンツを配置できます。

カスタマイズ

snap
true にするとスナップスクロールが有効になり、パネルが整列して止まります

responsive（表示切り替え）

デバイスごとにコンテンツの表示・非表示を切り替えるブロックです。PCとスマホで別々のコンテンツを出し分けるのに向いています。

デモ（PC専用）

このコンテンツはPC表示時のみ表示されます。スマホでは非表示になります。

デモ（スマホ専用）

このコンテンツはスマホ表示時のみ表示されます。PCでは非表示になります。

デモ（全デバイス）

このコンテンツはすべてのデバイスで表示されます。

カスタマイズ

visibility
pc-only / sp-only / all — 表示するデバイスを選べます

hgroup（見出しグループ）

アイブロウ・タイトル・リードのセットをまとめて配置できるブロックです。セクション冒頭の見出しパターンを統一するのに便利です。

デモ（センター揃え）

EYEBROW TEXT

センター揃えの見出しグループ

ページやセクションの冒頭にアイブロウ・タイトル・リードをセットで配置するのに向いています。

デモ（左揃え）

EYEBROW TEXT

左揃えの見出しグループ

左揃えはブログ記事やドキュメントページのセクション見出しと相性が良いです。

カスタマイズ

align
left / center / right — テキストの揃え方向を選べます