パディング

パディング

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要点

パディングは、要素の境界とコンテンツの間にある内側の余白を調整します。上下左右の4辺すべてに同じ値を一括で適用することも、上、右、下、左の各辺を個別に設定して、視覚的な密度を調整することもできます。

1. 説明

パディングは、要素*要素ページへのリンク*の内側、つまりコンテナーの表示境界とその中のコンテンツとの間にある視覚的な余白を定義します。要素内のゆとりを直接調整するため、パディングを大きくすると広々とした印象になり、小さくすると引き締まったコンパクトな外観になります。4辺すべてに同じ値を設定することも、辺ごとに異なる値を設定して独自のレイアウトを作成することもできます。

  

2. 設定可能な値

パディングには、px(ピクセル)または%(パーセント)の数値を指定できます。

  1. コンテナーのレイアウトに関係なく、固定された一定の余白が必要な場合は、pxを使用します。
  2. レイアウトに合わせてパディングを比例的に変化させる場合は、%を使用します。可変レイアウトやレスポンシブレイアウトに適しています。

最小値は0(内側の余白なし)です。上限は設けられていませんが、大きな値を設定すると、コンテンツがポータルページの表示領域外に押し出されます。

モード 動作 説明
均等 1つの値が4辺すべてに均等に適用されます。 すべての辺に一貫した余白を設定できます。
最適な用途:アイコン、カード、小さなテキストブロックなど
辺ごと 上、右、下、左に個別の値を設定します。 左右よりも上下の余白を広くするなど、非対称の余白を設定できます。
最適な用途:ヒーローセクション、フレーム、複数の要素を含む複雑なテキストブロックなど

3. 表示例

以下の例は、パディング値によって画像要素の外観がどのように変化するかを示しています。パディングに対応するすべての要素で、同様の表示になります。

    

                           

4. パディングを設定するには

  1. 編集領域で要素を選択し、マウスを重ねると表示されるツールバーの三点リーダーをクリックして、右側のプロパティパネルを開きます。
  2. パネル内の[パディング]アコーディオンをクリックして開きます。
  3. パディング値を設定します。
    1. 均等:4辺すべてに適用する値を、ピクセルまたはパーセントで入力します。
    2. 辺ごと:辺ごとの設定アイコン()をクリックし、T(上)、R(右)、B(下)、L(左)の各辺に、ピクセルまたはパーセントで個別の値を入力します。
  4. 変更内容を保存するには、右上の[保存]をクリックします。

5. 対応する要素

パディングは、以下に示す基本要素と複合要素で使用できます。また、すべてのプリセットでスタイルプロパティとして使用できます。

  1. テキスト
  2. 画像
  3. アイコン
  4. キャンバス
  5. 水平スタック
  6. 垂直スタック
  7. メニュー
  8. タブ
  9. ボタン
  10. ポータルフォーム
  11. 埋め込み

パディングは常に、要素の境界とそのコンテンツとの間にある内側の余白を調整します。ナビゲーションヘッダーやヒーローセクションなどのプリセットでは、外側のコンテナーと内側の各セクションに個別にパディングを適用できます。

6. 留意事項

  1. パディングが要素の内側の余白を調整するのに対し、マージン*リンク*は要素の外側の余白を調整します。マージンによって、要素を隣接する要素やページの端から離すことができます。パディングを使用して要素のコンテナー内の余白を調整し、マージンを使用してポータルページ上の要素間の余白を調整できます。

その他のプロパティ

  1. 配置
  2. レイアウト
  3. フォント
  4. 背景
  5. 角の丸み
  6. 枠線
  7. 影
  8. 不透明度
  9. 画像とアイコンのスタイル
  10. スタック
  11. タブのスタイル