## 制作物 * [【CodePen】基本的なヘッダー（2カラム）を作ってみた](https://codepen.io/goodboat_242/pen/WNjQwJw) ## コード(index.html) ```html

Header Logo

``` ## コード(style.css) ```css .l-header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 4.375rem; background-color: transparent; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .l-header.is-colored { background-color: #3F51B5; } .l-header__inner { width: 100%; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-right: auto; margin-left: auto; height: inherit; } .p-header { display: -webkit-box; display: -ms-flexbox; display: flex; height: inherit; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-header__logo { font-family: "Montserrat", sans-serif; font-size: 1.5rem; font-weight: 500; } .p-header__nav { margin-left: auto; } .p-globalNav { display: none; } @media screen and (min-width: 768px) { .p-globalNav { display: block; } } .p-globalNav__items { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-globalNav__item { font-family: "Montserrat", sans-serif; text-transform: uppercase; } .p-globalNav__item:not(:last-child) { margin-right: 1.875rem; } .p-globalNav__link { display: block; height: 100px; line-height: 100px; color: #fff; position: relative; } .p-globalNav__link::after { content: ""; position: absolute; bottom: 35%; left: 0; width: 100%; height: 0.0625rem; background: #fff; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .p-globalNav__link:focus::after, .p-globalNav__link:hover::after { -webkit-transform: scale(1); transform: scale(1); } .p-hamburger { position: fixed; top: 0.75rem; right: 0.9375rem; z-index: 41; } .p-hamburger.is-open .p-hamburger__bar--top { top: 0.625rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .p-hamburger.is-open .p-hamburger__bar--middle { opacity: 0; } .p-hamburger.is-open .p-hamburger__bar--bottom { top: 0.625rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .p-hamburger.is-open .p-hamburger__label::after { content: "Close"; } @media screen and (min-width: 768px) { .p-hamburger { display: none; } } .p-hamburger__bars { display: block; width: 1.75rem; height: 1.5rem; margin: 0.375rem 0.25rem; position: relative; } .p-hamburger__bar { display: block; position: absolute; left: 0; width: 100%; height: 0.25rem; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; } .p-hamburger__bar--top { top: 0; } .p-hamburger__bar--middle { top: 0.625rem; } .p-hamburger__bar--bottom { top: 1.25rem; } .p-hamburger__label::after { content: "Menu"; display: block; color: #fff; font-family: "Montserrat", sans-serif; font-size: 0.625rem; line-height: 1; text-align: center; -webkit-transition: content 0.3s; transition: content 0.3s; } .p-drawer { position: fixed; top: 0; left: 0; z-index: 40; -webkit-transform: translateX(105%); transform: translateX(105%); width: 100%; height: 100%; background-color: #3F51B5; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .p-drawer.is-open { -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (min-width: 768px) { .p-drawer { display: none; } } .p-drawer__nav { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .p-spNav__items { text-align: center; width: 15rem; } .p-spNav__item { font-family: "Montserrat", sans-serif; } .p-spNav__item:not(:first-child) { margin-top: 0.5rem; } .p-spNav__link { display: block; color: #fff; padding: calc(4 / 16 * 1em) calc(8 / 16 * 1em); } ``` ## コード(script.js) ```js jQuery( document ).ready( function() { // ハンバーガーメニューをクリックして・・・ jQuery( '.js-hamburger' ).on( 'click', function(e) { e.preventDefault(); if ( jQuery( this ).hasClass( 'is-open' ) ) { // ・・・ドロワーが開いていたら閉じる jQuery( this ).removeClass( 'is-open' ); jQuery( '.js-drawer' ).removeClass( 'is-open' ); } else { // ・・・ドロワーが閉じていたら開く jQuery( this ).addClass( 'is-open' ); jQuery( '.js-drawer' ).addClass( 'is-open' ); } return false; } ); // ドロワーメニューをクリックするとドロワーが閉じる jQuery( '.js-spNavLink' ).on( 'click', function(e) { e.preventDefault(); if ( window.innerWidth <= 767 ) { jQuery( '.js-hamburger' ).click(); } return false; } ); // ヘッダーがメインビジュアル下限より・・・ jQuery( window ).on( 'scroll', function() { let mainVisual = jQuery('.js-mainVisual').innerHeight(); if ( mainVisual - 30 < jQuery( this ).scrollTop() ) { // ・・・下にある時、ヘッダーに背景色が付く jQuery( '.js-header' ).addClass( 'is-colored' ); } else { // ・・・上にある時は背景色が付かない jQuery( '.js-header' ).removeClass( 'is-colored' ); } } ); } ); ```

Account Tickets