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

公開日: 2024年11月25日更新日: 2026年10月26日

ClickFunnels エディターの フレックス 要素は、動的でレスポンシブなレイアウトをデザインするための多用途なコンテナです。セクションや行などの従来のコンテナとは異なり、フレックス要素は他の行、フレックス、要素を子として格納するコンテナとして機能します。CSS の display: flex プロパティを活用して、コンテンツを効率よく整列、整理、配置できます。この記事では、フレックス要素の使い方、設定のカスタマイズ方法、そしてレスポンシブでプロフェッショナルなレイアウトを作成するための効果的な活用方法を説明します。

必要条件

有効な ClickFunnels アカウント
ワークスペースで作成済みのページ

フレックスコンテナとは

フレックス は、他の要素の 親コンテナ として機能する特別な種類の要素です。フレックスコンテナ内に追加された行、フレックス、要素はすべて子として扱われます。この親子関係により、子要素の並べ方や整列方法を制御できます。

フレックスコンテナの主な特徴:

子アイテムとして 行、フレックス、要素 を格納できます。
子要素の方向（横方向または縦方向）と配置を定義できます。
レスポンシブデザインに対応しており、デスクトップとモバイルデバイスのレイアウトを個別に調整できます。

フレックスコンテナは、ページのレイアウトを細かく制御し、独自のデザインを作成したい場合に最適な選択肢です。

フレックスコンテナを使用する場面

次のような場合にフレックスコンテナを使用します。

独自のレイアウトが必要な場合: 要素を横方向、縦方向、または均等な間隔で配置するレイアウトをデザインできます。
レスポンシブデザインをより細かく制御したい場合: ClickFunnels のセクションと行はもともとレスポンシブですが、フレックスコンテナを使うと、デスクトップとモバイルの両方のレイアウトをさらに柔軟に微調整できます。子要素の配置、間隔、順序を動的に調整できるため、画面サイズに応じてより精密なカスタマイズが可能になります。
高度な配置が必要な場合: たとえば、要素を横方向と縦方向の両方で中央に配置したり、子要素の間のスペースを動的に配分したりできます。
複雑なデザインをシンプルにしたい場合: 複数の行やセクションを使う代わりに、1 つのフレックスコンテナにレイアウトをまとめられます。

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

ワークスペース内のページのページエディターを開きます。
新しい セクション、行、要素を追加するときに、+ プラス アイコンをクリックします。
選択肢から フレックス を選択します。要素として追加する場合は、高度な カテゴリにあります。
フレックスコンテナを目的の場所にドラッグ＆ドロップし、レイアウトと設定のカスタマイズを始めます。

フレックス コンテナを追加したら、ページのデザインに合わせて外観をカスタマイズできます。

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

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

上マージン

上マージン 設定では、現在のコンテナ（セクション、行、フレックス、要素）とそのすぐ上にあるコンテナとの間隔を制御できます。前にコンテナがない場合、マージンは親コンテナを基準に適用されます。前にコンテナが追加されていない場合は、本文が親になります。

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

ペイント

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

コンテナの設定でペイントカラーを選択すると、コンテナ内に入れ子になったすべての要素が、スタイルガイドから対応する色を自動的に引き継ぎます。たとえば、小見出しをオレンジ、テキストコンテンツを黒に指定したペイントカラーを設定すると、コンテナに追加した小見出しやコンテンツはそれらの色で表示されます。

この機能により、ブランドのビジュアルアイデンティティに沿った一貫性のあるデザインをページ全体で保てます。

プリセットペイント: スタイルガイドの設定に基づいて、「最も明るい背景」や「最も暗い背景」などの定義済みのペイントオプションから選択します。これらのオプションを使うと、ブランディングに沿った統一感のあるデザインを維持できます。
スタイルカラーを編集: 「スタイルカラーを編集」をクリックするとスタイルガイドが開き、ペイントのカラーパレットをカスタマイズできます。ペイントカラーのカスタマイズについて詳しくは、スタイルの色をカスタマイズする方法の記事をご覧ください。

親フレックスプロパティ

親フレックスプロパティは、コンテナ内の子要素の整列、間隔、配置を制御します。これらのプロパティはフレックスコンテナのレイアウト動作の基本となるもので、親子関係 のモデルに従います。設定パネルでは フレックスコンテナ › サイズ & スペーシング にあり、デスクトップとモバイルで異なる値を設定できます。
フレックスの「サイズ & スペーシング」設定（幅、高さ、方向、正当化、アイテムの整列、ギャップ、ラップ）

幅

