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