サイト練習:日本の四季
日本の四季:完成版にリンク
★googleで検索にひっかかるためには、とにかくトップページは index.html でなければならない。リンクするサイトは、同じ階層につくらない。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>日本の四季</title> <link href="css/top.css" rel="stylesheet"> </head> <body> <section class="container"> <header> <h1>日本の四季</h1> <p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る。 そして秋になり、また冬を迎える。 このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。 春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p> </header> <section class="season"> <p class="ph spring"><a href="spring/index.html"><img src="img/spring_small.png" alt="桜">春(3~5月)</a></p> <p class="ph summer"><a href="summer/index.html"><img src="img/summer_small.png" alt="海">夏(6~8月)</a></p> <p class="ph fall"><a href="fall/index.html"><img src="img/fall_small.png" alt="もみじ">秋(9~11月)</a></p> <p class="ph winter"><a href="winter/index.html"><img src="img/winter_small.png" alt="雪山">冬(12~2月)</a></p> </section><!--.season--> <footer> <p><small>Copyright © Felica All Rights Reserved.</small></p> </footer> </section> <!--.container--> </body> </html>
@charset "utf-8"; /* CSS Document */ html, body, h1, h2,p,small { margin: 0; padding: 0; line-height: 1.0; font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; /* 下線を消す */ color: #000; } img { border: 0; } img, input { border: none; vertical-align: bottom; /* 画像の下の隙間を無くす */ border-radius: 15px 15px 15px 15px; } body { height: 1300px; background: #FF9; background: -webkit-linear-gradient(top,#FC9,#CF9); background: linear-gradient(to bottom,#FC9,#CF9); } /*---------------------------------*/ /*トップページ*/ .container { width: 920px; padding: 0 20px 20px 20px; margin: 0 auto; background: #FFF; } header h1 { width: 960px; height: 300px; margin-bottom: 40px; margin-left: -20px; background: #FFF url(../img/h1.png) no-repeat; white-space: nowrap; text-indent: 100%; overflow: hidden; } header p { width: 860px; margin: 20px auto; line-height: 1.5em; } .season { width: 860px; margin: 20px auto; overflow: hidden; } p.ph { width: 200px; height: 230px; margin-left: 20px; line-height: 40px; text-align: center; font-weight: bold; float: left; } p.spring { margin-left: 0px; } footer p { width: 920px; padding: 30px 0; text-align: center; } /*---------------------------------*/ /*各ページ*/ .container_each { width: 920px; padding: 0 20px 20px 20px; margin: 0 auto; background: #FFF; } .h2_each { width: 200px; line-height: 1.0; padding: 20px 0; margin: 0 0 20px 30px; text-align: center; background: #FF9; background: -webkit-linear-gradient(top,#FF9,#FC9); background: linear-gradient(to bottom,#FF9,#FC9); } .content_each { width: 900px; overflow: hidden; margin-bottom: 40px; } .h3_each { width: 360px; margin-right: 10px; text-align: center; font-size: 24px; float: right; margin-top: 40px; } .ph_each { margin-right: 30px; float: left; } .p_each { width: 360px; padding-top: 60px; line-height: 1.5em; float: left; } /*---------------------------------*/ /*ナビゲーション*/ .nav { width: 860px; margin-left: 20px; margin-bottom: 40px; overflow: hidden; } .nav_button { width: 200px; height: 230px; margin-left: 20px; line-height: 40px; text-align: center; font-weight: bold; float: left; } .top_button { margin-left: 0px; } .season img { border-radius: 50%; } .nav_button img { border-radius: 50%; } /*ホバーしたときわかりやすくする、要素の不透明度*/ a:hover { opacity: 0.6; }[f:id:sankoblog:20160403201245p:plain]