Documentation CSS

概要

mask-border-modeは、CSSのmask-borderプロパティで使用するマスク画像の解釈方法を指定するプロパティです。このプロパティを使用することで、マスク画像をアルファチャンネル（透明度）に基づいて処理するか、輝度（明るさ）に基づいて処理するかを制御できます。

マスクボーダーは要素のボーダー領域にマスク効果を適用する機能で、mask-border-modeはその効果の計算方法を決定する重要なプロパティです。

mask-border-modeとは

mask-border-modeプロパティは、mask-borderで指定したマスク画像をどのように解釈するかを決定します。マスク効果の計算方法には2つのモードがあり、それぞれ異なる特性を持っています。

値の種類

値説明
alphaマスク画像のアルファチャンネル（透明度）を使用してマスク効果を計算します。デフォルト値です。
luminanceマスク画像の輝度（明るさ）を使用してマスク効果を計算します。白い部分が表示され、黒い部分が非表示になります。

alphaモードとluminanceモードの違い

alphaモードでは、マスク画像の透明度情報がそのままマスク効果に反映されます。PNG画像のアルファチャンネルや、SVGの透明部分がマスクとして機能します。

luminanceモードでは、マスク画像の色の明るさに基づいてマスク効果が計算されます。明るい部分（白に近い）は表示され、暗い部分（黒に近い）は非表示になります。中間のグレーは半透明として処理されます。

基本的な使い方

構文

/* キーワード値 */
mask-border-mode: alpha;     /* アルファチャンネルを使用（デフォルト） */
mask-border-mode: luminance; /* 輝度を使用 */

/* グローバル値 */
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: revert;
mask-border-mode: unset;

シンプルな例

以下は、mask-border-modeを使用してマスクボーダーの描画モードを指定する基本的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mask-border-mode 基本例</title>
  <style>
    .alpha-mode {
      width: 300px;
      height: 200px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      /* mask-border の設定 */
      mask-border-source: url('border-mask.png');
      mask-border-slice: 30;
      mask-border-width: 20px;
      mask-border-repeat: round;

      /* アルファモードを明示的に指定 */
      mask-border-mode: alpha;

      /* Safari向けプレフィックス */
      -webkit-mask-border-source: url('border-mask.png');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 20px;
      -webkit-mask-border-repeat: round;
    }

    .luminance-mode {
      width: 300px;
      height: 200px;
      padding: 20px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

      /* mask-border の設定 */
      mask-border-source: url('border-mask-grayscale.png');
      mask-border-slice: 30;
      mask-border-width: 20px;
      mask-border-repeat: round;

      /* 輝度モードを指定 */
      mask-border-mode: luminance;

      /* Safari向けプレフィックス */
      -webkit-mask-border-source: url('border-mask-grayscale.png');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 20px;
      -webkit-mask-border-repeat: round;
    }
  </style>
</head>
<body>
  <div class="alpha-mode">
    <p>alphaモード: 透明度に基づくマスク</p>
  </div>

  <div class="luminance-mode">
    <p>luminanceモード: 輝度に基づくマスク</p>
  </div>
</body>
</html>

alphaモードの詳細

alphaモードは、マスク画像のアルファチャンネル（透明度情報）を使用してマスク効果を計算します。これはデフォルトの動作です。

alphaモードの特徴

  • 画像の透明部分がマスクされる（非表示になる）
  • 画像の不透明部分が表示される
  • 半透明の部分は半透明のマスク効果となる
  • PNG、SVG、WebPなどアルファチャンネルを持つ画像形式に最適

alphaモードの使用例

/* アルファチャンネル付きPNG画像を使用 */
.alpha-mask-example {
  width: 400px;
  height: 300px;
  background: url('photo.jpg') center/cover;

  /* 透明度ベースのマスクボーダー */
  mask-border-source: url('decorative-border-alpha.png');
  mask-border-slice: 40;
  mask-border-width: 30px;
  mask-border-repeat: stretch;
  mask-border-mode: alpha;  /* デフォルト値だが明示的に指定 */

  /* Safari対応 */
  -webkit-mask-border-source: url('decorative-border-alpha.png');
  -webkit-mask-border-slice: 40;
  -webkit-mask-border-width: 30px;
  -webkit-mask-border-repeat: stretch;
}

SVGでのalphaモード活用

<!-- インラインSVGでアルファチャンネルを持つマスクパターン -->
<svg width="0" height="0" style="position: absolute;">
  <defs>
    <mask id="alpha-border-mask">
      <!-- 半透明のグラデーションでマスク効果 -->
      <rect width="100%" height="100%" fill="white" fill-opacity="0.8"/>
      <rect x="10" y="10" width="80" height="80"
            fill="black" fill-opacity="0"/>
    </mask>
  </defs>
</svg>

<style>
  .svg-alpha-border {
    width: 300px;
    height: 200px;
    background: #3498db;

    /* SVGマスクをアルファモードで使用 */
    mask-border-source: url('#alpha-border-mask');
    mask-border-slice: 20;
    mask-border-width: 15px;
    mask-border-mode: alpha;
  }
