見出し・リード文・CTA2つのファーストビュー。背景はCSS変数で、グラデーションのままでも画像に差し替えても使えます。JavaScript不要。
レイアウトロゴとグローバルナビのヘッダー。狭い画面ではハンバーガーメニューに切り替わり、aria-expanded とキーボード操作にも対応しています。
レイアウトリンクを分類して並べる多カラムフッター。カラム数は auto-fit で自動調整され、狭い画面では自然に段組みが崩れます。JavaScript不要。
レイアウト前後リンクとページ番号のページネーション。現在地は aria-current、省略記号は読み上げ対象外にしています。JavaScript不要。
ナビゲーションネイティブの <dialog> を使ったモーダル。フォーカストラップと背面スクロールの抑制はブラウザ任せなので、JavaScriptは開閉の数行だけで済みます。
UIパーツdetails / summary だけで動くFAQアコーディオン。schema.org の FAQPage に対応し、JavaScriptは一切使っていません。
コンテンツ記事一覧向けのカードグリッド。カラム数は auto-fill で自動調整、画像は aspect-ratio で比率固定、カード全体がクリック領域になります。JavaScript不要。
コンテンツschema.org の BreadcrumbList に対応したパンくずリスト。区切り文字・色・余白はCSS変数で変更でき、折り返しと横スクロールの2パターンを用意しています。
ナビゲーション