webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

複数ページの制作

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

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

f:id:yachin29:20160816004934j:plain


Google検索エンジン最適化スターターガイド

だいぶ古い情報ですが、webを作る際の大事なポイントがしっかりと書かれているので、必ず目を通しましょう。
http://static.googleusercontent.com/media/www.Google.com/ja//intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf

Google検索エンジン最適化スターターガイド最新版

support.google.com




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



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


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


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



日本の夏
夏は、四季のひとつで、春と秋にはさまれた季節。天文学的には夏至から秋分まで。太陽暦では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/style.css">
</head>
<body id="top">
<div class="container">
<header>
<h1>日本の四季</h1>
</header>
<nav>
<ul>
<li class="current"><a href="index.html">ホーム</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="content">
<h2>日本の気候</h2>
<p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br>
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。<br>
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br>
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p>
</div>
<footer>
<p><small>&copy; Felica All Rights Reserved</small></p>
</footer>
</div><!--/.container-->
</body>
</html>

下層ページ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>日本の四季|春のページ</title>
<link rel="stylesheet" href="../css/style.css">
</head>

<body id="spring" class="cate">
<div class="container">
<header>
<h1>日本の四季</h1>
</header>
<nav>
<ul>
<li><a href="../index.html">ホーム</a></li>
<li class="current"><a href="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="content">
<h2>日本の春</h2>
<p><img src="../img/spring.jpg" alt="日本の春の画像">「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲(サ)の神が憑依する座(クラ)だからサクラであるとも考えられている。<br>
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ(木花之開耶姫)」の「さくや」をとって「桜」になった、とも言われている。</p>
</div>
<footer>
<p><small>&copy; Felica All Rights Reserved</small></p>
</footer>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
/*必ず、まずはリセット*/
html,body,h1,h2,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.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:300px;
  background:url(../img/header.jpg) no-repeat;
}
h1 {
  width:100%;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
nav {
  width:960px;
  height:50px;
}
ul {
  overflow:hidden;
}
li {
  width:20%;
  height:50px;
  float:left;
}
li a {
  display:block;
  text-align:center;
  line-height:50px;
  background:#B4A582;
  border-right:1px solid #FFF;
}
li:last-child a {
  border-right:none;
}
li a:hover {
  background:#74673E;
  color:#FFF;
}
footer {
  width:960px;
  height:50px;
  background:#4D5139;
}
footer p {
  text-align:center;
  line-height:50px;
  color:#FFF;
}

/*ユニーク部分トップページ*/

#top h2 {
  text-align:center;
  font-size:36px;
  padding: 40px 0 20px;
}
#top .content p{
  text-align:center;
  line-height:2;
  width:600px;
  margin:0 auto 60px;
}

/*下層ページ部分*/
.cate h2 {
  margin:40px 0 20px;
  padding: 10px 0 10px 20px;
  border-left:10px solid #000;
}
.cate .content {
  overflow:hidden;
  margin-bottom:40px;
}
.cate .content p{
  line-height:2.5;
  font-size:18px;
}
.cate img {
  float:left;
  margin-right:40px;
}
/*季節毎の指定*/
#spring footer {
  background:#B5495B;
}
#summer footer {
  background:#1E88A8;
}
#fall footer {
  background:#E2943B;
}
#winter footer {
  background:#6A8372;
}
li.current a {
  background:#74673E;
  color:#FFF;
}