HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM スタイルのclipプロパティの使い方を徹底解説

HTML DOM スタイルのclipプロパティとは

HTML DOM の clip プロパティは、position が指定された要素（positioned element）のうち、表示する領域（可視部分）を設定・取得するために使用されます。このプロパティを活用することで、画像や要素の一部だけを切り抜いて表示することが可能になります。

clipプロパティの構文

clip プロパティを設定する場合の構文は以下のとおりです。

object.style.clip = "auto|rect(top right bottom left)|initial|inherit"

設定できる値の一覧

値説明
auto要素をクリップ（切り抜き）しません。これがデフォルト値です。
rect(top right bottom left)指定した4つの座標（上・右・下・左）に従って、要素の形状をクリップします。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

clipプロパティの使用例

ここでは、ボタンをクリックすると画像の表示領域が変更されるサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
    div{
        position:relative;
    }
    #IMG1{
        width:200px;
        height:200px;
        position:absolute;
    }
    #P1{
        position:absolute;
        margin-top:210px;
    }
    button{
        margin-top: 250px;
    }
</style>
<script>
    function changeClip(){
        document.getElementById("IMG1").style.clip="rect(0px 75px 75px 0px)";
        document.getElementById("Sample").innerHTML="画像のclipプロパティが変更されました ";
    }
</script>
</head>
<body>
    <div >
        <img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
        <p id="P1">下のボタンをクリックして、上の画像のclipプロパティを変更してください</p>
        <button onclick="changeClip()">Change Clip</button>
        <p id="Sample"></p>
    </div>
</body>
</html>

実行結果

ページを開くと、200×200px の画像と「Change Clip」ボタンが表示されます。

HTML DOM スタイルのclipプロパティの使い方を徹底解説

「Change Clip」ボタンをクリックすると、clip プロパティに rect(0px 75px 75px 0px) が設定され、画像の左上から75×75px の領域のみが表示されるようになります。同時に、変更が完了したことを示すメッセージも画面に出力されます。

HTML DOM スタイルのclipプロパティの使い方を徹底解説

まとめ

clip プロパティを使えば、JavaScript から動的に要素の表示範囲を制御できます。rect() 関数で4辺の座標を指定することで、画像の一部だけを切り抜いて表示するといった演出も簡単に実装可能です。なお、clip プロパティは position が absolute または fixed に設定された要素に対してのみ有効である点に注意してください。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOM スタイルのclipプロパティの使い方を徹底解説

    HTML DOM スタイルのclipプロパティとはHTML DOM の clip プロパティは、position が指定された要素（positioned element）のうち、表示する領域（可視部分）を設定・取得するために使用されます。このプロパティを活用することで、画像や要素の一部だけを切り抜いて表示することが可能になります。clipプロパティの構文clip プロパティを設定する場合の構文は以下のとおりです。object.style.clip = auto|rect(top right bottom left)|initial|inherit設定できる値の一覧値説明auto要素をクリップ（