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