さとまたwiki

CSS

Webページの見た目を装飾するスタイルシート言語

CSSでできること

🎨

スタイリング

基本

色、フォント、サイズなどを指定

📐

レイアウト

重要

Flexbox、Gridで配置を制御

📱

レスポンシブ

重要

画面サイズに応じたデザイン

✨

アニメーション

応用

動きのあるエフェクトを追加

🔲

ボックスモデル

基本

margin、padding、borderの制御

🎭

疑似クラス

基本

hover、focusなどの状態スタイル

CSSとは何か？

日常での例え：家の「内装」

HTML = 家の骨組み

壁、床、窓の「位置」を決める
「ここにリビング、ここに寝室」

CSS = 内装・デザイン

壁の色、床の材質、家具の配置
「白い壁、木目の床、ソファはここ」

CSS（Cascading Style Sheets）は、HTMLで作った構造に「見た目」を付ける言語です。 色、サイズ、配置、アニメーションなど、表示に関するすべてを制御します。

なぜHTMLとCSSを分ける？

分業できる：構造を変えずにデザインだけ変更可能
再利用できる：同じCSSを複数ページで使い回せる
保守しやすい：「色を変えたい」→ CSSだけ修正すればOK

HTMLだけの場合

見出し

テキスト

→ 素っ気ない表示

CSS適用後

見出し

テキスト

→ デザインが整う

CSSの基本構文

セレクタ { プロパティ: 値; }
セレクタ
「どの要素に」
プロパティ
「何を」
値
「どうする」

CSSの書き方

css 
/* 要素セレクタ：すべてのp要素 */
p {
  color: blue;
  font-size: 16px;
}

/* クラスセレクタ：.が付いたクラス名 */
.highlight {
  background-color: yellow;
}

/* IDセレクタ：#が付いたID名 */
#header {
  height: 60px;
}

コードの解説

1
/* ... */

コメント。人間用のメモで、ブラウザには無視される

2
p

要素セレクタ。すべての<p>タグにスタイルを適用

3
color: blue

文字色を青に。colorは文字色を指定するプロパティ

4
font-size: 16px

文字サイズを16ピクセルに

8
.highlight

クラスセレクタ。class="highlight"が付いた要素に適用

13
#header

IDセレクタ。id="header"が付いた要素に適用（ページで1つだけ）

セレクタの種類

セレクタ例意味
要素pすべての<p>要素
クラス.cardclass="card"を持つ要素
ID#navid="nav"を持つ要素
子孫div pdiv内のすべてのp
複数h1, h2h1とh2の両方

💡 クラスとIDの使い分け

クラス（.）：同じスタイルを複数の要素に使いたい時
ID（#）：ページ内で1つだけの要素を指定したい時
→ 基本的にはクラスを使い、IDはJavaScriptとの連携時に使うことが多い

よく使うプロパティ

色とフォント

テキストの見た目を変更

css 
.styled-text {
  color: #e91e63;           /* 文字色 */
  background-color: #f5f5f5; /* 背景色 */
  font-size: 20px;          /* 文字サイズ */
  font-weight: bold;        /* 太さ（bold/normal/数値） */
  font-family: sans-serif;  /* フォント種類 */
  text-align: center;       /* 揃え（left/center/right） */
  line-height: 1.6;         /* 行間（1.5〜1.8が読みやすい） */
}
プレビュー
スタイル適用済みテキスト

色の指定方法
・red, blue：色名（約140種類）
・#ff0000：16進数（#RRGGBB）
・rgb(255, 0, 0)：RGB値（0-255）
・rgba(255, 0, 0, 0.5)：RGB+透明度

ボックスモデル

余白と枠線

css 
.box {
  /* 内側の余白（内容と枠線の間） */
  padding: 20px;

  /* 外側の余白（他の要素との間） */
  margin: 10px;

  /* 枠線（太さ スタイル 色） */
  border: 2px solid #333;

  /* 角丸 */
  border-radius: 8px;

  /* 横幅 */
  width: 200px;
}
プレビュー
ボックス要素

padding/marginの省略記法
・padding: 10px：全方向10px
・padding: 10px 20px：上下10px、左右20px
・padding: 10px 20px 30px 40px：上 右 下 左（時計回り）

Flexbox（横並び）

Flexbox（フレックスボックス）とは？

要素を横並びや縦並びに配置するための仕組みです。

なぜFlexboxが必要？

昔の方法：floatやtableを使って無理やり横並びに → 複雑でバグの原因に
Flexbox：display: flexの1行で横並びに → シンプルで直感的

要素を横並びにする

css 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.item {
  padding: 20px;
  background: #4f46e5;
  color: white;
}

コードの解説

2
display: flex

この1行で子要素が横並びになる。Flexboxを有効化

3
justify-content: center

主軸（横方向）の配置。centerで中央寄せ

4
align-items: center

交差軸（縦方向）の配置。centerで上下中央

5
gap: 10px

子要素間の余白。marginの代わりに使えて便利

Flexboxの配置例

justify-contentの違い

css 
/* 左寄せ（デフォルト） */
.left { justify-content: flex-start; }

/* 中央 */
.center { justify-content: center; }

/* 右寄せ */
.right { justify-content: flex-end; }

/* 両端に配置 */
.between { justify-content: space-between; }
プレビュー
flex-start
1
2
1
2
1
2

ホバーエフェクト

疑似クラス（ぎじクラス）とは？

要素の状態に応じてスタイルを変える仕組みです。
「マウスが乗った時」「クリック中」「入力欄にフォーカスした時」など。

なぜ疑似クラスが必要？

ユーザーへのフィードバック：ボタンにマウスを乗せた時に色が変わると「押せそう」と分かる
操作性の向上：今どこを操作しているか視覚的に分かりやすくなる

マウスを乗せた時のスタイル

css 
.button {
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

コードの解説

8
transition: all 0.2s

すべての変化を0.2秒かけて滑らかにする。これがないとカクカク変わる

11
:hover

疑似クラス。マウスが乗っている時だけ適用されるスタイル

12
background: #2563eb

少し暗い青に変更

13
translateY(-2px)

上に2px移動。押せそうな感じを演出

他の疑似クラス
・:focus：フォーカス時（入力欄をクリックした時など）
・:active：クリック中
・:first-child：最初の子要素
・:nth-child(2)：2番目の子要素

CSSの3つの書き方

❌ インライン

<p style="color:red">

再利用できず非推奨

△ 内部CSS

<style>タグ内

そのページでのみ有効

✅ 外部CSS

.cssファイルをリンク

複数ページで共有可能

前へ：HTML 次へ：ボックスモデル