CSS実践編（動画補足版）

🟥 1. アイキャッチ（タイトル＋動画サムネ）

目的： 一目で内容と動画の関係が分かるようにする。
内容例：

🎥 【動画補足】CSS実践編（動画補足版）！

下にYouTube埋め込み or 「▶動画を見る」ボタン

（動画埋め込みタグ or iframe）

🟧 2. 冒頭リード（つながりを明示）

今回の動画では「CSS実践編」について紹介しました。
この記事では、動画内で出てきたタグや設定方法を、もう少し詳しく見ていきます。

🟨 3. 今日のゴール（内容を先出し）

💡この記事で学べること

  • CSSの基本概念
  • 動画のCSSを行ごとに解説
  • CSSの順序と効率的な書き方
  • デザインを整えるコツ

🟩 CSSの基本概念

1️⃣ HTML・CSS・JavaScriptの関係を理解する

ウェブページは大きく分けて3つの役割があります。

役割説明例
HTMLページの骨格・構造を作る見出し・段落・画像・リンク
CSS見た目を整える色・フォント・余白・ボタンの形
JSページに動きをつけるクリックで変化、アニメーション、計算

図解イメージ

[HTML] → 骨格
 └── header, main, section, footer などの“箱”

[CSS] → 見た目
 └── 色、余白、フォント、レイアウト、ボタンの形

[JS] → 動き
 └── クリック時の反応、アニメーション、スライドショー

2️⃣ CSSの基本の考え方

CSSは「どの要素にどの見た目をつけるか」を指定するルールです。

  • セレクタ：どの要素にルールを適用するか
  • プロパティ：どの見た目を変えるか（色、余白、フォントなど）
  • 値：プロパティに設定する具体的な数値や色

例

h1 {
  color: #2a66ff;       /* 文字の色を青にする */
  text-align: center;   /* 中央揃えにする */
}
  • h1 がセレクタ → 見出し1に適用
  • color と text-align がプロパティ → 見た目の種類
  • #2a66ff と center が値 → 具体的な設定

3️⃣ よく使うCSSのプロパティ

プロパティ役割例
margin外側の余白margin: 32px;
padding内側の余白padding: 16px;
font-familyフォントの種類sans-serif
color文字色#2a66ff
background背景色#ffffff
border-radius角丸999px
line-height行間1.8
display要素の扱い方inline-block

4️⃣ CSSの利点

  1. デザインが自由になる
    HTMLの構造はそのままに、色や形、余白を自在に変えられる。
  2. 見た目を統一できる
    複数のページでも同じスタイルを適用可能。
  3. 後から修正しやすい
    ファイルを分けておけば、修正はCSSだけでOK。

動画のCSSを行ごとに解説

1️⃣ 各行のコードと意味をセットで示す

例として、動画で使ったCSSを行ごとに分解して説明します。

