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

HTML DOMのborderImageSliceプロパティとは？構文と使い方を徹底解説

HTML DOM の borderImageSlice プロパティは、ボーダー画像（境界線に使用する画像）をどのように領域へ分割するかを定義するために使用されます。分割位置は、画像からのオフセットを数値（number）・パーセンテージ（%）・グローバル値で指定することによって決まります。

borderImageSliceプロパティの構文

borderImageSlice プロパティを設定する際の基本的な構文は以下のとおりです。

object.style.borderImageSlice = "number|%|fill|initial|inherit";

指定できる値の一覧

値説明
numberラスター画像の場合はピクセル数を、ベクター画像の場合はベクター座標を表します。
%画像サイズに対する水平・垂直方向のオフセットを相対的に指定します。デフォルト値は 100% です。
fillボーダー画像の中央部分（middle部分）を表示として保持するために使用します。
initialこのプロパティを初期値（デフォルト値）に戻します。
inherit親要素のプロパティ値を継承します。

borderImageSliceプロパティの使用例

それでは、borderImageSlice プロパティを使った具体的なサンプルコードを見てみましょう。ボタンをクリックすると、JavaScript によってボーダー画像のスライス値が動的に変更される仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 50%;
    }
    #b1 {
        border: 30px solid transparent;
        padding: 5px;
        font-size:20px;
        border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
        border-image-slice: 60%;
    }
</style>
<script>
    function changeBorderSlice(){
        document.getElementById("b1").style.borderImageSlice="10%";
        document.getElementById("Sample").innerHTML="ボーダー画像のスライスが変更されました";
    }
</script>
</head>
<body>
<div id="b1">これはdiv内のサンプルテキストです</div>
<p>上のdivのボーダー画像スライスを変更してみましょう…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html>

実行結果

ページを表示した直後は、border-image-slice: 60% が適用された状態でボーダー画像が描画されます。

HTML DOMのborderImageSliceプロパティとは？構文と使い方を徹底解説

続いて、「Change Border Slice」ボタンをクリックすると、JavaScript の changeBorderSlice() 関数が実行され、スライス値が 10% に変更されます。その結果、ボーダー画像の見え方が次のように変化します。

HTML DOMのborderImageSliceプロパティとは？構文と使い方を徹底解説

まとめ

borderImageSlice プロパティを使うことで、CSS の border-image で指定した画像をどの位置で切り分けて境界線として表示するかを細かく制御できます。数値やパーセンテージによる指定に加え、fill キーワードで中央部分の表示も制御できるため、装飾的なボーダーデザインを作成する際に非常に便利です。ぜひ実際のコードで挙動を確認してみてください。

  1. HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説

    HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ

  2. 【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説

    HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。 構文 filterプロパティを設定する際の基本構文は以下の通りです。 object.style.filter = none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | satu