</style>

luminanceモードの詳細

luminanceモードは、マスク画像の輝度（明るさ）を使用してマスク効果を計算します。色の明暗がマスクの不透明度に変換されます。

luminanceモードの特徴

  • 白い部分（明るい部分）が表示される
  • 黒い部分（暗い部分）が非表示になる（マスクされる）
  • グレーの部分は半透明として処理される
  • グレースケール画像や白黒パターンに最適
  • RGBカラー画像でも輝度計算に基づいて処理される

luminanceモードの使用例

/* グレースケール画像を使用したluminanceマスク */
.luminance-mask-example {
  width: 400px;
  height: 300px;
  background: linear-gradient(to right, #e74c3c, #f39c12);

  /* 輝度ベースのマスクボーダー */
  mask-border-source: url('border-pattern-grayscale.png');
  mask-border-slice: 25;
  mask-border-width: 20px;
  mask-border-repeat: round;
  mask-border-mode: luminance;  /* 輝度モードを指定 */

  /* Safari対応 */
  -webkit-mask-border-source: url('border-pattern-grayscale.png');
  -webkit-mask-border-slice: 25;
  -webkit-mask-border-width: 20px;
  -webkit-mask-border-repeat: round;
}

グラデーションでのluminanceモード活用

/* グラデーションをマスクソースとして使用 */
.gradient-luminance-border {
  width: 350px;
  height: 250px;
  padding: 30px;
  background: url('scenic-photo.jpg') center/cover;

  /* 黒から白へのグラデーションをマスクに使用 */
  /* luminanceモードにより、白い部分が表示される */
  mask-border-source: linear-gradient(
    to right,
    black 0%,      /* 非表示 */
    gray 50%,      /* 半透明 */
    white 100%     /* 表示 */
  );
  mask-border-slice: 1;
  mask-border-width: 40px;
  mask-border-mode: luminance;

  /* Safari対応 */
  -webkit-mask-border-source: linear-gradient(
    to right,
    black 0%,
    gray 50%,
    white 100%
  );
  -webkit-mask-border-slice: 1;
  -webkit-mask-border-width: 40px;
}

実践的な使用例

フォトフレーム効果

写真にアンティーク調のフレーム効果を適用する例です。

.antique-photo-frame {
  width: 500px;
  height: 400px;
  background: url('vintage-photo.jpg') center/cover;

  /* アンティーク調フレームのマスク */
  mask-border-source: url('ornate-frame-mask.png');
  mask-border-slice: 60 fill;  /* 中央部分も表示 */
  mask-border-width: 50px;
  mask-border-outset: 10px;
  mask-border-repeat: stretch;

  /* 透明度ベースでフレームを適用 */
  mask-border-mode: alpha;

  /* Safari対応 */
  -webkit-mask-border-source: url('ornate-frame-mask.png');
  -webkit-mask-border-slice: 60 fill;
  -webkit-mask-border-width: 50px;
  -webkit-mask-border-outset: 10px;
  -webkit-mask-border-repeat: stretch;
}

グラデーションフェード効果

エッジに向かって徐々にフェードアウトするボーダー効果です。

.fade-border-card {
  width: 400px;
  padding: 30px;
  background: #2c3e50;
  color: white;

  /* 中央から外側へのグラデーションマスク */
  /* luminanceモードで白い部分（内側）を表示 */
  mask-border-source: radial-gradient(
    ellipse at center,
    white 60%,     /* 内側は完全に表示 */
    gray 80%,      /* 外側に向かって半透明 */
    black 100%     /* エッジは非表示 */
  );
  mask-border-slice: 30;
  mask-border-width: 30px;
  mask-border-mode: luminance;

  /* Safari対応 */
  -webkit-mask-border-source: radial-gradient(
    ellipse at center,
    white 60%,
    gray 80%,
    black 100%
  );
  -webkit-mask-border-slice: 30;
  -webkit-mask-border-width: 30px;
}

装飾的なカードデザイン

波線パターンのマスクボーダーを持つカードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>装飾カード - mask-border-mode</title>
  <style>
    .decorative-card {
      width: 350px;
      padding: 25px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-family: 'Noto Sans JP', sans-serif;

      /* 波線パターンのマスクボーダー */
      mask-border-source: url('wave-border.svg');
      mask-border-slice: 30;
      mask-border-width: 15px;
      mask-border-repeat: round;

      /* アルファモード（SVGの透明部分を利用） */
      mask-border-mode: alpha;

      /* Safari対応 */
      -webkit-mask-border-source: url('wave-border.svg');
      -webkit-mask-border-slice: 30;
      -webkit-mask-border-width: 15px;
      -webkit-mask-border-repeat: round;
    }

    .decorative-card h3 {
      margin: 0 0 15px;
      font-size: 1.5rem;
    }

    .decorative-card p {
      margin: 0;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="decorative-card">
    <h3>特別なお知らせ</h3>
    <p>mask-border-modeを使用して、要素のボーダーに装飾的なマスク効果を適用しています。</p>
  </div>
</body>
</html>

ショートハンド記法での使用

mask-borderショートハンドプロパティでは、最後にモードを指定できます。

/* ショートハンド記法 */
.shorthand-example {
  /* source / slice / width / outset repeat mode */
  mask-border:
    url('border.png')      /* source */
    30                     /* slice */
    / 20px                 /* width */
    / 5px                  /* outset */
    round                  /* repeat */
    luminance;             /* mode */

  /* Safari対応 */
  -webkit-mask-border:
    url('border.png') 30 / 20px / 5px round luminance;
}

/* よく使う省略形 */
.common-shorthand {
  /* source, slice, width, repeat, mode を指定 */
  mask-border: url('border.png') 25 / 15px round alpha;
}

ブラウザ対応とフォールバック

mask-border-modeは比較的新しいプロパティで、ブラウザのサポート状況に注意が必要です。

現在のブラウザ対応状況

ブラウザ対応状況
Safari-webkit- プレフィックス付きで対応
Chrome部分的対応（フラグが必要な場合あり）
Firefox対応作業中
EdgeChromiumベースは部分的対応

フォールバック付きの実装

.with-fallback {
  /* フォールバック: 通常のボーダー */
  border: 3px solid #667eea;
  border-radius: 8px;

  /* mask-border-modeをサポートするブラウザ向け */
  @supports (mask-border-mode: alpha) or
            (-webkit-mask-border-source: url('')) {
    border: none;

    mask-border-source: url('decorative-border.png');
    mask-border-slice: 30;
    mask-border-width: 15px;
    mask-border-repeat: round;
    mask-border-mode: alpha;

    -webkit-mask-border-source: url('decorative-border.png');
    -webkit-mask-border-slice: 30;
    -webkit-mask-border-width: 15px;
    -webkit-mask-border-repeat: round;
  }
}

プログレッシブエンハンスメント

/* 基本スタイル（すべてのブラウザ） */
.enhanced-border {
  width: 300px;
  padding: 20px;
  background: white;
  border: 2px dashed #999;
}

/* Safari対応 */
@supports (-webkit-mask-border-source: url('')) {
  .enhanced-border {
    border: none;
    -webkit-mask-border-source: url('fancy-border.png');
    -webkit-mask-border-slice: 25;
    -webkit-mask-border-width: 12px;
    -webkit-mask-border-repeat: round;
    /* mode指定なしでデフォルトのalpha */
  }
}

/* 標準仕様対応ブラウザ */
@supports (mask-border-mode: luminance) {
  .enhanced-border {
    border: none;
    mask-border-source: url('fancy-border-grayscale.png');
    mask-border-slice: 25;
    mask-border-width: 12px;
    mask-border-repeat: round;
    mask-border-mode: luminance;
  }
}

alphaとluminanceの使い分け

alphaモードが適している場合

  • PNG画像を使用する場合: 透明部分を持つPNG画像をマスクとして使用
  • SVGを使用する場合: 透明度情報を含むSVGマスク
  • 複雑な形状のマスク: 透明度で定義された複雑なパターン
  • 半透明効果が必要な場合: グラデーション透過などの効果

luminanceモードが適している場合

  • グレースケール画像を使用する場合: 白黒の濃淡でマスクを定義
  • 写真をマスクに使用する場合: 写真の明暗をマスクとして活用
  • コントラストベースのマスク: 明暗差を利用したエッジ効果
  • 既存のモノクロ画像の再利用: 透明度情報がない画像を活用

使用上の注意点

パフォーマンスへの配慮

/* 推奨: 適切なサイズの画像を使用 */
.optimized {
  /* SVGやWebP形式を推奨 */
  mask-border-source: url('optimized-border.svg');
  mask-border-mode: alpha;
}

/* 避けるべき: 高解像度画像 + luminanceモード */
.not-recommended {
  /* luminanceモードは計算コストが高い */
  mask-border-source: url('large-photo.jpg');
  mask-border-mode: luminance;
}

アクセシビリティ

マスクボーダーは視覚的な装飾のため、重要な情報をマスクで隠さないように注意しましょう。

/* 装飾として使用（コンテンツに影響なし） */
.accessible-design {
  /* マスクボーダーが機能しなくても内容は読める */
  mask-border-source: url('decorative.png');
  mask-border-slice: 20;
  mask-border-width: 10px;
  mask-border-mode: alpha;

  /* 十分なパディングで内容を保護 */
  padding: 40px;
}

まとめ

mask-border-modeプロパティを使用することで、マスクボーダーの描画方法を細かく制御できます。

ポイント

  • 2つのモード: alpha（透明度ベース）とluminance（輝度ベース）から選択
  • デフォルトはalpha: 透明度情報を持つ画像（PNG、SVG）に最適
  • luminanceの活用: グレースケール画像や写真の明暗をマスクとして利用可能
  • ブラウザ対応: 現時点では限定的なため、フォールバックの用意が重要
  • パフォーマンス: luminanceモードは計算コストが高いため、最適化を考慮

今後のブラウザサポートの拡大により、mask-border-modeはWebデザインにおける表現の幅をさらに広げる重要なプロパティになることが期待されます。

参考文献

円