CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値なども解説｜HTML＆CSS入門講座（４）

HTML＆CSS
2021.06.29
この記事は約31分で読めます。

CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値なども解説｜HTML＆CSS入門講座（４）のPodcast

下記のPodcastは、Geminiで作成しました。

Spotify
open.spotify.com

ストーリーブック

「スタイル・メイカー：世界を彩るCSSの魔法」の絵本を見る

はじめに

ウェブデザインの世界において、CSS（Cascading Style Sheets）は単なる装飾のための言語から、高度なユーザー体験を構築するためのエンジニアリングツールへと進化を遂げた。2026年現在、モダンなウェブ開発の現場では、基本的な色の変更や文字サイズの調整だけでなく、デバイスの状況や親要素の大きさに応じてスタイルを動的に変化させる手法が標準となっている。本報告書では、CSSの本質的な役割から最新の構文、そして保守性の高いコードを書くための高度な概念までを、初心者にも分かりやすく丁寧に解説する。

CSSの基本概念と記述ルール

CSSは、HTMLによって構築された文書構造に「スタイル（見た目）」を付与するための言語である。ブラウザがHTMLを解析してDOM（Document Object Model）を生成し、そこにCSSのルールを適用することで、私たちが目にするウェブページが形成される。CSSの記述は、「どの要素に（セレクタ）」「何を（プロパティ）」「どのように（値）」適用するかという、シンプルだが強力なルールセットに基づいている。

CSSの基本構文

CSSの基本的な書き方は、セレクタ、プロパティ、値の3つの要素で構成される。プロパティと値の組み合わせを「宣言」と呼び、複数の宣言を波括弧{}で囲んだものを「宣言ブロック」と呼ぶ。

構成要素役割具体例
セレクタスタイルを適用する対象を指定するh1, .btn, #header
プロパティ変更したいスタイル属性を指定するcolor, font-size, margin
値プロパティに設定する具体的な数値を指定するblue, 16px, 2rem
セミコロン (;)宣言の終わりを示すcolor: red;

一つのルールセットは、セレクタの後に宣言ブロックを記述する形式をとる。例えば、すべての段落（`<p>`タグ）の文字色をグレーにし、行間を広げる場合は次のように記述する。

p {
  color: #333333;
  line-height: 1.6;
}

カスケードと詳細度の仕組み

CSSの名称に含まれる「カスケード（Cascading）」は、スタイルが「上から下へと流れる滝のように適用される」性質を指している。同じ要素に対して複数のスタイルが指定された場合、ブラウザは以下の優先順位に従って適用するスタイルを決定する。

重要度とオリジン：ブラウザの既定値よりも制作者が作成したスタイルが優先され、さらに!importantが付与されたルールが最も強く優先される。

詳細度（Specificity）：セレクタの種類によって重み付けが行われる。

記述順序：詳細度が同じ場合は、スタイルシートの中で「後」に書かれたものが優先される。

セレクタの種類詳細度の重み具体例
IDセレクタ高 (1-0-0)#main-content
クラス・属性・擬似クラス中 (0-1-0).nav-item, [type="text"], :hover
タイプ（タグ）・擬似要素低 (0-0-1)div, p, ::before
ユニバーサルセレクタゼロ (0-0-0)*

詳細度の計算はウェブサイトの保守性に直結する。IDセレクタを多用するとスタイルの上書きが困難になるため、モダンな開発ではクラスセレクタを中心に構成し、後述するカスケードレイヤー（@layer）を活用することが推奨されている。

セレクタの多様な指定方法

セレクタは、HTMLの特定の要素を見つけ出すための検索パターンのようなものである。基本的なタグ指定から、要素同士の関係性を利用した複雑な指定まで、多様な方法が存在する。

基本的なセレクタと結合子

特定の要素を単独で指定するだけでなく、複数のセレクタを組み合わせて「結合子」を使用することで、要素の親子関係や兄弟関係を厳密にターゲットにできる。

結合子の名称記述形式説明
子孫結合子A BAの中にあるすべてのB（子も孫も含む）を選択
子結合子A > BAの直属の子要素であるBだけを選択
隣接兄弟結合子A + BAの直後にある兄弟要素Bを選択
一般兄弟結合子A ~ BAより後にあるすべての兄弟要素Bを選択

これらの結合子を理解することで、HTML側に余計なクラス名を増やさずに、構造に基づいたスタイリングが可能になる。例えば、「記事本文の中にある画像だけに枠線をつけたい」といった場合に有効である。

擬似クラスと擬似要素

擬似クラスは、要素の特定の「状態」に応じてスタイルを適用するために使用される。ユーザーがマウスを乗せた時（:hover）や、フォームにフォーカスした時（:focus）などが代表的である。また、構造的な擬似クラスとして「最初の子要素（:first-child）」や「3番目の要素（:nth-child(3)）」といった指定も可能である。

