Flex: Flex コンテナを使用したフレックスレイアウトの追加

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels エディターの Flex 要素は、動的でレスポンシブなレイアウトを設計するための多用途のコンテナです。セクションや行などの従来のコンテナとは異なり、Flex 要素は、他の行、Flex、および要素を子として保持するコンテナとして機能します。CSS display: flex プロパティの機能を活用して、コンテンツを効率的に調整、整理、配布するのに役立ちます。この記事では、Flex 要素の使用方法、その設定のカスタマイズ方法、およびそれを効果的に適用してレスポンシブでプロフェッショナルなレイアウトを作成する方法を学びます。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

フレックスコンテナとは

Flex は、他の要素の親コンテナとして機能する特殊なタイプの要素です。Flexコンテナ内に追加された行、flex、および要素は、子として扱われます。この親子関係により、子要素の配置方法と整列方法を制御できます。

Flexコンテナの主な特徴:

  • 子項目として Rows、Flex、および Elements をサポートします。

  • 子要素の 方向 (水平または垂直)と配置を定義できます。

  • レスポンシブ デザインが可能になり、デスクトップ デバイスとモバイル デバイスのレイアウトを個別に調整できます。

Flex コンテナは、ページのレイアウトを正確に制御する必要があり、カスタム デザインを構築したい場合に最適なオプションです。

Flexコンテナを使用する場合

Flex コンテナは、次の場合に使用します。

  1. カスタム レイアウトが必要: 要素が水平、垂直、または等間隔に配置されるレイアウトを設計します。

  2. レスポンシブ デザインの制御を強化したい: ClickFunnels のセクションと行は本質的にレスポンシブですが、Flex コンテナーはデスクトップとモバイルの両方のレイアウトを微調整するための柔軟性を提供します。これにより、子要素の配置、間隔、順序を動的に調整できるため、さまざまな画面サイズに対してより正確なカスタマイズが可能になります。

  3. 高度な配置が必要です: たとえば、要素を水平方向と垂直方向の両方に中央に配置したり、子要素間でスペースを動的に分散したりします。

  4. 複雑なデザインを簡略化したい: 複数の行やセクションを使用する代わりに、レイアウトを 1 つの Flex コンテナ内に統合できます。

ページエディタでのフレックスコンテナの追加

  1. ワークスペース内のページのページ エディターへのアクセス。

  2. 新しいセクション、行、または要素を追加する場合は、+ プラス アイコンをクリックします。

  3. オプションから [Flex ] を選択します。要素として追加すると、[ 詳細設定 ] カテゴリの下に表示されます。

  4. Flex コンテナを目的の場所にドラッグ アンド ドロップし、レイアウトと設定のカスタマイズを開始します。

Flexコンテナを追加すると、ページのデザインに合わせて外観をカスタマイズできます。

フレックスコンテナのカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

ペンキ

ペイントカラーは、 セクション、 行、 列、 フレックスコンテナなどのコンテナに適用される定義済みのカラーセットです。これらのカラー セットは、見出し、サブ見出し、段落、箇条書きリスト、背景、オーバーレイなど、コンテナ内のさまざまな要素のスタイルを定義します。

コンテナ設定でペイントの色を選択すると、コンテナ内のネストされたすべての要素がスタイルガイドから対応する色を自動的に継承します。たとえば、小見出しにオレンジ、テキスト コンテンツに黒を指定するペイントの色を設定した場合、小見出しやコンテナに追加されたコンテンツは、定義された色に従います。

この機能により、ブランドのビジュアル アイデンティティに合わせて、ページ全体で一線を画すデザインが保証されます。

  1. プリセットペイント: スタイルガイドの設定に基づいて、「最も明るい背景」や「最も暗い背景」などの定義済みのペイントオプションから選択します。これらのオプションを使用すると、ブランディングに沿ったまとまりのあるデザインを維持できます。

  2. スタイルの色を編集する: 「スタイルの色を編集」をクリックしてスタイル ガイドにアクセスし、ペイントのカラー パレットをカスタマイズします。ペイントの色のカスタマイズの詳細については、「スタイルの色をカスタマイズする方法」の記事を参照してください。

親フレックス プロパティ

親 Flex プロパティは、コンテナ内の子要素の配置、間隔、および分散の方法を制御します。これらのプロパティは、Flex コンテナのレイアウト動作の基礎であり、 親子関係 モデルに準拠しています。

幅

幅 設定では、コンテナの幅を制御できます。この幅は、配置されるコンテナのpercentage (%)部分として指定したり(たとえば、全幅にするには100%)、  固定幅の場合はpixels (px)、  直接の親コンテナと比較した幅を計算するためにautoに設定したりできます。この設定を調整すると、要素をページ上の他のコンポーネントに揃えたり、バランスの取れたレイアウトを作成したりするのに役立ちます。

高さ

高さ設定により、コンテナの高さを制御できます。この高さをpercentage (%)として指定するか、  固定高さのpixels (px)として指定するか、auto に設定  して、直接の親コンテナと比較した高さを計算できます。

