[{"data":1,"prerenderedAt":603},["ShallowReactive",2],{"navigation_docs":3,"-frontend-html-code-style":190,"-frontend-html-code-style-surround":598},[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":20,"body":192,"description":591,"extension":592,"links":593,"meta":594,"navigation":595,"path":21,"seo":596,"stem":22,"__hash__":597},"docs\u002F1.frontend\u002F1.html\u002Fcode-style.md",{"type":193,"value":194,"toc":584},"minimark",[195,199,236,240,244,248,262,265,276,279,576,580],[196,197,198],"p",{},"次の 3 つを主な目的として策定されています。",[200,201,202,214,225],"ul",{},[203,204,205,206],"li",{},"可読性・保守性\n",[200,207,208,211],{},[203,209,210],{},"一貫した記述スタイルによりコードの可読性を向上させること",[203,212,213],{},"チーム開発において誰でも理解しやすい記述にすること",[203,215,216,217],{},"品質の向上\n",[200,218,219,222],{},[203,220,221],{},"正しく適切な HTML マークアップを行うこと",[203,223,224],{},"アクセシビリティを考慮した記述にすること",[203,226,227,228],{},"一貫性\n",[200,229,230,233],{},[203,231,232],{},"プロジェクト内での統一されたコーディングルールを持つこと",[203,234,235],{},"メンテナンス時の混乱を避けること",[237,238,239],"h2",{"id":239},"フォーマットとインデント",[241,242,243],"note",{},"HTML のコードフォーマット（インデント、改行、属性の順序など）は Prettier, EditorConfig によって自動修正されます。これらのツールを使用することで、手動でのフォーマット調整を不要にし、チーム全体で一貫したコードスタイルを維持します。",[245,246,247],"h3",{"id":247},"インデントルール",[200,249,250,253,256,259],{},[203,251,252],{},"インデントは半角 2 スペースで統一する",[203,254,255],{},"スペースとタブを混在させることは禁止",[203,257,258],{},"ネストの深さに応じて適切にインデントを行う",[203,260,261],{},"案件によってはインデント規則が指定される場合があるため、随時確認する",[245,263,264],{"id":264},"改行ルール",[200,266,267,270,273],{},[203,268,269],{},"要素の開始タグと終了タグが複数行にわたる場合は適切に改行する",[203,271,272],{},"構造を判断しやすいように改行とインデントを使用する",[203,274,275],{},"属性が多い場合は、可読性を考慮して改行する",[245,277,278],{"id":278},"コード例",[280,281,286],"pre",{"className":282,"code":283,"language":284,"meta":285,"style":285},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml lang=\"ja\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>ページタイトル\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cheader>\n      \u003Ch1>メインタイトル\u003C\u002Fh1>\n    \u003C\u002Fheader>\n    \u003Cmain>\n      \u003Csection>\n        \u003Ch2>セクションタイトル\u003C\u002Fh2>\n        \u003Cp>段落テキスト\u003C\u002Fp>\n      \u003C\u002Fsection>\n    \u003C\u002Fmain>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[287,288,289,308,334,344,367,400,422,432,442,452,472,482,492,502,521,539,549,558,567],"code",{"__ignoreMap":285},[290,291,293,297,301,305],"span",{"class":292,"line":12},"line",[290,294,296],{"class":295},"sN50r","\u003C!",[290,298,300],{"class":299},"sF3G6","DOCTYPE",[290,302,304],{"class":303},"sAjK8"," html",[290,306,307],{"class":295},">\n",[290,309,311,314,316,319,322,326,330,332],{"class":292,"line":310},2,[290,312,313],{"class":295},"\u003C",[290,315,284],{"class":299},[290,317,318],{"class":303}," lang",[290,320,321],{"class":295},"=",[290,323,325],{"class":324},"ssQ5U","\"",[290,327,329],{"class":328},"scigg","ja",[290,331,325],{"class":324},[290,333,307],{"class":295},[290,335,336,339,342],{"class":292,"line":158},[290,337,338],{"class":295},"  \u003C",[290,340,341],{"class":299},"head",[290,343,307],{"class":295},[290,345,346,349,352,355,357,359,362,364],{"class":292,"line":189},[290,347,348],{"class":295},"    \u003C",[290,350,351],{"class":299},"meta",[290,353,354],{"class":303}," charset",[290,356,321],{"class":295},[290,358,325],{"class":324},[290,360,361],{"class":328},"UTF-8",[290,363,325],{"class":324},[290,365,366],{"class":295}," \u002F>\n",[290,368,370,372,374,377,379,381,384,386,389,391,393,396,398],{"class":292,"line":369},5,[290,371,348],{"class":295},[290,373,351],{"class":299},[290,375,376],{"class":303}," name",[290,378,321],{"class":295},[290,380,325],{"class":324},[290,382,383],{"class":328},"viewport",[290,385,325],{"class":324},[290,387,388],{"class":303}," content",[290,390,321],{"class":295},[290,392,325],{"class":324},[290,394,395],{"class":328},"width=device-width, initial-scale=1.0",[290,397,325],{"class":324},[290,399,366],{"class":295},[290,401,403,405,408,411,415,418,420],{"class":292,"line":402},6,[290,404,348],{"class":295},[290,406,407],{"class":299},"title",[290,409,410],{"class":295},">",[290,412,414],{"class":413},"sKuZN","ページタイトル",[290,416,417],{"class":295},"\u003C\u002F",[290,419,407],{"class":299},[290,421,307],{"class":295},[290,423,425,428,430],{"class":292,"line":424},7,[290,426,427],{"class":295},"  \u003C\u002F",[290,429,341],{"class":299},[290,431,307],{"class":295},[290,433,435,437,440],{"class":292,"line":434},8,[290,436,338],{"class":295},[290,438,439],{"class":299},"body",[290,441,307],{"class":295},[290,443,445,447,450],{"class":292,"line":444},9,[290,446,348],{"class":295},[290,448,449],{"class":299},"header",[290,451,307],{"class":295},[290,453,455,458,461,463,466,468,470],{"class":292,"line":454},10,[290,456,457],{"class":295},"      \u003C",[290,459,460],{"class":299},"h1",[290,462,410],{"class":295},[290,464,465],{"class":413},"メインタイトル",[290,467,417],{"class":295},[290,469,460],{"class":299},[290,471,307],{"class":295},[290,473,475,478,480],{"class":292,"line":474},11,[290,476,477],{"class":295},"    \u003C\u002F",[290,479,449],{"class":299},[290,481,307],{"class":295},[290,483,485,487,490],{"class":292,"line":484},12,[290,486,348],{"class":295},[290,488,489],{"class":299},"main",[290,491,307],{"class":295},[290,493,495,497,500],{"class":292,"line":494},13,[290,496,457],{"class":295},[290,498,499],{"class":299},"section",[290,501,307],{"class":295},[290,503,505,508,510,512,515,517,519],{"class":292,"line":504},14,[290,506,507],{"class":295},"        \u003C",[290,509,237],{"class":299},[290,511,410],{"class":295},[290,513,514],{"class":413},"セクションタイトル",[290,516,417],{"class":295},[290,518,237],{"class":299},[290,520,307],{"class":295},[290,522,524,526,528,530,533,535,537],{"class":292,"line":523},15,[290,525,507],{"class":295},[290,527,196],{"class":299},[290,529,410],{"class":295},[290,531,532],{"class":413},"段落テキスト",[290,534,417],{"class":295},[290,536,196],{"class":299},[290,538,307],{"class":295},[290,540,542,545,547],{"class":292,"line":541},16,[290,543,544],{"class":295},"      \u003C\u002F",[290,546,499],{"class":299},[290,548,307],{"class":295},[290,550,552,554,556],{"class":292,"line":551},17,[290,553,477],{"class":295},[290,555,489],{"class":299},[290,557,307],{"class":295},[290,559,561,563,565],{"class":292,"line":560},18,[290,562,427],{"class":295},[290,564,439],{"class":299},[290,566,307],{"class":295},[290,568,570,572,574],{"class":292,"line":569},19,[290,571,417],{"class":295},[290,573,284],{"class":299},[290,575,307],{"class":295},[577,578,579],"warning",{},"HTML に記述したコメントは、製品ソースコード上にそのまま残るため、エンドユーザーがブラウザの「ページのソースを表示」などで内容を確認できる状態になります。そのため、不用意なコメントや内部情報、機密情報などは記述しないように注意してください。",[581,582,583],"style",{},"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":285,"searchDepth":310,"depth":310,"links":585},[586],{"id":239,"depth":310,"text":239,"children":587},[588,589,590],{"id":247,"depth":158,"text":247},{"id":264,"depth":158,"text":264},{"id":278,"depth":158,"text":278},"可読性・品質・一貫性を重視したHTMLのフォーマットとインデントルール","md",null,{},true,{"title":20,"description":591},"yFFdZ0lCP9INksXIyuQo3DOqzuk-0z3EkAlL4B1ibyQ",[599,601],{"title":14,"path":15,"stem":16,"description":600,"children":-1},"セマンティック・アクセシビリティ、一貫性、メンテナンス性を重視したHTMLマークアップのガイドライン",{"title":24,"path":25,"stem":26,"description":602,"children":-1},"見出しタグは、ページの構造を明確にし、SEO とアクセシビリティの向上において重要な役割を果たします。",1780099577272]