OrigamiUI

メニュー

閉じる

>

縦横のレイアウトの作り方

OrigamiUIを使ったレイアウトの作り方を紹介します。

OrigamiUIで縦並びや横並びのレイアウトを作るには「グループ」ブロックなどにある「レイアウト設定」を使用します。

このパネルではレイアウトの方向、整列、均等配置などを行うことができます。

ここでは以下のレイアウト方法について紹介します。

  • 縦並びのレイアウトを作る
  • 横並びのレイアウトを作る
  • レイアウトの間隔(ギャップ)を調整する
  • スマホとPCで並びを変える
  • レイアウトを整列する
  • レイアウトを均等配置する
  • レイアウトの要素を1つだけ整列する

余白の調整や配色などのスタイルについては以下のページをご覧ください。

横並びのレイアウトを作る

縦並びのレイアウトを作るにはレイアウト設定で以下の手順で設定を行ってください。

  1. レイアウトを設定したいグループを選択
  2. レイアウト設定の表示設定で選択肢からflexを選択
  3. 方向の項目で横方向の矢印を選択

まずはブロックを設置して横方向に設定したいブロックを選びます。

ここでは以下のような構造になっています。

グループ
  - 段落
  - 段落

このとき横並びにしたいのは段落ですが、段落ブロック自体ではなく、それを囲むグループブロックの設定を行います。

グループブロックを選択し、表示設定のメニューから「flex」を選択すると段落が横並びになります。

これで横並びになりました。ブロック間のスペースを開けたい場合は、段落ブロックのスタイル設定でマージンの設定を調整してください。

もしくは後ほど解説する、レイアウト設定のギャップを調整することでブロック間のスペースを空けることが出来ます。

縦並びのレイアウトを作る

縦並びのレイアウトも基本は横並びと同じです。違うのは「方向」の設定で下向き矢印を選択するところだけです。

  1. レイアウトを設定したいグループを選択
  2. レイアウト設定の表示設定で選択肢からflexを選択
  3. 方向の項目で下方向の矢印を選択

下方向の矢印を選択するとこのようになります。

今回はブロック間のスペースが空いていて自動的に調整されたように見えます。

が、これは段落ブロックに元々上下のマージンが設定されているためで、スペースの幅を調整するには先程と同様、段落ブロックのマージンを変更するか、ギャップの設定を調整してください。

縦並びと横並びを組み合わせる

縦並びと横並びの設定を行うとグループ内のすべての要素が同じ方向に並ぶことになります。

以下の画像のようなレイアウトを作るときは縦並びの部分と横並びの部分を分けたい場合があります。

この場合、画像とテキストコンテンツが横並びで、テキストコンテンツは縦に並んでいます。

このようなレイアウトを作るにはグループブロックの中にさらにグループブロックを入れ、ブロックを階層化することで対応します。

以下のような手順で実装することが出来ます。

  1. グループブロックに必要な要素を入れる
  2. グループブロックにグループブロックを追加
  3. 追加したグループブロックに段落ブロックを入れる
  4. 外側のグループのレイアウト設定で横並びにする
  5. 内側のグループのレイアウト設定で縦並びにする

まずはグループブロックを設置しそこに必要な要素を入れていきます。この場合は画像と段落2つとボタンです。

この状態で、グループブロックを選択したときに右下に出てくる黒い+アイコン付きのボタンを押してさらにグループブロックを追加します。

追加できたら左のレイヤーパネル上で、画像以外のブロックをドラッグ&ドロップでグループの中に入れていきます。

あとは先ほど行った設定と同じように縦並びと横並びの設定を行います。

あとはスタイルを調整すれば参考画像のようなデザインを作ることが出来ます。

階層化は2段だけでなくさらに深い階層を作ることもできます。複雑なレイアウトのデザインを行う際はこの方法を覚えておくと便利です。

レイアウトの間隔(ギャップ)を調整する

レイアウト設定で縦並びや横並びにしたときのブロック間の間隔を調整する方法は以下の2つです。

  • ブロックのマージンやパディングを調整する
  • レイアウト設定のギャップを調整する

ブロックのマージンやパディング設定は、ブロックのスタイル設定の「サイズ」で調整できます。

「サイズ」の横にあるメニューボタンを押すと、マージンやパディングを選べるので設定したい方を選択してそれぞれ調整してください。

