課題レポート：自己紹介サイトの作成

これまでの演習で学んだHTML5/CSS3を用いて、数ページからなる自己紹介サイトを作成しよう。演習の成果物（自分の町の紹介ページ、リンク集ページ）も、サイト内に組み込んで無駄なく利用する。

要求仕様（リクワイアメント）

最低限、以下の項目を含めること。項目ごとにページを分ける。

ホームページ（トップのページ）

サイトのタイトルや各ページへのリンク。

プロフィールのページ

自分自身のプロフィール：生い立ち、大学入学までの学歴など。個人情報保護の観点から、以下の2点に注意してほしい。

本名ではなく、ハンドル名（ネット上で用いるニックネーム）を使う。
住所や電話番号、家族構成など、個人の特定につながる情報は、書かないほうがよい。

勉強・仕事のページ

現在、専攻している学部学科や学問、将来つきたい職業、そのために身につけたいスキルなど。

趣味のページ

趣味に関することがら：部活や、個人的に好きな活動などを自由に書く。

自分の町の紹介ページ

演習で作成したものを利用して、デザインしたページにコピー＆ペーストする^※1。

リンク集のページ

同じく、演習で作成したものを利用して、デザインしたページにコピー＆ペーストする。

その他、自由な項目を含めてよい。
よって、サイトの最小構成は、ホーム1ページ、サブ5ページ以上で、6ページ以上になる。 CSS3を用いて、各ページのデザインを決め、サイト全体で統一すること。

1　成果物のページ(map.html、bookmark.html)にそのままリンクを張るのではない。あくまで、デザインを統一したサイト内のページにソースを組み込むのであるから、間違えないように。

作成方法

全体計画を立てる

Webサイトの作成は、サイバー空間に家を建てるようなものであり、かなり込み入った作業を矛盾や破綻なくこなさなくてはならない。行き当たりばったりに始めるのではなく、まず簡単にサイト全体の構成を計画する方が、無駄な手直しなどが格段に少なくなるものだ。ホームページとサブページのファイル名を決め、内容（ページタイトル）との対応表を、たとえば以下のように作っておく。リンクメニューを作るときなどに重宝する。

要求項目	ページタイトル	ファイル名
ホームページ	山之口洋のサイトへようこそ	index.html
プロフィール	生い立ちから大学入学まで	sub1.html
勉強・仕事	小説作品の紹介	sub2.html
趣味	バイクツーリング（台湾一周）	sub3.html
自分の町	こんなところがありますよ！	sub4.html
リンク集	よく行くサイトたち	sub5.html

また、このように複数のページでデザインの指針（ポリシー）を統一するためには、スタイルシートをヘッダ部の間で記述するのではなく、独立したCSSファイル（たとえばjikoshoukai.css）などに記述する方が効率が良く、手直しも容易である。同じデザインのページが複数あるのだから、全部のページのヘッダに同一のCSS記述をするのは無駄だし、間違い（ズレ）も多くなるからだ。

ナビゲーション方式を決定する

ナビゲーションとは、サイト内の各ページを自由に移動する機能をいう。自宅にお客様を招待するようなものだから、家の中で迷わないための工夫が必要になるのである。最低限でも、トップページから各サブページにリンクを張り、各サブページにはトップページへの戻るボタンを作って置く必要がある。図1に示すこの方式をフレームなし方式と呼ぶ。よくブラウザの『戻る』ボタンを使ってくださいなどと書かれたサイトを見かけるが、これはナビの仕事をブラウザに丸投げしただけであり、論外だろう。

