複数ページの作成 - webサイトデザインAI入門科授業用ブログ

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

URLの正規化

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

でも

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

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

developers.google.com

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

f:id:yachin29:20160816004934j:plain

nipponcolors.com

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

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

日本の四季

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

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

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

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

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

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

トップページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日本の四季｜トップページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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-visual">
<img src="img/top.jpg" alt="">
</div>

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

季節のページ（春）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日本の四季｜春ページ</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="spring">
<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="pages">
<div class="pages-txt">
<h2>日本の春</h2>
<P>「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲（サ）の神が憑依する座（クラ）だからサクラであるとも考えられている。<br>
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ（木花之開耶姫）」の「さくや」をとって「桜」になった、とも言われている。</P>
</div>
<div class="pages-img">
<img src="../img/spring.jpg" alt="">
</div>
</div><!-- /.pages -->

<footer>
<p><small>&copy; 日本の四季 All Rights Reserved</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}

/* PCファースト */
img{
max-width: 100%;/* フルードイメージの設定 */
}

h1{
text-align: center;
padding: 20px 0;
}
.g-nav{
width: 100%;
height: 50px;
margin-bottom: 40px;
background-color: #616138;
}
.g-nav>ul{
display: flex;
max-width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 20%;
}
.g-nav a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;
border-right: 1px solid #FFF;
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: dimgray;
}
/* カレントの設定 */
.g-nav li.current>a{
background-color: dimgray;
}

/* sp時のナビ */
@media (max-width:640px){
.g-nav{
height: 150px;/* 3段分の高さ */
}
.g-nav>ul{
flex-wrap: wrap;
}
.g-nav li{
width: 50%;
}
.g-nav li:first-of-type{
width: 100%;
}
.g-nav li:first-of-type>a{
border-left: 0;
}
.g-nav li:nth-of-type(odd)>a{
border-right: 0;
}
.g-nav li:nth-of-type(n+2)>a{
border-top: 1px solid #FFF;
}
}

.main-visual{
max-width: 960px;
margin: 0 auto 80px;
}
.main-copy{
max-width: 960px;
margin: 0 auto 80px;
text-align: center;
padding: 0 10px;
}
.main-copy>h2{
margin-bottom: 20px;
}
.main-copy>p{
max-width: 600px;
margin: 0 auto;
line-height: 2;
}
footer{
width: 100%;
height: 100px;
background-color: #616138;
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}
@media (max-width:640px){
.main-copy>p{
text-align: left;
}
}

/* 個別ページ */
.pages{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
max-width: 960px;
margin: 0 auto 100px;
padding: 0 10px;
}
.pages-txt{
width: 46%;
}
.pages-txt>h2{
margin-bottom: 20px;
}
.pages-txt>p{
line-height: 1.8;
}
.pages-img{
width: 46%;
}

@media (max-width:640px){
.pages{
display: block;
}
.pages-txt{
width: 100%;
margin-bottom: 40px;
}
.pages-img{
width: 100%;
}
}




/* 春ページ */
.spring .g-nav{
background-color: #DB4D6D;
}
.spring footer{
background-color: #DB4D6D;
}
/* 夏ページ */
.summer .g-nav{
background-color: #0089A7;
}
.summer footer{
background-color: #0089A7;
}
/* 秋ページ */
.fall .g-nav{
background-color: #AB3B3A;
}
.fall footer{
background-color: #AB3B3A;
}
/* 冬ページ */
.winter .g-nav{
background-color: #72636E;
}
.winter footer{
background-color: #72636E;
}