WEBサイト制作の勉強

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

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

2月28日の作業データ（ナビゲーションとflexbox）

index.html

<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mynerve&family=Yusei+Magic&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Net Smart</h1>
</header>
<nav class="g-nav">
  <ul>
    <li><a href="#">トップ</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">アクセス</a></li>
    <li class="last"><a href="#">お問い合わせ</a></li>
  </ul>
</nav>
<main>
<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>

<div class="main-copy">
<h2>よりスマートなインターネットライフを</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>
Saepe non recusandae voluptatibus ipsam distinctio impedit.</p>
</div>

<div class="photo-wrapper">
<div class="photo-box">
<img src="img/01.jpg" alt="">
</div><!-- /.photo-box -->
<div class="photo-box">
<img src="img/02.jpg" alt="">
</div><!-- /.photo-box -->
<div class="photo-box">
<img src="img/03.jpg" alt="">
</div><!-- /.photo-box -->
<div class="photo-box">
<img src="img/01.jpg" alt="">
</div><!-- /.photo-box -->
<div class="photo-box">
<img src="img/02.jpg" alt="">
</div><!-- /.photo-box -->
<div class="photo-box">
<img src="img/03.jpg" alt="">
</div><!-- /.photo-box -->

</div><!-- /.photo-wrapper -->
</main>
<footer>
<p><small>&copy; 2023 Net Smart</small></p>
</footer>
</body>
</html>


style.css

@charset "utf-8";

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;/* 画像の下の余白を消す */
}

/* ヘッダー部分 */
h1{
text-align: center;
padding: 20px 0;
font-family: 'Mynerve', cursive;
font-size: 40px;
}
/* ナビゲーション部分 */
.g-nav{
width: 100%;
height: 50px;
background-color: #1d4a38;
}
.g-nav>ul{
display: flex;
width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 25%;
}
.g-nav a{
display: block;
line-height: 50px;
color: #FFF;
text-align: center;
border-left: 1px solid #FFF;
font-family: 'Yusei Magic', sans-serif;
}
.g-nav a:hover{
background-color: #5a796d;
}
.g-nav li.last>a{
border-right: 1px solid #FFF;
}

/* メイン部分 */
main{
width: 960px;
margin: 50px auto 100px;
}
.main-visual{
margin-bottom: 100px;
}
.main-copy{
margin-bottom: 100px;
text-align: center;
}
.main-copy>h2{
margin-bottom: 20px;
font-family: 'Yusei Magic', sans-serif;
font-size: 32px;
}
.photo-wrapper{
display: flex;
flex-wrap: wrap;
gap:30px;/* 上下の余白、左右の余白 */
}

/* フッター部分 */
footer{
width: 100%;
height: 100px;
background-color: #6a6629;
}
footer>p{
text-align: center;
color: #FFF;
line-height: 100px;
}