layout-design-spec.md<\/code> \u3092\u3069\u3046\u8a2d\u8a08\u3057\u305f\u304b\u3001\u305d\u306e\u8a66\u884c\u932f\u8aa4\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\r\n\r\n\r\n<\/ul>\r\n<\/ins>\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\u306a\u305c\u300c\u30ab\u30f3\u30d7\uff0bAI\u300d\u3060\u3051\u3067\u306f\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u306e\u304b<\/h2>\r\n
\u6700\u521d\u306f\u5358\u7d14\u306b\u8003\u3048\u3066\u3044\u307e\u3057\u305f\u3002\u300c\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u306e\u753b\u50cf\u3092\u6e21\u3057\u3066\u300e\u3053\u308c\u3092\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3057\u3066\u300f\u3068\u8a00\u3048\u3070\u6e08\u3080\u306f\u305a\u300d\u3068\u3002<\/p>\r\n
\u3068\u3053\u308d\u304c\u5b9f\u969b\u306b\u3084\u3063\u3066\u307f\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306a\u554f\u984c\u304c\u983b\u767a\u3057\u307e\u3057\u305f\u3002<\/p>\r\n
\r\n - \u6a2a\u4e26\u3073\u306e\u89e3\u91c8\u304c\u30d6\u30ec\u308b<\/b> \u2014 \u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u3067\u306f\u6a2a\u4e26\u3073\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u306b\u3001\u6a2a\u4e26\u3073\u3067\u7d44\u307e\u306a\u3044\u3002<\/li>\r\n
- SP\/PC\u306e\u5dee\u304c\u4f1d\u308f\u3089\u306a\u3044<\/b> \u2014 \u30b9\u30de\u30db\u3067\u306f\u7e26\u7a4d\u307f\u3001PC\u3067\u306f\u6a2a\u4e26\u3073\u3001\u3057\u304b\u3082\u8868\u793a\u9806\u304c\u5165\u308c\u66ff\u308f\u308b\u3001\u3068\u3044\u3063\u305f\u6307\u5b9a\u304c\u8a00\u8449\u3060\u3068\u5d29\u308c\u308b<\/li>\r\n
- \u30c6\u30ad\u30b9\u30c8\u306e\u62fe\u3044\u6f0f\u308c\u30fb\u8aa4\u5b57<\/b> \u2014 \u30ab\u30f3\u30d7\u304b\u3089\u76f4\u63a5\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3059\u308b\u3068\u3001\u9577\u3044\u672c\u6587\u304c\u7701\u7565\u3055\u308c\u305f\u308a\u3001\u753b\u50cf\u5316\u3055\u308c\u305f\u6587\u5b57\u3092\u8aad\u307f\u9055\u3048\u305f\u308a\u3059\u308b<\/li>\r\n<\/ul>\r\n
\u3064\u307e\u308a\u3001\u30ab\u30f3\u30d7\u3068\u3044\u3046\u300c\u4eba\u9593\u5411\u3051\u306e\u66d6\u6627\u306a\u60c5\u5831<\/b>\u300d\u3068\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3068\u3044\u3046\u300c\u53b3\u5bc6\u306a\u5b9f\u88c5<\/b>\u300d\u306e\u9593\u306b\u3001
\u8a8d\u8b58\u306e\u30ae\u30e3\u30c3\u30d7\u304c\u5927\u304d\u3059\u304e\u305f\u306e\u3067\u3059\u3002<\/p>\r\n\r\n\u89e3\u6c7a\u7b56\uff1a\u9593\u306b\u300c\u4e2d\u9593\u8a2d\u8a08\u66f8\u300d\u3092\u631f\u3080<\/h3>\r\n
\u305d\u3053\u3067\u3001\u5de5\u7a0b\u30923\u6bb5\u968e\u306b\u5206\u3051\u307e\u3057\u305f\u3002<\/p>\r\n
\u2460 \u8a2d\u8a08\u66f8\u4f5c\u6210 \uff1a\u30ab\u30f3\u30d7\uff08PDF\uff09 \u2192 \u4e2d\u9593\u8a2d\u8a08\u66f8\uff08.md\uff09\r\n \u2193\r\n\u2461 \u30c6\u30ad\u30b9\u30c8\u7167\u5408 \uff1a\u30ab\u30f3\u30d7\uff08\u753b\u50cf\uff09 + \u8a2d\u8a08\u66f8 \u2192 \u8aa4\u5b57\u30fb\u629c\u3051\u3092\u4fee\u6b63\r\n \u2193\r\n\u2462 \u30b3\u30fc\u30c7\u30a3\u30f3\u30b0 \uff1a\u7167\u5408\u6e08\u307f\u8a2d\u8a08\u66f8 \u2192 HTML\/CSS \u5b9f\u88c5<\/code><\/pre>\r\n\u30dd\u30a4\u30f3\u30c8\u306f\u3001\u2460\u3068\u2462\u3092\u5206\u96e2\u3057\u305f\u3053\u3068<\/b>\u3067\u3059\u3002\u3044\u304d\u306a\u308a\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3055\u305b\u305a\u3001
\u307e\u305a\u300c\u30ab\u30f3\u30d7\u3092\u69cb\u9020\u5316\u3057\u305f\u30c6\u30ad\u30b9\u30c8\uff1d\u8a2d\u8a08\u66f8\u300d\u3092\u4f5c\u308b\u3002\u3053\u306e\u8a2d\u8a08\u66f8\u306f\u3001<\/p>\r\n\r\n - AI\u304c\u89e3\u91c8\u3057\u3084\u3059\u3044<\/b>\u3088\u3046\u306b\u69cb\u9020\u304c\u660e\u793a\u3055\u308c\u3066\u3044\u3066<\/li>\r\n
- \u4eba\u9593\u304c\u898b\u3066\u3082\u78ba\u8a8d\u30fb\u4fee\u6b63\u304c\u3067\u304d\u308b<\/b>\u3088\u3046\u306b\u8aad\u307f\u3084\u3059\u304f\u66f8\u304d\u3084\u3059\u304f<\/li>\r\n
- \u305d\u308c\u3067\u3044\u3066\u30b7\u30f3\u30d7\u30eb<\/b>\u3067\u3042\u308b<\/li>\r\n<\/ul>\r\n
\u3068\u3044\u30463\u6761\u4ef6\u3092\u6e80\u305f\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a2d\u8a08\u66f8\u3092\u66f8\u304f\u305f\u3081\u306e\u8a18\u6cd5\u3092\u5b9a\u7fa9\u3057\u305f\u306e\u304c layout-design-spec.md<\/code> \u3067\u3059\u3002<\/p>\r\n\r\n
\r\n\r\nlayout-design-spec.md\uff08\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u66f8\u30eb\u30fc\u30eb\uff09<\/h2>\r\n# layout-design-spec.md\uff08\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u66f8\u30eb\u30fc\u30eb\uff09\r\n\r\n\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\uff08PDF\/\u753b\u50cf\uff09\u304b\u3089 `page-{CONTENT}.md` \u3092\u751f\u6210\u3059\u308b\u305f\u3081\u306e\u8a18\u6cd5\u30fb\u30eb\u30fc\u30eb\u96c6\u3002\r\nClaude.ai \u306b\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u3092\u6e21\u3057\u305f\u3068\u304d\u3001\u3053\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u5f93\u3063\u3066\u8a2d\u8a08\u66f8\u3092\u51fa\u529b\u3055\u305b\u308b\u3002\r\n\r\n---\r\n\r\n## \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\r\n\r\n\u8a2d\u8a08\u66f8\u306e\u4f5c\u6210\u304b\u3089\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u307e\u3067\u306e\u30d5\u30ed\u30fc\u306f\u4ee5\u4e0b\u306e\u901a\u308a\uff1a\r\n\r\n```\r\nTask X.1: \u8a2d\u8a08\u66f8\u4f5c\u6210\uff08PDF \u2192 \u8a2d\u8a08\u66f8\uff09\r\n \u2193\r\nTask X.2: \u30c6\u30ad\u30b9\u30c8\u7167\u5408\u30fb\u8aa4\u5b57\u4fee\u6b63\uff08JPG + \u8a2d\u8a08\u66f8 \u2192 \u7167\u5408\uff09\r\n \u2193\r\nTask X.3: \u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\uff08\u7167\u5408\u6e08\u307f\u8a2d\u8a08\u66f8 \u2192 \u5b9f\u88c5\uff09\r\n```\r\n\r\n### Task X.1: \u8a2d\u8a08\u66f8\u4f5c\u6210\r\n\r\n- \u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\uff08PDF\uff09\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u3092\u62bd\u51fa\u3057\u3001\u8a2d\u8a08\u66f8\u3092\u4f5c\u6210\u3059\u308b\r\n- **\u30c6\u30ad\u30b9\u30c8\u306f\u7701\u7565\u305b\u305a\u5168\u6587\u3092\u8a18\u8f09\u3059\u308b**\uff08`...` \u3084 `\uff3b...\uff3d` \u3067\u306e\u7701\u7565\u306f\u7981\u6b62\uff09\r\n- \u8981\u7d20\u6307\u5b9a\uff08`<p>`, `<em>`, `<small>` \u7b49\uff09\u3001\u30af\u30e9\u30b9\u6307\u5b9a\u3001\u30d1\u30bf\u30fc\u30f3\u5224\u65ad\u3092\u542b\u3081\u308b\r\n\r\n### Task X.2: \u30c6\u30ad\u30b9\u30c8\u7167\u5408\u30fb\u8aa4\u5b57\u4fee\u6b63\r\n\r\n- **\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u306e JPG\/PNG \u753b\u50cf**\u3068\u8a2d\u8a08\u66f8\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u7a81\u304d\u5408\u308f\u305b\u3066\u7167\u5408\u3059\u308b\r\n- PDF \u30c6\u30ad\u30b9\u30c8\u30ec\u30a4\u30e4\u30fc\u304b\u3089\u306e\u62bd\u51fa\u306f\u985e\u4f3c\u6f22\u5b57\u306e\u8aa4\u8a8d\u8b58\u304c\u8d77\u304d\u3084\u3059\u3044\uff08\u4f8b:\u300c\u8ca2\u732e\u300d\u2192\u300c\u76f4\u732e\u300d\uff09\r\n- \u7167\u5408\u7d50\u679c\u306f\u8a2d\u8a08\u66f8\u306b\u53cd\u6620\u3057\u3001\u8a2d\u8a08\u66f8\u3092\u300c\u7167\u5408\u6e08\u307f\u300d\u72b6\u614b\u306b\u3057\u3066\u304b\u3089\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306b\u5165\u308b\r\n\r\n### Task X.3: \u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\r\n\r\n- \u7167\u5408\u6e08\u307f\u8a2d\u8a08\u66f8\u3092\u6b63\u672c\u3068\u3057\u3066\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3059\u308b\r\n- \u30d1\u30bf\u30fc\u30f3CSS \u306f\u5404\u30d1\u30bf\u30fc\u30f3\u306e `.md`\uff08\u4f8b: `patterns\/shelf.md`\uff09\u306e\u30b9\u30cb\u30da\u30c3\u30c8\u304b\u3089\u30b3\u30d4\u30fc\u3057\u3066\u8abf\u6574\u3059\u308b\r\n\r\n---\r\n\r\n## \u51fa\u529b\u30d5\u30a1\u30a4\u30eb\r\n\r\n`{\u30da\u30fc\u30b8\u30d5\u30a9\u30eb\u30c0}\/page-{CONTENT}.md`\r\n\r\n---\r\n\r\n## \u8a18\u6cd5\r\n\r\n| \u8a18\u53f7 | \u610f\u5473 | \u5bfe\u5fdc\u3059\u308bHTML\u8981\u7d20 |\r\n|------|------|-----------------|\r\n| `\u00a7` | section \/ department\uff08\u5927\u67a0\uff09 | `<section>` \/ `<div class=\"dept-...\">` |\r\n| `[[]]` | \u30b3\u30f3\u30c6\u30ca\u30fb\u30be\u30fc\u30f3\u30fb\u30ec\u30fc\u30f3\uff08\u5185\u67a0\uff09 | `section__interior` \/ `topzone` \/ `bottomzone` \/ `leftlane` \/ `rightlane` |\r\n| `{}` | \u30e9\u30c3\u30d1\u30fc\uff08\u30d1\u30bf\u30fc\u30f3\u540d\u4ed8\u304d\uff09 | `fluid-wrapper` \/ `shelf-wrapper` \/ `chest-wrapper` \u7b49 |\r\n| `[]` | \u30a2\u30a4\u30c6\u30e0 | `<dt>` \/ `<dd>` \/ `<li>` \u7b49 |\r\n| `<>` | HTML\u8981\u7d20 | `<img>` \/ `<h2>` \/ `<p>` \u7b49\uff08\u30bf\u30b0\u540d + \u30c6\u30ad\u30b9\u30c8\u307e\u305f\u306f\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9\uff09 |\r\n| `<> \u306a\u3057` | \u30c6\u30ad\u30b9\u30c8\u306e\u307f\uff08\u304a\u4efb\u305b\uff09 | \u8981\u7d20\u6307\u5b9a\u306a\u3057\u306e\u30c6\u30ad\u30b9\u30c8 |\r\n| `()` | \u88dc\u8db3\u60c5\u5831 | `alt=\"\"` \/ \u30ea\u30f3\u30af\u5148 \/ \u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u7b49 |\r\n| `.` | class | `class=\"...\"` |\r\n| `#` | ID | `id=\"...\"` |\r\n| `---` | \u533a\u5207\u308a\u7dda | `<hr>` |\r\n| `,` | \u7e26\u4e26\u3079 | \u901a\u5e38\u306e\u7e26\u7a4d\u307f\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\uff09 |\r\n| `\/` | \u6a2a\u4e26\u3079 | grid \u7684\u306a\u5206\u5272\uff08float \/ flex \/ grid \u306e\u6a2a\u4e26\u3073\uff09 |\r\n\r\n### `.` \u3068 `#` \u306e\u66f8\u304d\u65b9\r\n\r\nPug \u3068\u540c\u3058\u8a18\u6cd5\u3002\u30bf\u30b0\u540d\u30fb\u30e9\u30c3\u30d1\u30fc\u540d\u30fb\u30a2\u30a4\u30c6\u30e0\u306b\u7d9a\u3051\u3066\u66f8\u304f\u3002\r\n\r\n```\r\n< h3.fz-lg.c-primary : \u898b\u51fa\u3057\u30c6\u30ad\u30b9\u30c8 >\r\n< img#hero-img : images\/xxx.jpg >\r\n{ shelf.ta-center (data-cols_pc=\"3\") : ... }\r\n[ .fl-right.order-2_sp : ... ]\r\n```\r\n\uff08\u203b`<` \u306e\u5f8c\u306b\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3092\u7a7a\u3051\u3066\u3044\u308b\u306e\u306f\u3001\u30b9\u30da\u30fc\u30b9\u306a\u3057\u3060\u3068 VS Code \u304c\u30a8\u30e9\u30fc\u8868\u793a\u3092\u3057\u3066\u3057\u307e\u3046\u305f\u3081\uff09\r\n\r\n### `\/` \u306e\u591a\u7fa9\u6027\u306b\u3064\u3044\u3066\r\n\r\n`\/` \u306f2\u30ec\u30d9\u30eb\u3067\u4f7f\u308f\u308c\u308b\uff1a\r\n\r\n- Fluid \u5185\u306e float \u5206\u5272\u306a`{ fluid: [\u753b\u50cf] \/ [\u30c6\u30ad\u30b9\u30c8] }`\r\n- Lane \u306e\u6a2a\u4e26\u3073\u306a`[[ leftlane ]] \/ [[ rightlane ]]`\r\n\r\n`[[]]` \u3067\u56f2\u307e\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3067\u8aad\u307f\u5206\u3051\u308b\u3053\u3068\u3002\r\n\r\n### `,` \u3068 `\/` \u306e\u4f7f\u3044\u5206\u3051\r\n\r\n`\/` \u306f grid \u7684\u306a**\u5206\u5272**\u3092\u610f\u5473\u3059\u308b\u3002`+`\uff08Pug \u306e\u4e26\u5217\uff09\u3068\u306f\u7570\u306a\u308a\u3001\u300c\u5217\u3092\u533a\u5207\u308b\u300d\u30a4\u30e1\u30fc\u30b8\u3002\r\n\r\n```\r\n{ fluid: [\u753b\u50cf] \/ [\u30c6\u30ad\u30b9\u30c8] } \u2190 \u5de6\u53f3\u306b\u5206\u5272\r\n{ shelf: [A] \/ [B] \/ [C] } \u2190 \u6a2a\u4e26\u3079\uff08wrap \u3059\u308b\u8907\u6570\u30a2\u30a4\u30c6\u30e0\uff09\r\n[[ leftlane ]] \/ [[ rightlane ]] \u2190 \u5de6\u53f3 Lane \u306b\u5206\u5272\r\n{ shelf: [A], [B], [C] } \u2190 \u7e26\u4e26\u3079\uff08wrap \u3059\u308b\u8907\u6570\u30a2\u30a4\u30c6\u30e0\uff09\r\n```\r\n\r\n---\r\n\r\n## \u30d6\u30ed\u30c3\u30af\u69cb\u9020\r\n\r\n```\r\n\u00a7section : {\u30bb\u30af\u30b7\u30e7\u30f3\u540d}(@SP) \r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n[[ interior.mx-auto :\r\n ...\r\n]]\r\n\r\n\r\n\u00a7section : {\u30bb\u30af\u30b7\u30e7\u30f3\u540d}(@PC) \r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n[[ interior.mx-auto :\r\n ...\r\n]]\r\n```\r\n\r\n### SP \/ PC \u306e\u66f8\u304d\u5206\u3051\u30eb\u30fc\u30eb\r\n\r\n**\u30ec\u30a4\u30a2\u30a6\u30c8\u304c SP \u3068 PC \u3067\u7570\u306a\u308b\u5834\u5408\u306f\u5fc5\u305a\u5225\u30d6\u30ed\u30c3\u30af\u3067\u66f8\u304f\u3002**\r\n\r\n- Lane \u5206\u5272\u306e\u6709\u7121\uff08`fxd-row_pc` \u7b49\uff09\u304c\u5909\u308f\u308b\u5834\u5408\r\n- Fluid \u306e float \u65b9\u5411\u304c\u5909\u308f\u308b\u5834\u5408\r\n- \u30a2\u30a4\u30c6\u30e0\u306e\u8868\u793a\u9806\u304c\u5909\u308f\u308b\u5834\u5408\uff08`order-*`\uff09\r\n\r\n\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u540c\u3058\u3067\u898b\u305f\u76ee\u3060\u3051\u5909\u308f\u308b\u5834\u5408\uff08\u5e45\u30fb\u6587\u5b57\u30b5\u30a4\u30ba\u7b49\uff09\u306f1\u30d6\u30ed\u30c3\u30af\u3067\u3088\u3044\u3002\r\n\r\n---\r\n\r\n## \u547d\u540d\u898f\u5247\r\n\r\n### \u30bb\u30af\u30b7\u30e7\u30f3\u540d\r\n\r\n```\r\nsect-{\u8b58\u5225\u30b3\u30fc\u30c9}-{\u30bb\u30af\u30b7\u30e7\u30f3\u540d}\r\n```\r\n\r\n\u4f8b\uff1a`sect-eqipCki4-Section`\r\n\r\n### \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u540d\r\n\r\n```\r\n{\u8b58\u5225\u30b3\u30fc\u30c9}-{\u30bb\u30af\u30b7\u30e7\u30f3\u540d}_{\u7a2e\u5225}{\u9023\u756a}.{\u62e1\u5f35\u5b50}\r\n```\r\n\r\n| \u7a2e\u5225 | \u7528\u9014 |\r\n|------|------|\r\n| `pht` | \u5199\u771f |\r\n| `ttl` | \u30bf\u30a4\u30c8\u30eb\u753b\u50cf\u30fbSVG |\r\n| `pic` | \u56f3\u89e3\u30fb\u30a4\u30e9\u30b9\u30c8 |\r\n| `logo` | \u30ed\u30b4 |\r\n\r\n\u4f8b\uff1a\r\n```\r\neqipCki4-Section_pht1.jpg\r\neqipCki4-Section_ttl1.svg\r\neqipCki4-Section_pic2.png\r\n```\r\n\r\nSP \/ PC \u3067\u7570\u306a\u308b\u753b\u50cf\u3092\u4f7f\u3046\u5834\u5408\u306f `_sp` \/ `_pc` \u30b5\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u308b\uff1a\r\n```\r\neqipCki4-Section_pht1_sp.jpg\r\neqipCki4-Section_pht1_pc.jpg\r\n```\r\n\r\n---\r\n\r\n## `[[]]` \u30b3\u30f3\u30c6\u30ca\u306e\u7a2e\u985e\r\n\r\n| \u66f8\u304d\u65b9 | \u5bfe\u5fdc\u30af\u30e9\u30b9 | \u7528\u9014 |\r\n|--------|-----------|------|\r\n| `[[ interior.mx-auto ]]` | `section__interior mx-auto` | \u901a\u5e38\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u5e45 |\r\n| `[[ inheader.mx-auto ]]` | `section__inheader mx-auto` | \u30bb\u30af\u30b7\u30e7\u30f3\u5185\u30d8\u30c3\u30c0\u30fc |\r\n| `[[ topzone ]]` | `section__topzone` | \u7e26\u5206\u5272\u30fb\u4e0a\u90e8\uff08\u5e45\u304c interior \u3068\u540c\u3058\uff09 |\r\n| `[[ bottomzone ]]` | `section__bottomzone` | \u7e26\u5206\u5272\u30fb\u4e0b\u90e8\uff08\u5e45\u304c narrower \u306a\u5834\u5408\u7b49\uff09 |\r\n| `[[ leftlane ]]` | `section__leftlane` | \u6a2a\u5206\u5272\u30fb\u5de6\u30ab\u30e9\u30e0 |\r\n| `[[ rightlane ]]` | `section__rightlane` | \u6a2a\u5206\u5272\u30fb\u53f3\u30ab\u30e9\u30e0 |\r\n\r\n### Zone\uff08\u7e26\u5206\u5272\uff09\u3092\u4f7f\u3046\u3068\u304d\r\n\r\n\u30bb\u30af\u30b7\u30e7\u30f3\u5185\u3067 **\u898b\u51fa\u3057\u90e8\u5206\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u306e\u5e45\u304c\u7570\u306a\u308b** \u5834\u5408\u306b\u4f7f\u3046\u3002\r\n\r\n```\r\n[[ interior.mx-auto :\r\n [[ topzone : \u2190 \u898b\u51fa\u3057\uff08interior \u5168\u5e45\uff09\r\n { hgroup : ... }\r\n ]],\r\n [[ bottomzone : \u2190 \u30b3\u30f3\u30c6\u30f3\u30c4\uff08narrower\uff09\r\n { ledge : ... }\r\n ]]\r\n]]\r\n```\r\n\r\n### Lane\uff08\u6a2a\u5206\u5272\uff09\u3092\u4f7f\u3046\u3068\u304d\r\n\r\n**\u540c\u4e00 interior \u5185\u3092\u5de6\u53f3\u30ab\u30e9\u30e0\u306b\u5206\u5272\u3059\u308b** \u5834\u5408\u306b\u4f7f\u3046\uff08`fxd-row`\uff09\u3002\r\n\r\n```\r\n[[ interior.fxd-row_pc.mx-auto :\r\n [[ leftlane : ... ]] \/\r\n [[ rightlane : ... ]]\r\n]]\r\n```\r\n\r\n---\r\n\r\n## `{}` \u30e9\u30c3\u30d1\u30fc\u306e\u30d1\u30bf\u30fc\u30f3\u540d\r\n\r\nSKILL.md \u306e\u4f7f\u7528\u5224\u65ad\u30d5\u30ed\u30fc\u3067\u6c7a\u5b9a\u3057\u305f\u30d1\u30bf\u30fc\u30f3\u540d\u3092\u8a18\u8f09\u3059\u308b\u3053\u3068\u3002\r\n\r\n| \u66f8\u304d\u65b9 | \u5bfe\u5fdc\u30e9\u30c3\u30d1\u30fc | \u4f7f\u3044\u3069\u3053\u308d |\r\n|--------|------------|-----------|\r\n| `{ hgroup : }` | `hgroup-wrapper` | \u30bb\u30af\u30b7\u30e7\u30f3\u898b\u51fa\u3057\u30b0\u30eb\u30fc\u30d7 |\r\n| `{ fgroup : }` | `fgroup-wrapper` | \u30bb\u30af\u30b7\u30e7\u30f3\u672b\u5c3e\u30b0\u30eb\u30fc\u30d7 |\r\n| `{ list : }` | `list-wrapper` | \u30ea\u30b9\u30c8\u30b0\u30eb\u30fc\u30d7 |\r\n| `{ chest : }` | `chest-wrapper` | \u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u5b9a\u306a\u3057\u30fb\u6c4e\u7528BOX |\r\n| `{ fluid : [] \/ [] }` | `fluid-wrapper_pc` | \u753b\u50cf\uff0b\u30c6\u30ad\u30b9\u30c8\u306e\u6a2a\u4e26\u3073\uff08float\uff09 |\r\n| `{ bleed : }` | `bleed-wrapper` | \u753b\u9762\u7aef\u307e\u3067\u306f\u307f\u51fa\u3059\u30ec\u30a4\u30a2\u30a6\u30c8\uff08float\uff09 |\r\n| `{ shelf : [] [] [] }` | `shelf-wrapper_pc` | \u6a2a\u4e26\u3073\u8907\u6570\u884c\uff08flex-wrap: wrap\uff09 |\r\n| `{ ledge : [] [] }` | `ledge-wrapper_pc` | \u6a2a\u4e26\u30731\u884c\uff08flex-wrap: nowrap\uff09 |\r\n| `{ tiles : }` | `tiles-wrapper` | \u5747\u7b49\u30b0\u30ea\u30c3\u30c9 |\r\n| `{ bento : }` | `bento-wrapper` | \u4e0d\u5747\u4e00\u30b0\u30ea\u30c3\u30c9 |\r\n| `{ rack : }` | `rack-wrapper` | \u7e26\u7a4d\u307f\uff08flex-direction: column\uff09 |\r\n| `{ cards : }` | `cards-wrapper` | \u30ab\u30fc\u30c9\u578b\uff08\u7e26\uff09 |\r\n| `{ frame : }` | `frame-wrapper` | \u753b\u50cf\u4e0a\u306b\u30c6\u30ad\u30b9\u30c8\u914d\u7f6e |\r\n| `{ board : }` | `board-wrapper` | \u8981\u7d20\u3092\u7d76\u5bfe\u4f4d\u7f6e\u3067\u81ea\u7531\u914d\u7f6e |\r\n\r\n---\r\n\r\n## `<>` HTML\u8981\u7d20\u306e\u66f8\u304d\u65b9\r\n\r\n```\r\n<\u30bf\u30b0\u540d.\u30af\u30e9\u30b9\u540d : \u5185\u5bb9\u307e\u305f\u306f\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9>\uff08\u88dc\u8db3\uff09\r\n```\r\n\r\n\u4f8b\uff1a\r\n```\r\n< h2 : ZEH >\r\n< h3.fz-xxl : \u65ad\u71b1\u6750\u3068\u30da\u30a2\u30ac\u30e9\u30b9 >\r\n< img : images\/eqipCki3-Glass_pic1.png (alt=\"\u65ad\u71b1\u6750\u3068\u30da\u30a2\u30ac\u30e9\u30b9\") >\r\n< em.fz-xxl : \u5f37\u8abf\u30c6\u30ad\u30b9\u30c8 >\r\n< small.fz-xs : \u6ce8\u91c8\u30c6\u30ad\u30b9\u30c8 >\r\n```\r\n\r\n### \u30c6\u30ad\u30b9\u30c8\u306e\u8a18\u8f09\u30eb\u30fc\u30eb \u2605\u91cd\u8981\r\n\r\n**\u8a2d\u8a08\u66f8\u3067\u306f\u30c6\u30ad\u30b9\u30c8\u3092\u7701\u7565\u3057\u306a\u3044\u3002** \u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30c6\u30ad\u30b9\u30c8\u306f\u5168\u6587\u3092\u8a18\u8f09\u3059\u308b\u3002\r\n\r\n```\r\n\u274c \u7981\u6b62:\r\n< p.fz-rg : 24\u6642\u9593\u7686\u69d8\u306e\u5b89\u5168\u306a...\uff08\u7701\u7565\uff09 >\r\n< em.fz-ml : \uff3bSDGs \u8a73\u7d30\u6587\u8a00 \u2026 \u63d0\u4f9b\u3044\u305f\u3057\u307e\u3059\u3002\uff3d >\r\n\r\n\u2705 \u6b63\u3057\u3044:\r\n< p.fz-rg : 24\u6642\u9593\u7686\u69d8\u306e\u5b89\u5168\u306a\u30de\u30f3\u30b7\u30e7\u30f3\u30e9\u30a4\u30d5\u3092\u7dad\u6301\u3059\u308b\u305f\u3081\u306b24\u6642\u9593\u6a5f\u68b0\u76e3\u8996\u30b7\u30b9\u30c6\u30e0\u3092\u5c0e\u5165\u3057\u3066\u3044\u307e\u3059\u3002\u706b\u707d\u3084\u30a8\u30ec\u30d9\u30fc\u30bf\u30fc\u306e\u6545\u969c\u7b49\u306e\u7dca\u6025\u5831\u544a\u3001\u6f0f\u6c34\u3084\u9375\u306e\u7d1b\u5931\u901a\u5831\u306a\u3069\u3001\u30de\u30f3\u30b7\u30e7\u30f3\u306b\u95a2\u3059\u308b\u7dca\u6025\u4e8b\u614b\u3092\u3044\u3061\u65e9\u304f\u30ad\u30e3\u30c3\u30c1\u3057\u3001\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u30b9\u30bf\u30c3\u30d5\u304c\u8fc5\u901f\u306a\u51e6\u7406\u306b\u3042\u305f\u308a\u307e\u3059\u3002 >\r\n```\r\n\r\n**\u7406\u7531:** \u7701\u7565\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u306f\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u30ab\u30f3\u30d7\u304b\u3089\u62fe\u3044\u76f4\u3059\u5fc5\u8981\u304c\u3042\u308a\u3001\u629c\u3051\u6f0f\u308c\u3084\u8aa4\u5b57\u306e\u539f\u56e0\u306b\u306a\u308b\u3002\u5168\u6587\u8a18\u8f09\u3057\u3066\u304a\u3051\u3070\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306f\u305d\u306e\u307e\u307e\u4f7f\u3048\u308b\u3002\r\n\r\n---\r\n\r\n### \u8272\u30af\u30e9\u30b9\uff08`c-primary` \/ `c-accent` \u7b49\uff09\u306e\u4ed8\u3051\u65b9\u30eb\u30fc\u30eb \u2605\u91cd\u8981\r\n\r\n**\u8a2d\u8a08\u66f8\u6bb5\u968e\u3067\u3082\u3001\u8272\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\u306e\u306f\u300c\u30ab\u30f3\u30d7\u3067\u660e\u78ba\u306b\u8272\u4ed8\u304d\u306e\u8981\u7d20\u306e\u307f\u300d\u3002**\u300c\u5f37\u8abf\u3063\u307d\u3044\u304b\u3089\u8d64\u300d\u306e\u3088\u3046\u306a\u63a8\u6e2c\u5224\u65ad\u3067\u8272\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u306a\u3044\u3002\r\n\r\n```\r\n\u274c \u7981\u6b62\uff08\u30ab\u30f3\u30d7\u3067\u8272\u306a\u3057\u306a\u306e\u306b\u3001\u8a2d\u8a08\u66f8\u6bb5\u968e\u3067\u8272\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\uff09:\r\n< h4.fz-md.c-primary : \u30ea\u30b9\u30af\u30a2\u30bb\u30b9\u30e1\u30f3\u30c8\u3092\u8ef8\u3068\u3057\u305f\u5b89\u5168\u306a\u8077\u5834\u3065\u304f\u308a >\r\n\uff08\u2192 \u5b9f\u88c5\u3067\u8d64\u6587\u5b57\u306b\u306a\u308a\u3001\u30ab\u30f3\u30d7\u3068\u30ba\u30ec\u308b\uff09\r\n\r\n\u2705 \u6b63\u3057\u3044\uff08\u30ab\u30f3\u30d7\u3067\u8272\u306a\u3057\u306a\u3089\u8272\u30af\u30e9\u30b9\u306f\u4ed8\u3051\u306a\u3044\uff09:\r\n< h4.fz-md : \u30ea\u30b9\u30af\u30a2\u30bb\u30b9\u30e1\u30f3\u30c8\u3092\u8ef8\u3068\u3057\u305f\u5b89\u5168\u306a\u8077\u5834\u3065\u304f\u308a >\r\n```\r\n\r\n**\u7406\u7531:** \u8a2d\u8a08\u66f8\u306f\u30ab\u30f3\u30d7\u306e\u5fe0\u5b9f\u306a\u7ffb\u8a33\u3067\u3042\u308b\u3079\u304d\u3002\u8a2d\u8a08\u66f8\u6bb5\u968e\u3067\u306e\u63a8\u6e2c\u5224\u65ad\uff08\u300c\u30b5\u30d6\u898b\u51fa\u3057\u3060\u304b\u3089\u5f37\u8abf \u2192 \u8d64\u300d\u7b49\uff09\u306f\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u8aa4\u3063\u305f\u88c5\u98fe\u3068\u3057\u3066\u5b9f\u88c5\u3055\u308c\u308b\u3002\r\n\r\n**\u30c1\u30a7\u30c3\u30af\u624b\u9806:**\r\n1. \u30ab\u30f3\u30d7\u753b\u50cf\u3092\u76ee\u8996\u3067\u958b\u304f\r\n2. \u8272\u3092\u4ed8\u3051\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u8981\u7d20\u304c\u3001\u30ab\u30f3\u30d7\u3067\u5b9f\u969b\u306b\u8272\u4ed8\u304d\u304b\u78ba\u8a8d\u3059\u308b\r\n3. \u8ff7\u3063\u305f\u3089 **\u8272\u306a\u3057**\uff08\u8272\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u306a\u3044\uff09\u3092\u9078\u3076 \u2192 \u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u518d\u78ba\u8a8d\r\n\r\n---\r\n\r\n### \u898b\u51fa\u3057\u30ec\u30d9\u30eb\u306e\u76ee\u5b89\r\n\r\n| \u8981\u7d20 | \u7528\u9014 |\r\n|------|------|\r\n| `<h2>` | \u30da\u30fc\u30b8\u30bf\u30a4\u30c8\u30eb\uff08hgroup \u5185\uff09 |\r\n| `<h3>` | \u30bb\u30af\u30b7\u30e7\u30f3\u898b\u51fa\u3057\uff08hgroup \u5185\uff09 |\r\n| `<h4>` | \u30bb\u30af\u30b7\u30e7\u30f3\u5185\u5c0f\u898b\u51fa\u3057 |\r\n| `**` | \u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\u30fb\u5f37\u8abf\u6587 |\r\n| `<em>` | \u30ea\u30fc\u30c9\u6587\u30fb\u5f37\u8abf\u6587 |\r\n| `<p>` | \u672c\u6587 |\r\n| `<small>` | \u6ce8\u91c8\u30fb\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3 |\r\n\r\n### \u898b\u51fa\u3057\u753b\u50cf\uff08\u30bf\u30a4\u30c8\u30eb SVG\uff09\u306e `max-width` \u7b97\u51fa \u2605\u91cd\u8981\r\n\r\nIntro \/ ChapterIntro \u7b49\u3067\u898b\u51fa\u3057\u753b\u50cf\uff08`ttl1.svg` \u7b49\uff09\u3092\u914d\u7f6e\u3059\u308b\u5834\u5408\u3001`max-width` \u306f **SP \u30ab\u30f3\u30d7\u306e\u753b\u50cf\u5e45\u3092 750px\uff08SP \u30ab\u30f3\u30d7\u306e\u753b\u9762\u5e45\uff09\u3067\u5272\u3063\u305f vw \u5024** \u3092\u4f7f\u3046\uff1a\r\n\r\n```\r\nmax-width: min({SP\u753b\u50cf\u5e45 \/ 750 * 100}vw, 100%);\r\n```\r\n\r\n\u4f8b\uff1a\r\n- SECURITY\uff08SP\u30ab\u30f3\u30d7\u3067 364px \u5e45\uff09\u2192 `min(48.5vw, 100%)`\r\n- STRUCTURE\uff08SP\u30ab\u30f3\u30d7\u3067 406px \u5e45\uff09\u2192 `min(54.1vw, 100%)`\r\n\r\n> \u26a0\ufe0f **`interior`\uff0892.5vw\uff09\u3067\u5272\u3089\u306a\u3044\u3053\u3068**\u3002\u5272\u308b\u306e\u306f\u5e38\u306b SP \u30ab\u30f3\u30d7\u306e 100vw\uff08= 750px\uff09\u57fa\u6e96\u3002\r\n> PC \u30ab\u30f3\u30d7\uff081440px\uff09\u304b\u3089\u66f8\u304d\u51fa\u3057\u305f SVG \u306f\u3001PC \u6642\u306b\u306f\u5143\u30b5\u30a4\u30ba\u306e\u307e\u307e\u8868\u793a\u3055\u308c\u308b\u3002\r\n\r\n---\r\n\r\n## \u5171\u901a\u5c5e\u6027\uff08\u8a2d\u8a08\u66f8\u306b\u306f\u66f8\u304b\u306a\u304f\u3066\u3088\u3044\u30fb\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u81ea\u52d5\u4ed8\u4e0e\uff09\r\n\r\n\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b Claude Code \u304c\u81ea\u52d5\u4ed8\u4e0e\u3059\u308b\u3082\u306e\uff1a\r\n\r\n- `scroll-fadeIn`\uff08`section__interior` \/ `department__interior` \u306b\u4ed8\u4e0e\uff09\r\n- `contain-intrinsic-size: 1000px`\uff08`<section>` \u306b\u4ed8\u4e0e\u3002\u305f\u3060\u3057 **\u96a3\u63a5\u30bb\u30af\u30b7\u30e7\u30f3\u3068\u30cd\u30ac\u30c6\u30a3\u30d6\u30de\u30fc\u30b8\u30f3\uff08`margin-bottom: -Nrem`\uff09\u3067\u9023\u7d50\u3055\u305b\u308b\u5834\u5408\u306f\u4ed8\u3051\u306a\u3044**\u3002\u4ed8\u3051\u308b\u3068\u898b\u5207\u308c\u308b\uff09\r\n- lazy load\uff1a`class=\"lazy\"` + `src=\"data:image\/gif;base64,...\"` + `data-src0=\"...\"`\r\n- `<picture>` \u3067\u5fc5\u305a `<img>` \u3092\u56f2\u3080\r\n\r\n---\r\n\r\n## margin \/ padding \/ font-size \u306e\u6307\u5b9a\r\n\r\n\u8a2d\u8a08\u66f8\u3067\u306f **\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u304b\u3089\u8aad\u307f\u53d6\u308c\u308b\u7bc4\u56f2\u3067\u8a18\u8f09\u3059\u308b**\u3002\u7701\u7565\u3057\u3066\u3082\u3088\u3044\uff08\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u8abf\u6574\u3059\u308b\uff09\u3002\r\n\r\n```\r\n< h3.fz-lg.mb-1r : \u898b\u51fa\u3057 > \u2190 font-size\u30fbmargin \u3092\u30af\u30e9\u30b9\u3067\u6307\u5b9a\r\n< p.fz-ss : \u30c6\u30ad\u30b9\u30c8 > \u2190 font-size \u306e\u307f\u6307\u5b9a\r\n< img : images\/xxx.jpg > \u2190 \u30b5\u30a4\u30ba\u6307\u5b9a\u306a\u3057\uff08\u304a\u4efb\u305b\uff09\r\n```\r\n\r\n### \u3088\u304f\u4f7f\u3046\u30af\u30e9\u30b9\r\n\r\n| \u30af\u30e9\u30b9 | \u610f\u5473 |\r\n|--------|------|\r\n| `fz-xxxs` `fz-xxs` `fz-xs` `fz-ss` `fz-sm` `fz-sl` `fz-md` `fz-ml` `fz-lg` `fz-xl` `fz-xxl` | font-size |\r\n| `mt-1r` `mb-1r` `mt-2r` `mb-2r` \u7b49 | margin-top \/ bottom |\r\n| `ta-center` `ta-center_sp` | text-align |\r\n| `mx-auto` | margin-inline: auto |\r\n\r\n\r\n### font-size \u306e\u76ee\u5b89\r\n\r\n| \u8981\u7d20 | \u30af\u30e9\u30b9 |\r\n|------|------|\r\n| `<h2>` | fz-xxl \u301c fz-xl |\r\n| `<h3>` | fz-lg \u301c fz-ml |\r\n| `<h4>` | fz-sl \u301c fz-md |\r\n| `**` | fz-lg \u301c fz-ml |\r\n| `<em>` | fz-md \u301c fz-rg |\r\n| `<p>` | fz-ss \u301c fz-sm |\r\n| `<small>` | fz-xs \u301c fz-xxs |\r\n\r\n---\r\n\r\n## section vs department\r\n\r\n| \u8981\u7d20 | \u30af\u30e9\u30b9 | \u7528\u9014 |\r\n|------|--------|------|\r\n| `<section>` | `sect-{\u8b58\u5225\u30b3\u30fc\u30c9}-{\u30bb\u30af\u30b7\u30e7\u30f3\u540d}` | \u30b3\u30f3\u30c6\u30f3\u30c4\u30bb\u30af\u30b7\u30e7\u30f3 |\r\n| `<div>` | `dept-{\u8b58\u5225\u30b3\u30fc\u30c9}-{\u30bb\u30af\u30b7\u30e7\u30f3\u540d}` | \u30e1\u30cb\u30e5\u30fc\u30fb\u524d\u7f6e\u304d\u30fb\u5f8c\u7f6e\u304d\u7b49\uff08\u975e\u30b3\u30f3\u30c6\u30f3\u30c4\uff09 |\r\n\r\n\u8a2d\u8a08\u66f8\u3067\u306e\u66f8\u304d\u65b9\uff1a\r\n```\r\n\u00a7section : Intro\r\n\u00a7department : Prelude\r\n```\r\n\r\n---\r\n\r\n## lang \u5c5e\u6027\r\n\r\n| \u5024 | \u30d5\u30a9\u30f3\u30c8 | \u7528\u9014 |\r\n|----|---------|------|\r\n| `ja-MP` | \u30d2\u30e9\u30ae\u30ce\u660e\u671d, \u6e38\u660e\u671d | \u548c\u6587\u30fb\u660e\u671d\u4f53 |\r\n| `ja-GP` | Noto Sans JP | \u548c\u6587\u30fb\u30b4\u30b7\u30c3\u30af\u4f53\uff08\u672c\u6587\uff09 |\r\n| `ja-ShipOMP` | \u3057\u3063\u307d\u308a\u660e\u671d OTF | \u30ea\u30fc\u30c9\u6587\u30fb\u5f37\u8abf\u6587 |\r\n\r\n\u30bb\u30af\u30b7\u30e7\u30f3\u5168\u4f53\u306b\u9069\u7528\u3059\u308b\u5834\u5408\u306f `<section lang=\"ja-GP\">` \u306e\u3088\u3046\u306b `section` \u30bf\u30b0\u306b\u6307\u5b9a\u3002\r\n\u90e8\u5206\u7684\u306b\u5909\u3048\u308b\u5834\u5408\u306f\u8a72\u5f53 `<>` \u8981\u7d20\u306b\u6307\u5b9a\u3059\u308b\u3002\r\n\r\n\u8a2d\u8a08\u66f8\u3067\u306e\u66f8\u304d\u65b9\uff1a\r\n```\r\n\u00a7section[lang=\"ja-GP\"] : Intro\r\n```\r\n\r\n---\r\n\r\n## \u51fa\u529b\u4f8b\r\n\r\n```\r\n\u00a7section : Intro(@SP) \r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n[[ inheader.mx-auto :\r\n { hgroup :\r\n < h3.fz-lg.bd-bottom : \u30aa\u30fc\u30eb\u30de\u30a4\u30c6\u30a3\u30b7\u30b9\u30c6\u30e0 >\r\n }\r\n]],\r\n[[ interior.mx-auto :\r\n [[ leftlane :\r\n { fluid :\r\n [< img : images\/eqipCki4-Section_pic2.png >] \/ \u2190float \u306e\u6a2a\u4e26\u3073\r\n [< em.fz-md : \u30ad\u30fc\u3092\u5dee\u3057\u8fbc\u3093\u3067\u56de\u3059\u64cd\u4f5c\u304c\u4e0d\u8981\u306a\u30aa\u30fc\u30c8\u30ad\u30fc\u3002 >,\r\n < img : images\/eqipCki4-Section_logo1.png (alt=\"Clavis\") >,\r\n < h4 : \u30aa\u30fc\u30c8\u30ad\u30fc >,\r\n < p.fz-ss : \u9784\u3084\u30dd\u30b1\u30c3\u30c8\u306b\u5165\u308c\u305f\u307e\u307e\u901a\u904e\u53ef\u80fd\u3067\u3059\u3002 >]\r\n }\r\n ]], \u2190\u901a\u5e38\u306e\u7e26\u7a4d\u307f\r\n [[ rightlane :\r\n { fluid :\r\n [< img : images\/eqipCki4-Section_pic3.png (alt=\"\u30a8\u30f3\u30c8\u30e9\u30f3\u30b9\") >] \/\r\n [< p.fz-ss : \u643a\u5e2f\u3057\u3066\u3044\u308c\u3070\u4fbf\u5229\u3067\u3059\u3002 >]\r\n }\r\n ]]\r\n]]\r\n\r\n\r\n\u00a7section[lang=\"ja-GP\"] : Intro(@PC) \r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n[[ inheader.mx-auto :\r\n { hgroup :\r\n < h3.fz-lg.bd-bottom : \u30aa\u30fc\u30eb\u30de\u30a4\u30c6\u30a3\u30b7\u30b9\u30c6\u30e0 >\r\n }\r\n]],\r\n[[ interior.fxd-row_pc.mx-auto :\r\n [[ leftlane :\r\n { fluid :\r\n [< img : images\/eqipCki4-Section_pic2.png >] \/ \u2190float \u306e\u6a2a\u4e26\u3073\r\n [< em.fz-md : \u30ad\u30fc\u3092\u5dee\u3057\u8fbc\u3093\u3067\u56de\u3059\u64cd\u4f5c\u304c\u4e0d\u8981\u306a\u30aa\u30fc\u30c8\u30ad\u30fc\u3002 >,\r\n < img : images\/eqipCki4-Section_logo1.png (alt=\"Clavis\")>,\r\n < h4 : \u30aa\u30fc\u30c8\u30ad\u30fc >,\r\n < p.fz-ss : \u9784\u3084\u30dd\u30b1\u30c3\u30c8\u306b\u5165\u308c\u305f\u307e\u307e\u901a\u904e\u53ef\u80fd\u3067\u3059\u3002 >\r\n ]\r\n }\r\n ]] \/ \u2190flex \u306e\u6a2a\u4e26\u3073\r\n [[ rightlane :\r\n { fluid :\r\n [< img : images\/eqipCki4-Section_pic3.png (alt=\"\u30a8\u30f3\u30c8\u30e9\u30f3\u30b9\") >] \/\r\n [< p.fz-ss : \u643a\u5e2f\u3057\u3066\u3044\u308c\u3070\u4fbf\u5229\u3067\u3059\u3002 >]\r\n }\r\n ]]\r\n]]<\/code><\/pre>\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\u8a18\u6cd5\u306e\u6838\uff1a\u8a18\u53f7\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u69cb\u9020\u3092\u8868\u3059<\/h3>\r\n
HTML\u306e\u5165\u308c\u5b50\u69cb\u9020\u3092\u3001\u306a\u308b\u3079\u304f\u5c11\u306a\u3044\u8a18\u53f7\u3067\u8868\u73fe\u3067\u304d\u308b\u3088\u3046\u8a2d\u8a08\u3057\u307e\u3057\u305f\u3002\u57fa\u672c\u306e\u8a18\u53f7\u30bb\u30c3\u30c8\u306f\u4ee5\u4e0b\u3067\u3059\u3002<\/p>\r\n
\r\n \r\n \r\n \u8a18\u53f7<\/th>\r\n \u610f\u5473<\/td>\r\n \u5bfe\u5fdc\u3059\u308bHTML<\/td>\r\n <\/tr>\r\n <\/thead>\r\n \r\n \r\n \u00a7<\/code><\/th>\r\n section\uff08\u5927\u67a0\uff09<\/td>\r\n <section><\/code><\/td>\r\n <\/tr>\r\n \r\n [[ ]]<\/code><\/th>\r\n \u30b3\u30f3\u30c6\u30ca\u30fb\u30ab\u30e9\u30e0<\/td>\r\n interior<\/code> \/ leftlane<\/code> \u7b49<\/td>\r\n <\/tr>\r\n \r\n { }<\/code><\/th>\r\n \u30d1\u30bf\u30fc\u30f3\u4ed8\u304d\u30e9\u30c3\u30d1\u30fc<\/td>\r\n fluid-wrapper<\/code> \/ shelf-wrapper<\/code> \u7b49<\/td>\r\n <\/tr>\r\n \r\n [ ]<\/code><\/th>\r\n \u30a2\u30a4\u30c6\u30e0<\/td>\r\n <li><\/code> \/ <dd><\/code> \u7b49<\/td>\r\n <\/tr>\r\n \r\n < ><\/code><\/th>\r\n HTML\u8981\u7d20<\/td>\r\n <h2><\/code> \/ <p><\/code> \/ <img><\/code><\/td>\r\n <\/tr>\r\n \r\n ,<\/code><\/th>\r\n \u7e26\u4e26\u3079<\/td>\r\n \u7e26\u7a4d\u307f<\/td>\r\n <\/tr>\r\n \r\n \/<\/code><\/th>\r\n \u6a2a\u4e26\u3079<\/td>\r\n \u6a2a\u5206\u5272<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\u5916\u5074\u304b\u3089\u5185\u5074\u3078\u3001\u00a7<\/code> \u2192 [[ ]]<\/code> \u2192 { }<\/code> \u2192 [ ]<\/code> \u2192 < ><\/code> \u3068\u5165\u308c\u5b50\u304c\u6df1\u304f\u306a\u308a\u307e\u3059\u3002\u7c21\u5358\u306a\u4f8b\u3092\u6319\u3052\u307e\u3059\u3002<\/p>\r\n\u00a7section : Intro\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n[[ interior :\r\n { hgroup :\r\n < h2 : \u30b5\u30fc\u30d3\u30b9\u7d39\u4ecb >,\r\n < p : \u79c1\u305f\u3061\u304c\u63d0\u4f9b\u3059\u308b3\u3064\u306e\u4fa1\u5024\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 >\r\n }\r\n]]<\/code><\/pre>\r\n\u3053\u308c\u306f\u300cIntro\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u4e2d\u306b\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u9818\u57df\u304c\u3042\u308a\u3001\u305d\u306e\u4e2d\u306b\u898b\u51fa\u3057\u30b0\u30eb\u30fc\u30d7\uff08h2\uff0bp\uff09\u304c\u7e26\u306b\u4e26\u3076\u300d\u3068\u3044\u3046\u69cb\u9020\u3092\u8868\u3057\u3066\u3044\u307e\u3059\u3002HTML\u306e\u30bf\u30b0\u3092\u5168\u90e8\u66f8\u304f\u3088\u308a\u5727\u5012\u7684\u306b\u77ed\u304f\u3001\u304b\u3064\u69cb\u9020\u304c\u4e00\u76ee\u3067\u8ffd\u3048\u307e\u3059\u3002<\/p>\r\n\r\n
\r\n\r\n\u300c\u6a2a\u4e26\u3073\u300d\u306e\u8868\u73fe<\/h3>\r\n
\u8a18\u6cd5\u8a2d\u8a08\u3067\u8003\u3048\u305f\u306e\u304c\u3001\u6a2a\u4e26\u3073\u3092\u3069\u3046\u4f1d\u3048\u308b\u304b<\/b>\u3067\u3057\u305f\u3002<\/p>\r\n
\u7e26\u7a4d\u307f\u306f ,<\/code>\u3000\u6a2a\u4e26\u3079\u306f \/<\/code> \u3067\u4f1d\u3048\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\r\n\r\n{ fluid : [\u753b\u50cf] \/ [\u30c6\u30ad\u30b9\u30c8] } \u2190 \u753b\u50cf\u3068\u30c6\u30ad\u30b9\u30c8\u3092\u6a2a\u4e26\u3073\uff08\u30a2\u30a4\u30c6\u30e0\u306e\u30ec\u30d9\u30eb\uff09\r\n[[ leftlane ]] \/ [[ rightlane ]] \u2190 \u5de6\u53f3\u30ab\u30e9\u30e0\u306b\u5206\u5272\uff08\u30b3\u30f3\u30c6\u30ca\u306e\u30ec\u30d9\u30eb\uff09<\/code><\/pre>\r\n\r\n
\r\n\r\nSP\/PC\u306e\u66f8\u304d\u5206\u3051\u3068\u300c\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6e08\u307f\u300d\u30de\u30fc\u30ab\u30fc<\/h3>\r\nSP\/PC\u3067\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u306f\u5225\u30d6\u30ed\u30c3\u30af\u3067\u66f8\u304f<\/h4>\r\n
\u30b9\u30de\u30db\u3068PC\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u5909\u308f\u308b\uff08\u30ab\u30e9\u30e0\u5206\u5272\u306e\u6709\u7121\u3001\u8868\u793a\u9806\u306e\u5165\u308c\u66ff\u3048\u306a\u3069\uff09\u5834\u5408\u306f\u3001\u7121\u7406\u306b1\u3064\u306b\u307e\u3068\u3081\u305a\u3001\u5225\u30d6\u30ed\u30c3\u30af\u3067\u66f8\u304f<\/b>\u30eb\u30fc\u30eb\u306b\u3057\u307e\u3057\u305f\u3002\u5bfe\u8c61\u306f\u884c\u672b\u306e (@SP)<\/code> \/ (@PC)<\/code> \u3067\u793a\u3057\u307e\u3059\u3002<\/p>\r\n\u00a7section : Feature (@SP) \u2190 \u30b9\u30de\u30db\u7528\u30d6\u30ed\u30c3\u30af\r\n\u00a7section : Feature (@PC) \u2190 PC\u7528\u30d6\u30ed\u30c3\u30af<\/code><\/pre>\r\n\r\n\u5b9f\u88c5\u6e08\u307f\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u300c\u2705 coded\u300d\u3067\u7573\u3080<\/h4>\r\n
\u30da\u30fc\u30b8\u304c\u5927\u304d\u304f\u306a\u308b\u3068\u3001\u8a2d\u8a08\u66f8\u3082\u9577\u304f\u306a\u308a\u307e\u3059\u3002\u3059\u3067\u306b\u5b9f\u88c5\u304c\u7d42\u308f\u3063\u305f\u30bb\u30af\u30b7\u30e7\u30f3\u307e\u3067\u5168\u6587\u6b8b\u3063\u3066\u3044\u308b\u3068\u3001\u300c\u3053\u308c\u304b\u3089\u5b9f\u88c5\u3059\u308b\u7b87\u6240\u300d\u304c\u57cb\u3082\u308c\u3066\u898b\u901a\u3057\u304c\u60aa\u3044\u3002<\/p>\r\n
\u305d\u3053\u3067\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u5b8c\u4e86\u3057\u305f\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u4e2d\u8eab\u3092\u7701\u7565\u3057\u3001\u2705 coded<\/code> \u30de\u30fc\u30ab\u30fc\u3060\u3051\u6b8b\u3059\u904b\u7528\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\r\n\u00a7section : ItemList1\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\u2705 coded\r\n\r\n\u00a7section : ItemList2\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\u2705 coded<\/code><\/pre>\r\n\u305f\u3060\u3057\u3001\u305d\u306e\u30da\u30fc\u30b8\u3067\u521d\u3081\u3066\u4f7f\u3046\u30ec\u30a4\u30a2\u30a6\u30c8\u30d1\u30bf\u30fc\u30f3<\/b>\u306e\u5834\u5408\u306f\u3001\u518d\u5229\u7528\u6642\u306e\u53c2\u8003\u306b\u306a\u308b\u3088\u3046\u88dc\u8db3\u3060\u3051\u6b8b\u3057\u307e\u3059\u3002\u8a2d\u8a08\u66f8\u3092\u300c\u672a\u5b9f\u88c5\u306e\u7b87\u6240\u306b\u96c6\u4e2d\u3055\u305b\u308b\u300d\u305f\u3081\u306e\u5de5\u592b\u3067\u3059\u3002<\/p>\r\n\r\n\r\n
\r\n\r\n\u8a2d\u8a08\u66f8\u306b\u8ab2\u3057\u305f\u300c\u7ffb\u8a33\u306e\u5fe0\u5b9f\u3055\u300d\u30eb\u30fc\u30eb<\/h3>\r\n
\u8a18\u6cd5\u3068\u306f\u5225\u306b\u3001\u8a2d\u8a08\u66f8\u306e\u54c1\u8cea\u3092\u4fdd\u3064\u305f\u3081\u306e\u539f\u5247\u3082\u6c7a\u3081\u307e\u3057\u305f\u3002\u4e00\u756a\u5927\u4e8b\u306a\u306e\u306f \u300c\u8a2d\u8a08\u66f8\u306f\u30ab\u30f3\u30d7\u306e\u5fe0\u5b9f\u306a\u7ffb\u8a33\u3067\u3042\u308b\u3079\u304d\u300d<\/b>\u3068\u3044\u3046\u8003\u3048\u65b9\u3067\u3059\u3002\u5177\u4f53\u7684\u306b\u306f2\u3064\u3002<\/p>\r\n
\u2460 \u30c6\u30ad\u30b9\u30c8\u306f\u7701\u7565\u3057\u306a\u3044<\/b> \u2014 \u30ab\u30f3\u30d7\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u672c\u6587\u306f\u3001\u9577\u304f\u3066\u3082\u5168\u6587\u3092\u8a2d\u8a08\u66f8\u306b\u66f8\u304f\u3002\u7701\u7565\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\u306b\u30ab\u30f3\u30d7\u304b\u3089\u62fe\u3044\u76f4\u3059\u5fc5\u8981\u304c\u751f\u3058\u3001\u629c\u3051\u3084\u8aa4\u5b57\u306e\u6e29\u5e8a\u306b\u306a\u308a\u307e\u3059\u3002\u5168\u6587\u66f8\u3044\u3066\u304a\u3051\u3070\u3001\u5b9f\u88c5\u6642\u306f\u305d\u306e\u307e\u307e\u30b3\u30d4\u30fc\u3067\u6e08\u307f\u307e\u3059\u3002<\/p>\r\n
\u2461 \u63a8\u6e2c\u3067\u88c5\u98fe\u3092\u8db3\u3055\u306a\u3044<\/b> \u2014 \u300c\u30b5\u30d6\u898b\u51fa\u3057\u3063\u307d\u3044\u304b\u3089\u8d64\u6587\u5b57\u306b\u3057\u3066\u304a\u3053\u3046\u300d\u306e\u3088\u3046\u306a\u63a8\u6e2c\u5224\u65ad\u3067\u8272\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u306a\u3044\u3002\u30ab\u30f3\u30d7\u3067\u5b9f\u969b\u306b\u8272\u304c\u4ed8\u3044\u3066\u3044\u308b\u8981\u7d20\u3060\u3051\u306b\u8272\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u8a2d\u8a08\u66f8\u6bb5\u968e\u3067\u306e\u63a8\u6e2c\u306f\u3001\u5b9f\u88c5\u3067\u30ab\u30f3\u30d7\u3068\u306e\u30ba\u30ec\u306b\u306a\u3063\u3066\u8fd4\u3063\u3066\u304d\u307e\u3059\u3002<\/p>\r\n
\u3053\u306e2\u3064\u306f\u5730\u5473\u3067\u3059\u304c\u3001AI\u304c\u300c\u6c17\u3092\u5229\u304b\u305b\u3066\u300d\u52dd\u624b\u306b\u5909\u3048\u3066\u3057\u307e\u3046<\/b>\u306e\u3092\u9632\u3050\u3001\u91cd\u8981\u306a\u30d6\u30ec\u30fc\u30ad\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\r\n\r\n\r\n
\r\n\r\n\u307e\u3068\u3081\uff1a\u4e2d\u9593\u8868\u73fe\u304cAI\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u7cbe\u5ea6\u3092\u4e0a\u3052\u308b<\/h2>\r\n
\u30ab\u30f3\u30d7\u304b\u3089\u76f4\u63a5\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3055\u305b\u308b\u306e\u3092\u3084\u3081\u3001\u9593\u306b\u300c\u4e2d\u9593\u8a2d\u8a08\u66f8\u300d\u3092\u631f\u3080\u3053\u3068\u3067\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u518d\u73fe\u306e\u7cbe\u5ea6\u304c\u5927\u304d\u304f\u4e0a\u304c\u308a\u307e\u3057\u305f\u3002\u8981\u70b9\u3092\u6574\u7406\u3057\u307e\u3059\u3002<\/p>\r\n
\r\n - \u5de5\u7a0b\u3092\u5206\u3051\u308b<\/b> \u2014 \u30ab\u30f3\u30d7\u2192\u8a2d\u8a08\u66f8\u2192\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e3\u6bb5\u968e\u3002\u3044\u304d\u306a\u308a\u5b9f\u88c5\u3055\u305b\u306a\u3044<\/li>\r\n
- \u69cb\u9020\u3092\u8a18\u53f7\u3067\u660e\u793a\u3059\u308b<\/b> \u2014 \u5165\u308c\u5b50\u30fb\u6a2a\u4e26\u3073\u30fb\u7e26\u4e26\u3073\u3092\u5c11\u306a\u3044\u8a18\u53f7\u3067\u8868\u73fe<\/li>\r\n
- \u66d6\u6627\u3055\u3092\u5fb9\u5e95\u7684\u306b\u6f70\u3059<\/b> \u2014 \u300c
\/<\/code> \u306e\u5de6\u53f3\u306f\u540c\u3058\u968e\u5c64\u300d\u306e\u3088\u3046\u306a\u4e00\u610f\u30eb\u30fc\u30eb\u3067\u89e3\u91c8\u30d6\u30ec\u3092\u9632\u3050<\/li>\r\n - \u8a18\u53f7\u306f\u5b9f\u7528\u6027\u3067\u9078\u3076<\/b> \u2014 \u6253\u3061\u3084\u3059\u3055\u30fb\u898b\u5206\u3051\u3084\u3059\u3055\u30fb\u691c\u7d22\u3057\u3084\u3059\u3055\u3092\u512a\u5148<\/li>\r\n
- \u5fe0\u5b9f\u306a\u7ffb\u8a33\u3092\u5fb9\u5e95\u3059\u308b<\/b> \u2014 \u30c6\u30ad\u30b9\u30c8\u5168\u6587\u8a18\u8f09\u3001\u63a8\u6e2c\u88c5\u98fe\u306e\u7981\u6b62<\/li>\r\n<\/ul>\r\n
\u300cAI\u306b\u4efb\u305b\u308b\u300d\u3068\u306f\u3001\u4e38\u6295\u3052\u3059\u308b\u3053\u3068\u3067\u306f\u306a\u304f\u3001AI\u304c\u6b63\u78ba\u306b\u89e3\u91c8\u3067\u304d\u308b\u5f62\u306b\u60c5\u5831\u3092\u6574\u3048\u3066\u3042\u3052\u308b\u3053\u3068<\/b>\u3060\u3068\u5b9f\u611f\u3057\u307e\u3057\u305f\u3002\u6700\u521d\u306b\u8a18\u6cd5\u3092\u6574\u5099\u3059\u308b\u624b\u9593\u306f\u304b\u304b\u308a\u307e\u3059\u304c\u3001\u4e00\u5ea6\u4f5c\u308c\u3070\u5168\u30da\u30fc\u30b8\u3067\u4f7f\u3044\u56de\u305b\u307e\u3059\u30022\u30da\u30fc\u30b8\u76ee\u30013\u30da\u30fc\u30b8\u76ee\u304b\u3089\u4e00\u6c17\u306b\u697d\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\r\n
![\"Claude](\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/484cf2c76149e1b40dd2c8e5e63034f7.jpg?ver=20260603235237\")
\r\n<\/picture>\r\n