CSS入門｜セレクタとレスポンシブの基本

HTMLでページの骨組みを作ったら、次は見た目を整えるCSSです。

CSSは書き方そのものは単純なのですが、「なぜか指定したスタイルが効かない」という壁に必ず一度はぶつかります。その正体はたいてい、カスケード・継承・詳細度という3つの仕組みです。この記事では、フロントエンドエンジニアの学習ロードマップの3番目にあたるCSSを、そのあたりも含めて整理します。

CSSの基礎

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

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

基本の書き方

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

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

効かないCSSの正体

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

カスケード（Cascade）

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

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

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

継承（Inheritance）

親要素に指定したスタイルが子要素にも引き継がれる仕組みです。親の <div> に文字色を指定すると、中の <p> や <span> も同じ色になります。

div { color: green; }

ただし、すべてのプロパティが継承されるわけではありません。文字色やフォントなど文字まわりは継承されますが、余白や枠線は継承されません。

詳細度（Specificity）

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

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

3つとも同じ要素に当たっている場合、ID指定の #main が最も強いため緑色になります。

セレクタについて

クラスセレクタ（.class）

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

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

.highlight {
  color: red;
}

IDセレクタ（#id）

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

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

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

属性セレクタ（[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セレクタを使用してコーディングしていき、今後改修が起こっても増えない要素に対してのみidセレクタを使うことが多いです。

ボックスモデル

CSSでは、すべての要素が四角い箱として扱われます。この箱は内側から順に、内容（content）、内側の余白（padding）、枠線（border）、外側の余白（margin）で構成されています。

初心者がつまずきやすいのが、width で指定した値がどこまでを指すのかという点です。

/* 初期状態では、指定した width に padding と border が足されて幅が広がる */
.box { width: 200px; padding: 20px; border: 1px solid; }

/* border-box にすると、padding と border を含めて 200px になる */
.box { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid; }

レイアウトの作成

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

最新のCSSでは、Flexbox（1方向の並び）とCSS Grid（2次元のレイアウト）が使われることが多くなっています。BootstrapやTailwindなどのフレームワークは、開発を迅速化するのに役立ちます。

Flexbox

横並びや縦並びなど、1方向に要素を並べるときに使います。

.container {
  display: flex;
  justify-content: space-between; /* 横方向の配置 */
  align-items: center;            /* 縦方向の配置 */
  gap: 16px;                      /* 要素同士の間隔 */
}

CSS Grid

行と列の両方を指定して、格子状に配置したいときに使います。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分の列 */
  gap: 16px;
}

優れたレイアウトは、何が重要か、ユーザーがページ内をどのように移動するか、そして誰もが使いやすいかどうかを考慮しています。

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

レスポンシブウェブデザインは、大きなデスクトップから小さなスマートフォンまで、あらゆるデバイスでウェブサイトを美しく表示するための考え方です。柔軟なレイアウト、サイズ変更可能な画像、そしてメディアクエリを用いて、画面サイズに応じて表示を変化させます。

デバイスごとに個別のサイトを作る必要がなくなるのが大きな利点です。

主なデバイスの画面幅

解像度と「幅（CSS px）」が違うのは、高精細な画面では複数の物理ピクセルで1つのCSSピクセルを表現しているためです。メディアクエリで指定するのは右端のCSS pxのほうです。

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

メディアクエリの書き方

CSSのメディアクエリを使って画面幅に応じたスタイルを書き分けることで、どんなデバイスでも崩れないようにデザインできます。

ブレイクポイントの目安

書き方

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

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

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

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

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

よくある質問

まとめ

CSSの基本構造からカスケード・継承・詳細度、セレクタ、ボックスモデル、Flexbox・Grid、レスポンシブデザインまでを押さえることで、ページの見た目を自由にデザインできるようになります。

とくにカスケードと詳細度は、慣れるまで何度もつまずくところです。逆にここを理解してしまえば、「なぜか効かない」で止まる時間はぐっと減ります。ロードマップに沿った学習を進めながら、実際にコードを書いて身につけていきましょう。

あわせて読みたい

• HTML入門｜基本タグとセマンティックHTML
• Webコーダーが厳選！現場で本当に使うCSS小技10選
• フロントエンドエンジニアの学習ロードマップ