概要

CSSのmask-border-repeatプロパティは、マスクボーダーの画像をどのように繰り返すかを設定するためのプロパティです。このプロパティを使用すると、マスクボーダーの画像がどのように適用されるかを制御し、デザインの意図に沿った視覚的な効果を作り出すことができます。繰り返し方法の設定により、ボーダーの見た目が大きく変わるため、スタイリングの重要なポイントとなります。

mask-border-repeatの基本構文

selector {
  mask-border-repeat: value;
}
  • valueには以下のオプションがあります：
    • stretch
      画像を引き伸ばしてボーダー全体に適用します。
    • repeat
      画像を繰り返して適用します。余ったスペースは切り捨てられます。
    • round
      画像を繰り返して適用し、余ったスペースが生じないように画像のサイズを自動調整します。
    • space
      画像を繰り返し、余ったスペースを均等に分配して配置します。

使用例

基本的な使用例 - マスクボーダーの繰り返し方法を設定する

以下の例では、mask-border-repeatを使用して、マスクボーダーの画像の繰り返し方法を設定しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>mask-border-repeatの使用例</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        mask-border-source: url("mask-image.png"); /* マスクボーダーのソース画像を指定 */
        mask-border-slice: 30; /* ボーダーのスライス設定 */
        mask-border-width: 20px; /* ボーダーの幅 */
        mask-border-repeat: repeat; /* 画像を繰り返して適用 */
        background-color: #4682b4; /* 背景色 */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

解説

  • mask-border-source: url('mask-image.png');
    マスクボーダーの画像ソースを指定します。
  • mask-border-slice: 30;
    画像の30%をスライスしてボーダーとして使用します。
  • mask-border-repeat: repeat;
    マスクボーダーの画像を繰り返して適用します。画像が繰り返されることで、ボーダーに連続的なデザインが適用されます。

応用例 - roundとspaceを使った繰り返し設定

mask-border-repeatのroundやspaceオプションを使用することで、ボーダーの見た目をさらに調整できます。以下の例では、roundとspaceの使い方を示しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>roundとspaceのmask-border-repeat使用例</title>
    <style>
      .container {
        display: flex;
        gap: 20px;
      }
      .box-round {
        width: 200px;
        height: 200px;
        mask-border-source: url("mask-image.png"); /* マスクボーダーの画像を指定 */
        mask-border-slice: 20; /* 画像の20%をスライス */
        mask-border-width: 15px; /* ボーダーの幅 */
        mask-border-repeat: round; /* 繰り返しながら、サイズを調整して余りが出ないように適用 */
        background-color: #ff6347; /* 背景色 */
      }
      .box-space {
        width: 200px;
        height: 200px;
        mask-border-source: url("mask-image.png"); /* マスクボーダーの画像を指定 */
        mask-border-slice: 20; /* 画像の20%をスライス */
        mask-border-width: 15px; /* ボーダーの幅 */
        mask-border-repeat: space; /* 繰り返しながら、余白を均等に分配して適用 */
        background-color: #6a5acd; /* 背景色 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box-round">round: 余りを調整</div>
      <div class="box-space">space: 余白を均等に分配</div>
    </div>
  </body>
</html>

解説

  • mask-border-repeat: round;
    ボーダー画像が余りのないように調整されて繰り返され、画像がきれいにフィットします。デザインを整えたい場合に便利です。
  • mask-border-repeat: space;
    画像が繰り返され、余ったスペースが均等に分配されます。ボーダーが間隔を持ちながら配置されるため、軽やかな見た目になります。

mask-border-repeatの注意点

  • 繰り返しの設定による見た目の変化
    mask-border-repeatの設定によって、ボーダーの見た目が大きく変わります。repeatを使うと画像が途切れる場合があり、stretchでは画像が歪むことがあります。適切な設定を選択することでデザインの一貫性を保つことが重要です。
  • 画像の選択が重要
    繰り返し設定に合った画像を選ぶことが大切です。画像のサイズやデザインによっては、繰り返した際に不自然な見た目になることがありますので、適切な画像の選定が求められます。
  • ブラウザサポート
    mask-border-repeatは比較的新しいプロパティで、古いブラウザではサポートされていない場合があります。使用する前にターゲットとするブラウザの互換性を確認することが重要です。

まとめ

mask-border-repeatプロパティは、マスクボーダーの繰り返し方法を柔軟に設定でき、ボーダーの見た目を大きく変えることができます。stretch、repeat、round、spaceのオプションを駆使することで、ボーダーを引き伸ばしたり、繰り返したり、余白を調整したりして、デザインの意図に合わせた見た目を実現します。適切な繰り返し方法を選ぶことで、デザイン全体のバランスが整い、視覚的に洗練されたレイアウトを作り出すことができます。

参照:

`CSS` mask-border-repeat property - MDN Web Docs