[{"data":1,"prerenderedAt":741},["ShallowReactive",2],{"navigation_docs":3,"-frontend-css-properties":190,"-frontend-css-properties-surround":736},[4,136,150,183],{"title":5,"path":6,"stem":7,"children":8},"Frontend","\u002Ffrontend","1.frontend",[9,13,39,76,109,130],{"title":10,"path":6,"stem":11,"order":12},"フロントエンド ガイドライン","1.frontend\u002Findex",1,{"title":14,"path":15,"stem":16,"children":17},"HTML","\u002Ffrontend\u002Fhtml","1.frontend\u002F1.html\u002Findex",[18,19,23,27,31,35],{"title":14,"path":15,"stem":16},{"title":20,"path":21,"stem":22},"コードスタイル","\u002Ffrontend\u002Fhtml\u002Fcode-style","1.frontend\u002F1.html\u002Fcode-style",{"title":24,"path":25,"stem":26},"見出しタグ","\u002Ffrontend\u002Fhtml\u002Fheading","1.frontend\u002F1.html\u002Fheading",{"title":28,"path":29,"stem":30},"img タグ","\u002Ffrontend\u002Fhtml\u002Fimg","1.frontend\u002F1.html\u002Fimg",{"title":32,"path":33,"stem":34},"パスとリンク","\u002Ffrontend\u002Fhtml\u002Flink","1.frontend\u002F1.html\u002Flink",{"title":36,"path":37,"stem":38},"品質管理","\u002Ffrontend\u002Fhtml\u002Fquality","1.frontend\u002F1.html\u002Fquality",{"title":40,"path":41,"stem":42,"children":43},"CSS","\u002Ffrontend\u002Fcss","1.frontend\u002F2.css\u002Findex",[44,45,49,52,56,60,64,68,72],{"title":40,"path":41,"stem":42},{"title":46,"path":47,"stem":48},"命名規則・コンポーネント設計","\u002Ffrontend\u002Fcss\u002Farchitecture","1.frontend\u002F2.css\u002Farchitecture",{"title":20,"path":50,"stem":51},"\u002Ffrontend\u002Fcss\u002Fcode-style","1.frontend\u002F2.css\u002Fcode-style",{"title":53,"path":54,"stem":55},"Web フォント","\u002Ffrontend\u002Fcss\u002Ffonts","1.frontend\u002F2.css\u002Ffonts",{"title":57,"path":58,"stem":59},"記述順番","\u002Ffrontend\u002Fcss\u002Forder","1.frontend\u002F2.css\u002Forder",{"title":61,"path":62,"stem":63},"プロパティのルール","\u002Ffrontend\u002Fcss\u002Fproperties","1.frontend\u002F2.css\u002Fproperties",{"title":65,"path":66,"stem":67},"Tailwind CSS","\u002Ffrontend\u002Fcss\u002Ftailwind","1.frontend\u002F2.css\u002Ftailwind",{"title":69,"path":70,"stem":71},"値のルール","\u002Ffrontend\u002Fcss\u002Fvalues","1.frontend\u002F2.css\u002Fvalues",{"title":73,"path":74,"stem":75},"CSS 変数（カスタムプロパティ）","\u002Ffrontend\u002Fcss\u002Fvariables","1.frontend\u002F2.css\u002Fvariables",{"title":77,"path":78,"stem":79,"children":80},"JavaScript","\u002Ffrontend\u002Fjs","1.frontend\u002F3.js\u002Findex",[81,82,85,89,93,97,101,105],{"title":77,"path":78,"stem":79},{"title":20,"path":83,"stem":84},"\u002Ffrontend\u002Fjs\u002Fcode-style","1.frontend\u002F3.js\u002Fcode-style",{"title":86,"path":87,"stem":88},"エラーハンドリング","\u002Ffrontend\u002Fjs\u002Ferror-handling","1.frontend\u002F3.js\u002Ferror-handling",{"title":90,"path":91,"stem":92},"ライブラリの利用","\u002Ffrontend\u002Fjs\u002Flibraries","1.frontend\u002F3.js\u002Flibraries",{"title":94,"path":95,"stem":96},"HTML への読み込み","\u002Ffrontend\u002Fjs\u002Floading","1.frontend\u002F3.js\u002Floading",{"title":98,"path":99,"stem":100},"モジュール","\u002Ffrontend\u002Fjs\u002Fmodule-structure","1.frontend\u002F3.js\u002Fmodule-structure",{"title":102,"path":103,"stem":104},"命名規則","\u002Ffrontend\u002Fjs\u002Fnaming","1.frontend\u002F3.js\u002Fnaming",{"title":106,"path":107,"stem":108},"パフォーマンス最適化","\u002Ffrontend\u002Fjs\u002Fperformance","1.frontend\u002F3.js\u002Fperformance",{"title":110,"path":111,"stem":112,"children":113},"画像・メディアリソースガイドライン","\u002Ffrontend\u002Fmedia","1.frontend\u002F4.media\u002Findex",[114,115,119,123,127],{"title":110,"path":111,"stem":112},{"title":116,"path":117,"stem":118},"アクセシビリティ","\u002Ffrontend\u002Fmedia\u002Faccessibility","1.frontend\u002F4.media\u002Faccessibility",{"title":120,"path":121,"stem":122},"画像フォーマット","\u002Ffrontend\u002Fmedia\u002Fformats","1.frontend\u002F4.media\u002Fformats",{"title":124,"path":125,"stem":126},"ファイル命名規則","\u002Ffrontend\u002Fmedia\u002Fnaming","1.frontend\u002F4.media\u002Fnaming",{"title":106,"path":128,"stem":129},"\u002Ffrontend\u002Fmedia\u002Foptimization","1.frontend\u002F4.media\u002Foptimization",{"title":131,"path":132,"stem":133,"children":134},"開発環境テンプレート","\u002Ffrontend\u002Fenvironment","1.frontend\u002F5.environment\u002Findex",[135],{"title":131,"path":132,"stem":133},{"title":137,"path":138,"stem":139,"children":140,"page":149},"Deploy Release","\u002Fdeploy-release","2.deploy-release",[141,145],{"title":142,"path":143,"stem":144},"デプロイ","\u002Fdeploy-release\u002Fdeploy","2.deploy-release\u002Fdeploy",{"title":146,"path":147,"stem":148},"リリース","\u002Fdeploy-release\u002Frelease","2.deploy-release\u002Frelease",false,{"title":151,"path":152,"stem":153,"children":154},"Git","\u002Fgit","3.git",[155,159,163,167,171,175,179],{"title":156,"path":152,"stem":157,"order":158},"Git ガイドライン","3.git\u002Findex",3,{"title":160,"path":161,"stem":162},"ブランチ戦略","\u002Fgit\u002Fbranch","3.git\u002Fbranch",{"title":164,"path":165,"stem":166},"CI\u002FCD運用","\u002Fgit\u002Fcicd","3.git\u002Fcicd",{"title":168,"path":169,"stem":170},"コミットメッセージとタグ","\u002Fgit\u002Fmessage","3.git\u002Fmessage",{"title":172,"path":173,"stem":174},"Pull Request運用","\u002Fgit\u002Fpull-request","3.git\u002Fpull-request",{"title":176,"path":177,"stem":178},"リポジトリ運用","\u002Fgit\u002Frepository","3.git\u002Frepository",{"title":180,"path":181,"stem":182},"GitHub権限・セキュリティ","\u002Fgit\u002Fsecurity","3.git\u002Fsecurity",{"title":184,"path":185,"stem":186,"children":187,"order":189},"AI 利用ガイドライン","\u002Fai","4.ai\u002Findex",[188],{"title":184,"path":185,"stem":186,"order":189},4,{"id":191,"title":61,"body":192,"description":730,"extension":731,"links":732,"meta":733,"navigation":283,"path":62,"seo":734,"stem":63,"__hash__":735},"docs\u002F1.frontend\u002F2.css\u002Fproperties.md",{"type":193,"value":194,"toc":723},"minimark",[195,199,208,217,323,326,336,343,366,369,373,380,454,463,516,519,532,719],[196,197,198],"h2",{"id":198},"transition",[200,201,202,203,207],"p",{},"不要なプロパティまでアニメーションしないよう",[204,205,206],"code",{},"all"," の使用は避け、プロパティを明示的に指定してください。",[209,210,211,212,216],"note",{},"このルールは",[213,214,215],"strong",{},"Stylelint","の設定に基づいて自動的に整理されます。",[218,219,224],"pre",{"className":220,"code":221,"language":222,"meta":223,"style":223},"language-css shiki shiki-themes github-light material-theme material-theme-palenight","\u002F* ❌ 悪い例 *\u002F\n.button {\n  transition: all 0.3s;\n}\n\n\u002F* ✅ 良い例 *\u002F\n.button {\n  transition: background-color 0.3s;\n}\n","css","",[204,225,226,234,249,273,278,285,291,300,318],{"__ignoreMap":223},[227,228,230],"span",{"class":229,"line":12},"line",[227,231,233],{"class":232},"su8Ar","\u002F* ❌ 悪い例 *\u002F\n",[227,235,237,241,245],{"class":229,"line":236},2,[227,238,240],{"class":239},"sjROF",".",[227,242,244],{"class":243},"s3jxQ","button",[227,246,248],{"class":247},"sN50r"," {\n",[227,250,251,255,258,262,266,270],{"class":229,"line":158},[227,252,254],{"class":253},"s7bGF","  transition",[227,256,257],{"class":247},":",[227,259,261],{"class":260},"s_GZX"," all",[227,263,265],{"class":264},"s9owh"," 0.3",[227,267,269],{"class":268},"sRmsN","s",[227,271,272],{"class":247},";\n",[227,274,275],{"class":229,"line":189},[227,276,277],{"class":247},"}\n",[227,279,281],{"class":229,"line":280},5,[227,282,284],{"emptyLinePlaceholder":283},true,"\n",[227,286,288],{"class":229,"line":287},6,[227,289,290],{"class":232},"\u002F* ✅ 良い例 *\u002F\n",[227,292,294,296,298],{"class":229,"line":293},7,[227,295,240],{"class":239},[227,297,244],{"class":243},[227,299,248],{"class":247},[227,301,303,305,307,311,314,316],{"class":229,"line":302},8,[227,304,254],{"class":253},[227,306,257],{"class":247},[227,308,310],{"class":309},"sKuZN"," background-color ",[227,312,313],{"class":264},"0.3",[227,315,269],{"class":268},[227,317,272],{"class":247},[227,319,321],{"class":229,"line":320},9,[227,322,277],{"class":247},[196,324,325],{"id":325},"z-index",[327,328,329,331,332,335],"warning",{},[204,330,325],{}," の乱用や統一されたルールに従わない（例: ",[204,333,334],{},"z-index: 9999;","など）値の指定は、重なり順のトラブルや保守性の低下につながります。",[200,337,338,339,342],{},"基本的には ",[213,340,341],{},"HTML で後に記載した要素が上に重なる"," ため、z-index を使わずに制御してください。",[200,344,345,346,349,350,353,354,357,358,361,362,365],{},"どうしても重なり順を明示的に制御したい場合のみ、",[204,347,348],{},"z-index: 1"," または ",[204,351,352],{},"z-index: -1"," のみを使用するようにしてください。",[355,356],"br",{},"\n上記以外の",[204,359,360],{},"z-index: 3"," や ",[204,363,364],{},"z-index: 10;","などの直接指定は禁止します。",[200,367,368],{},"さらに複雑なレイヤー構造が必要な場合のみ、用途ごとに変数で一元管理します。",[370,371,372],"h3",{"id":372},"変数定義例",[200,374,375,376,379],{},"z-index の用途ごとに、",[204,377,378],{},":root"," で変数をまとめて定義します。",[218,381,383],{"className":220,"code":382,"language":222,"meta":223,"style":223},":root {\n  --z-index-header: 100;\n}\n\n\u002F* 使用例 *\u002F\n.header {\n  z-index: var(--z-index-header);\n}\n",[204,384,385,395,408,412,416,421,430,450],{"__ignoreMap":223},[227,386,387,389,393],{"class":229,"line":12},[227,388,257],{"class":239},[227,390,392],{"class":391},"sAjK8","root",[227,394,248],{"class":247},[227,396,397,401,403,406],{"class":229,"line":236},[227,398,400],{"class":399},"s3AGf","  --z-index-header",[227,402,257],{"class":247},[227,404,405],{"class":264}," 100",[227,407,272],{"class":247},[227,409,410],{"class":229,"line":158},[227,411,277],{"class":247},[227,413,414],{"class":229,"line":189},[227,415,284],{"emptyLinePlaceholder":283},[227,417,418],{"class":229,"line":280},[227,419,420],{"class":232},"\u002F* 使用例 *\u002F\n",[227,422,423,425,428],{"class":229,"line":287},[227,424,240],{"class":239},[227,426,427],{"class":243},"header",[227,429,248],{"class":247},[227,431,432,435,437,441,444,447],{"class":229,"line":293},[227,433,434],{"class":253},"  z-index",[227,436,257],{"class":247},[227,438,440],{"class":439},"sLy7x"," var",[227,442,443],{"class":247},"(",[227,445,446],{"class":399},"--z-index-header",[227,448,449],{"class":247},");\n",[227,451,452],{"class":229,"line":302},[227,453,277],{"class":247},[200,455,456,457,459,462],{},"グローバル変数で管理するほどではないが「特定の要素よりも前に出したい」場合は、",[355,458],{},[204,460,461],{},"calc()"," を使って局所的に調整することもできます。",[218,464,466],{"className":220,"code":465,"language":222,"meta":223,"style":223},"\u002F* 例：ヘッダーより1つ前に出したい場合 *\u002F\n.element {\n  z-index: calc(var(--z-index-header) + 1);\n}\n",[204,467,468,473,482,512],{"__ignoreMap":223},[227,469,470],{"class":229,"line":12},[227,471,472],{"class":232},"\u002F* 例：ヘッダーより1つ前に出したい場合 *\u002F\n",[227,474,475,477,480],{"class":229,"line":236},[227,476,240],{"class":239},[227,478,479],{"class":243},"element",[227,481,248],{"class":247},[227,483,484,486,488,491,493,496,498,500,503,507,510],{"class":229,"line":158},[227,485,434],{"class":253},[227,487,257],{"class":247},[227,489,490],{"class":439}," calc",[227,492,443],{"class":247},[227,494,495],{"class":439},"var",[227,497,443],{"class":247},[227,499,446],{"class":399},[227,501,502],{"class":247},")",[227,504,506],{"class":505},"sSBoF"," +",[227,508,509],{"class":264}," 1",[227,511,449],{"class":247},[227,513,514],{"class":229,"line":189},[227,515,277],{"class":247},[370,517,518],{"id":518},"禁止事項",[520,521,522,529],"ul",{},[523,524,525,526,528],"li",{},"直接数値（例: ",[204,527,334],{},"など）の記述",[523,530,531],{},"変数を使わずに用途不明な値を設定",[218,533,535],{"className":220,"code":534,"language":222,"meta":223,"style":223},"\u002F* ❌ 悪い例 *\u002F\n.modal {\n  z-index: 9999; \u002F* 直接数値を指定している *\u002F\n}\n\n.dropdown {\n  z-index: 1234; \u002F* 用途が不明な値を直接指定 *\u002F\n}\n\n\u002F* ✅ 良い例 *\u002F\n:root {\n  --z-index-modal: 30;\n  --z-index-dropdown: 20;\n}\n\n.modal {\n  z-index: var(--z-index-modal);\n}\n\n.dropdown {\n  z-index: var(--z-index-dropdown);\n}\n",[204,536,537,541,550,565,569,573,582,596,600,604,609,618,631,644,649,654,663,679,684,689,698,714],{"__ignoreMap":223},[227,538,539],{"class":229,"line":12},[227,540,233],{"class":232},[227,542,543,545,548],{"class":229,"line":236},[227,544,240],{"class":239},[227,546,547],{"class":243},"modal",[227,549,248],{"class":247},[227,551,552,554,556,559,562],{"class":229,"line":158},[227,553,434],{"class":253},[227,555,257],{"class":247},[227,557,558],{"class":264}," 9999",[227,560,561],{"class":247},";",[227,563,564],{"class":232}," \u002F* 直接数値を指定している *\u002F\n",[227,566,567],{"class":229,"line":189},[227,568,277],{"class":247},[227,570,571],{"class":229,"line":280},[227,572,284],{"emptyLinePlaceholder":283},[227,574,575,577,580],{"class":229,"line":287},[227,576,240],{"class":239},[227,578,579],{"class":243},"dropdown",[227,581,248],{"class":247},[227,583,584,586,588,591,593],{"class":229,"line":293},[227,585,434],{"class":253},[227,587,257],{"class":247},[227,589,590],{"class":264}," 1234",[227,592,561],{"class":247},[227,594,595],{"class":232}," \u002F* 用途が不明な値を直接指定 *\u002F\n",[227,597,598],{"class":229,"line":302},[227,599,277],{"class":247},[227,601,602],{"class":229,"line":320},[227,603,284],{"emptyLinePlaceholder":283},[227,605,607],{"class":229,"line":606},10,[227,608,290],{"class":232},[227,610,612,614,616],{"class":229,"line":611},11,[227,613,257],{"class":239},[227,615,392],{"class":391},[227,617,248],{"class":247},[227,619,621,624,626,629],{"class":229,"line":620},12,[227,622,623],{"class":399},"  --z-index-modal",[227,625,257],{"class":247},[227,627,628],{"class":264}," 30",[227,630,272],{"class":247},[227,632,634,637,639,642],{"class":229,"line":633},13,[227,635,636],{"class":399},"  --z-index-dropdown",[227,638,257],{"class":247},[227,640,641],{"class":264}," 20",[227,643,272],{"class":247},[227,645,647],{"class":229,"line":646},14,[227,648,277],{"class":247},[227,650,652],{"class":229,"line":651},15,[227,653,284],{"emptyLinePlaceholder":283},[227,655,657,659,661],{"class":229,"line":656},16,[227,658,240],{"class":239},[227,660,547],{"class":243},[227,662,248],{"class":247},[227,664,666,668,670,672,674,677],{"class":229,"line":665},17,[227,667,434],{"class":253},[227,669,257],{"class":247},[227,671,440],{"class":439},[227,673,443],{"class":247},[227,675,676],{"class":399},"--z-index-modal",[227,678,449],{"class":247},[227,680,682],{"class":229,"line":681},18,[227,683,277],{"class":247},[227,685,687],{"class":229,"line":686},19,[227,688,284],{"emptyLinePlaceholder":283},[227,690,692,694,696],{"class":229,"line":691},20,[227,693,240],{"class":239},[227,695,579],{"class":243},[227,697,248],{"class":247},[227,699,701,703,705,707,709,712],{"class":229,"line":700},21,[227,702,434],{"class":253},[227,704,257],{"class":247},[227,706,440],{"class":439},[227,708,443],{"class":247},[227,710,711],{"class":399},"--z-index-dropdown",[227,713,449],{"class":247},[227,715,717],{"class":229,"line":716},22,[227,718,277],{"class":247},[720,721,722],"style",{},"html pre.shiki code .su8Ar, html code.shiki .su8Ar{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sjROF, html code.shiki .sjROF{--shiki-light:#6F42C1;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s3jxQ, html code.shiki .s3jxQ{--shiki-light:#6F42C1;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s7bGF, html code.shiki .s7bGF{--shiki-light:#005CC5;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s_GZX, html code.shiki .s_GZX{--shiki-light:#005CC5;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s9owh, html code.shiki .s9owh{--shiki-light:#005CC5;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sRmsN, html code.shiki .sRmsN{--shiki-light:#D73A49;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sAjK8, html code.shiki .sAjK8{--shiki-light:#6F42C1;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s3AGf, html code.shiki .s3AGf{--shiki-light:#E36209;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sLy7x, html code.shiki .sLy7x{--shiki-light:#005CC5;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sSBoF, html code.shiki .sSBoF{--shiki-light:#D73A49;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}",{"title":223,"searchDepth":236,"depth":236,"links":724},[725,726],{"id":198,"depth":236,"text":198},{"id":325,"depth":236,"text":325,"children":727},[728,729],{"id":372,"depth":158,"text":372},{"id":518,"depth":158,"text":518},"transitionとz-indexの使用ルールと禁止事項","md",null,{},{"title":61,"description":730},"sxeA4EoihxtZWvpHqvjEjIqSzEZr2XK_cV35MC_WXFU",[737,739],{"title":57,"path":58,"stem":59,"description":738,"children":-1},"ボックスモデル・色・フォント順のプロパティ記述ルール",{"title":65,"path":66,"stem":67,"description":740,"children":-1},"Tailwind CSS v4の導入方法、@themeディレクティブ、ユーティリティクラス利用ポリシー",1780099578376]