CSSの基本構造

1　規則セット

セレクターリスト

複数のセレクターをコンマで区切って並べ、共通のスタイルを適用します。

要素タグ名（p）・クラス（.className）・ID（#idName）などが使えます。

→ セレクターリストの使用例

宣言ブロック

中括弧 { } で囲まれ、プロパティと値のペアを記述します。

宣言

プロパティ : 値; の形式。これらをまとめて ルール（規則）セット といいます。

CSS とは カスケーディングスタイルシート の意味です。

2　プロパティ

プロパティは数多くあるため、MDN の一覧を標準リファレンスとして使うのがおすすめです。

margin はよく使われるショートハンド記述です。Google検索で例を確認

プロパティ値関数 calc() を使うと計算が可能です。例：width: calc(100% / 3); — MDN参考

3　セレクター分類

要素・クラス・ID によるセレクター

• タイプセレクター（div, p, header など）
• クラスセレクター（.className） — ID より優先度は低い
• ID セレクター（#idName） — 優先度が高い
• ユニバーサルセレクター * — 特定範囲に使う場合 article * のように

属性によるセレクター

• a[href] — href 属性を持つ a タグ
• a[href="https://www.yahoo.com"] — 完全一致
• a[href^="https://www"] — 前方一致
• a[href*="yahoo"] — 部分一致
• a[href$=".co.jp"] — 後方一致

疑似クラス・疑似要素によるセレクター

• :first-child / :first-of-type / :nth-of-type(2)
• :not(:first-of-type) — 最初以外に適用
• :hover — カーソルが触れたとき
• ::after / ::before — 前後にコンテンツを挿入
• ::first-line / ::first-letter

結合子

• 子孫結合子：main article h1 {}
• 子結合子：main > h1 {}
• 隣接兄弟：article p + p {}
• 一般兄弟：article h1 ~ p {}

MDN: 結合子の詳細

4　カスケード・詳細度・継承

カスケード（cascading）

同じ h1 に複数のルールがある場合、後に書いたものが適用されます。カスケード順（MDN）

詳細度

優先度は #id > .class > 要素名 の順。インラインスタイルは スコア 1000 で最優先。!important はさらに上ですが多用は避けましょう。

継承と抑制

親要素から子要素へプロパティ値が引き継がれます。抑制には以下を使います：

• inherit — 親の値を明示的に継承
• initial — ブラウザのデフォルト値に戻す
• unset — 継承できるなら inherit、そうでなければ initial
• all: unset; — すべてのスタイルをリセット

.fix {
  background-color: initial;
  border: initial;
}
/* または全リセット */
.fix { all: unset; }

5　ブロック要素とインライン要素

div（ブロック要素）は上下左右に margin が効き、横並びにできません。
span（インライン要素）は左右のみ margin が効き、横並びになります。

/* ブロック → インライン に変換 */
div  { display: inline; }
/* インライン → ブロック に変換 */
span { display: block; }
/* 両方の性質を持つ */
span { display: inline-block; }

→ ブロック・インラインの実装例

6　Flexbox

1次元（行または列）のレイアウトを柔軟に制御できます。MDN: Flexboxの基本概念

.container {
  display: flex;
  flex-direction: row;      /* 主軸の方向: row（横）/ column（縦） */
  justify-content: center;  /* 主軸方向の揃え */
  align-items: center;      /* 交差軸方向の揃え */
  gap: 16px;
}

→ Flexboxでアクセシブルなページを作成

7　flex プロパティ

flex プロパティは flex-grow・flex-shrink・flex-basis のショートハンドです。

.item { flex: 1; }          /* flex-grow:1 flex-shrink:1 flex-basis:0 */
.item { flex: 0 0 200px; }  /* 幅を 200px で固定 */

→ flex プロパティで幅を詳細に指定する例

8　outline でレイアウトを調べる

outline: 1px solid red; は border と違いレイアウトに影響しない（幅がカウントされない）ため、デバッグに最適です。

/* デバッグ用：全要素の輪郭を確認 */
* { outline: 1px solid red; }

9　clamp() 関数

値を最小値と最大値の間に制限します。clamp(最小値, 推奨値, 最大値)

/* フォントサイズをビューポートに合わせて可変に */
font-size: clamp(1rem, 2.5vw, 1.5rem);

/* 幅をデバイス幅に応じて柔軟に */
width: clamp(50px, 60%, 800px);

→ clamp 関数の実装例　／　MDN参考