このステップの目的
HTMLで作った骨組みに、CSSで基本的なデザイン（サイト全体のルール）を適用します。
「リセットCSS」でブラウザごとの表示のズレをなくし、共通のスタイルを設定することで、この後の装飾作業がぐっと楽になります。
checklistやることリスト
- `style.css`を作成し、HTMLから読み込む
- リセットCSSを導入して、ブラウザごとの表示の差異をなくす
- サイト全体に適用する共通のスタイルを設定する（フォント、文字色、背景色など）
- `display: flex;` や `margin`, `padding` を使って、大枠のレイアウトを組む
tips_and_updatesポイント解説
リセットCSSとは？
ブラウザ（Chrome, Safariなど）は、それぞれ独自のCSSをデフォルトで持っています。そのため、何もしないと見出しの大きさや余白がブラウザごとに微妙に異なって表示されてしまいます。
「リセットCSS」は、これらのブラウザ独自のスタイルを一度リセット（無効化）し、どのブラウザでも同じ見た目でスタートするための、おまじないのようなものです。
CSSの基本構成（例）
/* style.css */
/* --- 1. リセットCSS --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* --- 2. 共通スタイル --- */
body {
font-family: sans-serif;
background-color: #fff;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* --- 3. パーツごとのスタイル --- */
.site-header { ... }
.feature-card { ... }
大枠のレイアウトを組む（実装例）
サイトの骨格となる、ヘッダー・メイン・フッターのレイアウトや、メインコンテンツ内の2カラムレイアウトなどを、Flexboxを使って作成してみましょう。
<!-- HTMLの構造 -->
<body>
<header class="site-header">ヘッダー</header>
<div class="site-content">
<main class="main-area">メインコンテンツ</main>
<aside class="sidebar-area">サイドバー</aside>
</div>
<footer class="site-footer">フッター</footer>
</body>
<!-- CSSの指定 -->
/* body全体をFlexコンテナにしてフッターを最下部に固定 */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* メインコンテンツエリアが残りの高さをすべて使う */
.site-content {
flex: 1;
display: flex; /* メインとサイドバーを横並びに */
}
/* メインエリアが残りの幅をすべて使う */
.main-area {
flex: 1;
}
/* サイドバーの幅を固定 */
.sidebar-area {
width: 300px;
}
warningよくある間違いと対策
- CSSが効かない！
- HTMLからのパス指定が間違っている（
href="css/style.css"など）、またはクラス名・ID名のスペルミスがほとんどです。DevToolsで確認しましょう。 - レイアウトが崩れる
- 親要素の幅（
width）と、子要素の幅や余白（margin/padding）の合計が100%を超えていないか確認しましょう。box-sizing: border-box;の指定が便利です。 - スマホで見るとはみ出る
- PC表示の幅（例:
width: 960px;）を固定で指定しているのが原因です。max-width: 960px; width: 100%;のように、最大幅を指定する方法が有効です。
チェックポイント
✅ サイト全体の背景色や文字色が統一されているか？
✅ ヘッダー、メイン、フッターが意図した位置にレイアウトされているか？
✅ `container`クラスなどで、コンテンツの横幅が適切に制御されているか？