幅の設定では、コンテナの幅を制御できます。幅は、配置先のコンテナに対する percentage (%)（例: 全幅にするには 100%）、固定幅の場合は pixels (px) で指定するか、auto に設定して直接の親コンテナを基準に幅を計算させることができます。デフォルトは 100% です。この設定を調整すると、要素をページ上の他のコンポーネントと揃えたり、バランスの取れたレイアウトを作成したりできます。

高さ

高さの設定では、コンテナの高さを制御できます。高さは percentage (%)、固定の高さの場合は pixels (px) で指定するか、auto に設定して直接の親コンテナを基準に高さを計算させることができます。デフォルトは auto です。

方向

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

行（Row）: 子要素を横方向（左から右）に並べます。
列（Column）: 子要素を縦方向（上から下）に並べます。
行の逆順（Row-Reverse）: 子要素を横方向に、逆の順序（右から左）で並べます。
列の逆順（Column-Reverse）: 子要素を縦方向に、逆の順序（下から上）で並べます。

正当化

主軸（Row の場合は横方向、Column の場合は縦方向）に沿って子要素をどのように配置するかを制御します。このプロパティは、フレックスコンテナ内の間隔と配置を管理するうえで欠かせません。

開始（Start）: 子要素を主軸の始まりに揃えます。
中央（Center）: すべての子要素を主軸に沿って中央に配置します。
終了（End）: 子要素を主軸の終わりに揃えます。
Space-Between: 子要素の間に均等な間隔を空けて配置します。始まりと終わりには間隔を空けません。
Space-Around: 子要素の周囲に均等な間隔を空けて配置します。そのため、両端の間隔は要素間の間隔の半分になります。
Space-Evenly: 始まりと終わりも含め、全体に均等な間隔 で子要素を配置します。

アイテムの整列

交差軸（主軸に垂直な軸）に沿った子要素の配置を制御します。この設定により、子要素の高さや内容に応じて、さまざまな方法で視覚的に揃えることができます。デフォルトは ストレッチ（Stretch） です。

開始（Start）: 子要素を交差軸の始まりに揃えます。
中央（Center）: 子要素を交差軸に沿って中央に配置します。
終了（End）: 子要素を交差軸の終わりに揃えます。
ストレッチ（Stretch）: 子要素を引き伸ばし、交差軸に沿ってコンテナいっぱいに広げます。
ベースライン（Baseline）: 子要素を テキストのベースライン に沿って揃えます。テキストの多い要素やフォントサイズの異なる要素を扱う場合に特に便利で、ベースラインを一定に揃えられます。

ギャップ

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

ギャップ スライダーを調整して間隔を直接制御し、すべての子要素の間隔を均一にします。ギャップは em または px で設定できます。

ラップ

子要素がコンテナ内の利用可能なスペースを超えた場合の動作を制御します。すべての子要素が収まるスペースがないときに、子要素を同じ行にとどめるか、新しい行に移動するかを決定します。新しいフレックスコンテナは、デスクトップでは ラップ、モバイルでは ラップしない の状態で始まります。

ラップしない:
- 動作: コンテナからはみ出す場合でも、すべての子要素が 1 行にとどまります。
- 空きスペース: 要素が複数行に分かれず、レイアウトの方向に応じて横方向または縦方向にはみ出すだけなので、空きスペースは生じません。
- 使用する場面: すべての子要素を折り返さずに 1 つの行または列に表示する必要があるレイアウト（ナビゲーションバーやアイコンの一覧など）に便利です。
ラップ:
- 動作: スペースが足りない場合、子要素は自動的に次の行または列に移動します。
- 空きスペース: 残った空きスペースは、正当化の設定に応じて最後の行または列に配分されます。
- 使用する場面: 子要素を利用可能なスペースに合わせて調整する必要があるレスポンシブレイアウト（商品カードや画像のグリッドなど）に最適です。
リバースラップ:
- 動作: ラップ オプションと似ていますが、はみ出した要素は逆の順序で新しい行または列に移動します。
- 空きスペース: ラップと同様に、残ったスペースは最後の行または列に配分されますが、レイアウトは逆向きに表示されます。
- 使用する場面: はみ出したコンテンツを逆の順序で表示したい独自のデザイン（特定の視覚的な配置が必要なレイアウトなど）に使用します。

モバイル表示の調整

