SSBM - モーダルウィンドウの統一標準

25/12/30

4 分。

定義

SSBM規格は、バーガーメニューのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています。

構造とセマンティクス

モバイルメニューは、要素の正しい配置と構造を考慮して構築する必要があります：

メニューの配置： position: fixed、height: 100%、width: 100% を使用し、ブラウザのパネルやツールバーを考慮した上で、メニューが画面全体を覆うようにします。
オーバーレイ（背景）： position: fixed を指定した独立した要素として作成します。これはページを覆い隠し、クリック時にメニューを閉じるために使用されます；
**開閉アニメーション：**単純な表示・非表示が必要な場合は、transform: translateX/Y()ではなく、left、right、top、bottomプロパティによる移動を使用してください；
画面の境界： メニューは viewport の範囲外にはみ出してはいけません。特に小さな画面では注意が必要です。

HTMLの例：

<button class="burger-btn">☰</button>
<div class="mobile-menu">
  <div class="overlay"></div>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

CSSの例：

.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100dvb;
  background: white;
  transition: left 0.3s;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-menu.active .overlay {
  opacity: 1;
  visibility: visible;
}

アクセシビリティ

ハンバーガーボタンには aria-label を設定する必要があります。
メニューの状態（展開中／折りたたみ中）を示すために aria-expanded を追加できます。

<button class="burger-btn" aria-label="メニューを開く" aria-expanded="false">☰</button>

インタラクティブ性と視覚的な反応

閉じるトリガー： バーガーボタンをクリック、メニュー項目を選択、またはオーバーレイをクリックするとメニューが閉じます；
スクロールの固定： メニューが開いている間は、<body> に overflow: hidden を追加し、ページの位置を固定してください；
アニメーション： メニューでは left、bottom、right、または top のいずれかのみを、オーバーレイでは opacity をアニメーションさせてください。

JavaScript によるクラスの切り替え：

const btn = document.querySelector('.burger-btn');
const menu = document.querySelector('.mobile-menu');
const overlay = menu.querySelector('.overlay');

btn.addEventListener('click', () => menu.classList.toggle('active'));
overlay.addEventListener('click', () => menu.classList.remove('active'));

記事は随時更新されます

類似カテゴリ:

基準
SSA - アコーディオンの統一標準
SSA標準は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定義しています
255
26/01/19
5 分。
アドバイス
ウェブサイトにおける悪い慣行
ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogle・Yandexでの検索順位を低下させる理由
76
25/12/30
2 分。
基準
SSP - ページネーションの統一規格
SSP標準は、ページ間ナビゲーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定義します
168
25/12/30
3 分。
基準
SSPS - プロジェクト構造の統一基準
SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています
117
25/12/30
3 分。
基準
SSB-C - パンくずリストの統一規格
SSB-C規格は、パンくずリストの意味論、アクセシビリティ、および動作ロジックに関する要件を規定しています
3
25/12/30
5 分。
基準
SSMW - モーダルウィンドウの統一標準
SSMW標準は、モーダルウィンドウのセマンティクス、アクセシビリティ、動作ロジックに関する要件を定義します
3
25/12/30
3 分。