【保存版】CSSデザイン・レイアウト完全ガイド（初学者向け備忘録）

CSSの役割と基本文法
1. 基本の書き方
HTMLにCSSを適用する3つの方法
セレクタの種類（狙い撃ちの極意）
ボックスモデル（CSS最大の難所）
よく使うプロパティ図鑑
1. テキスト・背景
2. サイズ・枠線
モダンなレイアウト手法（Flexbox）
レスポンシブ対応（メディアクエリ）
実装をスムーズにするTips
1. まとめ

CSSの役割と基本文法

CSSは「どこの（セレクタ）」「何を（プロパティ）」「どうするか（値）」を指定します。

基本の書き方

CSS

h1 {
  color: blue;        /* 文字の色を青に */
  font-size: 24px;    /* 文字の大きさを24pxに */
}

セレクタ: 適用する対象（例：h1, p, .class名）
プロパティ: 変えたい項目（例：color, margin）
値: 具体的な指定（例：red, 16px）

HTMLにCSSを適用する3つの方法

基本的には**「外部ファイル（3）」**が推奨されます。

インライン: タグに直接書く（管理が大変なので非推奨）
内部参照: HTMLの<head>内に<style>タグで書く
外部参照（推奨）: 別の.cssファイルを作り、HTMLから読み込むHTML<link rel="stylesheet" href="style.css">

セレクタの種類（狙い撃ちの極意）

「どの要素にデザインを当てるか」を決める重要なルールです。

種類	書き方	特徴
要素名	`p { ... }`	すべての`<p>`タグに適用
クラス名	`.title { ... }`	`class="title"` をつけた要素だけに適用（最頻出）
ID名	`#main { ... }`	`id="main"` をつけた特定の1箇所だけに適用
子孫セレクタ	`div p { ... }`	`div`の中にある`p`だけに適用

ボックスモデル（CSS最大の難所）

HTMLのすべての要素は「四角い箱（ボックス）」に入っています。この構造を理解しないと、余白の調整でつまずきます。

Content: 文字や画像そのもの
Padding: 枠線の内側の余白
Border: 枠線
Margin: 枠線の外側の余白（隣の要素との距離）

よく使うプロパティ図鑑

テキスト・背景

color: 文字色
font-family: フォントの種類
text-align: 文中の配置（left, center, right）
background-color: 背景色
background-image: 背景画像

サイズ・枠線

width / height: 幅と高さ
border: 線の太さ・種類・色（例: 1px solid #000）
border-radius: 角丸にする（50%で円形に）

モダンなレイアウト手法（Flexbox）

現在のWeb制作で「横並び」を作るための必須技術です。親要素に display: flex; を書くだけで魔法のように並びます。

CSS

.container {
  display: flex;           /* 横並びにする */
  justify-content: center; /* 左右中央に寄せる */
  align-items: center;     /* 上下中央に寄せる */
  gap: 20px;               /* 要素間の隙間 */
}

レスポンシブ対応（メディアクエリ）

スマホで見ても崩れないサイトを作るための必須テクニックです。

CSS

/* PC向けの基本スタイル */
.box { width: 100%; }

/* 画面幅が768px以下（スマホ等）の時に適用 */
@media screen and (max-width: 768px) {
  .box {
    background-color: lightblue; /* スマホの時だけ背景を変える */
  }
}