ClickFunnels エディターのフレックスコンテナには、専用の モバイル表示 調整機能があり、小さな画面向けに最適化したレイアウトを作成できます。設定パネルで モバイルアイコン を切り替えると、デスクトップのレイアウトに影響を与えずに、モバイルデバイス向けのフレックスコンテナのプロパティをカスタマイズできます。この柔軟性により、すべてのデバイスでレスポンシブで使いやすいデザインを保てます。

モバイル表示の調整を使うと、モバイルとデスクトップでまったく異なるフレックスプロパティを設定できます。例:

折り返しの動作: デスクトップでは子要素を ラップしない に設定し、すべての要素を 1 行に並べることができます。一方、モバイルでは ラップ を有効にして要素を複数行に折り返し、読みやすさと使いやすさを高めることができます。
フレックスの方向: デスクトップではフレックスコンテナを行レイアウトに設定し、要素を横方向に並べることができます（例: 左側にオプトインフォームと行動喚起ボタン、右側に見出し）。モバイルでは方向を 列の逆順 に切り替えて、見出しを一番上に、その下に行動喚起ボタンが表示されるように並べ替えることができます。

これらの調整は、ヒーローバナーやオプトインフォームなど、わかりやすさと見た目の魅力を保ちながら画面サイズにスムーズに適応させる必要があるセクションで特に役立ちます。モバイル表示の調整機能を活用することで、デスクトップとモバイルの両方でユーザー体験を重視したレイアウトを作成できます。

子フレックスプロパティ

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

フレックス成長

機能: 他の子要素と比べて、子要素がフレックスコンテナ内でどれだけのスペースを占めるかを決定します。デフォルトは 0 です。
親との比較: 親はコンテナ全体のスペースの割り当てを設定しますが、フレックス成長は、個々の子要素がコンテナ内の利用可能なスペースを埋めるためにどのように「成長」するかを制御します。
例: すべての子要素のフレックス成長を 1 に設定すると、利用可能なスペースが均等に配分されます。1 つの子要素のフレックス成長が 2 で、他が 1 の場合、2 の子要素は 2 倍のスペースを占めます。

フレックス縮小

機能: コンテナのスペースが足りなくなったときに、子要素がどれだけ縮むかを制御します。デフォルトは 1 です。
親との比較: 親の設定（ラップしない、ラップなど）は、子要素を 1 行にとどめるか、新しい行にはみ出させるかを決定します。一方、フレックス縮小は、スペースが限られているときに個々の子要素がサイズをどのように調整するかを決定します。
例: すべての子要素のフレックス縮小を 1 に設定すると、均等に縮みます。1 つの子要素のフレックス縮小が 0 の場合、その子要素は縮まず、他の子要素が調整されます。

フレックス基準

機能: フレックス成長やフレックス縮小によってスペースが配分される前の、子要素の初期サイズを定義します。デフォルトは auto です。
親との比較: 親はコンテナ全体の幅や高さを制御しますが、フレックス基準はコンテナ内の各子要素の基準サイズを設定し、デフォルトの幅や高さを上書きします。
例: フレックス基準を auto に設定すると、子要素のサイズはその内容によって決まります。特定の値（例: 100px）に設定すると、子要素はそのサイズから始まり、その後で成長や縮小の動作が適用されます。

自己整列

機能: 個々の子要素が、親の アイテムの整列 設定を上書きできるようにします。
親との比較: 親の アイテムの整列 プロパティは、すべての子要素に同じ整列ルールを適用します。自己整列 を使うと、子要素ごとに他の要素とは別に配置をカスタマイズできます。
例: 親がすべての子要素を中央に揃えている場合でも、特定の子要素だけを開始、終了、ストレッチに個別に揃えるよう設定できます。

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

親フレックスプロパティ: コンテナ全体の動作を定義し、すべての子要素の整列、間隔、折り返しをまとめて制御します。
子フレックスプロパティ: 親コンテナ内の各子要素の動作を細かく制御できるため、複雑なレイアウトをデザインする際に柔軟なカスタマイズが可能です。

パディング

パディング 設定は、コンテンツとそのコンテナ（セクション、行、列、要素など）の内側の端との間のスペースを制御します。この内側の余白によってコンテンツにゆとりが生まれ、見た目のバランスが整います。スライダーを使用するか、ピクセル（px）またはパーセンテージ（%）で値を直接入力して、画面サイズ全体で一貫した間隔を作成します。

パディングのオプション:

上: 要素コンテナの上端とコンテンツの間にスペースを追加します。
下: 要素コンテナの下端とコンテンツの間にスペースを追加します。
左 + 右: 要素コンテナとコンテンツの間の横方向の間隔を調整します。
ギャップ: アコーディオン などの一部の要素では、コンテナ内のアイテム間の間隔を設定するためにギャッププロパティが追加されています。たとえば、上下のパディングを指定しなくても、アコーディオン要素内の各アコーディオンアイテムの間隔を調整できます。

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

