OrigamiUIのカラムブロックはグリッドレイアウトの列の1つとして扱われるブロックです。

グリッドレイアウトのカラムを作成する場合に使用します。

カラムブロックの設置方法

カラムブロックは以下の手順で設置することができます。

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

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

ブロックの配置方法

カラムブロックの設定パネル

カラムブロックの設定パネルでは以下の設定ができます。

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

カラム設定

カラム設定ではカラムの幅とオフセットを設定できます。

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

• カラム設定: ブレークポイントごとのカラムの幅を設定
• オフセット設定: ブレークポイントごとのオフセットを設定

カラム設定ではブレークポイントごとに幅を設定できます。

この幅はグリッドブロック内にある場合グリッドの列数のうちどれだけを占有するかと言う意味になります。

例)グリッドブロックで12に設定、カラムを4、幅は1/3

例)グリッドブロックで12に設定、カラムを6、幅は1/2

例)グリッドブロックで6に設定、カラムを6、幅は100%

グループブロックの中にある場合はグリッドブロックで12に設定した場合と同じになります。

オフセットは指定した幅の分だけ右にずらすことができます。

レイアウト設定

レイアウト設定では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