🎨
CSS基礎
1週間 入門色、余白、フォント。見た目を整える。
概要
これは何？
CSSはWebページの見た目を決める言語です。色、サイズ、余白、配置などを指定します。HTMLに<style>タグで書くか、別ファイルに書いてlinkで読み込みます。
なぜ重要？
HTMLだけでは味気ないページになります。CSSで見やすく、使いやすくデザインできます。
何を学ぶか
- 色の指定（color, background-color）
- 余白（margin, padding）
- フォント（font-size, font-family）
- クラスとセレクタ
詳細解説
CSSの書き方
セレクタ { プロパティ: 値; } の形で書きます。例: h1 { color: blue; } でh1の文字色を青に。複数指定するときはセミコロンで区切ります。
例:
- h1 { color: blue; }
- p { font-size: 16px; margin: 10px; }
Tips:
- プロパティ名と値の間にコロン
- 最後のセミコロンは省略可だが付ける習慣に
よくある間違い:
- コロンを忘れる
- 単位を忘れる（16ではなく16px）
色の指定
colorは文字色、background-colorは背景色。色名（blue）、hex（#0000ff）、rgb（rgb(0,0,255)）が使えます。
例:
- color: blue;
- background-color: #f5f5f5;
- color: rgb(255, 0, 0);
Tips:
- ダークモード対応ならCSS変数が便利
- コントラスト比に注意
よくある間違い:
- 色名のスペルミス
- 背景と文字が同系色で読めない
余白（marginとpadding）
marginは要素の外側の余白、paddingは内側の余白。上下左右を個別に指定できます。
例:
- margin: 16px;（四方同じ）
- padding: 8px 16px;（上下 左右）
Tips:
- marginは隣同士で相殺される
- paddingは背景色の内側
よくある間違い:
- marginとpaddingを混同
- 単位を忘れる
幅指定とボーダー
widthで要素の幅を、borderで枠線を指定します。角丸はborder-radiusです。
例:
- width: 300px;
- border: 1px solid #ccc;
- border-radius: 8px;
Tips:
- borderは 線の太さ・種類・色 の順番で書く
よくある間違い:
- solidなど線の種類を書き忘れて線が出ない
クラスとセレクタ
クラス（.クラス名）で複数要素に同じスタイルを当てられます。HTMLで class="クラス名" を付けて紐づけます。
例:
- .card { border: 1px solid #ccc; }
- <div class="card">カード</div>
Tips:
- クラスは再利用、IDは1要素だけ
よくある間違い:
- IDを複数に使う
- !importantの乱用
擬似クラス（hover）
:hoverを付けると、マウスが要素の上に乗ったときのスタイルを指定できます。
例:
- a:hover { color: red; }
Tips:
- ボタンやリンクへの反応を付けるのに必須
よくある間違い:
- スマホではhoverがうまく機能しないので注意
実践手順
- 1 styleタグを追加 2分
HTMLのhead内に<style>タグを書きます。
- <head>内に<style>と</style>を書く
- その中にCSSを書く
<style> h1 { color: blue; } </style> - 2 クラスを使ったスタイリング 3分
要素に対してclass属性を付与し、特定の要素だけにスタイルを適用します。
- pタグに class="highlight" を追加する
- CSSに .highlight { background-color: yellow; } を記述する
<style> .highlight { background-color: yellow; } </style> <p class="highlight">注目箇所</p> - 3 ボタンのデザイン作成 5分
パディング、背景色、角丸、マウスオーバー効果を組み合わせて、クリックしたくなるボタンを作ります。
- button要素を用意し、btnクラスを付与
- paddingとborder-radiusで形を整える
- :hover擬似クラスでホバー時の色を変える
<style> .btn { padding: 10px 20px; background-color: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; } .btn:hover { background-color: #2563eb; } </style> <button class="btn">送信</button>
よくある質問
- marginが足し算されずに食い込んでるんだけど、バグ？
- でた！「マージン相殺（コラプス）」の罠ですね。縦に並んだブロック要素のmarginは、デカい方の数値に吸収されるっていう謎仕様があるんです。間にちょっとでもpaddingや枠線が入ると相殺されなくなったりして、初心者の発狂ポイント第1位です。
- z-indexを10000とかにしても上に重なってこない！
- z-indexは position が static（デフォルト）以外の要素じゃないと完全に無視されます！さらに、親バカ要素（親のz-indexが低い）に捕まってると、子要素でいくら1億とか指定しても親より上には行けないっていう悲しい身分制度があります。
- box-sizing: border-box; ってお呪い、絶対書かなきゃダメ？
- 個人的には絶対書いた方がいいです！デフォ（content-box）だと幅100%にpadding付けた瞬間、画面はみ出して横スクロールバーが出現する地獄になります。「指定した幅の中でやり繰りしてね」っていう平和な世界にするための神設定です。
- CSS書き直しまくってたら、数千行になって何が何だか分からん…
- 完全にあるあるです。最初はBEMとかの「命名ルールで何とかするぜ！」って流派を学ぶか、最近なら Tailwind CSS みたいに「もうHTML側に直接書いちゃおうぜ！」ってスタイルにするのが主流になってます。今の段階では気にしなくてOK！
① 解説を読んだ。次は② 演習する。
CSSの基本を押さえました。
次はJavaScriptで動きを付けましょう。