汎用性の高いheaderの型

<aside> <img src="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" alt="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" width="40px" /> 各ページへのリンク

</aside>

参考動画＆参考記事

https://www.youtube.com/watch?v=WxSEbLMIc3M&feature=youtu.be

RyoBlog

コード

html.json

"header": {
    "prefix": "header-base-html",
    "body": [
        "<header class=\\"header\\">",
        "    <div class=\\"header-wrap\\">",
        "        <div class=\\"header-logo\\">",
        "            <a href=\\"\\">ロゴ</a>",
        "        </div>",
        "        <nav class=\\"header-nav\\">",
        "            <ul class=\\"header-list\\">",
        "                <li class=\\"header-item\\"><a href=\\"\\">about</a></li>",
        "                <li class=\\"header-item\\"><a href=\\"\\">service</a></li>",
        "                <li class=\\"header-item\\"><a href=\\"\\">works</a></li>",
        "            </ul>",
        "            <div class=\\"header-btn\\">",
        "                <a href=\\"\\">contact</a>",
        "            </div>",
        "        </nav>",
        "        <div class=\\"drawer-icon pc_hidden\\">",
        "            <span class=\\"bar1\\"></span>",
        "            <span class=\\"bar2\\"></span>",
        "            <span class=\\"bar3\\"></span>",
        "        </div>",
        "    </div>",
        "</header>",
    ],
    "description": "header(html)"
},

scss.json

"header": {
    "prefix": "header-base-css",
    "body": [
        "\\\\$height-pc: 80px;",
        "\\\\$height-sp: 60px;",
        "\\\\$paddingSide-pc: 40px;",
        "\\\\$paddingSide-sp: 20px;",
        "\\\\$navGap: 20px;",
        "\\\\$listGap: 20px;",
        "",
        ".header {",
        "    position: fixed;",
        "    top: 0;",
        "    left: 0;",
        "    width: 100%;",
        "    height: \\\\$height-pc;",
        "    padding: 0 \\\\$paddingSide-pc;",
        "}",
        "",
        ".header-wrap {",
        "    display: flex;",
        "    justify-content: space-between;",
        "    align-items: center;",
        "    height: inherit;",
        "}",
        "",
        ".header-logo {",
        "",
        "}",
        ".header-nav {",
        "    display: flex;",
        "    align-items: center;",
        "    column-gap: \\\\$navGap;",
        "}",
        "",
        ".header-list {",
        "    display: flex;",
        "    align-items: center;",
        "    column-gap: \\\\$listGap;",
        "}",
        "",
        ".pc_hidden {",
        "    display: none;",
        "}",
    ],
    "description": "header(css)"
},