%とpxを使ったレイアウト - webサイトデザインAI入門科授業用ブログ

f:id:yachin29:20210513143054p:plain

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Cafe de FELICA</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Cafe de FELICA</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="main">
<p class="main-photo"><img src="img/main.jpg" alt=""></p>

<div class="main-copy">
<h2>Lorem, ipsum</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>
Nemo commodi voluptates impedit unde!<br>
Fugit dolor asperiores libero quibusdam, suscipit quaerat.</p>
</div><!-- /.main-copy -->
<div class="wrapper">
<div class="content-box">
<h3>content-01</h3>
<p class="content-photo"><img src="img/content01.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>content-02</h3>
<p class="content-photo"><img src="img/content02.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>content-03</h3>
<p class="content-photo"><img src="img/content03.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->
</div><!-- /.wrapper -->
</div><!-- /.main -->
<footer>
<p><small>&copy; 2021 Cafe de FELICA</small></p>
</footer>
</body>
</html>

style.css

@charset "utf-8";

html,body,h1,h2,h3,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
}
body{
font-family: 'Caveat', cursive;
}
header{
width: 960px;
margin: 0 auto;
}
h1{
padding: 20px 0;
font-size: 50px;
color: #8a270f;
}
.g-nav{
width: 100%;
height: 50px;
background-color: #8a270f;
}
.g-nav>ul{
display: flex;
width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 25%;
height: 50px;
}
.g-nav a{
display: block;
line-height: 50px;
color: #FFF;
text-align: center;
font-size: 24px;
border-right: 1px solid #FFF;/* 線幅、線の種類、線の色 */
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: #a75335;
}

.main{
width: 960px;
margin: 50px auto 100px;/* 上、左右、下 */
}
.main-photo{
margin-bottom: 100px;
}
.main-copy{
text-align: center;
margin-bottom: 100px;
}
.main-copy>h2{
margin-bottom: 20px;
font-size: 40px;
}
.lead{
line-height: 1.8;
font-size: 28px;
}
.wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.content-box{
width: 300px;
}
.content-box>h3{
margin-bottom: 10px;
font-size: 28px;
}
.content-photo{
margin-bottom: 10px;
}
.content-txt{
font-size: 24px;
}
footer{
width: 100%;
height: 100px;
background-color: #a75335;
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}