[{"data":1,"prerenderedAt":793},["ShallowReactive",2],{"navigation_docs":3,"-frontend-css-order":190,"-frontend-css-order-surround":788},[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":57,"body":192,"description":782,"extension":783,"links":784,"meta":785,"navigation":269,"path":58,"seo":786,"stem":59,"__hash__":787},"docs\u002F1.frontend\u002F2.css\u002Forder.md",{"type":193,"value":194,"toc":779},"minimark",[195,204,212,684,696,700,703,718,721,727,775],[196,197,198,199,203],"p",{},"以下のように、",[200,201,202],"strong",{},"ボックスモデル → 色 → フォント → その他の視覚順","でプロパティを定義します。",[205,206,207,208,211],"note",{},"自動修正\nこのルールは",[200,209,210],{},"Stylelint","の設定に基づいて自動的に整理されます。",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"language-css shiki shiki-themes github-light material-theme material-theme-palenight",".block {\n  \u002F* 1. 変数定義 *\u002F\n  --color-main: #0070f3;\n\n  \u002F* 2. ボックスモデル *\u002F\n  display: flex;\n  width: 100%;\n  height: 48px;\n  margin: 0 auto;\n  padding: 8px 16px;\n  box-sizing: border-box;\n\n  \u002F* 3. 色・背景 *\u002F\n  background-color: var(--color-main);\n  border: 1px solid #ccc;\n\n  \u002F* 4. フォント *\u002F\n  font-size: 1rem;\n  font-weight: 700;\n  color: #fff;\n  line-height: 1.5;\n\n  \u002F* 5. その他の視覚プロパティ *\u002F\n  border-radius: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.3s;\n\n  \u002F* 6. 疑似要素・状態変化 *\u002F\n  &:hover {\n    background-color: #005bb5;\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n  }\n}\n","css","",[220,221,222,238,245,265,271,277,291,309,325,341,361,374,379,385,406,429,434,440,455,468,483,496,501,507,522,565,585,590,596,607,621,627,632,646,660,673,678],"code",{"__ignoreMap":218},[223,224,226,230,234],"span",{"class":225,"line":12},"line",[223,227,229],{"class":228},"sjROF",".",[223,231,233],{"class":232},"s3jxQ","block",[223,235,237],{"class":236},"sN50r"," {\n",[223,239,241],{"class":225,"line":240},2,[223,242,244],{"class":243},"su8Ar","  \u002F* 1. 変数定義 *\u002F\n",[223,246,247,251,254,258,262],{"class":225,"line":158},[223,248,250],{"class":249},"s3AGf","  --color-main",[223,252,253],{"class":236},":",[223,255,257],{"class":256},"s56lG"," #",[223,259,261],{"class":260},"s_GZX","0070f3",[223,263,264],{"class":236},";\n",[223,266,267],{"class":225,"line":189},[223,268,270],{"emptyLinePlaceholder":269},true,"\n",[223,272,274],{"class":225,"line":273},5,[223,275,276],{"class":243},"  \u002F* 2. ボックスモデル *\u002F\n",[223,278,280,284,286,289],{"class":225,"line":279},6,[223,281,283],{"class":282},"s7bGF","  display",[223,285,253],{"class":236},[223,287,288],{"class":260}," flex",[223,290,264],{"class":236},[223,292,294,297,299,303,307],{"class":225,"line":293},7,[223,295,296],{"class":282},"  width",[223,298,253],{"class":236},[223,300,302],{"class":301},"s9owh"," 100",[223,304,306],{"class":305},"sRmsN","%",[223,308,264],{"class":236},[223,310,312,315,317,320,323],{"class":225,"line":311},8,[223,313,314],{"class":282},"  height",[223,316,253],{"class":236},[223,318,319],{"class":301}," 48",[223,321,322],{"class":305},"px",[223,324,264],{"class":236},[223,326,328,331,333,336,339],{"class":225,"line":327},9,[223,329,330],{"class":282},"  margin",[223,332,253],{"class":236},[223,334,335],{"class":301}," 0",[223,337,338],{"class":260}," auto",[223,340,264],{"class":236},[223,342,344,347,349,352,354,357,359],{"class":225,"line":343},10,[223,345,346],{"class":282},"  padding",[223,348,253],{"class":236},[223,350,351],{"class":301}," 8",[223,353,322],{"class":305},[223,355,356],{"class":301}," 16",[223,358,322],{"class":305},[223,360,264],{"class":236},[223,362,364,367,369,372],{"class":225,"line":363},11,[223,365,366],{"class":282},"  box-sizing",[223,368,253],{"class":236},[223,370,371],{"class":260}," border-box",[223,373,264],{"class":236},[223,375,377],{"class":225,"line":376},12,[223,378,270],{"emptyLinePlaceholder":269},[223,380,382],{"class":225,"line":381},13,[223,383,384],{"class":243},"  \u002F* 3. 色・背景 *\u002F\n",[223,386,388,391,393,397,400,403],{"class":225,"line":387},14,[223,389,390],{"class":282},"  background-color",[223,392,253],{"class":236},[223,394,396],{"class":395},"sLy7x"," var",[223,398,399],{"class":236},"(",[223,401,402],{"class":249},"--color-main",[223,404,405],{"class":236},");\n",[223,407,409,412,414,417,419,422,424,427],{"class":225,"line":408},15,[223,410,411],{"class":282},"  border",[223,413,253],{"class":236},[223,415,416],{"class":301}," 1",[223,418,322],{"class":305},[223,420,421],{"class":260}," solid",[223,423,257],{"class":256},[223,425,426],{"class":260},"ccc",[223,428,264],{"class":236},[223,430,432],{"class":225,"line":431},16,[223,433,270],{"emptyLinePlaceholder":269},[223,435,437],{"class":225,"line":436},17,[223,438,439],{"class":243},"  \u002F* 4. フォント *\u002F\n",[223,441,443,446,448,450,453],{"class":225,"line":442},18,[223,444,445],{"class":282},"  font-size",[223,447,253],{"class":236},[223,449,416],{"class":301},[223,451,452],{"class":305},"rem",[223,454,264],{"class":236},[223,456,458,461,463,466],{"class":225,"line":457},19,[223,459,460],{"class":282},"  font-weight",[223,462,253],{"class":236},[223,464,465],{"class":301}," 700",[223,467,264],{"class":236},[223,469,471,474,476,478,481],{"class":225,"line":470},20,[223,472,473],{"class":282},"  color",[223,475,253],{"class":236},[223,477,257],{"class":256},[223,479,480],{"class":260},"fff",[223,482,264],{"class":236},[223,484,486,489,491,494],{"class":225,"line":485},21,[223,487,488],{"class":282},"  line-height",[223,490,253],{"class":236},[223,492,493],{"class":301}," 1.5",[223,495,264],{"class":236},[223,497,499],{"class":225,"line":498},22,[223,500,270],{"emptyLinePlaceholder":269},[223,502,504],{"class":225,"line":503},23,[223,505,506],{"class":243},"  \u002F* 5. その他の視覚プロパティ *\u002F\n",[223,508,510,513,515,518,520],{"class":225,"line":509},24,[223,511,512],{"class":282},"  border-radius",[223,514,253],{"class":236},[223,516,517],{"class":301}," 4",[223,519,322],{"class":305},[223,521,264],{"class":236},[223,523,525,528,530,532,535,537,539,541,544,546,549,552,554,556,558,560,563],{"class":225,"line":524},25,[223,526,527],{"class":282},"  box-shadow",[223,529,253],{"class":236},[223,531,335],{"class":301},[223,533,534],{"class":301}," 2",[223,536,322],{"class":305},[223,538,351],{"class":301},[223,540,322],{"class":305},[223,542,543],{"class":395}," rgba",[223,545,399],{"class":236},[223,547,548],{"class":301},"0",[223,550,551],{"class":236},",",[223,553,335],{"class":301},[223,555,551],{"class":236},[223,557,335],{"class":301},[223,559,551],{"class":236},[223,561,562],{"class":301}," 0.1",[223,564,405],{"class":236},[223,566,568,571,573,577,580,583],{"class":225,"line":567},26,[223,569,570],{"class":282},"  transition",[223,572,253],{"class":236},[223,574,576],{"class":575},"sKuZN"," background-color ",[223,578,579],{"class":301},"0.3",[223,581,582],{"class":305},"s",[223,584,264],{"class":236},[223,586,588],{"class":225,"line":587},27,[223,589,270],{"emptyLinePlaceholder":269},[223,591,593],{"class":225,"line":592},28,[223,594,595],{"class":243},"  \u002F* 6. 疑似要素・状態変化 *\u002F\n",[223,597,599,602,604],{"class":225,"line":598},29,[223,600,601],{"class":575},"  &",[223,603,253],{"class":236},[223,605,606],{"class":575},"hover {\n",[223,608,610,613,616,619],{"class":225,"line":609},30,[223,611,612],{"class":575},"    background-color: ",[223,614,615],{"class":256},"#",[223,617,618],{"class":260},"005bb5",[223,620,264],{"class":236},[223,622,624],{"class":225,"line":623},31,[223,625,626],{"class":236},"  }\n",[223,628,630],{"class":225,"line":629},32,[223,631,270],{"emptyLinePlaceholder":269},[223,633,635,637,640,644],{"class":225,"line":634},33,[223,636,601],{"class":575},[223,638,639],{"class":228},"::",[223,641,643],{"class":642},"sAjK8","after",[223,645,237],{"class":236},[223,647,649,652,654,658],{"class":225,"line":648},34,[223,650,651],{"class":282},"    content",[223,653,253],{"class":236},[223,655,657],{"class":656},"ssQ5U"," \"\"",[223,659,264],{"class":236},[223,661,663,666,668,671],{"class":225,"line":662},35,[223,664,665],{"class":282},"    display",[223,667,253],{"class":236},[223,669,670],{"class":260}," block",[223,672,264],{"class":236},[223,674,676],{"class":225,"line":675},36,[223,677,626],{"class":236},[223,679,681],{"class":225,"line":680},37,[223,682,683],{"class":575},"}\n",[685,686,687,688,691,692,695],"warning",{},"JavaScript のライブラリの利用など、クラス命名規則に当てはまらないセレクタにスタイルを当てないといけない場合があります。その場合は、",[220,689,690],{},".stylelintrc","ファイルにて",[220,693,694],{},"selector-class-pattern","を変更してください。",[697,698,699],"h2",{"id":699},"自動フォーマット",[196,701,702],{},"プロパティの順序は以下のツールで管理されます：",[704,705,706,712],"ul",{},[707,708,709,711],"li",{},[200,710,210],{},": CSS プロパティの並び順を自動整理",[707,713,714,717],{},[200,715,716],{},"stylelint-config-recess-order",": プロパティグループごとの順序制御",[196,719,720],{},"これにより、チーム全体で一貫したプロパティ順序が保たれ、可読性とメンテナンス性が向上します。",[685,722,687,723,691,725,695],{},[220,724,690],{},[220,726,694],{},[213,728,730],{"className":215,"code":729,"language":217,"meta":218,"style":218},"\u002F\u002F ⚠️ 通常はStylelintによる警告がでる\n.any-js-lib-class-name {\n  \u002F* declaration *\u002F\n}\n\n.any-js-lib-class-name {\n  \u002F* declaration *\u002F\n}\n",[220,731,732,737,746,751,755,759,767,771],{"__ignoreMap":218},[223,733,734],{"class":225,"line":12},[223,735,736],{"class":575},"\u002F\u002F ⚠️ 通常はStylelintによる警告がでる\n",[223,738,739,741,744],{"class":225,"line":240},[223,740,229],{"class":228},[223,742,743],{"class":232},"any-js-lib-class-name",[223,745,237],{"class":236},[223,747,748],{"class":225,"line":158},[223,749,750],{"class":243},"  \u002F* declaration *\u002F\n",[223,752,753],{"class":225,"line":189},[223,754,683],{"class":236},[223,756,757],{"class":225,"line":273},[223,758,270],{"emptyLinePlaceholder":269},[223,760,761,763,765],{"class":225,"line":279},[223,762,229],{"class":228},[223,764,743],{"class":232},[223,766,237],{"class":236},[223,768,769],{"class":225,"line":293},[223,770,750],{"class":243},[223,772,773],{"class":225,"line":311},[223,774,683],{"class":236},[776,777,778],"style",{},"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 .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 .s3AGf, html code.shiki .s3AGf{--shiki-light:#E36209;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s56lG, html code.shiki .s56lG{--shiki-light:#005CC5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s_GZX, html code.shiki .s_GZX{--shiki-light:#005CC5;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7bGF, html code.shiki .s7bGF{--shiki-light:#005CC5;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .sLy7x, html code.shiki .sLy7x{--shiki-light:#005CC5;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sAjK8, html code.shiki .sAjK8{--shiki-light:#6F42C1;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .ssQ5U, html code.shiki .ssQ5U{--shiki-light:#032F62;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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);}",{"title":218,"searchDepth":240,"depth":240,"links":780},[781],{"id":699,"depth":240,"text":699},"ボックスモデル・色・フォント順のプロパティ記述ルール","md",null,{},{"title":57,"description":782},"VtVF23RRr0NTyoG6TVAZm3Zb59KhimdrpHtmxXwuuU4",[789,791],{"title":53,"path":54,"stem":55,"description":790,"children":-1},"Google Fontsの利用とAdobe Fontsの運用ルール",{"title":61,"path":62,"stem":63,"description":792,"children":-1},"transitionとz-indexの使用ルールと禁止事項",1780099578317]