HTML ヘッダーコーディング(スマホサイズ) 自分メモ

スマホサイズの表示を行う時に2通りの実装方法があることを知りました。
個人的にはheaderタグの中に埋め込まれているsp1の方が理解しやすいと感じました。

実行画像

↓sp1

↓sp2

sp1 コード

index.html

<header class="header">
    <div class="header-inner">
        <h1>ABC LOGO</h1>
        <div class="header">
            <div class="drawer">
                <span class="drawer-icon_bar"></span>
                <span class="drawer-icon_bar"></span>
                <span class="drawer-icon_bar"></span>
            </div>
        </div>
        <nav class="header_nav">
            <div class="drawer_content">
                <ul class="drawer-list">
                    <li class="drawer-item">Concept</li>
                    <li class="drawer-item">Feature</li>
                    <li class="drawer-item">Products</li>
                    <li class="drawer-item">News</li>
                    <li class="drawer-item">Contact</li>
                </ul>
            </div>
        </nav>
    </div>
</header>

style.css

body {
    background-color: #333;
}
/* リストの・削除 */
ul {
    list-style-type: none;
}
/* ロゴとハンバーガーメニューの横並び */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 60px;
    background: #fff;
}

/* ハンバーガーメニューの設定 */
.drawer {
    position: relative;
    width: 30px;
    height: 18px;
}
.drawer-icon_bar {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background: #3EA1D1;
}
.drawer-icon_bar:nth-child(1){
    margin-top: 0;
}
.drawer-icon_bar:nth-child(2) {
    margin-top: 8px;
}
.drawer-icon_bar:nth-child(3){
    margin-top: 16px;
}


/* ドロワー表示内容を浮かせて右端に指定 */
.header_nav {
    position: fixed;
    height: 100%;
    right: 0;
    top: 60px;
}
.drawer_content {
    width: 270px;
    height: 100%;
    background: #3EA1D1;
}
.drawer-list {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 32px;
    padding-top: 40px;
    padding-right: 15px;
    color: #fff;
}
.drawer-item {
    display: inline-block;
}

sp2 コード

index.html

<header class="header">
        <div class="header__inner">
            <h1>DEF LOGO</h1>
            <div class="drawer">
                <span class="drawer-icon_bar"></span>
                <span class="drawer-icon_bar"></span>
                <span class="drawer-icon_bar"></span>
            </div>
        </div>
    </header>
    <div class="drawer_content">
        <ul class="drawer-list">
            <li class="drawer-item">Concept</li>
            <li class="drawer-item">Feature</li>
            <li class="drawer-item">Products</li>
            <li class="drawer-item">News</li>
            <li class="drawer-item">Contact</li>
        </ul>
    </div>

style.css

body {
    background-color: #333;
}
/* リストの・削除 */
ul {
    list-style-type: none;
}
/* ロゴとハンバーガーメニューの横並び */
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 20px 15px;
}

/* ハンバーガーメニューの設定 */
.drawer {
    position: relative;
    width: 30px;
    height: 18px;
    z-index: 51;
}
.drawer-icon_bar {
    position: absolute;
    width: inherit;
    height: 2px;
    background: #fff;
}
.drawer-icon_bar:nth-child(1) {
    top: 0;
}
.drawer-icon_bar:nth-child(2) {
    top: 9px;
}
.drawer-icon_bar:nth-child(3) {
    top: 16px;
}

/* ドロワー表示内容を浮かせて右端に指定 */
.drawer_content {
    position: fixed;
    width: 270px;
    height: 100%;
    top: 0;
    right: 0;
    background: #3EA1D1;
    padding: 80px 15px;
}
.drawer-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: #fff;
}
.drawer-item {
    display: block;
    text-align: right;
}