6月20日の作業（レスポンシブ演習） - ★ゆめの訓練校復習日記★

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=Dancing+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Cafe de Felica</h1>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>
</header>

<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>

<div class="main-txt">
<h2>Cafe de Felicaは<br class="sp">
食とアートと音楽が<br class="sp">
交差する空間を創造します。</h2>

<p>シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>

<h2 class="news-title">News</h2>
<dl class="news-list">
<dt>2022/06/20</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum magni rerum non aperiam suscipit reiciendis.</dd>
<dt>2022/06/19</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum magni rerum non aperiam suscipit reiciendis.</dd>
<dt>2022/06/18</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum magni rerum non aperiam suscipit reiciendis.</dd>
<dt>2022/06/17</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum magni rerum non aperiam suscipit reiciendis.</dd>
</dl>

<div class="content-wrapper">
<div class="content-box">
<a href="#">
<h3>Concept</h3>
<p class="photo"><img src="img/01.jpg" alt=""></p>
<p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit, quod possimus sunt aperiam labore?</p>
</a>
</div><!-- /.content-box -->

<div class="content-box">
<a href="#">
<h3>Menu</h3>
<p class="photo"><img src="img/02.jpg" alt=""></p>
<p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit, quod possimus sunt aperiam labore?</p>
</a>
</div><!-- /.content-box -->

<div class="content-box">
<a href="#">
<h3>Access</h3>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit, quod possimus sunt aperiam labore?</p>
</a>
</div><!-- /.content-box -->
</div><!-- /.content-wrapper -->
<footer>
<p><small>&copy; 2001-2022 Cafe de Felica</small></p>
</footer>
</body>
</html>

style.css

body{
font-family: 'Dancing Script', cursive;
font-size: 20px;
}
header{
width: 100%;
height: 100px;
background-color: var(--main_color);
display: flex;
justify-content: space-between;/* 横方向の揃え */
align-items: center;/* 縦方向の揃え */
padding-left: 40px;
}
h1{
color: #FFF;
}
.g-nav{
width: 50%;
}
.g-nav>ul{
display: flex;
justify-content: center;
}
.g-nav li{
margin: 0 20px;
}
.g-nav a{
display: block;
padding:20px 24px;
color: #FFF;
font-weight: bold;
}
.g-nav a:hover{
text-decoration: underline 4px #94c0de;
text-underline-offset: 4px;
}

.main-visual{
max-width: 960px;
height: 350px;
margin: 60px auto;
}
.main-visual>img{
object-fit: cover;
object-position: left top;
width: 100%;
height: 100%;
}

.main-txt{
text-align: center;
margin-bottom: 100px;
}
.main-txt>h2{
margin-bottom: 40px;
}
.main-txt>p{
line-height: 2;
}

.news-title{
text-align: center;
margin-bottom: 40px;
color: var(--main_color);
font-size: 28px;
}
.news-list{
max-width: 960px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news-list>dt{
width: 25%;
background-color: var(--main_color);
color: #FFF;
padding: 16px 10px;
margin-bottom: 20px;
font-weight: bold;
}
.news-list>dd{
width: 70%;
margin-bottom: 20px;
line-height: 1.7;
}
.content-wrapper{
max-width: 960px;
display: flex;
justify-content: space-between;
margin: 0 auto 160px;
}
.content-box{
width: calc((100% - 40px) / 3);
padding: 14px;
}
.content-box:hover{
box-shadow:0 0 10px #b5b5b5;
transition: 0.3s;
}
.content-box>a{
color: #222;
}
.content-box>a:hover img{
transform: scale(1.2);
transition: 0.3s;
}

.content-box h3{
border-left: 16px solid var(--main_color);
border-bottom: 1px solid var(--main_color);
padding: 2px 0 2px 12px;
margin-bottom: 10px;
}
.photo{
width: 100%;
height: 200px;
margin-bottom: 10px;
overflow: hidden;
}
.photo>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.txt{
line-height: 1.8;
}
footer{
width: 100%;
height: 100px;
background-color: var(--main_color);
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}
.sp{
display: none;
}

@media (max-width:1000px){
header{
display: block;
height: auto;
}
h1{
text-align: center;
padding: 10px 0;
}
.g-nav{
width: 100%;
}
}
@media (max-width:959px){
.main-txt,.news-list{
padding: 0 10px;
}
}
@media (max-width:767px){

header{
padding-left: 0;
}
.content-wrapper{
flex-wrap: wrap;
}
.content-box{
width: calc((100% - 20px) / 2);
margin-bottom: 20px;
}
}
@media (max-width:500px){
.g-nav li{
width: 25%;
margin: 0;
}
.g-nav a{
display: block;
padding: 0;
text-align: center;
line-height: 40px;
background-color: #762733;
}
.main-visual{
height: 40vh;
}
.news-list{
display: block;
}
.news-list>dt{
width: 50%;
margin-bottom: 10px;
}
.news-list>dd{
width: 100%;
margin-bottom: 28px;
}

.content-wrapper{
display: block;
}
.content-box{
width: 100%;
}

.sp{
display: block;/* 無効にした改行を有効に戻す */
}
}