最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。
複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。
以下のようにページ毎にフォルダーを作り、中のファイルは必ずindex.htmlという名前にしましょう。
今回は５ページ構成のサイトを作ってみましょう。
使用するテキスト一例
ーーーーーーーーーーーーーーーーーーーーーーーーー
日本の四季
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。
日本の春
「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。
日本の夏
夏は、四季のひとつで、春と秋にはさまれた季節。天文学的には夏至から秋分まで。太陽暦では6月から8月を指し、陰暦では4月から6月となる。 四季の区分のある土地では最も気温の高い、3ヶ月程度の期間である。北半球ではグレゴリオ暦の6月 – 8月ごろ、南半球では12月 – 2月ごろである。
日本で炎天下に咲く花としてはヒマワリやサルスベリが有名。夏の風物詩としてはアサガオも代表格。
日本の秋
普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。
日本の冬
黒姫山は斑尾山、妙高山、戸隠山、飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説（黒姫伝説）があり、山名の由来になったと言われている。冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。
Copyright Felica All Rights Reserved
トップページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の四季｜トップページ</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/individual.css"> </head> <body id="top"> <div class="container"> <header> <h1>日本の四季</h1> </header> <nav class="g-nav"> <ul> <li class="current"><a href="#">トップ</a></li> <li><a href="spring/index.html">日本の春</a></li> <li><a href="summer/index.html">日本の夏</a></li> <li><a href="fall/index.html">日本の秋</a></li> <li><a href="winter/index.html">日本の冬</a></li> </ul> </nav> <div class="main"> <h2>季節の移り変わり</h2> <p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る、そして秋になり、また冬を迎える。<br> このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br> 春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p> </div> <footer> <p><small>© Felica All Rights Reserved</small></p> </footer> </div> </body> </html>
季節ページ・春
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の四季｜春のページ</title> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/individual.css"> </head> <body class="season"> <div class="container"> <header> <h1>日本の四季</h1> </header> <nav class="g-nav"> <ul> <li><a href="../index.html">トップ</a></li> <li class="current"><a href="#">日本の春</a></li> <li><a href="../summer/index.html">日本の夏</a></li> <li><a href="../fall/index.html">日本の秋</a></li> <li><a href="../winter/index.html">日本の冬</a></li> </ul> </nav> <div class="wrapper"> <div class="main"> <h2>日本の春</h2> <p><img src="../img/spring.jpg" alt="">「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。<br> 富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。</p> </div> <div class="sub"></div> </div><!--/.wrapper--> <footer> <p><small>© Felica All Rights Reserved</small></p> </footer> </div> </body> </html>
@charset "utf-8";
/*リセット部分*/
html,body,h1,h2,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
}
/*共通レイアウト部分*/
.container{
width: 960px;
margin: 0 auto;
}
header{
width: 960px;
height: 350px;
background: url(../img/main.jpg)no-repeat;
}
h1{
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav>ul{
overflow: hidden;
}
.g-nav li{
width: 20%;
height: 50px;
float: left;
}
.g-nav a{
display: block;
text-align: center;
line-height: 50px;
background-color: beige;
border-right: 2px solid #FFF;
}
.g-nav li:nth-child(5)>a{
border-right: 0;
}
.g-nav a:hover,.g-nav li.current>a{
background-color: darkslategrey;
color:#FFF;
}
footer{
width: 960px;
height: 100px;
background-color:dimgrey;
color: #FFF;
text-align: center;
}
footer p{
line-height:100px;
}
individual.css
@charset "utf-8";
/*トップページの個別レイアウト部分*/
#top h2{
text-align: center;
font-size: 40px;
padding: 60px 0 30px;
margin-bottom: 80px;
}
#top .main>p{
font-size: 18px;
padding: 0 100px;
line-height: 2;
margin-bottom: 80px;
}
/*季節ページのレイアウト*/
.season .wrapper{
overflow: hidden;
margin: 20px 0;
}
.season .main{
width: 750px;
height: 600px;
float: left;
}
.season .sub{
width: 200px;
height: 600px;
float: right;
background-color: darkorange;
}
.season h2{
text-align: center;
font-size: 30px;
padding: 30px 0;
}
.season img{
float: left;
margin-right: 16px;
}
.season .main>p{
line-height: 1.7;
}
コメント