動的要素

								
<!-- バナー通知の基本構造 -->
<div class="banner-notification banner-top" id="topBanner">
  <div class="banner-content">
    <div class="banner-icon">
      <i class="ri-information-line"></i>
    </div>
    <div class="banner-message">
      <p>バナーメッセージがここに表示されます。</p>
    </div>
    <div class="banner-actions">
      <button class="banner-action">詳細</button>
      <button class="banner-close"><i class="ri-close-line"></i></button>
    </div>
  </div>
</div>

<!-- 正方形バナーの基本構造 -->
<div class="banner-notification banner-square" id="squareBanner">
  <div class="banner-content">
    <div class="banner-icon">
      <i class="ri-gift-line"></i>
    </div>
    <div class="banner-message">
      <p><strong>特別オファー</strong></p>
      <p>今だけの限定キャンペーン実施中！</p>
    </div>
    <div class="banner-actions">
      <button class="banner-action">詳細を見る</button>
      <button class="banner-close"><i class="ri-close-line"></i></button>
    </div>
  </div>
</div>

<!-- トースト通知の基本構造 -->
<div class="toast-container toast-top-right">
  <div class="toast toast-info">
    <div class="toast-icon">
      <i class="ri-information-line"></i>
    </div>
    <div class="toast-content">
      <div class="toast-header">
        <h4>情報</h4>
        <span class="toast-time">たった今</span>
      </div>
      <div class="toast-body">
        <p>トーストメッセージがここに表示されます。</p>
      </div>
    </div>
    <button class="toast-close"><i class="ri-close-line"></i></button>
  </div>
</div>

<!-- 正方形トースト通知の基本構造 -->
<div class="toast toast-info toast-square" id="squareToast">
  <div class="toast-icon">
    <i class="ri-information-line"></i>
  </div>
  <div class="toast-content">
    <div class="toast-header">
      <h4>お知らせ</h4>
    </div>
    <div class="toast-body">
      <p>これは正方形のトースト通知です。重要なお知らせに使用します。</p>
    </div>
  </div>
  <button class="toast-close"><i class="ri-close-line"></i></button>
</div>

<!-- JavaScript での表示制御 -->
// バナー表示
document.getElementById('showBanner').addEventListener('click', function() {
  const banner = document.getElementById('myBanner');
  banner.classList.add('show');
});

// トースト表示
function showToast(type, title, message) {
  const toast = createToastElement(type, title, message);
  document.querySelector('.toast-container').appendChild(toast);
  
  // 表示アニメーション
  setTimeout(() => {
    toast.classList.add('show');
  }, 10);
}