一方、擬似要素は要素の「特定の部分」を対象とする。例えば、要素の直前に装飾を挿入する::beforeや、直後に挿入する::afterは、アイコンの表示やデザイン上のアクセントとして頻繁に利用される。

画期的な :has() セレクタの登場

2026年現在、すべての主要ブラウザでサポートされている:has() 擬似クラスは、CSSの歴史における革命的な進歩といえる。これは「特定の子要素を持っている親要素」を選択できる機能で、長年CSSでは不可能とされてきた「親方向への遡及選択」を実現している。

/* 「画像を含んでいるカード要素」だけに背景色をつける */
.card:has(img) {
  background-color: #f9f9f9;
}

/* 「チェックボックスがチェックされている時の親要素」を強調する */
.form-group:has(:checked) {
  border: 2px solid blue;
}

この機能により、従来はJavaScriptで行っていた動的なクラスの付け替え作業の多くが、純粋なCSSだけで完結するようになっている。

単位と色彩：モダンな値の指定

CSSにおける「値」の指定は、単なる数字の入力ではない。アクセシビリティやレスポンシブな適応性を考慮した、戦略的な選択が必要とされる。

相対単位の使い分け

初心者が最初に使用しがちなpx（ピクセル）は絶対単位であり、ユーザーがブラウザの文字サイズ設定を変更しても拡大・縮小されないというアクセシビリティ上の課題がある。そのため、現在のウェブ開発では以下の相対単位を使い分けるのが一般的である。

rem (Root em)：ルート要素（通常は`<html>`）のフォントサイズを基準とする単位。アクセシビリティを維持しつつ、全体のサイズバランスを整えるのに最適である。

em：その要素自身のフォントサイズを基準とする。パディングやマージンに使うと、文字サイズに合わせて余白も比例して変化する。

svh / lvh / dvh：スマートフォンのアドレスバーの影響を考慮した新しいビューポート単位。

単位名称特徴と用途
remルート相対単位。フォントサイズや主要なレイアウトに推奨される。
dvh動的ビューポート高。アドレスバーの開閉に合わせて変化する。全画面要素に最適。
cqiコンテナインライン単位。親要素の幅に基づくサイズ指定（コンテナクエリ用）。

知覚的に均一な色彩：OKLCH

色彩の指定において、2026年のスタンダードとなりつつあるのが oklch() 関数である。従来の rgb() や hsl() は、数値上の変化と人間が感じる「明るさ（明度）」の変化が一致しないという欠点があった。oklch() は、人間が感じる明るさを基準とした「L（明度）」、色の鮮やかさを表す「C（クロマ）」、そして「H（色相）」の3つのパラメータで構成される。

/* 鮮やかな青色の指定例 */
.button {
  background-color: oklch(60% 0.15 250);
}

この関数の利点は、明度（L）の値を一定に保ったまま色相（H）だけを変えれば、人間にとって「同じ明るさに見える別の色」を簡単に作れる点にある。これにより、誰にとっても読みやすく、美しいカラーパレットを論理的に設計することが可能になる。

論理プロパティと書字方向

グローバルなウェブ制作において、文字が左から右へ流れる言語（英語など）だけでなく、右から左（アラビア語など）、あるいは上から下（日本語の縦書き）といった多様な「書字方向」への対応が求められる。これに対応するのが「論理プロパティ」である。従来の margin-left や padding-top は物理的な方向（左、上）を指していたが、論理プロパティでは「開始側（start）」や「末尾側（end）」という表現を用いる。

物理プロパティ論理プロパティ挙動の説明
margin-leftmargin-inline-start横書きなら左、右から書く言語なら右に適用される
widthinline-size文字が流れる方向のサイズ（横書きなら幅、縦書きなら高さ）
heightblock-size文章が積み重なる方向のサイズ
border-topborder-block-start文章の開始側の境界線

論理プロパティを採用することで、レイアウトを「物理的な箱」としてではなく「情報の流れ」として定義できるようになり、縦書きレイアウトへの切り替えや多言語化が劇的に容易になる。

最新のレイアウト手法：ネスティングとコンテナクエリ

CSSの記述量が増えると、コードの管理が複雑になり、可読性が低下するという問題がある。2026年のCSSは、この課題を解決するための強力な構造化機能を備えている。

ネイティブ・ネスティングの活用

これまではSassなどの特別なツールが必要だった「セレクタの入れ子（ネスティング）」が、ブラウザで標準的に利用できるようになった。これにより、親子関係にあるスタイルをまとめて記述でき、コードの構造がHTMLの構造と一致するため非常に分かりやすくなる。

