同じ要素で、同じプロパティで、同じ詳細度なら後勝ち。

CSSは単純に「下に書いた方が勝つ」ではなく、
① 要素自身に指定がある？
↓
② その指定同士で詳細度を比較
↓
③ 同じ強さ（詳細度）なら下が勝つ
↓
④ 指定がなければ親から継承
の順に考えます。

英語名だけで書く。
日本語環境でも英語名で問題なく動作する。

日本語名で書くのは良くない。
日本語名は OS 言語依存で、CSS が認識しないことが多い。
CSS が参照するのは「内部名（英語名）」であり、日本語名は一致しないことが多い。

font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

開発者ツールで確認する方法（Chrome / Edge / Firefox 共通）

1. 調べたい文字を右クリック →「検証」
ブラウザの開発者ツールが開きます。

2. Elements（要素）パネルで該当の要素を選択

3. Styles ではなく「Computed」タブを開く
ここに 実際に適用された CSS の最終結果 が表示されます。

4. 「Rendered Fonts（使用フォント）」を探す
Chrome / Edge / Firefox には 実際に描画に使われたフォント名 が表示される専用欄があります。

Chrome → Rendered Fonts
Firefox → Fonts
Edge → Rendered Fonts
Safari → Fonts（開発メニューを有効にすると表示）
ここに その要素の中で実際に使われたフォント名とフォントファイル が表示されます。

コピーするには Ctrl + C を押します。

kbd { display: inline-block; padding: 2px 6px; margin: 0 2px; border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7; box-shadow: 0 1px 0 #e0e0e0; font-size: 0.9em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

<p>コピーするには <kbd>Ctrl</kbd> + <kbd>C</kbd> を押します。</p>

<kbd> は HTML に用意されている “キーボード入力を表すためのタグ” です。
「ユーザーがキーボードで押すキー」や「ショートカット」を示すときに使うための、意味づけされた要素です。

<kbd> の役割
意味（セマンティクス）を持つタグ → 「ここはキーボード操作を表している」とブラウザや支援技術に伝えられます。
デフォルトでは特別な見た目はほぼありませんが、CSS で自由に装飾できます。
HTML5 で正式に定義されている要素です。

box-sizing: content-box; （初期値）
box-sizing: border-box;

画像はデフォルトで inline 扱いなので、文字のベースラインに合わせて配置されます。その結果、画像の下に余白（行間）ができることがある。

以下のいずれかを使うと、余白が消えます：

.popup-image img { display: block; }

または：

.popup-image img { vertical-align: bottom; }

display: block にすると、画像がブロック要素として扱われ、行間の影響を受けなくなります。
vertical-align: bottom はインラインのままでも余白を抑えられます。

rgb(31 120 50) rgb(30% 20% 50%) rgb(255 122 127 / 80%) rgb(255 122 127 / .2)

次の値を含めなければなりません。
<font-size>
<font-family>
次の値は任意で含めることができます。
<font-style>
<font-variant>
<font-weight>
<font-stretch>
<line-height>
font-style, font-variant, font-weight は font-size よりも前になければなりません。
font-variant は CSS 2.1 で定義された値、つまり normal および small-caps のみ指定できます。
font-stretch は単一のキーワード値のみを指定することができます。
line-height は font-size の直後に、 "/" で区切って、 "16px/3" のように指定します。
font-family は指定される最後の値である必要があります。

font: <font-style> <font-weight> <font-size> <font-family>;

font-styleプロパティ
normal，italic，oblique

汎用フォント・ファミリー名
serif：明朝体
sans-serif：ゴシック体
cursive：筆記体
fantasy：ファンタジー
monospace：等幅

<style> .customize_tag:last-of-type { border-bottom: dashed 3px blue; padding-bottom: 1em; } </style> <div> <p class="customize_tag"> AAA </p> <p class="customize_tag"> BBB </p> </div> <p> CCC </p>

<div>要素で囲むことで、<p> 要素の最後の子要素が正しく認識されるようになります。