コード動画での説明詳しい補足
body { margin: 0; }ブラウザの自動余白をリセットブラウザはデフォルトでページの上下左右に余白を持つ。これをリセットすることで、デザインを正確に調整できる。図解：ページ端から文字や箱がぴったりの状態を示す。
body { line-height: 1.8; }行間を広げて読みやすく行間を広げると文章が窮屈に見えず、読みやすさが向上する。スクリーンショットで行間1.2と1.8の比較を掲載。
body { font-family: sans-serif; }ゴシック系フォントに変更sans-serifは角がないスッキリした書体。タイトルや文章に適したモダンな印象を与える。フォント比較図を追加。
.container { max-width: 720px; }ページ横幅を制限広すぎると読みにくい。720px以内で文字列が読みやすくなる。横幅の制限イメージ図を追加。
.container { margin: 32px auto; }上下余白、左右中央上下にスペースを作り、左右は中央に揃える。autoの中央寄せ効果を矢印図で解説。
.container { padding: 16px; }内側余白で文字が端にくっつかない内側に余白を設けることで、文字やボタンが端に密着せず読みやすくなる。図解：marginとpaddingの違いを矢印で示す。
h1 { color: #2a66ff; }見出しを青に目立つ色でタイトルを強調。色のコントラストの重要性を視覚的に示す。
p { margin: 0 0 12px; }段落間隔を調整下だけ余白を作ることで、文章のまとまりを整える。
a.btn { display: inline-block; }ボタンを箱として扱うaタグは通常インライン。inline-blockで幅や高さを設定可能に。
a.btn { padding: 10px 16px; }クリックしやすい余白上下10px、左右16pxでボタンサイズを調整。クリック範囲を可視化した図解を入れる。
a.btn { background: #2a66ff; color: #fff; }配色で読みやすく文字色と背景色のコントラストで可読性を確保。スクリーンショットで比較。
a.btn { border-radius: 999px; }ピル型ボタン角を丸めると柔らかい印象。before/afterで比較図を入れる。
a.btn:hover { opacity: 0.8; }ホバーで反応マウスを乗せた時に透明度を変えることで、ユーザーにクリック可能と認識させる。GIFで変化を視覚化。

2️⃣ 補足説明

CSSには専門用語がたくさん出てきます。
初心者向けに意味を添えると理解がスムーズです。

a.btn { display: inline-block; }
  • a → リンク要素
  • .btn → class名でボタン用に指定
  • display: inline-block; → 「箱として扱えるようにする」
    通常のaタグは文字のように扱われますが、これで幅や高さを自由に調整できるようになります。

3️⃣ 1行ずつ理解

CSSは、まとめて書くと難しく見えますが、1行ずつ意味を理解すると、魔法の呪文のようなコードが自分でコントロールできる命令に変わります。

body { line-height: 1.8; }
body { font-family: sans-serif; }
.container { max-width: 720px; }
.container { margin: 32px auto; }
.container { padding: 16px; }
h1 { color: #2a66ff; }
p { margin: 0 0 12px; }
  • line-height → 行間を広げて読みやすくする
  • font-family → 書体を変更して見やすさや印象を調整
  • .container → ページ全体を囲う箱の幅と余白を調整
  • h1 → 見出しの文字色を変えて目立たせる
  • p → 段落の余白で文章のまとまりを整える

🟩 CSSの順序と効率的な書き方

CSSを書く順序の基本

CSSは上から下に読まれるので、書く順序で効き方が変わります。
効率的な順序の基本は以下の通りです：

  1. リセット・基本設定
    • 例：body { margin: 0; padding: 0; line-height: 1.8; font-family: sans-serif; }
      ブラウザごとの初期値をリセットして、文字や余白を整える。
  2. レイアウト系
    • コンテナやグリッド、幅・高さ・余白の設定など
    • 例：.container { max-width: 720px; margin: 32px auto; padding: 16px; }
  3. タイポグラフィ・文字装飾
    • 見出しや段落の文字色・サイズ・行間など
    • 例：h1 { color: #2a66ff; } p { margin: 0 0 12px; }
  4. リンク・ボタンなどのUI要素
    • クラスやIDでデザインをまとめる
    • 例：a.btn { display: inline-block; padding: 10px 16px; background: #2a66ff; color: #fff; border-radius: 999px; }
  5. 擬似クラス・状態変化
    • :hover, :active, :focusなど
    • 例：a.btn:hover { opacity: 0.8; }

この順序で書くと、上位のスタイルが下位に影響しにくく、全体の構造が分かりやすくなるのです。

効率的に書くテクニック

(1) 共通スタイルはまとめる

body, p, h1, h2, h3 {
  font-family: sans-serif;
  line-height: 1.8;
}

同じフォントや行間を複数の要素に適用するときはまとめて書くと効率的。

(2) クラスを活用する

.text-center { text-align: center; }
.margin-32 { margin: 32px 0; }

共通のルールはクラス化して再利用すると、書く量を減らせます。

(3) ネストやコメントで見やすく

/* ボタンスタイル */
a.btn {
  display: inline-block;
  padding: 10px 16px;
  background: #2a66ff;
  color: #fff;
  border-radius: 999px;
}

a.btn:hover {
  opacity: 0.8;
}
  • ネスト（SassやSCSSを使う場合）やコメントでどの要素のスタイルか明確にすると、後で直すときに便利です。

(4) 頻繁に変わる色やサイズは変数化

SassやCSSカスタムプロパティを使うと、全体の配色や間隔を一括で変更可能。

:root {
  --main-color: #2a66ff;
  --padding-small: 10px;
}

a.btn {
  background: var(--main-color);
  padding: var(--padding-small) 16px;
}
body, p, h1, h2, h3 {
  font-family: sans-serif;
  line-height: 1.8;
}

同じフォントや行間を複数の要素に適用するときはまとめて書くと効率的。

🟩 デザインを整えるコツ

配色はシンプルに

  • ベースカラー + アクセントカラー でまとめる
  • 例：背景は白、見出しは青、ボタンはアクセントの青
  • 強い色を多用するとごちゃごちゃするので、2〜3色に絞るのがポイント

💡Tip: カラーホイールで補色や類似色を組み合わせると自然な配色に。

フォントと文字サイズを統一

  • フォントは最大でも2種類までにする
  • 見出し・本文・ボタンでサイズを揃えると全体の統一感が出る
  • 行間（line-height）を少し広めに取ると読みやすくなる
body { font-family: sans-serif; line-height: 1.8; }
h1 { font-size: 2rem; color: #2a66ff; }
p { font-size: 1rem; margin-bottom: 12px; }

余白をうまく使う

  • 外側の余白（margin） と 内側の余白（padding） を整理
  • セクションごとに上下の余白を統一すると見やすい
  • ボタンやカードは内側余白をしっかりとって、タッチしやすくする
.container { margin: 32px auto; padding: 16px; }
a.btn { padding: 10px 16px; }

ボタンやリンクは視覚的に分かりやすく

  • 背景色と文字色のコントラストをはっきりさせる
  • 角を丸くして、優しい印象にする
  • ホバーで少し変化を付けると反応が分かりやすい
a.btn {
  background: #2a66ff;
  color: #fff;
  border-radius: 999px;
}
a.btn:hover { opacity: 0.8; }

ページの幅は制限する

  • コンテンツを横いっぱいに広げすぎると読みにくくなる
  • max-width で上限を設定し、中央寄せするとまとまりやすい
.container { max-width: 720px; margin: 32px auto; }

小さな装飾でアクセントを

  • 区切り線（<hr>）、箇条書き（<ul>）、アイコンや画像など
  • 強調したいところだけ色や大きさを変えるとメリハリがつく

🟫 次回予告・導線

🎨 次回：「変数・定数編(javaScript)」
変数・定数について、学習していきます。

[▶ 次回「変数・定数編(javaScript)」動画を見る]
（または）
📱 QRコード： 次回動画ページにリンク

タイトルとURLをコピーしました