汎用性の高い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)"
},