filename.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>hamburgerMenu</title><linkrel="stylesheet"href="css/style.css"></head><body><header><divclass="headerWrapper"><divclass="headerInner"><h1><ahref="#">sample</a></h1><divclass="navToggle for_sp"><span></span><span></span><span></span></div></div><divid="globalMenuSp"class=""><ulid="manu"class="menu"><li><ahref="#home"target="_top"class="home">Home</a></li><li><ahref="#about"target="_top"class="about">About</a></li><li><ahref="#skills"target="_top"class="skills">Skills</a></li><li><ahref="#portfolio"target="_top"class="portfolio">Portfolio</a></li></ul></div></div></header><main><sectionclass="mv"><divclass="mvWrapper"><imgsrc="./img/cat01.jpg"alt="cat"></div></section><divclass="sample"id="about"><divclass="inner"><h2>About</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
</div></div><divclass="sample"id="skills"><divclass="inner"><h2>Skills</h2><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
</p><ulclass="cardWrapper"><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>HTML / CSS</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>jQuery / JavaScript</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>Sass / scss</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>Git / SourceTree</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>Responsive</h3><p>レスポンシブ対応可能です。
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>Visual Studio Code</h3><p>ショートカット、プラグインを使い慣れています。
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>photoshop / Illustrator</h3><p>
WEBデザイナーが作成したPSD等をjpg,png形式に書き出す作業程度に利用可能です。
</p></div></li></ul></div></div><divclass="sample"id="portfolio"><divclass="inner"><h2>portfolio</h2><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
</p><ulclass="cardWrapper"><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>ToDoList Application</h3><ul><li>利用スキル：Vue.js / firebase
</li><li>製作期間：2か月</li><li>特徴：ログイン機能 /
</li></ul><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>ToDoList Application</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>Corporate Site</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>ToDoList Application</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li><li><divclass="cardImg"><imgsrc="./img/cat01.jpg"alt=""></div><divclass="cardText"><h3>ToDoList Application</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
</p></div></li></ul></div></div></main><footer><divclass="topScroll"><ahref="#"></a></div><divclass="footerTop"><ulclass="inner"><li><ahref="">aaa</a></li><li><ahref="">bbb</a></li><li><ahref="">ccc</a></li><li><ahref="">ddd</a></li></ul></div><divclass="footerBottom"><pclass="copyRight">©copyRight 2020</p></div></footer><script src="js/jquery-3.4.1.min.js"></script><script src="js/module.js"></script></body></html>style.css
@importurl(./reset.css);.for_pc{display:none;}.for_sp{display:block;}img{width:100%;}/*ハンバーガーメニュー*/header{position:fixed;top:0;z-index:100;background-color:#20b2aa;width:100%;}.headerInner{padding:2%5%;}.headerInnerh1{text-align:center;width:100%;font-size:10vw;}.headerInnerh1a{color:white;}#globalMenuSp{position:fixed;z-index:4;top:0;left:-100%;color:#000;text-align:center;transform:translateX(0);transition:transform0.4s;width:100%;padding-top:-100px;opacity:0.9;padding-top:17%;}#globalMenuSpul{background:#20b2aa;margin:0auto;padding:0;width:100%;display:inherit;}#globalMenuSpulli{font-size:1.1em;list-style-type:none;padding:0;width:100%;border-bottom:1pxsolid#fff;}/* 最後はラインを描かない */#globalMenuSpulli:last-child{padding-bottom:0;border-bottom:none;}#globalMenuSpullia{display:block;color:#fff;padding:1em0;}/* このクラスを、jQueryで付与・削除する */#globalMenuSp.active{transform:translateX(100%);}/*ハンバーガー用CSS*/.navToggle{display:block;position:fixed;/* bodyに対しての絶対位置指定 */right:13px;top:12px;width:42px;height:40px;cursor:pointer;z-index:101;text-align:center;}.navTogglespan{display:block;position:absolute;/* .navToggleに対して */width:30px;/* border-bottom: solid 3px #20b2aa; */border-bottom:solid3px#fff;-webkit-transition:.35sease-in-out;-moz-transition:.35sease-in-out;transition:.35sease-in-out;left:6px;}.navTogglespan:nth-child(1){top:9px;}.navTogglespan:nth-child(2){top:18px;}.navTogglespan:nth-child(3){top:27px;}.navTogglespan:nth-child(4){border:none;color:#eee;font-size:9px;font-weight:bold;top:34px;}/*ハンバーガーメニュータップ後CSS*//* 最初のspanをマイナス45度に */.navToggle.activespan:nth-child(1){top:18px;left:6px;border-bottom:solid3px#eee;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}/* 2番目と3番目のspanを45度に */.navToggle.activespan:nth-child(2),.navToggle.activespan:nth-child(3){top:18px;border-bottom:solid3px#eee;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);}.inner{padding:05%;}h2{font-size:40px;margin-bottom:20px;}h2::before{content:"";border-right:10pxsolid#20b2aa;margin-right:20px;}.mv{padding-top:20%;}.sample{padding-top:20%;}.cardTextulli{margin:00;}.topScroll{width:70px;height:70px;background-color:#20b2aa;border-radius:50%;position:fixed;bottom:5%;right:5%;}.topScrolla{width:100%;height:100%;position:relative;display:block;}.topScrolla::before{content:"";border-left:3pxsolid#fff;border-top:3pxsolid#fff;width:25px;height:25px;transform:rotate(45deg);position:absolute;top:30px;left:21px;}.footerTop{padding:2%0;text-align:center;background-color:#20b2aa;}.footerTopullia{display:block;color:white;padding:2%0;}.footerTopullia:hover{background-color:aquamarine;transition:background-color0.5s;}.footerBottom{padding:5%0;background:black;color:white;}.copyRight{display:block;text-align:center;}@mediascreenand(min-width:568px){.for_sp{display:none;}.for_pc{display:block;}#globalMenuSp{width:100%;transform:translateY(0%);transition:none;left:0;position:static;padding-top:0;}#globalMenuSpul{display:flex;/* width: 1080px; */}#globalMenuSpulli{border-bottom:5pxsolid#20b2aa;}#globalMenuSpulli:hover{/* background-color: aquamarine;
transition: background-color 0.5s; */border-bottom:5pxsolidorange;}#globalMenuSp.active{transform:translateX(0);}.headerWrapper{display:flex;width:1080px;margin:0auto;}.headerInner{padding:00;/* width: 1080px; */}.headerInnerh1{text-align:left;font-size:40px;margin-right:150px;}.inner{width:1080px;margin:0auto;padding:00;}.mv{width:100%;background-color:aliceblue;padding-top:0;}.mvWrapper{width:1080px;margin:0auto;}.mvimg{max-width:1080px;height:auto;}.sample{padding-top:150px;}#skills{background-color:aliceblue;}.cardWrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;}.cardWrapperli{width:500px;margin:20px0;margin-right:80px;}.cardWrapperli:nth-child(2n){margin-right:0;}.footerTopul{display:flex;justify-content:space-evenly;}.footerTopulli{width:100%;}.footerTopullia{display:block;}}module.js
$(function(){$('.navToggle').click(function(){$(this).toggleClass('active');if($(this).hasClass('active')){$('#globalMenuSp').addClass('active');}else{$('#globalMenuSp').removeClass('active');}});});$('#manu a[href]').on('click',function(event){$('.navToggle').trigger('click');});// smooth scroll$(function(){// #で始まるリンクをクリックしたら実行されます$('a[href^="#"]').click(function(){// スクロールの速度varspeed=400;// ミリ秒で記述varhref=$(this).attr("href");vartarget=$(href=="#"||href==""?'html':href);varposition=target.offset().top;$('body,html').animate({scrollTop:position},speed,'swing');returnfalse;});});
