クラス名の付与
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】富士山の紹介</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1><img src="img/logo.png" alt="富士山の紹介"></h1>
<nav class="gnav">
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">INTERVIEW</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<main class="main-content">
<div class="key-visual">
<div class="container">
<h2>日本の世界遺産、富士山</h2>
<p>富士山は、静岡県と山梨県に跨る活火山です。<br>
標高3776.24m、日本最高峰の独立峰で<br>
その優美な風貌は日本国外でも日本の象徴として<br>
広く知られています。</p>
</div>
</div>
<div class="news container">
<h3>NEWS</h3>
<dl>
<dt>20XX.01.01</dt>
<dd>20XX年の登山シーズンは終了しました。</dd>
<dt>20XX.01.01</dt>
<dd>20XX年の登山シーズンを更新しました。</dd>
<dt>20XX.01.01</dt>
<dd>1月の富士山の風景を更新しました。ギャラリーよりご覧いただけます。</dd>
</dl>
</div>
<div class="main-copy">
<div class="container">
<h2>美しい日本の富士を楽しむ</h2>
<p>ここでは富士山と共に楽しむ風景を紹介しています。</p>
</div>
</div>
<div class="about container">
<h3>ABOUT</h3>
<ul>
<li>
<img src="img/about_img01.png" alt="">
<div class="text__block">
<h4>富士山と桜</h4>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
</li>
<li>
<img src="img/about_img02.png" alt="">
<div class="text__block">
<h4>富士山と雲海</h4>
<p>テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
</li>
</ul>
<p class="more"><a href="#">もっと見る</a></p>
</div>
<div class="interview container">
<h3>INTERVIEW</h3>
<ul>
<li>
<img src="img/interview_img01.png" alt="">
<div class="interview__text">
<h4>ダミー記事</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
</li>
<li>
<img src="img/interview_img02.png" alt="">
<div class="interview__text">
<h4>ダミー記事</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
</li>
<li>
<img src="img/interview_img03.png" alt="">
<div class="interview__text">
<h4>ダミー記事</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
</li>
</ul>
</div>
<div class="gallery container">
<h3>GALLERY</h3>
<ul>
<li><img src="img/gallery_img01.png" alt=""></li>
<li><img src="img/gallery_img02.png" alt=""></li>
<li><img src="img/gallery_img03.png" alt=""></li>
<li><img src="img/gallery_img04.png" alt=""></li>
<li><img src="img/gallery_img05.png" alt=""></li>
<li><img src="img/gallery_img06.png" alt=""></li>
<li><img src="img/gallery_img07.png" alt=""></li>
<li><img src="img/gallery_img08.png" alt=""></li>
<li><img src="img/gallery_img09.png" alt=""></li>
<li><img src="img/gallery_img10.png" alt=""></li>
</ul>
<p class="more"><a href="#">もっと見る</a></p>
</div>
<div class="contact">
<a href="#">
<h2>CONTACT<br>
お問い合わせ</h2>
</a>
</div>
</main>
<footer class="footer">
<div class="container">
<ul>
<li><a href="#">利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
<p><small>Copyright chot Inc. All Rights Reserved.</small></p>
</div>
</footer>
</body>
</html>
