WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

11月24日の作業データ(ハンバーガーメニューとLightbox)

lokeshdhakar.com


jonsuh.com

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ハンバーガーメニューの実装</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<header>
<h1>サイトタイトル</h1>
<p class="hamburger hamburger--stand" id="ham-btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
</ul>
</nav>

<nav id="g-nav-sp">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
</ul>
</nav>

<main>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quas harum modi in odio adipisci voluptatibus nisi fuga iure eius inventore repellat excepturi, tempore illum consequatur ab, corporis sapiente? Voluptate!</p>


<div class="gallery">
<h2>Photo-Gallery</h2>

<div class="photo-wrapper">
<div class="photo">
<a href="img/01.jpg" data-lightbox="gallery" data-title="画像1">
<img src="img/01.jpg" alt="">
</a>
</div><!-- /.photo -->

<div class="photo">
<a href="img/02.jpg" data-lightbox="gallery">
<img src="img/02.jpg" alt="">
</a>
</div><!-- /.photo -->
<div class="photo">
<a href="img/03.jpg" data-lightbox="gallery">
<img src="img/03.jpg" alt="">
</a>
</div><!-- /.photo -->
<div class="photo">
<a href="img/04.jpg" data-lightbox="gallery">
<img src="img/04.jpg" alt="">
</a>
</div><!-- /.photo -->
</div><!-- /.photo-wrapper -->
</div><!-- /.gallery -->

</main>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script src="js/lightbox.js"></script>

<script>
$(function(){
//#ham-btnをon.clickしたら
$('#ham-btn').on('click',function(){
//クリックした要素に.is-activeをtoggleClassする
$(this).toggleClass('is-active');
//#g-nav-spをslideToggleする
$('#g-nav-sp').slideToggle(200);
});
});
</script>
</body>
</html>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}

/* pcレイアウト */
#ham-btn{
display: none;/* 要素を非表示にする */
}
#g-nav-sp{
display: none;
}

header{
width: 100%;
padding: 30px 0;
background-color: #daf2f2;
text-align: center;
}

#g-nav{
width: 100%;
height: 50px;
background-color: #3f4056;
}
#g-nav>ul{
max-width: 960px;
margin: 0 auto;
display: flex;
}
#g-nav li{
width: 20%;
height: 50px;
}
#g-nav a{
display: block;
line-height: 50px;
color: #FFF;
text-align: center;
border-right: 1px solid #FFF;
}
#g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
#g-nav a:hover{
background-color: #48484f;
}
main{
max-width: 960px;
margin: 100px auto 0;
text-align: center;
}
main>h2{
font-size: 40px;
margin-bottom: 100px;
}
main>p{
line-height: 2;
}

.gallery{
margin: 100px 0 200px;
}
.gallery>h2{
font-size: 30px;
margin-bottom: 50px;
}
.photo-wrapper{
display: flex;
justify-content: space-between;
}
.photo{
width: calc((100% - 30px) / 4);
}


@media (max-width:960px){
/* 両端の境界線を消す */
#g-nav li:first-of-type>a{
border-left: 0;
}
#g-nav li:last-of-type>a{
border-right: 0;
}
main{
padding: 0 20px;
height: 3000px;
}
.photo-wrapper{
flex-wrap: wrap;
gap: 20px;
}
.photo{
width: calc((100% - 20px) / 2);
}
}
@media (max-width:767px){
#g-nav{
display: none;
}
#ham-btn{
display: block;/* 要素を表示させる */
}

header{
position: fixed;
top: 0;
left: 0;
text-align: left;
display: flex;
justify-content: space-between;
height: 60px;
padding: 10px 20px;
align-items: center;
}
#g-nav-sp{
position: fixed;
top: 60px;
left: 0;
width: 100%;
height: calc(100vh - 60px);
background-color: #3f4056;
padding: 40px 60px;
}
#g-nav-sp li{
margin-bottom: 20px;
}
#g-nav-sp a{
display: block;
color: #FFF;
font-size: 18px;
padding: 6px;
border-bottom: 1px solid #FFF;
}
main{
padding-top: 60px;
}
}

@media (max-width:600px){
.photo-wrapper{
flex-direction: column;
}
.photo{
width: 100%;
}
}