パディング設定では、デスクトップ 表示と モバイル 表示に別々の値を設定できます。パディングコントロールの上部にある デバイス切り替え を使用して画面モードを切り替え、それぞれの間隔を調整します。モバイルの値を指定しない場合は、デフォルトでデスクトップの設定が引き継がれます。モバイルの値は幅770px以下の画面に適用されます。設定パネルのデバイスアイコンにカーソルを合わせると、編集中の値が適用される画面幅を確認できます。

この機能により、さまざまな画面サイズに合わせてレイアウトが最適化され、モバイルとデスクトップの両方で体験が向上します。

背景

背景プロパティでは、セクション、行、列、フレックスコンテナ、または動画などの個々の要素といったさまざまなコンテナに背景画像を追加し、カスタマイズできます。背景オプションをオンにすると設定が有効になり、背景画像のソース、スタイル、フィット、色のオプションを設定できます。

画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーから直接アップロードします。
画像スタイル: コンテナ内で背景画像をどのように表示するかを制御します。
- なし: 背景画像を元のサイズと位置のまま、追加のスタイルなしで表示します。画像がコンテナより小さい場合は、すき間ができることがあります。
- フルセンター: 画像のサイズを変更せずにコンテナの中央に配置します。画像がコンテナより小さい場合は、空白が残ることがあります。
- フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインのコンテンツとは独立して動くため、奥行きのある見た目になります。
  
  注:
  
  iOS の制限により、Apple のモバイルデバイスではパララックス効果が自動的に無効になります。iOS デバイス（Safari およびその他の WebKit ブラウザ）は、CSS でパララックススクロールを実装する際の中核となる background-attachment: fixed をサポートしていないか、サポートが限定的です。レイアウトを崩さないよう、背景は静的なスタイル（例: フルセンター）で表示されます。
- 幅100%にフィル: 縦横比を保ったまま画像をコンテナの幅いっぱいに広げます。縦方向が切り取られる場合があります。
- 幅と高さ100%にフィル: 画像をコンテナの幅と高さの両方いっぱいに広げます。縦横比を保つため、画像の一部が切り取られます。
- 繰り返さない: 画像を繰り返さずに 1 回だけ表示します。使われていないスペースは空白のままになります。
- 繰り返す: 画像をタイル状に並べ、コンテナの幅と高さの両方を覆います。
- 水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。
- 垂直に繰り返す: コンテナの高さ方向に画像を縦に並べます。
画像フィット: コンテナ内での画像の位置（例: 中央、左上、右下）を指定して、配置を整えます。
色: このオプションでは、背景と前景の色を設定できます。
- 背景色: 背景画像を使用しない場合は、単色またはグラデーションの色を背景として直接適用できます。カラーピッカーで独自の色を選ぶか、統一感を出すためにスタイルガイドから色を選択します。背景画像を使用している場合、背景色は通常表示されませんが、画像の読み込み中に一瞬表示されたり、画像の読み込みに失敗した場合の代わりとして表示されたりすることがあります。
- 前景色: 背景画像の上にオーバーレイを追加します。不透明度を調整して、画像に色味を付けたり、やわらかい印象にしたりできます。このオーバーレイにより、読みやすさが向上したり、画像にスタイリッシュな色味を加えたりできます。
背景動画: 動画を背景として使用するには、「背景動画」オプションをオンにします。YouTube または Vimeo の動画 URL を入力すると、その動画がコンテナの背景に設定されます。

動画 URL を入力すると、次のオプションが表示されます。
- 終了アクション: 動画の終了時の動作を選択します。動画をループ、URLにリダイレクト（リダイレクトURL を入力し、必要に応じて 新しいタブで開く をオンにします）、ポップアップを表示 のいずれかを選べます。
- 背景スタイル: コンテナ全体を覆うには 100%をフィル を選択します。動画をオフセット を選択すると、背景オフセットY (%) と 背景オフセットX (%) で動画の位置を調整できます。
- モバイルで動画背景を隠す: モバイルデバイス（幅770px以下の画面）で動画をオフにします。
- カラー背景をオーバーレイとして使用: 背景色を動画の上にオーバーレイとして表示します。
注:

背景動画オプションは、セクション、行、フレックス の各コンテナでのみ使用できます。

ボーダー