方向

コンテナ内の子要素の向きを決定します。

  • 行: 子要素を水平方向(左から右)に配置します。

  • 列: 子要素を垂直方向 (上から下) に配置します。

  • 行反転: 子要素を水平方向に整列させますが、逆の順序 (右から左) に整列します。

  • 列反転: 子要素を垂直方向に整列させますが、逆の順序 (下から上) に整列します。

ジャスティフィケーション

子要素を主軸に沿って配置する方法を制御します( Row は水平、 Columnは垂直)。このプロパティは、Flex コンテナ内の間隔と配置を管理するために不可欠です。

  • 開始: 子要素を主軸の先頭に揃えます。

  • 中央: すべての子要素を主軸に沿って中央に配置します。

  • 終了: 子要素を主軸の端に揃えます。

  • 間隔: 子要素 の間に 等間隔で配置しますが、先頭または末尾にスペースはありません。

  • スペースアラウンド: 子要素を周囲に等間隔で配置し、要素間のスペースと比較してエッジのスペースを半分にします。

  • スペースを均等に配置: 子要素を、先頭と末尾を含めて等 間隔で全体に配置します。

項目の整列

十字軸(主軸に対して垂直)に沿った子要素の配置をコントロールします。この設定は、子要素が高さや内容に応じてさまざまな方法で視覚的に整列されるようにするのに役立ちます。

  • 開始: 子要素を十字軸の先頭に揃えます。

  • 中央: 子要素を十字軸に沿って中央に配置します。

  • 終了: 子要素を横軸の端に揃えます。

  • ストレッチ: 子要素をストレッチして、横軸に沿ってコンテナを埋めます。

  • ベースライン: 子要素を テキストのベースラインに沿って整列します。これは、テキストの多い要素やさまざまなフォント サイズの要素を操作する場合に特に便利で、ベースラインが一貫して一致するようにします。

ギャップ

子要素間のスペースを定義します。

  • [ ギャップ] スライダー を調整して間隔を直接制御し、すべての子間のギャップを均一にします。

包む

子要素がコンテナ内の使用可能な領域を超えたときの動作を制御します。子要素を同じ行に残すか、すべてを収めるのに十分なスペースがない場合に新しい行に移動するかを決定します。

  1. ラップなし:

    • 何が起こるか:すべての子要素は、コンテナーをオーバーフローしても 1 行にとどまります。

    • 空のスペース: 要素が複数の行に分割されず、レイアウトの方向に応じて水平方向または垂直方向にオーバーフローするため、空のスペースは導入されません。

    • 使用する場合: すべての子要素が 1 つの行または列に分割されずに表示する必要があるレイアウト (ナビゲーション バーやアイコンのリストなど) に役立ちます。

  2. 包む：

    • どうなるか: 十分なスペースがない場合、子要素は自動的に次の行または列に移動します。

    • 空のスペース: 残りの空のスペースは、位置合わせの設定に応じて、最後の行または列に分散されます。

    • 使用する場合: 子要素を利用可能なスペース(商品カードや画像のグリッドなど)に合わせて調整する必要があるレスポンシブレイアウトに最適です。

  3. ラップリバース:

    • どうなるか: [折り返し] オプションと似ていますが、オーバーフローは逆の順序で新しい行または列に移動します。

    • 空のスペース: 折り返しと同様に、残りのスペースは最後の行または列に分散されますが、レイアウトは逆に表示されます。

    • 使用する場合: このオプションは、オーバーフロー コンテンツを逆に表示する必要がある独自のデザイン (特定の視覚的配置が必要なレイアウトのデザインなど) に使用します。

モバイルビュー調整

ClickFunnels エディターの Flex コンテナーには専用の モバイル ビュー 調整機能があり、特に小さな画面に最適化されたレイアウトを作成できます。設定パネルの [モバイル] アイコン を切り替えると、デスクトップ レイアウトに影響を与えることなく、モバイル デバイスの Flex コンテナー プロパティをカスタマイズできます。この柔軟性により、デザインはすべてのデバイスで応答性とユーザーフレンドリーを維持できます。

モバイルビューの調整により、モバイルとデスクトップでまったく異なる Flex プロパティを設定できます。例えば：

  • 折り返しの動作: デスクトップでは子要素を [折り返しなし ] に設定して、すべての要素が 1 つの行に残るようにすることができます。ただし、モバイルでは、 折り返しを有効にして、要素を複数の行に流して、読みやすさと使いやすさを向上させることができます。

  • フレックスの方向: デスクトップでは、Flex コンテナを 行 レイアウトに設定して、要素を水平方向に揃えることができます (たとえば、オプトイン フォームと左側に行動喚起ボタン、右側に見出しを表示するなど)。モバイルの場合は、方向を [列反転] に切り替えて、見出しを一番上に表示するように再配置し、その後に下の行動を促すフレーズ ボタンを表示できます。

