WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

複数ページの作り方

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。
複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。

URLの正規化

例えば、キリンのwebサイトへは、
https://www.kirin.co.jp/index.html

でも

https://www.kirin.co.jp/

でも、飛べますが、こういったように表記に違いがあると複数のURLが別々にインデックスされたり、それぞれが別々の被リンクを設置されてしまったりするので、そういうケースを避ける為URLは必ず「/」で終わるように統一させましょう。


検索エンジン最適化(SEO)スターター ガイド

Googleはサイトの品質の向上を目的とし、SEOの基礎知識を包括的に学びたい人に、ガイドを公表しています。Googleでサイトが自動的に掲載順位 1 位になるための秘訣が紹介されているわけではありませんが、以下に示すおすすめの方法を取り入れると、検索エンジンがコンテンツをクロールしてインデックス登録し、理解するのが容易になるでしょう。
support.google.com




上記の事を踏まえて、以下のようにページ毎にフォルダーを作り、中のファイルは必ずindex.htmlという名前にしましょう。

f:id:yachin29:20160816004934j:plain










今回は5ページ構成のサイトを作ってみましょう。



使用するテキスト一例
ーーーーーーーーーーーーーーーーーーーーーーーーー

日本の四季

トップ
日本の春
日本の夏
日本の秋
日本の冬


四季の移り変わり
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。



日本の春
「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲(サ)の神が憑依する座(クラ)だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ(木花之開耶姫)」の「さくや」をとって「桜」になった、とも言われている。



日本の夏
夏は、四季のひとつで、春と秋にはさまれた季節。天文学的には夏至から秋分まで。太陽暦では6月から8月を指し、陰暦では4月から6月となる。 四季の区分のある土地では最も気温の高い、3ヶ月程度の期間である。北半球ではグレゴリオ暦の6月 - 8月ごろ、南半球では12月 - 2月ごろである。
日本で炎天下に咲く花としてはヒマワリやサルスベリが有名。夏の風物詩としてはアサガオも代表格。


日本の秋
普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。


日本の冬
黒姫山斑尾山妙高山戸隠山飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説(黒姫伝説)があり、山名の由来になったと言われている。冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。


Copyright Felica All Rights Reserved


作例
felica29.starfree.jp



topページのソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本の四季|トップページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>日本の四季</h1>
<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>
</header>

<div class="main">
<p class="photo"><img src="img/top.jpg" alt="日本の景色"></p>
<h2>四季の移り変わり</h2>
<p class="txt">日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br>
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。<br>
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br>
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p>
</div><!--/.main-->
<footer>
<p><small>Copyright Felica All Rights Reserved</small></p>
</footer>

</body>
</html>

春ページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本の四季|春のページ</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<h1>日本の四季</h1>
<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>
</header>

<div class="main">
<h2 class="season-title">日本の春</h2>
<div class="wrapper">
<p class="season-photo"><img src="../img/spring.jpg" alt="春の景色"></p>
<p class="season-txt">「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲(サ)の神が憑依する座(クラ)だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ(木花之開耶姫)」の「さくや」をとって「桜」になった、とも言われている。</p>
</div><!--/.wrapper-->
</div><!--/.main-->
<footer>
<p><small>Copyright Felica All Rights Reserved</small></p>
</footer>

</body>
</html>


スタイルシート

@charset "utf-8";

html,body,h1,h2,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;/*ulに付く黒丸を消す*/
}
a{
text-decoration: none;/*a要素に付く下線を消す*/
}
img{
vertical-align: bottom;/*画像と画像の空を無くす*/
}

/*topページ用*/
h1{
text-align: center;
padding-top: 30px;
margin-bottom: 30px;
}
.g-nav{
width: 100%;
height: 50px;
background-color: #006284;
margin-bottom: 50px;
}
.g-nav>ul{
display: flex;
width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 20%;
height: 50px;
}
.g-nav a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;
border-right:1px solid #FFF;
}
.g-nav li:first-child>a{
border-left:1px solid #FFF;
}
.g-nav a:hover{
background-color: #0B346E;
}
.main{
text-align: center;
}
.photo{
margin-bottom: 50px;
}
h2{
margin-bottom: 40px;
}
.txt{
width: 600px;
margin: 0 auto 100px;
line-height: 2;
}
footer{
width: 100%;
height: 100px;
background-color: #FFB11B;
}
footer>p{
text-align: center;
line-height: 100px;
}

/*季節ページ用*/
.wrapper{
width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.season-photo{
width: 48%;
}
.season-txt{
width: 48%;
line-height: 2.5;
text-align: left;
}
/*カレントの設定*/
.g-nav li.current>a{
background-color: #00AA90;
}