[{"data":1,"prerenderedAt":556},["ShallowReactive",2],{"navigation_docs":3,"-frontend-css-architecture":190,"-frontend-css-architecture-surround":551},[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":46,"body":192,"description":545,"extension":546,"links":547,"meta":548,"navigation":331,"path":47,"seo":549,"stem":48,"__hash__":550},"docs\u002F1.frontend\u002F2.css\u002Farchitecture.md",{"type":193,"value":194,"toc":537},"minimark",[195,199,203,208,211,218,230,234,237,260,263,440,443,446,450,453,456,500,503,515,519,533],[196,197,198],"h2",{"id":198},"クラスの命名規則",[200,201,202],"p",{},"クラス名は BEM（Block Element Modifier）記法で記述してください。",[204,205,207],"note",{"to":206},"https:\u002F\u002Fen.bem.info\u002F","\nクラス名は BEM 記法に従い、命名の予測可能性と再利用性を高めるように設計してください。\n",[200,209,210],{},"単語間はハイフン（-）でつなぎ、ブロック名とエレメント名はアンダースコア 2 つ（__）、モディファイアはハイフン 2 つ（--）でつなぎます。",[200,212,213,214],{},"例：",[215,216,217],"code",{},".block-name__element--large",[219,220,221,222,225,226,229],"tip",{},"キャメルケースの使用",[223,224],"br",{},"\nプロジェクト内で統一されていれば、キャメルケースで記述しても構いません。その場合は Stylelint の ",[215,227,228],{},"selector-class-pattern"," ルールを適切に変更してください。",[196,231,233],{"id":232},"修飾子modifier","修飾子（modifier）",[200,235,236],{},"モディファイアは、ブロックやエレメントの「見た目」「状態」「ふるまい」などの違いを表現するためのもので、",[238,239,240,248,254],"ul",{},[241,242,243,247],"li",{},[244,245,246],"strong",{},"その要素の見た目","（例：「どのサイズか？」や「どのテーマか？」→ xs, primary）",[241,249,250,253],{},[244,251,252],{},"状態","（例：「他とどう違うか？」→ disabled, focused など）",[241,255,256,259],{},[244,257,258],{},"ふるまい","（例：「どのように動作するか？」→ block__element--left など）",[200,261,262],{},"を表します。",[264,265,270],"pre",{"className":266,"code":267,"language":268,"meta":269,"style":269},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003C!-- サイズやテーマを表す例 -->\n\u003Ca class=\"button button--xs button--primary\">\n  小さいサイズ・プライマリカラーのボタン\n\u003C\u002Fa>\n\n\u003C!-- 状態を表す例 -->\n\u003Cbutton class=\"button button--disabled\">無効状態のボタン\u003C\u002Fbutton>\n\u003Cbutton class=\"button button--focused\">フォーカスされたボタン\u003C\u002Fbutton>\n\n\u003C!-- ふるまいを表す例 -->\n\u003Cdiv class=\"tooltip tooltip--left\">左方向に表示されるツールチップ\u003C\u002Fdiv>\n","html","",[215,271,272,280,311,317,326,333,339,370,399,404,410],{"__ignoreMap":269},[273,274,276],"span",{"class":275,"line":12},"line",[273,277,279],{"class":278},"su8Ar","\u003C!-- サイズやテーマを表す例 -->\n",[273,281,283,287,291,295,298,302,306,308],{"class":275,"line":282},2,[273,284,286],{"class":285},"sN50r","\u003C",[273,288,290],{"class":289},"sF3G6","a",[273,292,294],{"class":293},"sAjK8"," class",[273,296,297],{"class":285},"=",[273,299,301],{"class":300},"ssQ5U","\"",[273,303,305],{"class":304},"scigg","button button--xs button--primary",[273,307,301],{"class":300},[273,309,310],{"class":285},">\n",[273,312,313],{"class":275,"line":158},[273,314,316],{"class":315},"sKuZN","  小さいサイズ・プライマリカラーのボタン\n",[273,318,319,322,324],{"class":275,"line":189},[273,320,321],{"class":285},"\u003C\u002F",[273,323,290],{"class":289},[273,325,310],{"class":285},[273,327,329],{"class":275,"line":328},5,[273,330,332],{"emptyLinePlaceholder":331},true,"\n",[273,334,336],{"class":275,"line":335},6,[273,337,338],{"class":278},"\u003C!-- 状態を表す例 -->\n",[273,340,342,344,347,349,351,353,356,358,361,364,366,368],{"class":275,"line":341},7,[273,343,286],{"class":285},[273,345,346],{"class":289},"button",[273,348,294],{"class":293},[273,350,297],{"class":285},[273,352,301],{"class":300},[273,354,355],{"class":304},"button button--disabled",[273,357,301],{"class":300},[273,359,360],{"class":285},">",[273,362,363],{"class":315},"無効状態のボタン",[273,365,321],{"class":285},[273,367,346],{"class":289},[273,369,310],{"class":285},[273,371,373,375,377,379,381,383,386,388,390,393,395,397],{"class":275,"line":372},8,[273,374,286],{"class":285},[273,376,346],{"class":289},[273,378,294],{"class":293},[273,380,297],{"class":285},[273,382,301],{"class":300},[273,384,385],{"class":304},"button button--focused",[273,387,301],{"class":300},[273,389,360],{"class":285},[273,391,392],{"class":315},"フォーカスされたボタン",[273,394,321],{"class":285},[273,396,346],{"class":289},[273,398,310],{"class":285},[273,400,402],{"class":275,"line":401},9,[273,403,332],{"emptyLinePlaceholder":331},[273,405,407],{"class":275,"line":406},10,[273,408,409],{"class":278},"\u003C!-- ふるまいを表す例 -->\n",[273,411,413,415,418,420,422,424,427,429,431,434,436,438],{"class":275,"line":412},11,[273,414,286],{"class":285},[273,416,417],{"class":289},"div",[273,419,294],{"class":293},[273,421,297],{"class":285},[273,423,301],{"class":300},[273,425,426],{"class":304},"tooltip tooltip--left",[273,428,301],{"class":300},[273,430,360],{"class":285},[273,432,433],{"class":315},"左方向に表示されるツールチップ",[273,435,321],{"class":285},[273,437,417],{"class":289},[273,439,310],{"class":285},[196,441,442],{"id":442},"クラス命名の原則",[200,444,445],{},"原則としてすべての要素にクラスを付与します。ただし、どのコンポーネントに帰属するかが明確な場合や、エレメントの詳細度の差を小さくできる場合は省略しても構いません。",[447,448,449],"warning",{},"セレクタの多用\nライブラリなどで定義される外部クラスとのコンフリクトを防ぐため、単純な子セレクタ・子孫セレクタの多用は避けてください。",[196,451,452],{"id":452},"クラス名の省略",[200,454,455],{},"クラス名はできる限り省略せず、意味が明確な名前を付けてください。",[457,458,459,473],"table",{},[460,461,462],"thead",{},[463,464,465,470],"tr",{},[466,467,469],"th",{"align":468},"left","❌ 悪い例",[466,471,472],{"align":468},"✅ 良い例",[474,475,476,485,492],"tbody",{},[463,477,478,482],{},[479,480,481],"td",{"align":468},"ttl",[479,483,484],{"align":468},"title",[463,486,487,490],{},[479,488,489],{"align":468},"btn",[479,491,346],{"align":468},[463,493,494,497],{},[479,495,496],{"align":468},"txt",[479,498,499],{"align":468},"text",[196,501,502],{"id":502},"属性の利用方針",[200,504,505,508,509,511,514],{},[215,506,507],{},"id"," 属性はスタイルシートの目的では指定しないでください。",[223,510],{},[215,512,513],{},"data-*"," 属性は、JavaScript で状態を変化させる場合のみ使用し、スタイルのみを目的として利用することは避けてください。",[196,516,518],{"id":517},"tailwind-css-との併用","Tailwind CSS との併用",[200,520,521,522,524,525,527,528,532],{},"Tailwind CSS を使用する場合でも、BEM 記法の原則は維持します。",[223,523],{},"\nコンポーネント固有のスタイルには BEM クラスを使用し、レイアウトやスペーシングなどの基本的なスタイリングには Tailwind ユーティリティクラスを使用します。",[223,526],{},"\n詳細は ",[290,529,531],{"href":530},".\u002Ftailwind","Tailwind CSS ガイドライン"," を参照してください。",[534,535,536],"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 .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sF3G6, html code.shiki .sF3G6{--shiki-light:#22863A;--shiki-default:#F07178;--shiki-dark:#F07178}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 pre.shiki code .scigg, html code.shiki .scigg{--shiki-light:#032F62;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":269,"searchDepth":282,"depth":282,"links":538},[539,540,541,542,543,544],{"id":198,"depth":282,"text":198},{"id":232,"depth":282,"text":233},{"id":442,"depth":282,"text":442},{"id":452,"depth":282,"text":452},{"id":502,"depth":282,"text":502},{"id":517,"depth":282,"text":518},"BEM記法によるクラス命名規則とTailwind CSSとの併用方針","md",null,{},{"title":46,"description":545},"klkrahBqxjhYjEDsrpMnJqev8N157A4YL8K30w2Dop0",[552,554],{"title":40,"path":41,"stem":42,"description":553,"children":-1},"CSSを保守しやすく、機能的に、一貫して書くためのガイドライン",{"title":20,"path":50,"stem":51,"description":555,"children":-1},"Prettier、EditorConfig、Stylelintによる自動フォーマット設定",1780099577901]