OrigamiUIのコンテナブロックはレイアウトを柔軟に作成できるブロックです。例えば以下のようなことができます。

• ブレークポイントに合わせてコンテンツ幅を変更する
• Flexboxに変更して内側のコンテンツを横並びや縦並びにする
• サイズと配置を組み合わせて画面の半分だけ背景画像を入れる

他のブロックではある程度用途が固定されていますが、コンテナブロックを使うことで自由にレイアウトを作ることができます。

コンテナブロックの設置方法

コンテナブロックは以下の手順で設置することができます。

• 編集画面の右上にある「+」アイコンのついたボタンを押す
• ブロック一覧から、「コンテナ」をクリック
• 設置したコンテナブロックの「+」ボタンを押す
• コンテナブロック内に設置するブロックを選択

詳しいブロックの設置方法についてはこちらのドキュメントをご覧ください。

ブロックの配置方法

コンテナブロックの設定パネル

コンテナブロックの設定パネルでは以下の設定ができます。

• コンテナ設定: コンテナのタイプ選択
• レイアウト設定: Flexboxとギャップの設定
• スペース設定: パディングとマージンの設定
• サイズ設定: 幅と高さの設定
• 配置設定: 配置(ポジション)の設定
• 表示設定: OverfloやOpacityの設定
• カスタムCSS: CSSコードの入力
• 高度な設定: idと追加classの設定

コンテナ設定

コンテナ設定ではコンテナブロックのタイプを変更することができます。

具体的な設定内容は以下のとおりです。

• コンテナ: タイプを選択

`container`ではブレークポイントに合わせて最大幅が適用されます。

`container-fluid`では最大幅はなく、画面端までコンテンツを設置できます。

レイアウト設定

レイアウト設定ではFlexboxとギャップの設定ができます。

具体的な設定内容は以下のとおりです。

• ブレークポイント選択: 設定を行うブレークポイントを選択
• 表示設定: displayのプロパティを選択
• 方向: Flexの方向を選択
• 整列: AlignItemsのプロパティを選択
• 均等配列: JustifyContentのプロパティを選択
• 整列(Self): AlignSelfのプロパティを選択
• Grow: FlexGrowのプロパティを選択
• Shrink: FlexShrinkのプロパティを選択
• ギャップ変数: ギャップ設定で使用する変数を選択
• ギャップリセット: ギャップの設定内容を全てリセット
• Row: 縦方向のギャップを選択
• Column: 横方向のギャップを選択

ギャップはギャップ変数で入力した数値に1~10の値をかけたものになります。

例) ギャップ変数=10px、Row=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで方向を縦に設定 -> スマホ、タブレット、PCの全てで縦並び

例) スマホで方向を縦に、PCで方向を横に設定 -> スマホとタブレットで縦並び、PCで横並び

スペース設定

スペース設定ではパディングとマージンの設定ができます。

具体的な設定内容は以下のとおりです。

• スペース変数: スペース設定で使用する変数の値を入力
• スペースリセット: スペースの設定を全てリセット
• ブレークポイント選択: 設定を行うブレークポイントを選択
• マージン設定: 上下左右のマージンを選択
• パディング設定: 上下左右のパディングを選択

パディングとマージンはスペース変数で入力した数値に0~10の値をかけたものから選択できます。

例) スペース変数=10px、マージントップ=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホでトップを50pxに設定 -> スマホ、タブレット、PCの全てで50px

例) スマホでトップを50pxに設定、PCでトップを100pxに設定 -> スマホとタブレットで50px、PCで100px

サイズ設定

サイズ設定では幅(width)と高さ(height)の設定ができます。

具体的な設定内容は以下のとおりです。

• サイズ変数: サイズ設定で使用する変数の値を入力
• サイズリセット: サイズの設定を全てリセット
• ブレークポイント選択: 設定したいブレークポイントを選択
• 幅の設定: 幅(width)を選択
• 高さの設定: 高さ(height)を選択

幅と高さはサイズ変数で入力した数値に1~10の値をかけたものとautoから選択できます。

例) サイズ変数=10px、幅=10px~100pxの間で選択

変数以外はブレークポイントごとに設定を変更可能です。

メディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで幅を300pxに設定 -> スマホ、タブレット、PCの全てで300px

例) スマホで幅を300pxに設定、PCでトップを500pxに設定 -> スマホとタブレットで300px、PCで500px

配置設定

配置設定では、ポジションの設定ができます。

具体的な設定内容は以下のとおりです。

• 配置: positionプロパティの値を選択

表示設定

表示設定ではブロックの表示にかかわる設定ができます。

具体的な設定内容は以下のとおりです。

• Overflow: overflowの値を選択
• Opacity: opacityの値を選択
• z-index: z-indexの値を選択
• HTMLタグ: HTMLタグを選択

HTMLタグはリンク設定で「リンクを有効にする」をONにしていると自動的に`a`が選択されます。

その状態で`div`など`a`以外のHTMLタグを選択するとリンク設定の「リンクを有効にする」がOFFになります。

カスタムCSS

カスタムCSSではCSSコードを入力することができます。

セレクタは`selector`を使用することで現在選択中のブロックに対してスタイルをつけることができます。

selector {
  color: red;
}
selector:hover {
  color: blue;
}

CSSコードは`head`要素内に出力されます。

`selector`はスタイルとして`head`に出力される際にクラス名に変更されます。

高度な設定

高度な設定では、HTMLタグのidとclass名を設定できます。

具体的な設定内容は以下のとおりです。

• HTML アンカー: id名を入力
• 追加 CSS クラス: クラス名を入力

オフキャンバスブロックではHTMLアンカーに入力したidを識別するため、必ず入力が必要です。

クラス名はカスタムCSS用に自動的に作成されたものが表示されています。

クラス名を追加する場合、このクラス名は削除せず、半角スペースを空けて追加してください。

例) my-class oui_cm-group-xxxxxxxxxx