サイト練習：日本の四季 - Webデザインのこと、いろいろ

日本の四季：完成版にリンク

★googleで検索にひっかかるためには、とにかくトップページは　index.html　でなければならない。リンクするサイトは、同じ階層につくらない。

f:id:sankoblog:20160403201245p:plain

<!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="桜">春（３～５月）</a></p>
<p class="ph summer"><a href="summer/index.html"><img src="img/summer_small.png" alt="海">夏（６～８月）</a></p>
<p class="ph fall"><a href="fall/index.html"><img src="img/fall_small.png" alt="もみじ">秋（９～１１月）</a></p>
<p class="ph winter"><a href="winter/index.html"><img src="img/winter_small.png" alt="雪山">冬（１２～２月）</a></p>
</section><!--.season-->

<footer>
<p><small>Copyright &COPY 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]