２月２４日授業内容②
参照記事：複数ページの制作
実際のサイトと同じようにリンク先のサイトも制作しました。
リンクに設定している画像は元はphotoshopで正方形にしてHTMLに入れましたが、CSSでborder-radius:50%;と幅、高さ同じ（正方形）にして真円にしています。
Googleで正しく認識させるにはページごとのフォルダ、index.htmlのファイル作成しできるだけ少ない外部リンクCSSでスタイルをつけていきます。（google検索エンジン最適化スターターガイドのP１０目）
下記の５ページ分を作りました。
>|html|
<!DOCTYPE HTML>
<html lang="ja">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<title>日本の四季</title>
</head>
<body>
<div class="container">
<header class="season1">
<h1>日本の四季</h1>
<p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br>
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。<br>
そして秋になり、また冬を迎える。<br>
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br>
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p>
</header>
<nav>
<ul>
<li class="spring"><a href="spring/index.html"><img src="img/spring2.png" alt="桜の花">春（３月～５月）</a></li>
<li class="summer"><a href="summer/index.html"><img src="img/summer2.png" alt="ひまわり">夏（６月～８月）</a></li>
<li class="fall"><a href="fall/index.html"><img src="img/fall2.png" alt="もみじ">秋（９月～１１月）</a></li>
<li class="winter"><a href="winter/index.html"><img src="img/winter2.png" alt="雪だるま">冬（１２月～２月）</a></li>
</ul>
</nav>
<footer class="season2">
<p>
Copyright © Felica All Rights Reserved.
</p>
</footer>
</div><!--.container-->
</body>
</html>
||<
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>春</title>
</head>
<body>
<div class="container">
<header class="common1">
<h1>春</h1>
</header><!--common1-->
<div class="kakomi">
<section class="img">
<img src="../img/spring1.png" alt="桜の花">
</section>
<section class="content">
<h2>桜</h2>
<p>「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。<br>
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。</p>
</section><!--/*.nakami*/-->
</div><!--/*kakomi*/
-->
<footer class="common2">
<ul>
<li class="japanese_season"><a href="../index.html"><img src="../img/japanese_season.png" alt="日本の四季"></a></li>
<li class="summer"><a href="../summer/index.html"><img src="../img/summer2.png" alt="ひまわり">夏（６月～８月）</a></li>
<li class="fall"><a href="../fall/index.html"><img src="../img/fall2.png" alt="もみじ">秋（９月～１１月）</a></li>
<li class="winter"><a href="../winter/index.html"><img src="../img/winter2.png" alt="雪だるま">冬（１２月～２月）</a></li>
</ul>
</footer><!--common2-->
</div><!--/*.container*/-->
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>夏</title>
</head>
<body>
<div class="container">
<header class="common1">
<h1>夏</h1>
</header><!--common1-->
<div class="kakomi">
<section class="img">
<img src="../img/summer1.png" alt="ひまわり">
</section>
<section class="content">
<h2>南国の海</h2>
<p>エメラルドグリーンに輝く沖縄の海は世界にほこれる美しい海であり数百種のサンゴがすみ、色あざやかな熱帯魚がむれをなして泳いでいます。<br>
周囲の海底はサンゴなので石灰分が非常に含まれており、植物性プランクトンが発生しにくく、植物性プランクトンの発生も無ければ、死骸もないので、海水が濁らないそうです。</p>
</section><!--/*.nakami*/-->
</div><!--/*kakomi*/
-->
<footer class="common2">
<ul>
<li class="japanese_season"><a href="../index.html"><img src="../img/japanese_season.png" alt="日本の四季"></a></li>
<li class="summer"><a href="../spring/index.html"><img src="../img/spring2.png" alt="桜の花">春（３月～５月)</a></li>
<li class="fall"><a href="../fall/index.html"><img src="../img/fall2.png" alt="もみじ">秋（９月～１１月）</a></li>
<li class="winter"><a href="../winter/index.html"><img src="../img/winter2.png" alt="雪だるま">冬（１２月～２月）</a></li>
</ul>
</footer><!--common2-->
</div><!--/*.container*/-->
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>秋</title>
</head>
<body>
<div class="container">
<header class="common1">
<h1>秋</h1>
</header><!--common1-->
<div class="kakomi">
<section class="img">
<img src="../img/fall1.png" alt="もみじ">
</section>
<section class="content">
<h2>紅葉</h2>
<p>普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。<br>
また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。<br>
その過程で葉の色が赤や黄色に変化し、紅葉が起こる。</p>
</section><!--/*.nakami*/-->
</div><!--/*kakomi*/
-->
<footer class="common2">
<ul>
<li class="japanese_season"><a href="../index.html"><img src="../img/japanese_season.png" alt="日本の四季"></a></li>
<li class="spring"><a href="../spring/index.html"><img src="../img/spring2.png" alt="桜">春（３月～５月)</a></li>
<li class="summer"><a href="../summer/index.html"><img src="../img/summer2.png" alt="ひまわり">夏（６月～８月）</a></li>
<li class="winter"><a href="../winter/index.html"><img src="../img/winter2.png" alt="雪だるま">冬（１２月～２月）</a></li>
</ul>
</footer><!--common2-->
</div><!--/*.container*/-->
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>冬</title>
</head>
<body>
<div class="container">
<header class="common1">
<h1>冬</h1>
</header><!--common1-->
<div class="kakomi">
<section class="img">
<img src="../img/winter1.png" alt="雪だるま">
</section>
<section class="content">
<h2>雪の北信濃</h2>
<p>黒姫山は斑尾山、妙高山、戸隠山、飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。<br>
外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。<br>
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説（黒姫伝説）があり、山名の由来になったと言われている。<br>
冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。</p>
</section><!--/*.nakami*/-->
</div><!--/*kakomi*/
-->
<footer class="common2">
<ul>
<li class="japanese_season"><a href="../index.html"><img src="../img/japanese_season.png" alt="日本の四季"></a></li>
<li class="winter"><a href="../spring/index.html"><img src="../img/spring2.png">春（３月～５月)</a></li>
<li class="summer"><a href="../summer/index.html"><img src="../img/summer2.png" alt="ひまわり">夏（６月～８月）</a></li>
<li class="fall"><a href="../fall/index.html"><img src="../img/fall2.png" alt="もみじ">秋（９月～１１月）</a></li>
</ul>
</footer><!--common2-->
</div><!--/*.container*/-->
</body>
</html>
＊CSS
@charset "utf-8";
/* CSS Document */
/*reset*/
html,body,header,footer,h1,h2,p,img.nav{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}
a{text-decoration:none;}
ul,li{list-style:none;}
/*.container*/
div.container{width:960px;
margin:50px auto;}
/*season*/
/*header*/
header.season1 h1{margin-bottom:20px;}
header.season1 p{line-height:20px;}
/*nav*/
nav ul{margin:20px auto 100px;
overflow:hidden;}
nav ul li{width:200px;
height:230px;
float:left;
margin-right:30px;
text-align:center;
font-weight:bold;}
nav ul li img{width:200px;
height:200px;
border-radius:50%;}
nav ul li a{color:black;
line-height:24px;}
/*footer*/
footer.season2 p{text-align:center;}
/*spring individual*/
header.common1 h1{text-align:center;
margin-bottom:50px;}
div.kakomi{width:960px;
heihgt:500px;
overflow:hidden;}
section.img{width:500px;
height:500px;
float:left;}
section.content{width:400px;
float:right;}
section.content p{margin-top:24px;
line-height:24px;}
footer.common2 ul {margin:20px auto 100px;
overflow:hidden;}
footer.common2 ul li{width:200px;
height:230px;
float:left;
margin-right:30px;
text-align:center;
font-weight:bold;
}
footer.common2 ul li img{width:200px;
height:200px;
border-radius:50%;}
footer.common2 ul li a{color:black;
line-height:24px;}
