第10回: 実践（前編）：小規模Webサイトの設計とマークアップ

① デザインカンプを“読む”練習

• 見出しはどこ？
• 文章はどこ？
• ボタンは何回出てくる？
• 繰り返し構造は？
• 共通になりそうな要素は？

デザインは「見る」ではなく「読む」。

② サイト構造を考える

• 何ページ必要？
• トップはどれ？
• 共通ヘッダー・フッターは？
• ページ内リンク？ページ間リンク？

いきなりコーディングしない。

③ どのタグでマークアップするか

• section
• div
• h1〜h3
• p
• ul / li

正解は1つじゃない。 でも「理由がある選択」をする。

④ class設計・命名の考え方

IDとclassの違い

• ID：ページ内で1つ
• class：複数使える

classは「見た目・役割」の単位。

他ページでも使えそうか？ を常に考える。

⑤ 共通パーツの整理

• ボタン
• 見出し
• セクション余白

先に共通スタイルを決める。

⑥ デザインカンプから素材を書き出す

• 画像を切り出す
• SVGでいける？画像？
• 書き出しサイズは？

2倍サイズで書き出すのが基本。

⑦ フォントサイズ・カラーを読み取る

• 見出しと本文のサイズ差
• カラーは変数化（SCSS）

$primary-color: #333;
$accent-color: #ff6600;

⑧ ページ内リンクの実装

<a href="#about">About</a>

<section id="about">

スムーススクロールはCSSでも可能。

html {
  scroll-behavior: smooth;
}

⑨ コーディング開始

• まずはトップページから
• ざっくり組む
• 最後に微調整

最初から完璧を目指さない。

この回のまとめ

• いきなりコードを書かない
• 設計してから作る
• 共通化を意識する
• 複数ページを想定する