ページエディタ: 単位

公開日: 2024年9月9日更新日: 2026年10月20日

ClickFunnels でページをデザインする場合、完璧なレイアウトを実現するには正確な測定が鍵となります。ページエディタでは、さまざまな測定単位を使用して、間隔、寸法、位置を完全に制御できます。ここでは、利用可能なユニットの概要と、それらを効果的に使用する方法を示します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

単位と値

ClickFunnels Editor 内で作業している機能によっては、手動入力フィールドの横にサイズバーが表示される場合があります。これにより、PX、%、REM、EM、MS、DEG などのさまざまな単位を選択して測定を定義できます。

たとえば、 10 px を指定する設定では、値は 10 で、単位は PX (ピクセル) です。これらを合わせて、適用される測定値を定義します。

最良の結果を得るには、利用可能なオプションを試してみることをお勧めします。値を調整し、変更をプレビューし、設計に最適な組み合わせを決定します。要素自体だけでなく、要素がコンテナとどのように相互作用するか、ページ上の配置、レイアウト全体における要素の役割も重要であることを覚えておくことが重要です。テストして改良することで、デザインが機能的で視覚的に魅力的であることを確認できます。

PX(ピクセル)

ピクセルは、固定測定の標準単位です。これらは正確な数の画面ドットを定義し、画面サイズによって変化しません。ClickFunnels では、一貫性が重要な場合、ピクセルは正確な間隔や寸法に一般的に使用されます。

最適な用途: レイアウトを修正したり、デバイス間で一貫したパディング、余白、またはサイズを維持したりします。
例：パディング 10px を設定すると、画面サイズに関係なく、10ピクセルのギャップが固定されます。

% (パーセンテージ)

パーセンテージ値は「%」で表されます。これは、親要素に対する比率とサイズを定義するために使用される測定単位です。

ClickFunnels で単位として “%” を使用する場合は、特定の参照値のパーセンテージを指定します。たとえば、次の画像では、親コンテナ行に対してこの要素に 20% の上余白を追加しており、コンテナ行の先頭とこの要素の間のスペースは行の幅の 20% を表します。

最適な用途: レスポンシブデザイン (セクションやコンテナを基準に幅や余白を設定するなど)。
例：幅が 50% の場合、要素は親コンテナーの幅の半分を占めます。

REM(ルートEM)

REMは「ルートEM」の略で、ルート要素のフォントサイズ(通常はClickFunnelsページ設定で設定された基本サイズ)を基準にしています。REM は Web 開発でタイポグラフィとして一般的に使用されますが、主にテキスト関連の調整のために ClickFunnels エディターで利用できます。

最適な用途: フォントサイズを拡大縮小したり、さまざまな画面サイズ間で比例したテキストベースの間隔を維持したりします。
注：ルートフォントサイズが 16px の場合、 2rem は 32px に等しくなります。

REMは、ページの スタイルガイド で定義されたフォントサイズを基準にしており、そこで設定されたサイズに基づいて自動的に調整されます。

たとえば、下の画像では、スタイルガイドでデスクトップおよびモバイルデバイスの基本フォントサイズとして16pxを設定しているため、 1.5 “remの値が表示され、レンダリングフォントサイズの 1.5 × 16 = 24px を表します。

自動

値を auto に設定すると、ClickFunnels エディターを使用すると、システムは要素のコンテンツまたは周囲のレイアウトに基づいてサイズまたは間隔を決定できます。これは、要素を中央に配置したり、柔軟なコンテンツ動作を可能にする場合に特に便利です。

最適な用途: 手動介入なしで幅と高さを動的に調整できます。
**例：**画像の幅をautoに設定すると、幅が自動的に拡大縮小され、画像の元の縦横比が維持されます。同様に、画像の高さをautoに設定すると、定義された幅に基づいて高さを動的に調整できます。

MS(ミリ秒)

ミリ秒値は「ms」で表されます。これは、アニメーション、トランジション、その他のタイミング関連の効果に関連する期間を指定するために使用されます。

EM

EM は要素自体のフォントサイズを基準にした単位です。ClickFunnels エディターでは、主に Flex コンテナ内のアイテムやナビゲーションメニューの間隔など、ギャップに使用されます。

例: フォントサイズが 16px の場合、1.5em のギャップは 24px になります。

DEG(度)

度は回転設定で使用され、コンテナを -180deg から 180deg まで傾けることができます。