トップページ
<!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=Zen+Kurenaido&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="favicon.png"> </head> <body> <header> <h1>日本の四季</h1> </header> <nav class="g-nav"> <ul> <li class="current"><a href="#">トップ</a></li> <li><a href="spring/">日本の春</a></li> <li><a href="summer/">日本の夏</a></li> <li><a href="fall/">日本の秋</a></li> <li><a href="winter/">日本の冬</a></li> </ul> </nav> <main> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div> <div class="main-copy"> <h2>四季の移り変わり</h2> <p> 日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br> 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る、そして秋になり、また冬を迎える。<br> このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br> 春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p> </div> </main> <footer> <p><small>Copyright 2023 日本の四季 All Rights Reserved</small></p> </footer> </body> </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=Zen+Kurenaido&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../css/style.css"> </head> <body class="spring"> <header> <h1>日本の四季</h1> </header> <nav class="g-nav"> <ul> <li><a href="../">トップ</a></li> <li class="current"><a href="#">日本の春</a></li> <li><a href="../summer/">日本の夏</a></li> <li><a href="../fall/">日本の秋</a></li> <li><a href="../winter/">日本の冬</a></li> </ul> </nav> <main> <div class="wrapper"> <div class="photo"> <img src="../img/sprimg.jpg" alt=""> </div> <div class="txt"> <h2>日本の春</h2> <p>「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。<br> また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。<br> 富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。</p> </div> </div><!-- /.wrapper --> </main> <footer> <p><small>Copyright 2023 日本の四季 All Rights Reserved</small></p> </footer> </body> </html>
style.css
@charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; } /* 共通部分 */ header{ padding: 20px 0; } h1{ font-size: 42px; text-align: center; font-family: 'Zen Kurenaido', sans-serif; } .g-nav{ width: 100%; height: 50px; background-color: #7D6C46; margin-bottom: 100px; } .g-nav>ul{ display: flex; width: 960px; margin: 0 auto; } .g-nav li{ width: 20%; } .g-nav a{ display: block; line-height: 50px; text-align: center; color: #FFF; border-right: 1px solid #FFF; } .g-nav li:first-of-type>a{ border-left: 1px solid #FFF; } .g-nav a:hover{ background-color: #808080; } .g-nav li.current>a{ background-color: #808080; } footer{ width: 100%; height: 100px; background-color: #7D6C46; } footer>p{ text-align: center; line-height: 100px; color: #FFF; } /* トップページ部分 */ main{ width: 960px; margin: 0 auto 100px; } .main-visual{ margin-bottom: 80px; } .main-copy{ text-align: center; width: 600px; margin: 0 auto; } .main-copy>h2{ margin-bottom: 20px; } .main-copy>p{ line-height: 2.5; } /* 季節ページ部分 */ .wrapper{ display: flex; margin-bottom: 100px; } .photo{ margin-right: 40px; } .txt>h2{ margin-bottom: 10px; } .txt>p{ line-height: 1.8; } /* 春ページ部分 */ .spring>.g-nav{ background-color: #CB1B45; } .spring>footer{ background-color: #CB1B45; } /* 夏ページ部分 */ .summer>.g-nav{ background-color: #2E5C6E; } .summer>footer{ background-color: #2E5C6E; } /* 秋ページ部分 */ .fall>.g-nav{ background-color: #F05E1C; } .fall>footer{ background-color: #F05E1C; } /* 冬ページ部分 */ .winter>.g-nav{ background-color: #211E55; } .winter>footer{ background-color: #211E55; }
