オーバーフロー クリッピング コントロール

ウェブ機能: overflow: clip overflow-clip-margin

overflow: hidden は、ほとんどの場合、コンテンツをパディング ボックスで厳密にクリップする「鈍器」ですが、overflow: clip と overflow-clip-margin を組み合わせることで、ブロック コンテナ全体でレイアウトをきめ細かく制御する「メス」になります。

overflow: clip と overflow-clip-margin を使用して、クリッピングが発生する場所を正確に指定します。境界を内側のボックスモデルのエッジに正確に合わせることも、指定したオフセット（安全マージン）でクリッピング境界を要素のボックスの外側に拡張することもできます。この最新のアプローチはパフォーマンスが高く、視覚効果（目立つ子要素のシャドウなど）をクリップせずにレンダリングするためだけに、カスタム パディングと負のマージンを持つ追加のラッパー コンテナを追加するという従来の要件を排除します。

置換要素（<img>、<video>、<canvas> など）はデフォルトで overflow: clip と overflow-clip-margin: content-box になり、object-fit または border-radius を使用するコンテナ イメージをきれいに含めることができます。

実装方法

  1. overflow: clip を適用する: ターゲット要素で overflow: clip が有効になっていることを確認します。overflow-clip-margin を有効にするには、ブロック レイアウト コンテナで overflow: clip を設定することが必須です。overflow が hidden、auto、scroll のいずれかに設定されている場合、overflow-clip-margin プロパティはブラウザによって無視されます。overflow: clip は、すべてのスクロール（ユーザーによるスクロールと JavaScript によるプログラムによるスクロールの両方）を防止します。
  2. ボックスの端に合わせる: キーワードを使用して、クリッピング境界をボックスモデルの内側の端に正確に合わせます。
    • content-box: コンテンツ領域の開始位置でコンテンツをクリップし、パディング領域を完全にクリアします。コンテンツはパディングの端で止まります。ネストされたレイアウト モジュールに最適です。
    • padding-box（デフォルト）: 枠線の内側の端でコンテンツをクリップします。
    • border-box: 枠線の外側の端でコンテンツをクリップします。これにより、コンテンツが半透明の枠線の下に配置されたり、部分的に重なったりします。
  3. 指定したオフセット（ブリード）を定義する: 長さの値（15px や 5px など）を指定して、ピクセルをカットする前に安全ゾーンを作成します。これにより、目立つ子要素のシャドウが、レイアウト ジオメトリを拡張することなく、境界エッジを越えてクリップされずにレンダリングされます。
  4. ボックスエッジとオフセットを組み合わせる: ボックスエッジと長さのオフセットを同時に指定して（例: content-box 15px）、特定のボックスエッジからオフセットします。

コード例

次の例は、動的なコンテナ レイアウト コントロールを示しています。自動化された内部コンテンツの曲線ネスト フレームと子要素のシャドウ保護、プログレッシブ エンハンスメントのフォールバックを示しています。

ブロック コンテナ: ネストされた丸い曲線

  • 角が丸く、カスタム パディングが設定された親コンテナに overflow-clip-margin: content-box を適用します。
  • 同心円状の内側のコンテンツ ボックスの境界に沿って、内側の子メディアとフッター コンポーネントに同様の角丸を適用し、カスタム calc() ロジックを使用せずに、不自然なネストされた曲線を解決します。
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

ブロック コンテナ: 子要素のシャドウのブリード

  • overflow: clip を適用し、拡張された overflow-clip-margin 長さのオフセットを定義して、レイアウト ジオメトリを変更せずに、子のシャドウが親コンテナの外側でクリップされずにレンダリングされるように、表示可能な安全ゾーンを作成します。これがないと、子のシャドウは親の境界でクリップされます。
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

戦略的な実装とベスト プラクティス

  • overflow-clip-margin を使用する場合は、ターゲット要素に overflow: clip を適用してください。カスタムまたは内側の曲線クリップ マージンを有効にするには、標準のブロック レイアウト コンテナで overflow を clip に厳密に設定することが必須です。
  • 推奨: 角が丸いパディング付きコンテナに overflow-clip-margin: content-box を設定して、丸みのない内部の子要素を、手動のパディング減算ロジックなしで、数学的に完璧なネストされた境界曲線に自動的にクリップします。
  • 推奨: 外部視覚効果（filter: drop-shadow() など）を適用する場合は、指定された長さのオフセットを使用して overflow-clip-margin を構成し、レイアウト ジオメトリを変更または拡張することなく、境界ボックスが急に切り捨てられないようにします。
  • コンテナが JavaScript によるプログラムでのスクロール操作を必要とする場合や、position: sticky 要素の直接のレイアウト コンテキストとして機能する場合は、overflow: clip を適用しないでください。clip はスクロールを完全に無効にします。

代替戦略

overflow: clip または overflow-clip-margin のネイティブ サポートがないターゲット環境の場合、プログレッシブ エンハンスメントのフォールバック戦略は、視覚的な意図に直接依存します。

  • コア境界が維持されるように、基本エクスペリエンスとして overflow: hidden にフォールバックします。
  • ドロップシャドウや外部コーナーバッジを切り捨ててはならない要素では、overflow: visible にフォールバックします。

プログレッシブ エンハンスメントのフォールバック実装を完了する

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}