ShizukoYamamura Web Design (HTML/CSS) スキル
綺麗でモダン、かつ保守しやすく、後からJavaScriptやWebフレームワークと組み合わせやすいHTML/CSSを書くためのスキル。以下のルールを厳格に守ること。
厳格なルール
1. モダンなレイアウトとレスポンシブ対応
- 古い手法（
floatレイアウトの乱用、<table>によるレイアウト組みなど）を避ける。 - レイアウトは Flexbox と CSS Grid を適材適所で使い分ける。
- 1次元（横並び/縦並びの並び）には Flexbox。
- 2次元（行と列の両方を制御するグリッド・カードレイアウトなど）には CSS Grid。
- モバイルファーストで設計する。ベースのスタイルはスマホ幅向けに書き、
@media (min-width: ...)で画面が広い場合のスタイルを上書きしていく。 - スマホ・タブレット・PC のいずれでもレイアウトが崩れないよう、メディアクエリ（
@media）を適切に設定する。 - 固定ピクセルに頼りすぎず、
rem/%/clamp()/min()/max()/frなどの相対・可変単位を活用する。
2. コンポーネント指向と保守性
- CSSのクラス名は役割が分かりやすい一貫した命名規則を用いる（例: BEMの
block__element--modifier）。スタイルが他の要素と衝突しないよう、汎用的すぎる名前を避ける。 - 将来的に Next.js や Angular などのモダンなフレームワークにそのまま移植しやすいよう、部品（コンポーネント）単位で独立した綺麗なHTML構造を意識する。各コンポーネントは自己完結し、外部に依存しない形にする。
- 色・余白・フォントサイズなどの繰り返し使う値は CSSカスタムプロパティ（
:rootの変数） に切り出し、デザインの一貫性と変更容易性を確保する。 - 過度なネストや不要な
divの入れ子を避け、最小限の要素で構造を表現する。
3. セマンティックHTMLとUI/UX
- 単なる
divの羅列にせず、<header>/<nav>/<main>/<section>/<article>/<aside>/<footer>などの意味論的なタグを正しく使用する。 - 見出しは
<h1>〜<h6>を階層通りに使い、ボタンは<button>、リンクは<a>を使う（divにクリックイベントを付けない）。 - アクセシビリティに配慮する（
alt属性、labelと入力欄の関連付け、十分なコントラスト比、必要に応じたaria-*属性）。 - ユーザーの操作感（UX）を向上させるため、ボタンやリンクには自然なホバーアニメーション（
transition）を付与する。transition: all 0.2s ease;のように適度な時間とイージングを設定し、:hover/:focus-visibleの状態変化を心地よくする。
CSSをまとめる場所
別ファイル（styles.css など）にするか、<style> タグにまとめるかはユーザーの指示に従う。指示がない場合は、まず希望を確認する。
出力フォーマット
成果物は必ず以下の構成で、分かりやすく提示する。
🎨 デザイン構成:
（どのようなレイアウト方針・カラーリングで組んだかの解説）
📄 HTMLコード:
（HTMLのコードブロック）
💅 CSSコード:
（CSSのコードブロック。別ファイルか style タグかはユーザー指示に従う）
チェックリスト（出力前に確認）
-
floatレイアウトを使わず Flexbox / CSS Grid を適切に使い分けたか - モバイルファーストで
@mediaを設定し、各画面幅で崩れないか - クラス名は一貫した命名規則で衝突しないか
- コンポーネント単位で独立し、フレームワークへ移植しやすいか
-
div乱用でなくセマンティックタグを正しく使ったか - ボタン・リンクに
transitionでホバーアニメーションを付けたか - 出力は「🎨デザイン構成 → 📄HTML → 💅CSS」の順になっているか