このフレームなし方式は、Webの誕生当時からある方式だが、サブページ間での直接移動ができないなどの欠点もあり、現在ではあまり人気がない。
その後、ブラウザ画面をいくつかのフレームに分割し、一部をナビゲーション専用にするフレーム方式が工夫されて、しばらくの間はもっぱら使われた。
だが、Webにも歴史の変遷があって、最近の主流は、図2に示すリンクメニュー方式である。これは、ナビゲーション専用のリンクメニューという領域を、各ページのまったく同じ場所に設置する方式である。サイト内の他のページに移動しても、リンクメニューと、サイトタイトル領域（ヘッダ領域）の表示は変化しないので、一見そこが別フレームになっているように見えるが、煩雑なフレーム機能は使っていない。
この最新の方式は、ホームページビルダーなどのWebページ作成支援アプリの普及につれて主流になった。そうしたアプリを使えば、同じソースコードを全ページに含めることが手間なくできるからである。後述するように、私たちは、テンプレートファイル（サイト内のページの雛形）を作ることで、同じ目的を達成することができるだろう。
以下の説明で、リンクメニュー方式採用したものと仮定する。

Webページ作成（オーサリング）に関する全般的な注意

本格的なWebサイトを作成するとなると、HTML5やCSS3のソースファイル、画像ファイル、コンテンツによっては音声や動画ファイルなど、数十～100以上のファイルが必要となる。それらの間のハイパーリンクやファイルパスの参照で混乱しないように、たとえばlocal_htmlという名前のフォルダ^※2を作り、それらすべてのファイルを一同に集めるべきである。画像ファイルが多くなる場合には、その下にimgといったサブフォルダを作り、画像ファイル専用にしてもよい。その場合、html本体ページからの参照は、<img src="./img/something.jpg">のようになる。
前2回の課題レポートで作成した、自宅付近の紹介とリンク集も自己紹介サイトの素材として利用するので、同じフォルダに移動しておく。
画像ファイルを含め、すべてのファイル名には全角文字を使ってはならない。パソコン上では正常に動作していたWebサイトが、Webサーバ（大抵はLinux環境）にアップロードしたとたんに正常に表示されなくなる原因がこれだ。ファイル名が文字化けを起こすのである。

2　なぜlocal_htmlなどという名前にするかといえば、これだと授業用ウェブサーバにアップロードするときに変更不要だからである。

テンプレートのページを作る

この講座では、Webページ作成支援アプリを使用しないので、同じ作業を繰り返さないための工夫として、テンプレートと呼ばれるページを作成する。これは、サイト内の全ページの雛形となるページである。リンク集ページの演習でも、テンプレートを使ったが、あの場合は同じファイル(link.html)内で反復の多い構造を作るためのものだった。ここでのテンプレートは、サイト内のページデザインを統一するためのものである。以下に一例を示す。

template.html（テンプレート・ファイル）の内容


<!DOCTYPE html>

<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>【タイトル】</title>
	<link rel="stylesheet" href="./jikoshoukai.css">
</head>

<body>
<div id="container">        <!-- 全体を囲むコンテナ -->

<!-- 1. ヘッダ部 -->
<header>
  <div id="title-words">○○のサイトへようこそ</div>
</header>

<!-- 2. リンクメニュー部 -->
<nav>
<ul>
  <li><a href="index.html">ホーム</a></li>
  <li><a href="sub1.html">プロフィール</a></li>
  <li><a href="sub2.html">勉強・仕事</a></li>
  <li><a href="sub3.html">趣味</a></li>
  <li><a href="sub4.html">自分の町</a></li>
  <li><a href="sub5.html">リンク集</a></li>
</ul>
</nav>

<!-- 3. メインコンテンツ部 -->
<div id="main">

<h1>大見出し(h1)</h1>

<h2>中見出し(h2)</h2>

<h3>小見出し(h3)</h3>

<p>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
　　　【メインコンテンツを記述】<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□<br>
</p>

</div>						<!-- メインコンテンツの終わり -->

<!-- 4. フッタ部 -->
<footer>
Copyright (C) 2020 XX YYYYYYYYY All rights reserved.
</footer>

</div>        				<!-- 全体を囲むコンテナの終わり -->
</body>
</html>

テンプレート・ファイルのソースをよく読むと、つぎのようなことがわかる。

Webページは4つの部分からなる

つまり、