.card {
  padding: 1rem;
  background: white;

  /* 子要素の指定 */
 .card-title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  /* 擬似クラスの指定 (& を使用) */
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

ここで使用される & セレクタは、親要素（この場合は .card）を参照するための記号である。ネスティングを適切に使用することで、同じクラス名を何度も繰り返す必要がなくなり、ミスを減らすことができる。

コンテナクエリによる「真の」コンポーネント設計

従来のレスポンシブデザインは、画面全体の幅（ビューポート）に応じてレイアウトを変える「メディアクエリ」に依存していた。しかし、2026年のモダンな開発では、その要素が置かれている「親要素（コンテナ）の幅」に応じてスタイルを変える「コンテナクエリ」が主流となっている。

例えば、同じ「カード型コンポーネント」を、広いメインエリアに置いた時は横並びに、狭いサイドバーに置いた時は縦並びにする、といった制御がコンポーネント自身の定義だけで完結する。

1. コンテナの定義：親要素を監視対象として宣言する（container-type: inline-size;）。

2. クエリの記述：親のサイズに基づく条件を書く（@container (width > 400px) {... }）。

この手法により、ウェブサイトのどこに配置しても美しく機能する「自己完結型」のコンポーネントを作成することが可能になる。

保守性を高めるためのベストプラクティス

CSSは「誰でも書ける」一方で、秩序なく書き進めると「誰も管理できない」コードになりやすい。初心者であっても、最初から保守性を意識した書き方を学ぶことが重要です。

命名規則とBEMの考え方

クラス名の付け方にルールを設けることで、スタイルの衝突（意図しない上書き）を防ぐことができる。その代表格が「BEM（Block, Element, Modifier）」という考え方である。

Block (ブロック)：単独で意味を持つコンポーネント（例：.card, .nav）。

Element (要素)：ブロックを構成する部品。アンダースコア2つでつなぐ（例：.card__title, .card__img）。

Modifier (モディファイア)：バリエーションや状態。ハイフン2つでつなぐ（例：.card--featured, .card--dark）。

BEMは一見すると名前が長くなりがちだが、詳細度を低く保ちつつ、クラス名だけで「その要素が何であり、どのような役割を持っているか」を明確に伝えられるため、チーム開発においても絶大な効果を発揮する。

カスケードレイヤー (@layer) の導入

大規模なサイトでは、異なるライブラリやフレームワークから来たスタイルが互いに干渉し合うことがある。カスケードレイヤー（@layer）を使用すると、スタイルの優先順位を「層（レイヤー）」として明示的に定義できる。

@layer reset, base, components, utilities;

@layer components {
  /* コンポーネントのスタイル */
 .btn { background: blue; }
}

@layer utilities {
  /* ユーティリティ（最優先させたい微調整）のスタイル */
 .p-10 { padding: 10px!important; }
}

この順序設定により、詳細度がどれほど高くても、後のレイヤー（この場合は utilities）に記述されたルールが、前のレイヤー（components）を上書きすることが保証される。これにより、詳細度の競争による「!important の乱発」という負の連鎖を断ち切ることができる。

結論

CSSは、2026年において単なるデコレーションの手段を超え、論理的で構造的なインターフェース設計のための強力な言語へと進化した。初心者がこれから学習を始めるにあたっては、基礎となる「セレクタ・プロパティ・値」の構文をしっかりと押さえた上で、以下の3つのポイントを意識することが成長の鍵となる。

第一に、物理的な方向（左・右）ではなく論理的な流れ（開始・終了）でレイアウトを考える「論理プロパティ」の視点を持つこと。第二に、アクセシビリティを考慮し、rem や oklch() といった、ユーザーと知覚に優しい単位や色指定を採用すること。そして第三に、ネスティングやコンテナクエリといった最新の機能を活用し、再利用性が高くメンテナンスしやすい「コンポーネント指向」のコードを目指すことである。CSSの学習は、視覚的な変化を即座に確認できるため非常に楽しいプロセスである。最新の仕様に触れ、実験を繰り返すことで、美しく堅牢なウェブサイトを構築する力が身につくであろう。

参考資料

1. CSS論理プロパティとは？物理プロパティとの違いやメリット、具体例を解説、https://office-nishimura.jp/archives/1726

2. CSSの論理プロパティの基本的な考え方と使い方、https://coliss.com/articles/build-websites/operation/css/css-logical-properties.html

3. CSS 論理プロパティの概要、https://cohamu.com/entry/20240528/1716859800

4. 論理プロパティ margin-block、padding-block を使ってみる、https://ginneko-atelier.com/blogs/entry436/

5. CSS Logical Properties and Values、https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Logical_properties_and_values

6. Mastering modern viewport units svh, lvh, and dvh for responsive web design、https://dev.to/softheartengineer/mastering-modern-viewport-units-svh-lvh-and-dvh-for-responsive-web-design-5de9

7. CSS values and units: Viewport-percentage lengths、https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length

8. New Units: svh, lvh, and dvh、https://pow.kim/articles/svh-lvh-dvh-vh

9. Demystifying VH, DVH, SVH, and LVH in CSS、https://learnbricksbuilder.com/demystifying-vh-dvh-svh-and-lvh-in-css/

10. Using CSS nesting、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using

11. An Introduction to Native CSS Nesting、https://www.sitepoint.com/an-introduction-to-native-css-nesting/

12. CSS Nesting and its potential to replace CSS preprocessors like SCSS and SASS、https://dev.to/mechcloud_academy/css-nesting-and-its-potential-to-replace-css-preprocessors-like-scss-and-sass-1l74

13. CSS Nesting — The Complete Guide (With Examples)、https://medium.com/@omken/css-nesting-the-complete-guide-with-examples-bdc63fb0856b

14. Basic selectors、https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors

15. CSS selectors and combinators、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Selectors_and_combinators

16. Mastering Selenium CSS Selectors in 2026、https://www.browserstack.com/guide/css-selectors-in-selenium

17. XPath vs. CSS selector、https://www.zenrows.com/blog/xpath-vs-css-selector

18. CSS :has() Interactive Guide、https://ishadeed.com/article/css-has-guide

19. OKLCH in CSS: why we moved from RGB and HSL、https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

20. CSS oklch() function、https://css-tricks.com/almanac/functions/o/oklch/

21. What is OKLCH in CSS and why we use it、https://uploadcare.com/blog/oklch-in-css/

22. OKLChroma: An OKLCH color pattern generator、https://utilitybend.com/blog/oklchroma-an-oklch-color-pattern-generator-that-generates-css-variables

23. OKLCH in CSS: Consistent, accessible color palettes、https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/

24. CSS container queries、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries

25. CSS Container Queries Tutorial for Beginners、https://dev.to/mechcloud_academy/css-container-queries-tutorial-for-beginners-30em

26. Using container size and style queries、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries

27. Container queries in 2026: Powerful, but not a silver bullet、https://blog.logrocket.com/container-queries-2026/

28. Introducing the CSS Cascade、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction

29. Cascade layers、https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers

30. Mastering CSS Cascade Layers for Scalable Design Systems、https://www.designsystemscollective.com/mastering-css-cascade-layers-for-scalable-design-systems-981fdab2a961

31. Aspect Ratio in CSS、https://web.dev/articles/aspect-ratio

32. Understanding and setting aspect ratios、https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_sizing/Aspect_ratios

33. Guide to CSS object-view-box、https://blog.logrocket.com/guide-css-object-view-box

34. CSS inset() function、https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/inset

35. Deprecated and obsolete features、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features

36. CSS in 2025-2026: It’s Getting Too Powerful and I’m Scared、https://dev.to/pixelperfect_pro/css-in-2025-2026-its-getting-too-powerful-and-im-scared-2ej8

37. Deprecated Features in ACSS、https://docs.automaticcss.com/fundamentals/deprecated-features

38. Web Design Trends for 2025 and 2026、https://www.theedigital.com/blog/web-design-trends

39. HTML/CSS in Emails、https://designmodo.com/html-css-emails/

40. Top CSS frameworks in 2025、https://www.contentful.com/blog/css-frameworks/

41. Best CSS Frameworks of 2025、https://www.wearedevelopers.com/en/magazine/362/best-css-frameworks

42. 10 New CSS Features You Need to Know for 2026、https://ys1113457623.medium.com/10-new-css-features-you-need-to-know-for-2026-aa86e89fddc6

43. What CSS units do you guys use for easy and clean layouts?、https://www.reddit.com/r/webdev/comments/1m4uef8/what_css_units_do_you_guys_use_for_easy_and/

44. How to choose a CSS unit to create a better site layout、https://wpengine.com/resources/choose-css-unit-create-better-site-layouts-how-to/

45. Master CSS Naming Conventions in 2025、https://medium.com/@wmukhtar/master-css-naming-conventions-in-2025-bem-oocss-smacss-suit-css-and-beyond-c3afe583c92b

46. BEM Naming Convention、https://getbem.com/naming/

47. Mastering the BEM Convention in CSS、https://medium.com/@iamabhinav30/mastering-the-bem-convention-in-css-write-scalable-and-maintainable-styles-43fd5ce6b4cd

48. Do you still use BEM naming convention at work?、https://www.reddit.com/r/css/comments/1odv2q6/do_you_still_use_bem_naming_convention_at_work/

49. BEM Methodology Naming Convention、https://en.bem.info/methodology/naming-convention/

コメント

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