これらの調整は、ヒーロー バナーやオプトイン フォームなどのセクションで特に便利で、レイアウトの鮮明さと視覚的な魅力を維持しながら画面サイズにシームレスに適応させる必要があります。モバイル ビューの調整機能を活用することで、デスクトップとモバイル デバイスの両方でユーザー エクスペリエンスを優先するレイアウトを作成できます。

ヒント：

フレックスボックスとその仕組みについてより深く理解するには、 MDN Web Docsに関する包括的なドキュメントを参照してください。このリソースでは、Flexbox の基本原則を習得するのに役立つ詳細な説明と例を提供し、ClickFunnels で Flex コンテナを効果的に使用する能力をさらに強化します。

子フレックスプロパティ

子要素 (Row、別の Flex コンテナ、その他の要素など) が Flex コンテナ内に追加されると、特定の Flex プロパティが継承されます。これらのプロパティを使用すると、コンテナ内の個々の子要素の動作と配置を制御できます。Flex コンテナの全体的なレイアウトを定義する親 Flex プロパティとは異なり、 子フレックス プロパティ は、個々の子要素の動作をカスタマイズするために適用されます。

フレックスグロー

  • 機能: 子要素が他の子要素と比較して Flex コンテナ内で占めるスペースの量を決定します。

  • 親との比較: 親がコンテナの全体的なスペース割り当てを設定する間、Flex Grow は、コンテナ内の利用可能なスペースを埋めるために個々の子がどのように「成長」するかを制御します。

  • 例: Flex Grow がすべての子に対して 1 に設定されている場合、使用可能な領域は均等に分散されます。1人の子供が 2 のフレックスグローを持ち、他の子供が 1の場合、 2 を持つ子供は2倍のスペースを占有します。

フレックスシュリンク

  • 機能: コンテナの領域が不足した場合に子要素が縮小される量を制御します。

  • 親との比較: 親の設定(ラップなしや折り返しなど)によって、子を1つの行にとどめるか、新しい行にオーバーフローするかが決まります。一方、フレックスシュリンクは、スペースが限られているときに個々の子供が自分のサイズをどのように調整するかを指示します。

  • 例: [フレックス シュリンク](Flex Shrink)がすべての子に対してに設定されている場合、子は等しく縮小されます。1人の子供がフレックスシュリンクがの場合、縮小しませんが、他の子供は調整します。

フレックスベーシス

  • 機能: Flex Grow または Flex Shrink によってスペースが分散される前の子要素の初期サイズを定義します。

  • 親との比較: 親がコンテナの全体的な幅または高さを制御しますが、Flex Basis はコンテナ内の各子のベースラインサイズを設定し、デフォルトの幅または高さを上書きします。

  • 例: [Flex Basis] が auto に設定されている場合、子のサイズはその内容によって決まります。特定の値 ( 100px など) に設定すると、子は成長または縮小動作が適用される前にそのサイズから開始します。

自己整列

  • 機能: 個々の子が親の [項目の整列] 設定を上書きできるようにします。

  • 親との比較: 親の [項目の整列 ] プロパティは、すべての子に整列規則を均等に適用します。 「自己配置」 は、子供が他のものから独立して配置をカスタマイズできるようにします。

  • 例: 親がすべての子を中央に揃える場合、特定の子を個別に始点、終点、またはストレッチに揃えるように設定できます。

親フレックスプロパティと子フレックスプロパティの主な違い

  • 親フレックスプロパティ: コンテナ全体の動作を定義し、すべての子要素の配置、間隔、折り返しをまとめて制御します。

  • 子フレックス プロパティ: 親コンテナ内での各子の動作をきめ細かく制御できるため、複雑なレイアウトを設計する際の柔軟性とカスタマイズが可能になります。

ヒント：

フレックスボックスとその仕組みについてより深く理解するには、 MDN Web Docsに関する包括的なドキュメントを参照してください。このリソースでは、Flexbox の基本原則を習得するのに役立つ詳細な説明と例を提供し、ClickFunnels で Flex コンテナを効果的に使用する能力をさらに強化します。

心地

[パディング] 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。Use スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

  • 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

  • 下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

  • 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。

  • ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

デスクトップとモバイル(🖥️ & 📱)カスタマイズ:

パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

バックグラウンド

[背景] セクションでは、要素の背景色を設定できます。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。 カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。

境

「境界線」設定を使用すると、要素の周囲に境界線を追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。

  3. オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。

  4. 国境： 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。

  5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。

  6. 色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。

  7. ストロークサイズ: 境界線の太さは、[ ストローク サイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

影

影の設定では、影効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

  1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

  2. シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

  3. X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。

  4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。

  5. ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。

  6. スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。

  7. 色: カラーピッカーを使用して、影の色の設定を選択します。

隅

コーナー設定では、要素のコーナーの丸み(境界線半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

  2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。

  3. オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ オーバーライド]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

  4. すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。

  5. エッジを分離する: エッジ を分離(Separate Edges )を有効にして、各コーナーを個別に調整します。 左上隅、 右上隅、 左下隅、 右下 隅に異なる値を設定して、独自の形状を実現できます。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

関連記事