ヘッダ部
リンクメニュー部
メインコンテンツ部
フッタ部

である。専用のタグがあることで分かるように、これが現代のWebページの標準構成といえる。サイトによってはasideタグで5. サイドバー領域を作ることもある。

スタイルシートの記述がない

自分の町の紹介やリンク集ページの演習では、ヘッダ^※3のstyleタグの間にcssプロパティを記述していたが、このページにはそれがない。実は、jikoshoukai.cssというCSSだけのファイルを別に作り、ヘッダのlinkタグで指定しているのである。これをCSSファイルという。このようにすると、

どのWebページからも1行書くだけでスタイルが指定できる。
サイト内の全ページのデザインを簡単に統一できる。
論理構造(HTML)と表示属性(CSS)とを完全に分離できる。

という3重のメリットがある。みなさんも是非この方式をマスターしてほしい。

3　htmlのヘッダ(headタグ内)とコンテンツのヘッダ(headerタグ内)を混同しないように注意してほしい。とはいえ、紛らわしいのも事実だ。

そこで、このテンプレートのサンプルに使われているCSSファイル(jikoshoukai.css)を以下に示す。HTML/CSSどちらのファイルも一例であるから、みなさんは自由に改変して自分なりの見た目に挑戦していただきたいが、リンクメニュー周辺のコードにはかなりハイテクな仕組み（項目数可変表示）を使っているから、変えない方が無難かもしれない。

CSSファイル(jikoshoukai.css)の内容


/*
	自己紹介サイトのスタイルシート
	2018.2.13
	Yo Yamanoguchi
*/

@charset "utf-8";

/* ページ全体のCSS指定 */
*{
	margin:0px;
	padding:0px;
}
body{
	background-color:#666666;
}
#container{
	width:760px;
	margin:auto;
	background-image:url("./img/bg034_02.gif");
	border-left:5px solid #FF9933;
	border-right:5px solid #FF9933;
}

/* ヘッダーのCSS指定 */
header{
	height:250px;
	background-image:url("./img/title-back.jpg");	
}
#title-words{
	padding-top:90px;
	text-align:center;
	color:#FFFFFF;
	font-size:40pt;
	font-weight:bold;
}

/* リンクメニューのCSS指定 */
nav{
	background-image:url("./img/menu-back.png");
	height:34px;
}
nav ul{			/* li項目を横方向に均等割付（項目数可変） */
	list-style-type:none;
	margin-bottom:0px;
	height:30px;
	text-align:justify;
}
nav ul:after{
	content:"";
	width:100%;
	line-height:0px;
	display:inline-block;
	height:0px;
	margin-bottom:0px;
}
nav li{
	height:30px;
	padding:4px;
	text-align:center;
	display:inline-block;
}
nav a{
	color:#FFFFFF;
	font-size:12pt;
	font-weight:bold;
	text-decoration:none;
}
nav a:hover{
	color:#FFFF00;
}

/* メインコンテンツのCSS指定 */
#main{
	padding:30px;
}

/* 各構成要素のCSS指定 */
/* 見出し関連 */
h1{
	font-family:'ＭＳ Ｐゴシック';
	font-size:24pt;
	color:#FFFFFF;
	background-color:#FF3333;
	border-radius:5px;
	border-left:solid 10px #000000;
	border-right:solid 10px #000000;
	padding:5px 7px;
	margin-bottom:30px;
	box-shadow:4px 4px 10px #999999;
	letter-spacing:1pt;
}
h2{
	font-family:'ＭＳ Ｐゴシック';
	font-size:18pt;
	border-left:solid 8px #006666;
	border-bottom:solid 3px #006666;
	padding-left:5px;
	padding-bottom:2px;
	margin-top:20px;
	margin-bottom:20px;
}
h3{
	font-family:sans-serif;
	font-size:14pt;
	border:solid 1px #000000;
	border-radius:5px;
	padding:1px 10px;
	margin-top:20px;
	margin-bottom:10px;
}

