"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", hr: "hr", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを指定するための言語です。HTML がページの", _jsx(_components.strong, { children: "構造" }), "を定義するのに対し、CSS はその", _jsx(_components.strong, { children: "見た目" }), "を定義します。文字の色・サイズ・配置・余白・背景・アニメーションなど、あらゆるスタイルを制御できます。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. CSS の適用方法" }), "\n", _jsx(_components.p, { children: "CSS をウェブページに適用する方法は3種類あります。" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "方法" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "記述場所" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "使いどころ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "優先度" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "外部スタイルシート" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["別ファイル（", _jsx("code", { children: "style.css" }), "）に記述し、", _jsx("code", { children: "" }), " タグで読み込む"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "実務の標準。サイト全体に一貫したスタイルを適用できる" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "低" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "内部スタイル" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["HTML の ", _jsx("code", { children: "" }), " 内に ", _jsx("code", { children: "\n\n\n

テキスト

\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "2. CSS の基本構文" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "セレクター {\n プロパティ: 値;\n プロパティ: 値;\n}\n\n/* 例 */\nh1 {\n color: #333333;\n font-size: 2rem;\n font-weight: bold;\n}\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "構成要素" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スタイルを適用する HTML 要素を指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "h1" }), " / ", _jsx("code", { children: ".card" }), " / ", _jsx("code", { children: "#header" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "プロパティ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "変更したいスタイルの種類" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "color" }), " / ", _jsx("code", { children: "font-size" }), " / ", _jsx("code", { children: "margin" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "値" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "プロパティに設定する具体的な値" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "red" }), " / ", _jsx("code", { children: "16px" }), " / ", _jsx("code", { children: "1rem" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "宣言ブロック" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["波括弧 ", _jsx("code", { children: "{ }" }), " で囲まれたプロパティと値のセット"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "{ color: red; }" }) })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "3. セレクターの種類" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "セレクター" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "記法" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "対象" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "h1" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "指定したタグ名の要素すべて" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "p { color: gray; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "クラスセレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: ".classname" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "指定したクラスを持つ要素すべて" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: ".card { padding: 1rem; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ID セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "#id" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "指定した ID を持つ要素（1ページに1つ）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "#header { background: white; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "全称セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "*" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ページ上のすべての要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "* { box-sizing: border-box; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子孫セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "A B" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "A の中に含まれるすべての B" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "nav a { color: white; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "A > B" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "A の直接の子要素 B のみ" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "ul > li { list-style: none; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "隣接セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "A + B" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "A の直後に続く兄弟要素 B" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "h2 + p { margin-top: 0; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "属性セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "[attr]" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "指定した属性を持つ要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "input[type=\"text\"] { border: 1px solid; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "擬似クラス" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: ":hover" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "特定の状態にある要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "a:hover { text-decoration: underline; }" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "擬似要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "::before" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の特定の部分（前後・最初の文字など）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "p::first-line { font-weight: bold; }" }) })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "4. テキスト関連プロパティ" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "値の例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "color" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テキストの色" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "red" }), " / ", _jsx("code", { children: "#333" }), " / ", _jsx("code", { children: "rgb(0,0,0)" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "font-size" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォントのサイズ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "16px" }), " / ", _jsx("code", { children: "1rem" }), " / ", _jsx("code", { children: "1.2em" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "font-weight" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォントの太さ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "normal" }), " / ", _jsx("code", { children: "bold" }), " / ", _jsx("code", { children: "700" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "font-family" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォントの種類" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "'Noto Sans JP', sans-serif" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "font-style" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "フォントのスタイル" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "normal" }), " / ", _jsx("code", { children: "italic" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "line-height" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "行の高さ（行間）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "1.5" }), " / ", _jsx("code", { children: "24px" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "letter-spacing" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "文字間隔" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "0.05em" }), " / ", _jsx("code", { children: "2px" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "text-align" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テキストの水平方向の揃え" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "left" }), " / ", _jsx("code", { children: "center" }), " / ", _jsx("code", { children: "right" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "text-decoration" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テキストの装飾" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "none" }), " / ", _jsx("code", { children: "underline" }), " / ", _jsx("code", { children: "line-through" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "text-transform" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "テキストの大文字・小文字変換" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "uppercase" }), " / ", _jsx("code", { children: "capitalize" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "white-space" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "空白文字・改行の扱い方" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "normal" }), " / ", _jsx("code", { children: "nowrap" }), " / ", _jsx("code", { children: "pre" })] })] }), _jsxs("tr", { children: [_jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "overflow" }), " + ", _jsx("code", { children: "text-overflow" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "はみ出したテキストの表示方法" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "ellipsis" }), "（省略記号「…」）"] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "5. ボックスモデル（余白・枠線）" }), "\n", _jsxs(_components.p, { children: ["すべての HTML 要素は「ボックス」として扱われます。外側から順に ", _jsx(_components.strong, { children: "margin → border → padding → content" }), " の4層で構成されます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "┌─────────────── margin ───────────────┐\n│ ┌──────────── border ─────────────┐ │\n│ │ ┌───────── padding ──────────┐ │ │\n│ │ │ content │ │ │\n│ │ └────────────────────────────┘ │ │\n│ └─────────────────────────────────┘ │\n└──────────────────────────────────────┘\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "値の例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "margin" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の外側の余白。上下左右まとめて指定できる" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "16px" }), " / ", _jsx("code", { children: "8px 16px" }), " / ", _jsx("code", { children: "auto" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "margin-top / right / bottom / left" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "各方向のマージンを個別に指定する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "margin-top: 1rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "padding" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の内側の余白（コンテンツと枠線の間）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "16px" }), " / ", _jsx("code", { children: "8px 24px" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "padding-top / right / bottom / left" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "各方向のパディングを個別に指定する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "padding-left: 1.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "border" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "枠線の太さ・種類・色をまとめて指定する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "1px solid #ccc" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "border-radius" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "角丸の半径を指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "8px" }), " / ", _jsx("code", { children: "50%" }), "（円形）"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "box-sizing" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "width/height の計算方法を指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "border-box" }), "（padding/border を含む）/ ", _jsx("code", { children: "content-box" }), "（デフォルト）"] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "width / height" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の幅・高さ" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "100%" }), " / ", _jsx("code", { children: "300px" }), " / ", _jsx("code", { children: "auto" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "max-width / min-width" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最大・最小幅を制限する" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "max-width: 1200px" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "box-shadow" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素にドロップシャドウを付ける" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "0 4px 6px rgba(0,0,0,0.1)" }) })] })] })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "実務のベストプラクティス：" }), " ", _jsx(_components.code, { children: "* { box-sizing: border-box; }" }), " をリセット CSS として設定しておくと、width の計算が直感的になります。"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "6. 背景・色プロパティ" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "値の例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "background-color" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景色を設定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "#ffffff" }), " / ", _jsx("code", { children: "transparent" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "background-image" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景画像・グラデーションを設定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "url('/img.jpg')" }), " / ", _jsx("code", { children: "linear-gradient(...)" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "background-size" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景画像のサイズを指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "cover" }), " / ", _jsx("code", { children: "contain" }), " / ", _jsx("code", { children: "100%" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "background-position" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景画像の位置を指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "center" }), " / ", _jsx("code", { children: "top right" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "background-repeat" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "背景画像の繰り返しを指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "no-repeat" }), " / ", _jsx("code", { children: "repeat-x" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "opacity" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素全体の不透明度を指定する（子要素にも影響）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "0" }), "（透明）〜 ", _jsx("code", { children: "1" }), "（不透明）"] })] })] })] }), "\n", _jsx(_components.h3, { children: "CSS カスタムプロパティ（変数）" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ":root {\n --color-primary: #3b82f6;\n --color-text: #1f2937;\n --spacing-base: 1rem;\n}\n\nh1 {\n color: var(--color-primary);\n margin-bottom: var(--spacing-base);\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "7. Display と Position（配置）" }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ / 値" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "display: block" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ブロック要素として表示。幅が親要素いっぱいに広がり、前後に改行が入る" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "display: inline" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "インライン要素として表示。テキストの流れに沿って配置される" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "display: inline-block" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "インライン配置かつ width/height が指定できる" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "display: none" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素を非表示にし、スペースも占有しない" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "visibility: hidden" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素を非表示にするが、スペースは保持される" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "position: static" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "デフォルト。通常のフロー通りに配置される" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "position: relative" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "元の位置を基準にオフセット（top/left など）で移動できる" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "position: absolute" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "直近の position 指定済み祖先要素を基準に絶対配置する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "position: fixed" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ビューポートを基準に固定配置する（スクロールしても動かない）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "position: sticky" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スクロール時に指定位置で固定される（ヘッダーなどに使用）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "z-index" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の重なり順を指定する。数値が大きいほど前面に表示される" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "overflow" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: ["はみ出した内容の表示方法。", _jsx("code", { children: "hidden" }), " / ", _jsx("code", { children: "scroll" }), " / ", _jsx("code", { children: "auto" })] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "8. Flexbox レイアウト" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ".container {\n display: flex;\n flex-direction: row; /* 主軸の方向 */\n justify-content: center; /* 主軸方向の揃え */\n align-items: center; /* 交差軸方向の揃え */\n gap: 1rem; /* 子要素間の隙間 */\n}\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "主な値" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "flex-direction" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "row" }), " / ", _jsx("code", { children: "column" }), " / ", _jsx("code", { children: "row-reverse" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子要素を並べる方向（主軸）を指定する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "flex-wrap" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "nowrap" }), " / ", _jsx("code", { children: "wrap" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子要素がはみ出した場合に折り返すかを指定する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "justify-content" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "flex-start" }), " / ", _jsx("code", { children: "center" }), " / ", _jsx("code", { children: "flex-end" }), " / ", _jsx("code", { children: "space-between" }), " / ", _jsx("code", { children: "space-around" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "主軸方向の子要素の揃え方を指定する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "align-items" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "flex-start" }), " / ", _jsx("code", { children: "center" }), " / ", _jsx("code", { children: "flex-end" }), " / ", _jsx("code", { children: "stretch" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "交差軸方向の子要素の揃え方を指定する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "gap" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "1rem" }), " / ", _jsx("code", { children: "8px 16px" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子要素間の隙間をまとめて指定する" })] }), _jsxs("tr", { children: [_jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "flex" }), "（子要素）"] }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "1" }), " / ", _jsx("code", { children: "0 0 auto" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "子要素の伸縮比率を指定する（flex-grow / shrink / basis の省略形）" })] }), _jsxs("tr", { children: [_jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "align-self" }), "（子要素）"] }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "auto" }), " / ", _jsx("code", { children: "center" }), " / ", _jsx("code", { children: "flex-end" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "個別の子要素の交差軸揃えを上書きする" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "9. CSS Grid レイアウト" }), "\n", _jsx(_components.p, { children: "Grid は2次元（行・列）のレイアウトを扱います。複雑なページ構造に適しています。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3列均等 */\n grid-template-rows: auto;\n gap: 1.5rem;\n}\n\n/* 特定のアイテムを複数列にまたがせる */\n.featured {\n grid-column: span 2;\n}\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "値の例" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "grid-template-columns" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "repeat(3, 1fr)" }), " / ", _jsx("code", { children: "200px auto" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "列の数とサイズを定義する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "grid-template-rows" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "auto" }), " / ", _jsx("code", { children: "100px 1fr" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "行の数とサイズを定義する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "gap" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "1rem" }), " / ", _jsx("code", { children: "16px 24px" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "行・列間の隙間を指定する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "grid-column" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "span 2" }), " / ", _jsx("code", { children: "1 / 3" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アイテムを複数列にまたがらせる" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "grid-row" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "span 2" }), " / ", _jsx("code", { children: "1 / 3" })] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アイテムを複数行にまたがらせる" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "grid-template-areas" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "\"header header\" \"main aside\"" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "名前でレイアウト領域を定義する" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "place-items" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "center" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "align-items と justify-items の省略形" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "10. レスポンシブデザイン（メディアクエリ）" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "/* デフォルト：モバイルファースト */\n.container {\n padding: 1rem;\n}\n\n/* タブレット（768px 以上） */\n@media (min-width: 768px) {\n .container {\n padding: 2rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n}\n\n/* PC（1024px 以上） */\n@media (min-width: 1024px) {\n .container {\n grid-template-columns: repeat(3, 1fr);\n max-width: 1200px;\n margin: 0 auto;\n }\n}\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "ブレークポイント" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "条件" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "対象デバイス" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "デフォルト" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "なし（min-width 指定なし）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "スマートフォン（モバイルファースト）" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "sm" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "min-width: 640px" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "大きめのスマートフォン" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "md" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "min-width: 768px" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "タブレット" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "lg" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "min-width: 1024px" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ノートPC" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "xl" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "min-width: 1280px" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "デスクトップ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "2xl" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "min-width: 1536px" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "大型ディスプレイ" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ダークモード" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "prefers-color-scheme: dark" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "OS のダークモード設定に応じたスタイル" })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "印刷" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "print" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "印刷時のスタイル（不要な要素を非表示にするなど）" })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "11. トランジション・アニメーション" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "/* トランジション：状態変化をなめらかにする */\n.button {\n background-color: #3b82f6;\n transition: background-color 0.3s ease, transform 0.2s ease;\n}\n\n.button:hover {\n background-color: #2563eb;\n transform: scale(1.05);\n}\n\n/* アニメーション：繰り返し動作 */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.card {\n animation: fadeIn 0.5s ease forwards;\n}\n" }) }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "プロパティ" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "説明" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "値の例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transition" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "プロパティの変化をなめらかにする（省略形）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "all 0.3s ease" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transition-property" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "トランジションを適用するプロパティを指定する" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "color" }), " / ", _jsx("code", { children: "transform" }), " / ", _jsx("code", { children: "all" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transition-duration" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "トランジションの時間" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "0.3s" }), " / ", _jsx("code", { children: "200ms" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transition-timing-function" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "変化のイージング（加速・減速パターン）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "ease" }), " / ", _jsx("code", { children: "linear" }), " / ", _jsx("code", { children: "ease-in-out" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "transform" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素の変形（移動・回転・拡大縮小）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "translateX(10px)" }), " / ", _jsx("code", { children: "rotate(45deg)" }), " / ", _jsx("code", { children: "scale(1.1)" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "animation" }) }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "@keyframes" }), " で定義したアニメーションを適用する（省略形）"] }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "fadeIn 0.5s ease forwards" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "animation-iteration-count" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "アニメーションの繰り返し回数" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "1" }), " / ", _jsx("code", { children: "infinite" })] })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "12. CSS の詳細度（Specificity）" }), "\n", _jsxs(_components.p, { children: ["複数のスタイルが同じ要素に当たる場合、", _jsx(_components.strong, { children: "詳細度" }), "の高いセレクターが優先されます。"] }), "\n", _jsxs("table", { className: "w-full text-xs border border-gray-300", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-100", children: [_jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "セレクター" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "詳細度" }), _jsx("th", { className: "border border-gray-300 px-4 py-2 text-left", children: "例" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "インラインスタイル" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最高（1000）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "style=\"color: red\"" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "ID セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "高（100）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "#header" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "クラス・属性・擬似クラス" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "中（10）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: ".card" }), " / ", _jsx("code", { children: "[type=\"text\"]" }), " / ", _jsx("code", { children: ":hover" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "要素・擬似要素" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "低（1）" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "h1" }), " / ", _jsx("code", { children: "::before" })] })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: "全称セレクター" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "最低（0）" }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "*" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "border border-gray-300 px-4 py-2", children: _jsx("code", { children: "!important" }) }), _jsx("td", { className: "border border-gray-300 px-4 py-2", children: "詳細度を無視して最優先にする" }), _jsxs("td", { className: "border border-gray-300 px-4 py-2", children: [_jsx("code", { children: "color: red !important" }), "（多用は禁物）"] })] })] })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ポイント：" }), " 詳細度の高いセレクターに頼りすぎるとスタイルの上書きが難しくなります。なるべくクラスセレクターで統一し、ID や ", _jsx(_components.code, { children: "!important" }), " の多用は避けましょう。"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

CSS について