記事の一覧ページ

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[ページの見出し]

例：お知らせ・コラム

[記事のリスト]

タイトル・カテゴリ・日付・サムネイル・概要を6件程度

[カテゴリのリスト]

カテゴリ名と件数

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「記事の一覧ページ」を実装してください。

## 表示内容
- ページの見出し：[ページの見出し]
- 記事：
[記事のリスト]
- サイドバー：カテゴリ（[カテゴリのリスト]）、人気の記事（3件）
- ページ送り

## レイアウト
- PC：2カラム。左（約70%）に記事のリスト、右（幅 280px）にサイドバー。間隔 48px
- スマホ：記事のリスト → サイドバー の順に縦並び
- 記事の各行：左にサムネイル（幅 200px、縦横比 16:10）、右に カテゴリ → タイトル → 概要 → 日付
- スマホでは、サムネイルを幅 104px にし、概要を隠す
- 行の間隔 24px、あいだに 1px solid #E2E8F0

## デザイン
- ページの見出し：28px、font-weight 700、色 #1B2A44
- カテゴリ：12px、font-weight 700、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px
- タイトル：17px、font-weight 700、line-height 1.6、色 #1B2A44、2行で省略
- 概要：14px、line-height 1.8、色 #5F6D84、2行で省略
- 日付：13px、色 #8A96AA
- サムネイル：角丸 8px、object-fit: cover
- hover：タイトルを #1463F0 にし、サムネイルを 1.03倍に
- サイドバーの見出し：15px、font-weight 700、下に 2px solid #1463F0
- カテゴリの行：14px、色 #47566E、右に件数。行の下に 1px solid #EDF1F7

## マークアップ
- 記事のリストは ul / li、各記事は article。タイトルは h2 のなかの a 要素にし、行全体をクリックできるようにする
- サイドバーは aside、カテゴリは nav（aria-label="カテゴリ"）
- 日付は time 要素（datetime 属性つき）
- サムネイルの alt は空にする。2件目以降は loading="lazy"

## アクセシビリティ
- いま選んでいるカテゴリに aria-current="page"
- hover の動きは prefers-reduced-motion で無効化

## 出力形式
- [使用技術]のコードを1つ出力