TOP ──BLOG ──Web

Web2025.08.13

CSS入門｜ロードマップに沿ったCSS解説

CSSの基礎

CSS（カスケーディング・スタイル・シート）は、ウェブサイトの見た目を整えるための言語です。たとえば、HTMLで作ったページに色をつけたり、文字の大きさやフォントを変えたり、レイアウトをきれいに並べたりするときに使います。

CSSを使うと、デザイン部分とHTMLの内容を分けられるので、サイトの管理や更新がとてもラクになります。「セレクター」という仕組みでHTMLの特定の要素を選び、その部分だけにスタイルを適用することができます。さらに、「メディアクエリ」という機能を使えば、スマホやタブレット、パソコンなど、どの画面サイズでも見やすいレスポンシブデザインを作ることができます。

CSSにはいくつか重要な考え方があります。スタイルが上書きされる順序を決める「カスケード」、親要素のスタイルを子要素が受け継ぐ「継承」、そしてどのスタイルを優先するかを判断する「詳細度」です。

最近のCSSでは、レイアウト作成に便利な「Flexbox」や「Grid」、そして動きをつける「アニメーション」や「トランジション」など、見た目や使いやすさをさらに向上させる機能もそろっています。

CSSの書き方と仕様

基本の書き方

　基本書式は、HTMLの中の、「どの部分の（セレクタ）」、「何を（プロパティ）」、「どのように変更する（値）」かを指定していきます。

セレクタ { プロパティ: 値; }

カスケード（Cascade）

複数のCSSルールが同じ要素に当たったとき、どれを適用するかを決める仕組みです。 CSSは「後から書かれたものほど優先」される傾向があります。例：

p { color: blue; }
p { color: red; }

→ 最後に書いた color: red; が適用されます。

継承（Inheritance）

親要素に指定したスタイルが子要素にも引き継がれる仕組みです。例えば、親の <div> に文字色を指定すると、中の <p> や <span> も同じ色になります（ただし、すべてのプロパティが継承されるわけではありません）。例：

div { color: green; }

→ <div> の中の文字もすべて緑色になります。

詳細度（Specificity）

複数のルールが競合したとき、どのルールが「より強いか」を決める点数ルールです。

タグ名（例: p） → 弱い
クラス名（例: .title） → 中くらい
ID（例: #main） → 強い
!important → 最強（ただし多用はNG）

例：

p { color: blue; }
.title { color: red; }
#main { color: green; }

→ ID指定の #main が最も強く、緑色が適用されます。

セレクタについて

クラスセレクター（`.class`）

使い方 HTML要素に class 属性をつけ、そのクラス名をセレクターとして指定します。
特徴
- 複数の要素に同じスタイルを適用できる
- 1つの要素に複数のクラスを設定できる
例

<p class="highlight">重要な文章</p>

.highlight {
  color: red;
}

IDセレクター（`#id`）

使い方 HTML要素に id 属性をつけ、そのID名をセレクターとして指定します。
特徴
- ページ内で一つ（1回だけ）に使うことが前提
- 詳細度（優先度）が高いため、乱用すると管理が難しくなる
例

<h1 id="main-title">見出し</h1>

#main-title {
  font-size: 2em;
}

属性セレクター（`[attr=value]`）

使い方 特定の属性や値を持つ要素にスタイルを適用します。
特徴
- リンクやフォームなど、属性ベースで絞り込み可能
主な形式
- [attr] → 属性がある要素
- [attr="value"] → 属性値が一致
- [attr^="value"] → 指定の文字列で始まる
- [attr$="value"] → 指定の文字列で終わる
- [attr*="value"] → 指定の文字列を含む
例

a[target="_blank"] {
  color: blue;
}

擬似クラス（`:hover` など）

使い方 要素の状態や位置に応じてスタイルを適用します。
主な種類
- ユーザー操作系：:hover（マウスオーバー）、:focus（フォーカス時）、:active（クリック中）
- 構造系：:first-child（最初の子要素）、:nth-child(odd)（奇数番目）
- 状態系：:disabled（無効）、:checked（選択済み）
例

button:hover {
  background-color: orange;
}

擬似要素（`::before` / `::after` など）

使い方 実際のHTMLに存在しない仮想要素を作り、装飾に使います。
主な種類
- ::before → 要素の先頭に追加
- ::after → 要素の末尾に追加
- ::first-letter → 最初の1文字
- ::first-line → 最初の1行
例

p::before {
  content: "★";
  color: gold;
}

まとめ表

セレクター種類

記述例

適用対象

主な用途

class

.box

複数OK

グループ化

#header

1つのみ

固有要素

属性

[type=text]

条件一致

属性指定

擬似クラス

:hover

状態依存

インタラクション

擬似要素

::before

仮想要素

装飾

基本的にはclassセレクターを仕様してコーディングをしていき、今後改修などが起こっても増えない要素に対してのみidセレクターを使うことが多いです。

レイアウトの作成

レイアウトを作成するということは、ページ上のコンテンツを適切に配置することを意味します。

