Agohige

HTML 学び直しページ

まずはHTMLの骨組みを丁寧に作って、次にCSSで整えます。最初は見た目より構造優先。

目標

セマンティックなHTML → レスポンシブCSS → ちょいJS → 公開、の流れを定着。

今日のタスク

  1. h1が1つだけか確認
  2. 各セクションの見出しがh2か確認
  3. Article内の小見出しをh3に統一

作法

  • 余白は8px刻み
  • レイアウトはFlex/Grid優先
  • positionは最後

About

プロフィール欄。ここは後でポートフォリオにしていく想定。 「何ができるか」を短く書くと案件で刺さる。

できること
HTML / CSS（レスポンシブ） / JavaScript（開閉・フォーム）/GitHub Vercel連携
公開
公開ページ（Vercel）

Works

学習で作ったUI・実装を、成果物としてまとめています。

レスポンシブ＋レイアウト

Flex / Grid と余白スケールで、PC/スマホで崩れない構成に整理。

  • Grid：カード一覧（3→2→1列）
  • 余白：CSS変数で管理

モバイルメニュー

開閉（is-open）と aria-expanded を同期し、リンク押下で閉じる改善も追加。

  • class切替：is-open
  • a11y：aria-controls / aria-expanded

フォーム（ダミー送信）

必須・形式チェック、エラー表示、最初のエラーへフォーカス移動を実装。

  • 対象：name / email / subject
  • a11y：aria-describedby / aria-invalid / role="alert"
Liveを見る GitHubを見る

記事サンプル：セマンティックHTMLの練習

· カテゴリ：学習ログ

ここに本文。まずは段落、リンク、強調、リスト、画像、引用など、 よく使う要素を一通り入れていく。

よく使う要素

  • strong：重要な強調
  • em：文脈上の強調
  • リンク：導線を作る

リンクとリストの練習

  1. HTMLの構造を整える
  2. CSSでレイアウトを作る
  3. JSで最小の動きを足す

引用（blockquote）の練習

他人の言葉や文章を引用するときは blockquote を使う。

HTMLは骨格。骨格が良いとCSSがラク。

学習メモ

コード表示（pre / code）の練習

コードをそのまま表示したいときは pre / code を使う。

<nav aria-label="主要ナビゲーション">
  <ul>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
バーニーズマウンテンドッグのハル君が座っている写真
バーニーズマウンテンドッグのハル君

HTMLは骨格。骨格が良いとCSSがラク。

HTMLチェックリスト

  • h1は1つ、セクション見出しはh2、小見出しはh3
  • 画像には適切なaltがある
  • フォームはlabelとidが紐付いている
  • navにaria-labelがある
  • スキップリンクがある

Contact（フォーム練習）

送信はダミー。まずはラベルと必須、エラー表示の土台だけ作る。