/* リンク関連 */
a:link{
	text-decoration:none;
	color:#00CC00;
}
a:visited{
	color:#990099;
}
a:hover{
	color:#FF0000;
}

/* 表関連 */
table{
	border-collapse:collapse;
}
caption{
	caption-side:bottom;
	font-weight:bold;
	padding-top:5px;
	text-align:right;
	font-size:11pt;
}
th,td{
	border:solid 2px #000000;
	padding:5px;
}
td{
	text-align:left;
}
thead{
	background-color:#336666;
	color:#FFFFFF;
}

/* フッターのCSS指定 */
footer{
	background-color:#000000;
	padding:10px 0px;
	font-size:10pt;
	text-align:center;
	color:#FFFFFF;
}

3　htmlのヘッダ(headタグ内)とコンテンツのヘッダ(headerタグ内)を混同しないように注意してほしい。とはいえ、紛らわしいのも事実だ。

図3に、上記HTML/CSSによるテンプレートの表示を示す。サイトタイトルや本体背景など、素材画像ファイルなどの置き場所は後述する。

図3: テンプレート(template.html)ページの一例

テンプレートをコピーしてサイトの構造を作る

目を皿にしてテンプレートファイルを確認してほしい。リンクメニューのリンク先（まだない）は正しいか。タグの打ち忘れがないか。隅々までちゃんと表示されているか……。普通のWebページより確認にはるかに時間をかけても割に合う。なぜなら、このファイルにバグがあると、それは6倍に増殖するからだ。
バグが見つからなかったら、テンプレートのファイルを、エクスプローラでコピペして、ホームから全サブページまで別名保存する。すると、図2のようなサイトの全体構造が一挙に完成する。この時点でまた、リンクメニューの機能を確認してみること。後は、テキストエディタを用いて、各ページに必要なコンテンツを記入してゆけば、自己紹介サイトが完成する。前にやった課題レポートリンク集と自分の町の紹介から、該当するページにコンテンツをコピペする。その際、タグの辻褄が合わなくなることがよくあるので、注意しよう。
自分の町の紹介ページは、紹介する項目毎に写真画像を加えれば、見栄えがする。リンク集で、サイトの説明文などが抜けている場合は、この段階で書き加えればよい。
この時点で、サイトの全体構造は以下のようになっている。


    local_html/                              
        index.html    ホーム                 template.html
        sub1.html     プロフィール              テンプレート（用済み）
        sub2.html     学問や仕事             local_html/img/
        sub3.html     趣味                      画像ファイル群
        sub4.html     自分の町の紹介
        sub5.html     リンク集
        jikoshoukai.css   スタイルシート

各ページのコンテンツを完成させる

ナビゲーションを含む全体構造は完成したので、あとは各ページのコンテンツを記述するだけである。場所はもちろん、各ページのメインコンテンツ中だ。
コンテンツの執筆（オーサリング）が終わったら、以下の項目について確認する。

要求項目に示したページが揃っている
誤字脱字、文章の誤りがない
画像へのリンクが正常に張られている（日本語のファイル名がないことも確認）
各ページ間のナビゲーション機能が正しく動作する
スタイルシートで指定した表示属性が正しく、各ページに反映されている
サイト全体の構造が設計通りにできている

授業用ウェブサーバへのアップロード

この時点では、まだWebサイトではない。授業用ウェブサーバにアップロードして、もう一度上記のチェックをしよう。手元のパソコンとサーバはOSが違うので、動作も微妙に異なる場合がある。もう一度いうが、日本語のファイル名は無効である。
アップロードには、FFFTPというFTPクライアントアプリを使うが、Webサーバの仕様や指定されているWebサイト構成の細則は、キャンパスによって異なるので、授業の中で指示する。
課題の提出方法には、Oh-O! Meijiの「レポート」機能を用いる。授業用Webサーバへのアップロードは、動作確認のためだけ、課題の提出とは異なる。個人情報保護の観点から、正式な提出が終わったら、授業用Webサーバからコンテンツを削除しておくこと。