CSSのclipで表示領域を矩形に切り抜く方法をわかりやすく解説

2024.09.13
スポンサーリンク

clipプロパティは、要素の表示領域を矩形で指定してクリッピング（切り抜き）を行うために使用されます。主に、position: absoluteで指定された要素に対してクリッピングを適用する場合に使用されます。

スポンサーリンク

clipプロパティの値とその効果

  • rect(top, right, bottom, left): 要素の矩形領域を指定して、クリップする範囲を設定します。値は top, right, bottom, leftの順に指定します。
  • auto: デフォルト値で、要素はクリッピングされません。

注意点と関連情報

clipプロパティは現在非推奨となっており、代わりにclip-pathプロパティを使用することが推奨されています。ただし、特定のレガシーコードではclipが使われることがあります。なお、clipはposition: absoluteが指定された要素にのみ適用されるため、他の要素にはクリッピングが適用されません。

clipプロパティが効かない時の原因と対策

clipがposition: absolute;と一緒に使用されていない

clipプロパティは、要素をクリッピング（切り抜き）するために使用されますが、position: absolute;が指定されていない要素には効果がありません。clipは絶対位置に基づくプロパティです。
対策: clipプロパティを使用する要素にposition: absolute;を指定する必要があります。絶対位置で要素を制御することで、clipが正しく適用されます。

clipプロパティに無効な形式が使用されている

clipは、クリッピングする矩形の領域を定義するためにrect()関数を使用しますが、無効な形式（値の不足や誤った単位）が指定されていると効果がありません。
対策: rect()の中に適切な4つの値（上、右、下、左の順）を指定し、それぞれピクセル単位やパーセントなどの適切な単位を使用しているか確認しましょう。

要素がクリップされる領域外にない

clipプロパティは、指定した領域外に要素の部分が存在する場合にのみ効果を発揮します。クリップ領域内に要素が完全に収まっている場合、クリッピングの効果は確認できません。
対策: 要素がクリッピングされる領域を超えるようにサイズや位置を調整し、クリップが視覚的に確認できる状態にします。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
    }
    .css-sample-box {
        width: 300px;
        height: 150px;
        margin: 10px auto;
        background-color: #4CAF50;
        color: white;
        font-size: 18px;
        text-align: center;
        line-height: 150px;
        position: relative;
    }

clip: rect(0px, 150px, 150px, 0px)

clip: rect(0px, 150px, 150px, 0px)は、要素を矩形でクリッピングし、指定された範囲内の領域のみ表示します。この場合、左上を基準にして、150px×150pxの領域だけが表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-clip-rect">クリップされた領域</div>
    </div>

CSSコード

.css-sample-clip-rect {
    clip: rect(0px, 150px, 150px, 0px);
    position: absolute;
}

表示結果

クリップされた領域

clip: auto

clip: autoは、デフォルト値であり、要素はクリッピングされず、全体が表示されます。クリッピングが行われないため、要素はそのまま表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-clip-auto">クリップなし</div>
    </div>

CSSコード

.css-sample-clip-auto {
    clip: auto;
}

表示結果

クリップなし

まとめ

clipプロパティは、要素を矩形領域でクリッピングして、指定された範囲だけを表示することができます。ただし、このプロパティは非推奨となっており、将来的にはclip-pathプロパティの使用が推奨されます。clipプロパティを使用する際は、position: absoluteが適用された要素に対してのみ有効であることに注意しましょう。

スポンサーリンク