ボーダー 設定では、要素の周囲にボーダーを追加してスタイルを設定し、ページ上で要素を視覚的にはっきりと区切ることができます。

スタイルプリセット（1、2、3）: スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットを使うと、ページ全体で一貫したボーダースタイルを要素にすばやく適用できます。
スタイルを編集: スタイルガイドのプリセットのボーダースタイルを変更するには（そのスタイルを使用しているすべての要素に影響します）、スタイルを編集 を選択してグローバル設定でデザインを調整します。
上書き: 上書き オプションを使用すると、グローバルなスタイルガイドの設定に影響を与えずに、この要素だけのボーダー設定をカスタマイズできます。
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。上、下、左、右のボーダーを自由に組み合わせられます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。
カラー: カラーピッカーを使用してボーダーの色を選択します。スタイルガイドから色を選ぶことも、独自の色を選ぶこともでき、デザインの配色に合わせられます。
ストロークサイズ: ストロークサイズ スライダーを使用するか、特定のピクセル値を入力してボーダーの太さを調整できます。細い輪郭線から太い枠まで作成できます。

シャドウ

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

スタイル: ページのスタイルガイドから定義済みのシャドウスタイルを選択します。番号付きのスタイル（1、2、3）をクリックすると、スタイルガイドで定義されたプリセットのシャドウ設定が適用されます。
シャドウスタイル: インセット（要素の内側の影）と アウトセット（要素の外側の影）から選択して、目的のシャドウ効果を作成します。
X方向: 影の横方向の位置を調整します。正の値では影が右に、負の値では左に移動します。
Y方向: 影の縦方向の位置を制御します。正の値では影が下に、負の値では上に移動します。
ブラー: 影の輪郭のやわらかさを制御します。値を大きくすると拡散したやわらかい影になり、値を小さくするとくっきりした影になります。
スプレッド: 影の大きさを調整します。正の値では影が広がり、負の値では狭くなります。
カラー: カラーピッカーを使用して影の色を設定します。

コーナー

コーナー 設定では、要素の角の丸み（border-radius）を調整し、丸みのある角にも鋭い角にも柔軟に設定できます。

スタイルプリセット（1、2、3）: スタイルガイドで設定された定義済みのコーナースタイルから選択します。これらのプリセット（1、2、3）を使うと、ページ全体のデザインに合ったスタイルをすばやく適用できます。
スタイルを編集: スタイルガイドでスタイルを直接変更するには（そのスタイルを使用しているすべての要素に影響します）、スタイルを編集 をクリックしてグローバル設定でプリセットを調整します。
上書き: スタイルガイドを変更せずに独自のコーナー設定を適用するには、上書き をクリックします。これにより、この要素だけの角の半径を調整できます。
すべての角: スライダーを調整するか、ピクセルまたはパーセンテージで特定の値を入力して、4 つの角すべてに同じ半径を設定します。
エッジを分ける: エッジを分ける を有効にすると、角を 1 つずつ調整できます。左上、右上、左下、右下の角にそれぞれ異なる値を設定して、独自の形を作成できます。

コントロールパネル

コントロールパネル は、ページエディター内のすべてのコンテナ（セクション、行、フレックス、要素）の下部に表示され、そのコンテナの主要な設定や操作にすばやくアクセスできます。各アイコンの意味は次のとおりです。
設定パネル下部のバー：可視性（すべて／デスクトップ／モバイル）、プレビュー、削除

すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
目 (👁️) アイコン: コンテナをページ上で非表示にします。クリックするとコンテナはエディター上で非表示になりますが、削除はされません。非表示のコンテナは、上部ナビゲーションバーの レイアウト メニューから確認できます。エディター上で再表示するには、すべて、デスクトップ、モバイルのいずれかのアイコンを選択します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ゴミ箱 (🗑️**) アイコン**: コンテナをページエディターから完全に削除します。

詳細設定

コンテナ（セクション、行、列、要素）をさらにカスタマイズできるように、ClickFunnels には 高度な 設定が用意されており、スタイル、高度な CSS、アニメーション、表示ロジックを制御できます。これらの高度な機能は、内容が多くなりすぎないよう、またドキュメントを簡潔に保つために、個別の記事に分けて説明しています。詳しくは次の記事をご覧ください。

詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力する方法、コンテナの位置を設定する方法、Z インデックスを適用する方法について説明します。
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加、表示・非表示時のエフェクトの制御、アニメーションの遅延の調整方法について説明します。
詳細設定 - ロジックのカスタマイズ: 要素に条件付きロジックを適用する方法と、カスタム属性を追加する方法について説明します。