レイアウト設定のギャップで調整するには、先ほど横並びや縦並びの設定を行った場所の下の方にある「ギャップ設定」を調整します。

ここで調整できるのは以下の項目です。

  • ギャップ変数
  • ギャップリセット
  • ブレークポイントの選択
  • ギャップ幅
    • Row(縦方向)
    • Column(横方向)

まずギャップ設定を行う際に必ず「ギャップ変数」をセットしてください。入力する数値は自由です。

ギャップ幅(ブロック間のスペース)はRowやColumnの値を選択しますが、この値はギャップ変数の1~10倍の値になっています。

例えば以下のように設定します。

例1) 縦方向のスペースを40pxにしたい -> ギャップ変数を10pxにセット、Rowで40を選択

例2) 縦を6px、横を18pxにしたい -> ギャップ変数を6px、Rowを6、Columnを18にする

例3) 縦を21px、横を68pxにしたい -> 縦方向用と横方向用のグループでそれぞれ設定

3つ目の例のように割り切れない場合は縦方向を設定するグループの中に横方向を設定するグループを入れてギャップをセットしてください。

もしくはギャップ設定ではなくスタイルのパディングやマージンから設定してください。

スマホとPCで並びを変える

スマホとPCでレイアウトを変えたい場合があります。例えばPCのような大きな画面では横並び、スマホの狭い画面では縦並びにするような場合です。

このようなスマホとPCで設定を変えたい場合はブレークポイントのタブを切り替えて設定します。

タブの切り替えは、スマホ、タブレット、PCのデバイスアイコンを選択することで切り替えることが出来ます。

デフォルトではスマホのタブが選択されており、方向は横矢印になっています。スマホの設定なのにPCでも(画像とテキストが)横方向表示されているのは、モバイルファーストで設計されているためです。

モバイルファーストについての説明は省きますが、要はスマホでの設定はタブレットでも、PCでも適用されるということです。

つまり、デフォルトの状態で設定したものはスマホ〜PCまですべての画面幅で適用されるので、スマホとPCを分けたい場合それぞれ別々に設定すればOKです。

スマホのタブで、縦方向に設定します。

次にPCのタブで横方向を選択します。

この状態で保存して実際の画面をチェックしてみてください。ブラウザの幅を広くしたり狭くしたりするとレイアウトが変わるはずです。

もしPCではなくタブレットサイズから横方向にしたくなったらPCの設定をリセット(もう一度矢印アイコンを押す)し、タブレットのタブに切り替えて同じ操作をしてください。

レイアウトを整列する

整列はCSSの「Align Items」を設定できます。

高さの異なるブロックを配置したあと、上下や中央に揃えたい場合は整列機能を活用します。

整列機能は方向の下にある項目で、縦軸や横軸に沿ってブロックの配置を揃えることが出来ます。

例えばこちらのように画像の高さに対してテキストを中央に揃えたい場合は、

整列のアイコンから「center」を選びます。

他にも上揃え、下揃え、上下にストレッチ、ベースラインで中央揃えが出来ます。

また、縦並びのコンテンツの場合は同じ整列の中央揃えでも軸が変わるため、縦軸方向に中央揃えになります。

レイアウトを均等配置する

均等配置はCSSの「Justify Content」を設定できます。

整列が横軸(交差軸)方向で揃えるのに対し、こちらは縦軸(主軸)方向の配置を設定できます。

例えばこちらのように幅の狭いコンテンツがあって画面の中央に配置したい場合、

均等配置の中央アイコンを選択すると中央に配置されます。

中央の他に、左右、両端、均等配置が可能です。

先ほどの整列と同様に、方向が変わると縦軸の配置から横軸の配置に変わります。

レイアウトの要素を1つだけ整列する

整列(Self)はCSSの「align-self」の設定ができます。

基本的な動作は整列と同じですが、こちらは全体の整列ではなく、個別の整列を設定できます。

例えばこちらのように高さの異なるコンテンツがあり、最初のブロックだけ下に揃えたい場合、

最初のブロックで下揃えを選びます。

ここで注意が必要なのは、1段上の階層で横並び設定を行ってから、その下の階層で整列を行う必要があります。以下のような構造になります。

グループ <- ここで横並び設定
  - グループ <- ここで整列(Self)設定
    - 画像
  - グループ
    - 画像
  - グループ
    - 画像

レイヤーパネルで見るとこのような構造になります。

ノーコードでWordpressサイト作るなら

OrigamiUI