MVでマスクを使った使用の方法

基本構造

HTML

<div class="mv_top_content">
            <ul>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv1.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv1_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv1.png" alt="MV画像1" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv2.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv2_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv2.png" alt="MV画像2" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv3.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv3_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv3.png" alt="MV画像3" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv4.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv4_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv4.png" alt="MV画像4" class="mv_image" />
                </picture>
              </li>
            </ul>
          </div>

＊Pictureを使いレスポンシブルを容易にする。



css


.mv_top_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden; /* 横スクロールを明示的に防止 */
  -webkit-mask-image: url("../img/mask.png");
  -webkit-mask-size: 100% 100%;
  mask-image: url("../img/mask.png");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center center;
}

.mv_top_content ul {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
}

画像の中に文字を入れるときはliner-gradieiteで画像を少しトーンを暗めに

.mv_top_content ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent);
  z-index: 2; /* 画像の上に配置 */
  pointer-events: none; /* クリックイベントを通過させる */
}


重要なポイント
1. aspect-ratioで形状を定義

コンテンツの縦横比を固定（今回は2:1）
これがないとマスクの形状が画面サイズで歪む
必ず設定すべき

2. mask-size: 100% 100%の役割

幅と高さ両方を指定することでマスク画像をコンテンツに完全フィット
100%（幅のみ）だとアスペクト比が崩れる
containやcoverはマスク画像の元のアスペクト比を保持するため、コンテンツと比率が異なると角が変形する



3. ベンダープレフィックス

-webkit-mask-image: url("...");  /* Safari, Chrome用 */
-webkit-mask-size: 100% 100%;
mask-image: url("...");           /* 標準 */
mask-size: 100% 100%;

両方記述が必須


4. レスポンシブ対応

タブレットは

.mv_top_content {
    -webkit-mask-image: url("../img/mask_sp.png");
    mask-image: url("../img/mask_sp.png");
    mask-position: unset;
  }
  .mv_top_content ul {
    height: 100vh !important; /* スマホ用に高さを調整 */
    aspect-ratio: unset !important; /* 768px以下ではaspect-ratioを解除 */
  }

スマホは

@media screen and (max-width: 500px) {
    .mv_top_content ul {
      height: min(150vw, 750px) !important;
      aspect-ratio: 16 / 9 !important; /* 16:9の比率で表示 */
    }
  }



推奨される組み合わせ:

aspect-ratioでコンテンツの形状を定義
mask-size: 100% 100%でマスクをフィット
PC/SP用に異なるマスク画像を用意
❌ 避けるべき:

aspect-ratioなしでマスクを使用
mask-size: 100%（高さ省略）
mask-size: contain/cover（アスペクト比が異なる場合）
まとめ
画面サイズが変わってもマスクの丸みや形状を一定に保つには、
aspect-ratioとmask-size: 100% 100%の組み合わせが必須です。