【プログラミング・Web制作勉強ログ#151】9/18の積み上げ記録（HTML/Sass：ヘッダー固定、私なりの「ゼロ秒思考メモ書き」の方法）

        <!-- header -->
        <header class="l-header">
                <div class="c-container">
                        <div class="l-header__left">
                                <a class="l-header__logo" href="#">
                                        <img src="./img/common/logo-red.png" alt="header_icon">
                                        <div class="l-header__title">きたむら<br class="u-mq-display__sp--none"><span>ミュージックスクール</span></div>
                                </a>
                                <div class="l-header__nav-content u-mq-display__sp--none">
                                        <nav class="l-header__nav">
                                                <ul class="l-header__nav-list">
                                                        <li><a href="plan.html">料金</a></li>
                                                        <li><a href="blog_list.html">ブログ</a></li>
                                                        <li><a href="notice_list.html">お知らせ</a></li>
                                                        <li><a href="result_list.html">卒業実績</a></li>
                                                </ul>
                                        </nav>
                                </div>
                        </div>
                        <div class="l-header__button-area u-mq-display__sp--none">
                                <button onclick="location.href='contact_form.html'" class="c-button l-header__button">お問い合わせ</button>
                        </div>
                </div>
                <div class="c-hamburger u-mq-display__pc--none">
                        <span></span>
                </div>
        </header>

@use '../foundation/variable' as *;
@use '../foundation/mixin' as *;

/* header
--------------------------- */
//PC
.l-header {
        height: 80px;
        width: 100%;
        position: fixed;　//ヘッダー固定
        z-index: 9998;   //ヘッダーを上部に設定（ハンバーガーメニューが最上部のため9998）
        background-color: $c-base;
        padding: {
                left: 20px;
                right: 20px;
        }
        .c-container {
                display: flex;
                align-items: center;
                justify-content: space-between;
        }
        &__left {
                display: flex;
                gap: 32px;
                align-items: center;
        }
        &__logo {
                display: flex;
                padding-top: 11px;
                img {
                        width: 32px;
                        height: 50px;
                }
        }
        &__title {
                padding-left: 5px;
                font-size: 2rem;
                font-weight: bold;
                span {
                        font-size: 1.5rem;
                        line-height: 2;
                }
        }
        &__nav-list {
                font-weight: bold;
                display: flex;
                gap: clamp(10px, 3.7037037037vw, 40px); 
                li a {
                        display: inline-block;
                        line-height: 80px;  //aタグの領域をheader高さいっぱい
                }
        }
        &__button {
                width: 150px;
                height: 45px;
        }
}
//SP
@include sp {
.l-header {
        height: 50px;
        padding: 0;
        &__logo {
                img {
                        width: 20px;
                        height: 31px;
                }
        }
        &__title {
                padding-left: 6px;
                font-size: 1.3rem;
                span {
                        font-size: 1.3rem;
                }
        }
        &__nav-content {
                position: fixed;
                width: 300px;
                top: 51px;
                right: -100%;
                transition: all .6s;
                z-index: 9997;
                &.open {
                        right: 0;
                }
        }
        &__nav-list {
                display: block;
                li {
                        background: $c-main;
                        a {
                                display: inline-block;
                                width: 100%;
                                padding: 20px;
                                text-align: left;
                                color: $c-base;
                                &:hover {
                                        background: $c-accent;
                                }
                        }
                }
        }
}
}