お知らせ一覧パーツ
簡易なブログによる「お知らせ一覧」の代わりに使えるパーツを紹介します。以下を参考に、改良してみてください。
お知らせ一覧(1)
お知らせ一覧セクションを作る方法は、以下の通りです。
ヒーローセクションの次に「お知らせセクション」を作ってください。
お知らせセクションについて
- 全体として、コンパクト（縦に長くならないようにする）
- お知らせ見出し
- ワンカラムデザイン
- お知らせは、縦のステッパーで、日付を入れる
- タイトル(濃い文字)、概要（薄い文字）で表す（１行で）
- クリックすると、ポップアップモーダル・ドキュメントで内容を表示
ダミーとして、４つのお知らせ（過去に行った）を入れてください。
なお、セクションを追加したことによって、次に続くセクションの背景の修正が必要なら適切に行ってください。お知らせ一覧(2)
ヒーローセクションの次に「お知らせセクション」を作ってください。
- お知らせセクションでは、「タイムライン」のデザインを使ってください
- タイムラインのアイコンは、カレンダーを設定してください
- タイムラインのアイコンと、それに続く日付が重ならないように注意してください
- ダミーとして、４つのお知らせ（過去に行った）を入れてください。
なお、セクションを追加したことによって、次に続くセクションの背景の修正が必要なら適切に行ってください。
以下のコードを参考にしてください。
<!-- お知らせセクション（タイムラインデザイン） -->
<section id="news" class="py-16 md:py-24 bg-white">
<div class="max-w-4xl mx-auto px-4" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-900">
お知らせ
</h2>
<!-- タイムラインコンテナ -->
<ol class="relative border-l border-gray-300 md:border-l-2 md:border-cyan-400">
<!-- お知らせアイテム1（ボタン付き） -->
<li class="mb-10 md:mb-12 relative pl-12 md:pl-14" data-aos="fade-up" data-aos-delay="100">
<!-- カレンダーアイコン -->
<div class="absolute left-0 top-1 w-10 h-10 bg-cyan-400 rounded-full border-4 border-white flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
</svg>
</div>
<!-- コンテンツエリア -->
<div>
<time class="mb-3 text-sm font-normal leading-none text-gray-500 block">2025年10月</time>
<h3 class="text-lg font-semibold text-slate-900 mb-2">お知らせタイトル 1</h3>
<p class="mb-4 text-base font-normal text-gray-700">
お知らせの詳細内容をここに記述します。ユーザーに伝えたい情報を分かりやすく記載してください。
</p>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-cyan-600 bg-white border border-cyan-300 rounded-lg hover:bg-cyan-50 transition duration-300">
詳細を見る
<svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</li>
<!-- お知らせアイテム2（ボタン付き） -->
<li class="mb-10 md:mb-12 relative pl-12 md:pl-14" data-aos="fade-up" data-aos-delay="200">
<!-- カレンダーアイコン -->
<div class="absolute left-0 top-1 w-10 h-10 bg-cyan-400 rounded-full border-4 border-white flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
</svg>
</div>
<!-- コンテンツエリア -->
<div>
<time class="mb-3 text-sm font-normal leading-none text-gray-500 block">2025年9月</time>
<h3 class="text-lg font-semibold text-slate-900 mb-2">お知らせタイトル 2</h3>
<p class="mb-4 text-base font-normal text-gray-700">
お知らせの詳細内容をここに記述します。ユーザーに伝えたい情報を分かりやすく記載してください。
</p>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-cyan-600 bg-white border border-cyan-300 rounded-lg hover:bg-cyan-50 transition duration-300">
詳細を見る
<svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</li>
<!-- お知らせアイテム3（ボタン付き） -->
<li class="mb-10 md:mb-12 relative pl-12 md:pl-14" data-aos="fade-up" data-aos-delay="300">
<!-- カレンダーアイコン -->
<div class="absolute left-0 top-1 w-10 h-10 bg-cyan-400 rounded-full border-4 border-white flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
</svg>
</div>
<!-- コンテンツエリア -->
<div>
<time class="mb-3 text-sm font-normal leading-none text-gray-500 block">2025年8月</time>
<h3 class="text-lg font-semibold text-slate-900 mb-2">お知らせタイトル 3</h3>
<p class="mb-4 text-base font-normal text-gray-700">
お知らせの詳細内容をここに記述します。ユーザーに伝えたい情報を分かりやすく記載してください。
</p>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-cyan-600 bg-white border border-cyan-300 rounded-lg hover:bg-cyan-50 transition duration-300">
詳細を見る
<svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</li>
<!-- お知らせアイテム4（ボタンなし） -->
<li class="relative pl-12 md:pl-14" data-aos="fade-up" data-aos-delay="400">
<!-- カレンダーアイコン -->
<div class="absolute left-0 top-1 w-10 h-10 bg-cyan-400 rounded-full border-4 border-white flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
</svg>
</div>
<!-- コンテンツエリア -->
<div>
<time class="mb-3 text-sm font-normal leading-none text-gray-500 block">2025年7月</time>
<h3 class="text-lg font-semibold text-slate-900 mb-2">お知らせタイトル 4</h3>
<p class="text-base font-normal text-gray-700">
お知らせの詳細内容をここに記述します。ボタンが不要な場合はこのパターンを使用してください。
</p>
</div>
</li>
</ol>
</div>
</section>お知らせ(3)
ブログカード型のお知らせ。横スクロール型（ブラウザの戻る、進むを抑制）。
ヒーローセクションの下に、お知らせセクションを追加してください
- ブログカードのようなデザインにする（画像、タイトル、日付、概要）
- 横スクロールのカードによるスライダー
- ３カード程度見えている状態
- クリックすると詳細が、ポップアップモーダルドキュメントで表示される
- スクロールは、矢印キーをクリックする
- 横スワイプの場合、そのイベントを親要素に伝播しないようにしてください（ブラウザの戻る、進むが発生しないようにする）
ダミーで４つほどの架空のイベントを挿入してください。
なお、セクションを追加したことによって、次に続くセクションの背景の修正が必要なら適切に行ってください。