最新のCSSでは、Flexbox（行と列）とCSS Grid（2Dレイアウト）が使用されることが多く。レスポンシブデザインにより、サイトはあらゆるデバイスに適合します。BootstrapやTailwindなどのフレームワークは、開発を迅速化するのに役立ちます。優れたレイアウトは、何が重要か、ユーザーがページ内をどのように移動するか、そして誰もが使いやすいかどうかを考慮しています。これにより、サイトの見栄えが良く、操作性も向上します。

レスポンシブウェブデザイン

レスポンシブウェブデザインは、大きなデスクトップから小さなスマートフォンまで、あらゆるデバイスでウェブサイトを美しく表示します。柔軟なレイアウト、サイズ変更可能な画像、そしてCSSメディアクエリを用いて、画面サイズに応じてサイトの表示方法を変化させます。これにより、ユーザーはどのデバイスを使用していても優れたエクスペリエンスを得ることができ、開発者はデバイスごとに個別のサイトを作成する必要がなくなります。

📱 スマートフォン（縦向き）

デバイス例

解像度（px）

幅（CSS px）

iPhone SE (第2世代)

750×1334

375

iPhone 12/13/14

1170×2532

390

iPhone 14 Pro

1179×2556

393

iPhone 14 Pro Max

1290×2796

430

Pixel 6

1080×2400

412

Galaxy S22

1080×2340

360

📱 スマートフォン（横向き）

デバイス例

解像度（px）

幅（CSS px）

iPhone 14 Pro（横）

2556×1179

852

Pixel 6（横）

2400×1080

915

💻 タブレット

デバイス例

解像度（px）

幅（CSS px）

iPad (9.7インチ)

1536×2048

768

iPad Air (10.9インチ)

1640×2360

820

iPad Pro (12.9インチ)

2048×2732

1024

Galaxy Tab S8

1600×2560

800

🖥 ノートPC・デスクトップ

カテゴリ

解像度（px）

幅（CSS px）

小型ノートPC

1366×768

1366

標準HD

1920×1080

1920

WQHD

2560×1440

2560

4K UHD

3840×2160

3840

これだけさまざまなデバイスサイズがあり、開発者はどこまで対応するか悩みますね。一般的にはクライアント次第ではありますが、スマホ：タブレット：デスクトップの３分割にすることが多く感じます。

メディアクエリの書き方

スマホやタブレットなど、さまざまな画面サイズでブログが見やすくなるようにするのがレスポンシブデザインです。CSSの「メディアクエリ」を使って画面幅に応じたスタイルを書き分けることで、どんなデバイスでも崩れないようにデザインすることができます。

メディアクエリの目安

デバイス種類

画面幅（px）目安

📱 スマートフォン（縦）

～480px

📱 スマートフォン（横）／小型タブレット

481px ～ 768px

💻 タブレット（縦）

769px ～ 1024px

💻 ノートPC／小型デスクトップ

1025px ～ 1280px

🖥 標準デスクトップ

1281px ～ 1440px

🖥 大型モニター（フルHD以上）

1441px ～ 1920px

🖥 超大型ディスプレイ（4K以上）

1921px～

書き方

CSSに下記を記入し…の部分に通常のCSSを書いていってください。

/* スマホ縦 */ @media (max-width: 480px) { … }

/* スマホ横・小型タブレット */ @media (max-width: 768px) { … }

/* タブレット縦 */ @media (max-width: 1024px) { … }

/* ノートPC・デスクトップ */ @media (max-width: 1280px) { … }

まとめ

CSSの基本構造からボックスモデル、Flexbox・Grid、レスポンシブデザインまでを押さえることで、初心者でもブログの見た目を自由にデザインできるようになります。ロードマップに沿った学習を進めながら、実際にコードを書きつつCSSの書き方を身につけていきましょう。

この記事を書いた人

代表　morino

Webサイト・ECサイト制作、SNS運用、体験型ゲーム制作をひとりで手がけています。

ShareX in

CSS入門｜ロードマップに沿ったCSS解説

CSSの基礎

CSSの書き方と仕様

基本の書き方

カスケード（Cascade）

継承（Inheritance）

詳細度（Specificity）

セレクタについて

クラスセレクター（.class）

IDセレクター（#id）

属性セレクター（[attr=value]）

擬似クラス（:hover など）

擬似要素（::before / ::after など）

まとめ表

レイアウトの作成

レスポンシブウェブデザイン

📱 スマートフォン（縦向き）

📱 スマートフォン（横向き）

💻 タブレット

🖥 ノートPC・デスクトップ

メディアクエリの書き方

メディアクエリの目安

書き方

まとめ

関連記事

フロントエンドエンジニアが使えるようになるべきフレームワーク5選【2026年版】

Webコーダーが厳選！現場で本当に使うCSS小技10選

Javascript入門｜ロードマップに沿ったJavascript解説

クラスセレクター（`.class`）

IDセレクター（`#id`）

属性セレクター（`[attr=value]`）

擬似クラス（`:hover` など）

擬似要素（`::before` / `::after` など）