WWWの基礎の基礎

ホームページ作成の流れ

ここでは、実際に「ホームページ」を作成していきます。

デザインを決める

Webサイトのテーマが決まっていることを前提として、次に、「ホームページ」のデザインを決めます。頭の中に思い浮かべるだけでもいいですし、絵に描いてみるのもいいかも知れません。
ソースを作った後でデザインを考えても良いんですが、最初から決めておいた方がソースも書きやすいですし、デザインに合わせてソースを書き換える手間も省けます。
画像等を使う場合はこの段階で用意しておきましょう。

HTMLテンプレートを作る

次に、どのDOCTYPEを宣言するかを決めます。ここでは、HTML 4.01 Transitional DTD（公開識別子のみ）を使用します。DOCTYPEについての詳細はDOCTYPE宣言についてを見てください。

テンプレートといってもここで作るものは難しいものではありません。ただ、新しいページを作るときに一から打ち直すのは面倒なので、Copy&Pasteで済ませられるよう作っておくだけです。ここでは、整理しやすいように各フォルダも作成しておきます。
下のソースをテキストエディタで打ったら適当な名前をつけて保存しておきます。ここでは「template.html」とつけます。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>
<body>

</body>
</html>

meta http-equiv="Content-Type"は、ファイルがHTMLであることを定義しています。charsetはブラウザで開くときの文字コードを指定します。ここにはソースファイル自体の文字コードを入れなければ文字化けを起こします。「Shift_JIS」はWindowsの標準文字コードです。Windowsでは特に指定しない限り「Shirt_JIS」で保存されます。UNIX系OSでは「EUC-JP」が多いようです。
meta http-equiv="Content-Style-Type"は、スタイルシートを使用する場合に必要です。「レイアウトはCSSで」がモットーなので記述しておきます。（全て、外部スタイルシートを使うのであれば必要ありません）
meta http-equiv="Content-Script-Type"は、スクリプト（JavaScript）を使用する場合に必要です。使う気がない場合は記述する必要はありません。

現在のフォルダ構成 
任意のフォルダ
　│
　└template.html

ここまでのソースの表示例

ソースを書く ‐ １

ここからはホームページの内容をHTMLでマークアップしながら書いていきます。この段階ではレイアウトは行わず、コンテンツのまとまりにだけ気をつけて下さい。トップページのファイル名は基本的にindex.htmlになります。これは、ファイル名なしでアクセスされた場合、ほとんどのサーバーがindex.htmlを開く設定になっているからです（例えば、「http://www.daito.ac.jp」にアクセスすると「http://www.daito.ac.jp/index.html」が開きます）。

まずは、ページタイトルを入れます。タイトルは<title></title>内に書き、そのページの内容が分かるようなもので、長いタイトルは推奨されません。今作っていいるのはトップページなのでサイトの名前を入れるのが普通でしょう。

ここから先は<body></body>内に書いていきます。ここに書いたものが実際に表示されるものになりますので、自分に置き換えて書いて下さい。 トップページに必要なものは、サイトの名前、目次（メニュー）、更新履歴くらいでしょうか。あとは、必要に応じてお知らせ、最終更新日、著作権情報があれば良いかも知れません。
大きな画像や音楽などは鬱陶しいと感じる人が多いようです。

サイトの名前は見出しなので<h1>タグ（H1〜H6まである中でもっとも重要な見出しを示す）を使います。目次は見出し（のような気がする）なので<h2>タグを使います（別に違うタグを使っても構いません）。更新履歴は何日分か表示することになるので、それをリストにします。 お知らせや最終更新日は、必要に応じて見出しをつけておけば良いでしょう。今回は、著作権情報に最終更新日を併記します。著作権情報は、普通、メールアドレス等も併記するので<address>で括りましょう。
サイトの名前と著作権情報以外のタグの使い方は好みの問題なのでそれほど気にする必要はありません。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Site Name</title>
</head>
<body>
<h1>Site Name</h1>
<h2>コンテンツ１</h2>
<h2>コンテンツ２</h2>
<h2>コンテンツ３</h2>
<h2>コンテンツ４</h2>

<h2>更新履歴</h2>
<ul>
<li>xx月xx日　xxxxxxxxxx</li>
<li>--月--日　----------</li>
<li>**月**日　**********</li>
</ul>

<h2>お知らせ</h2>
<p>ここにお知らせを書く</p>

<address>
Copyright &copy; Uriu Seminar
<br>
E-Mail urizemi&#64;mail.goo.ne.jp
<br>
最終更新日：xx年xx月xx日
</address>
</body>
</html>

これでトップページの下書きは完成です。Emailのところにある「&#64;」HTMLで「@」を表示するためのもので、Copyrightのところにある「&copy;」は「©」を表示するためのものです。

ここまでのソースの表示例

ソースを書く ‐ ２

メニューやお知らせがあってもリンクがなければ意味がないので、続いてリンクを記述していきます。
リンクは対象文字を<a>タグで括り、「href=""」でリンク先を指定します。瓜生ゼミナールにリンクを貼る場合は、<a href="http://www.daito.ac.jp/~uriu/">になります。URLの指定は絶対パスと相対パスがありますが、利便性を重視し相対パスを使用します。
メールアドレスへリンクする場合はアドレスの前に「mailto:」を加え、「href=""」の中に入れます。

何か強調するものがある場合は<strong>で括ると太字体で表示されます。また、<em>で括った場合は斜体で表示されます。今回は最終更新日を<strong>で括ってみます。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Site Name</title>
</head>
<body>
<h1>Site Name</h1>
<h2><a href="./content1.html">コンテンツ１</a></h2>
<h2><a href="./content2.html">コンテンツ２</a></h2>
<h2><a href="./content3.html">コンテンツ３</a></h2>
<h2><a href="./content4.html">コンテンツ４</a></h2>

<h2>更新履歴</h2>
<ul>
<li>xx月xx日　xxxxxxxxxx</li>
<li>--月--日　----------</li>
<li>**月**日　**********</li>
</ul>

<h2>お知らせ</h2>
<p>ここにお知らせを書く</p>

<address>
Copyright &copy; Uriu Seminar
<br>
E-Mail <a href="mailto:urizemi&#64;mail.goo.ne.jp">urizemi&#64;mail.goo.ne.jp</a>
<br>
最終更新日：<strong>xx年xx月xx日</strong>
</address>
</body>
</html>
現在のフォルダ構成 
任意のフォルダ
　│
　├template.html
　│
　├content1.html
　│
　├content2.html
　│
　├content3.html
　│
　└content4.html

ここまでのソースの表示例

ソースを書く ‐ ３

ここまで書いたらそろそろレイアウトに入ります。レイアウトはCSSで行いますが、CSSの指定の仕方は数通りあり、大きく、CLASSごとの指定、IDごとの指定、タグごとの指定、直接指定に分けられます。直接指定はあまり好ましくないので、その他３通りの方法を駆使してレイアウトをします。
タグごとの指定であればすぐにレイアウトに移れますが、その場合、同じタグを用いているものは同様に表示されるので凝ったレイアウトをしようとすると無理が出ます。ですから、タグにCLASSをつけたり、<div>タグで括ったりすることでレイアウト用のグループ分けをします。<div>タグは包括的な容器として使用するもので、タグ自体に意味はなく、このタグにスタイルシートを適用することで自由にレイアウトすることが可能になります。ただし、<div>は文章中で一ヶ所だけ色を変えるようなことは出来ないので、その時は<span>を使用します。

CLASSをつける時は、文書構造上意味のある名前をつけることが望ましいとされています。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Site Name</title>
</head>
<body>
<h1>Site Name</h1>
<div class="Menu">
<h2 class="Content"><a href="./content1.html" class="Link_Menu">コンテンツ１</a></h2>
<h2 class="Content"><a href="./content2.html" class="Link_Menu">コンテンツ２</a></h2>
<h2 class="Content"><a href="./content3.html" class="Link_Menu">コンテンツ３</a></h2>
<h2 class="Content"><a href="./content4.html" class="Link_Menu">コンテンツ４</a></h2>
</div>

<div class="Main">

<div class="History">
<h2>更新履歴</h2>
<ul>
<li class="Latest_History">xx月xx日　xxxxxxxxxx</li>
<li class="Old_History">--月--日　----------</li>
<li class="Old_History">**月**日　**********</li>
</ul>
</div>

<div class="Information">
<h2>お知らせ</h2>
<p>ここにお知らせを書く</p>
</div>

<address>
Copyright &copy; Uriu Seminar
<br>
E-Mail <a href="mailto:urizemi&#64;mail.goo.ne.jp">urizemi&#64;mail.goo.ne.jp</a>
<br>
最終更新日：<strong>xx年xx月xx日</strong>
</address>

</div>
</body>
</html>

ここまでのソースの表示例（表示自体は「ソースを書く ‐ ２」と変わりません）

スタイルシートを書く

スタイルシートは全て外部ファイルに記述する方針なので、外部ファイルを作成します。テキストエディタで「任意の名前.css」を作成して下さい（ここではstyle.cssと付けます。整理しやすいように「css（任意）」というフォルダを作ってその中に保存します）。Web上では日本語は使用できないので名前をつける際には注意して下さい。Webサイトを作成するとき拡張子が表示されないと分かりづらいため、拡張子を表示しない設定（Windowsの初期設定）になっている場合は設定を変更した方が良いかも知れません。

ここからは、style.cssに記述していきます。CSSの基本書式は以下の通りです。 

適用対象名 {プロパティ:値}

適用対象名はタグ名、CLASS名、ID名のいずれかが入ります。適用対象がタグの場合はタグ名をそのまま、CLASSの場合はCLASS名の前に「.（ピリオド）」を付け、IDの場合はID名の前に「#（シャープ）」を付けて下さい。「,（カンマ）」で区切ることで複数の対象を指定することも出来ます。また、複数のプロパティを指定するときには以下のように「;（セミコロン）」で区切ります。「,（カンマ）」を使わずに半角スペースで区切って複数の対象名を書くと、適用対象を制限することが出来ます。改行や半角スペースを使用することが出来るので、自分が見やすいように書いて下さい。 

タグ名 {
    プロパティ:値
}

.CLASS名 {
    プロパティ:値;プロパティ:値
}

#ID名 {
    プロパティ:値;
    プロパティ:値
}

タグ名, .CLASS名, #ID名 {
    プロパティ:値;
    プロパティ:値
}

/* この例では、titleというCLASS名をもつ<h1タグ>に適用されます */
h1 .title {
    プロパティ:値;
    プロパティ:値
}

コメントを記述したい場合は「/*」と「*/」で括ります。複数行書くことも可能です。
では、実際にCSSを書いてみます。 

body {
    margin:0em;
    background-color:#FFFFFF;
    font-family:Times New Roman;
}

h1 {
    margin:0em 0em 0em 2.5em;
    border-bottom:3px dashed #000000;
    padding:.2em 0em .2em .5em;
    font-size:300%;
}

h2 {
    font-size:110%;
    margin:0em 0em .5em 0em;
}

ul {
    margin:0em 1em;
    list-style-type:none;
}

p {
    margin:0em 1em;
}

address {
    position:absolute;
    top:13em;
    left:24em;
    padding:.5em .5em;
    font-size:85%;
    font-style:normal;
    border:1px solid #000000;
}

a:link {
    color:#0000FF;
}

a:visited {
    color:#000080;
}

a:active {
    color:#A00000;
}

a:hover {
    color:#A00000;
}

.Menu {
    position:absolute;
    left:0em;
    bottom:3em;
    border-bottom:1px solid #000000;
}

.Main {
    position:absolute;
    padding:0em;
    top:0em;
    left:7.375em;
    height:100%;
    border-left:2px dashed #000000;
}

.Content {
    margin:0em;
    border-top:1px solid #000000;
    text-align:center;
    padding.25em 0em;
}

.Link_Menu {
    width:6.7em;
    padding:.1em 0em;
}

.Link_Menu:link {
    color:#000000;
    text-decoration:none;
}

.Link_Menu:visited {
    color:#000000;
    text-decoration:none;
}

.Link_Menu:active {
    color:#000000;
}

.Link_Menu:hover {
    background-color:#000000;
    color:#FFFFFF;
}

.History {
    position:absolute;
    top:15em;
    left:1em;
    border:1px solid #000000;
    padding:.5em .5em;
}

.Latest_History {
    color:#FF0000;
}

.Old_History {
    color:#404040;
}

.Information {
    position:absolute;
    top:6em;
    left:1em;
    border:1px solid #000000;
    padding:.5em .5em;
}

最後に、作成したCSSファイルをHTMLファイルから呼び出します。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>Site Name</title>
</head>
<body>
<h1>Site Name</h1>
<div class="Menu">
<h2 class="Content"><a href="./content1.html" class="Link_Menu">コンテンツ１</a></h2>
<h2 class="Content"><a href="./content2.html" class="Link_Menu">コンテンツ２</a></h2>
<h2 class="Content"><a href="./content3.html" class="Link_Menu">コンテンツ３</a></h2>
<h2 class="Content"><a href="./content4.html" class="Link_Menu">コンテンツ４</a></h2>
</div>

<div class="Main">

<div class="History">
<h2>更新履歴</h2>
<ul>
<li class="Latest_History">xx月xx日　xxxxxxxxxx</li>
<li class="Old_History">--月--日　----------</li>
<li class="Old_History">**月**日　**********</li>
</ul>
</div>

<div class="Information">
<h2>お知らせ</h2>
<p>ここにお知らせを書く</p>
</div>

<address>
Copyright &copy; Uriu Seminar
<br>
E-Mail <a href="mailto:urizemi&#64;mail.goo.ne.jp">urizemi&#64;mail.goo.ne.jp</a>
<br>
最終更新日：<strong>xx年xx月xx日</strong>
</address>

</div>
</body>
</html>
現在のフォルダ構成 
任意のフォルダ
　│
　├template.html
　│
　├content1.html
　│
　├content2.html
　│
　├content3.html
　│
　├content4.html
　│
　└css（フォルダ）
　　└style.css

無理なレイアウトをしているのでWindows IE6専用です。最新のOperaなら何とか見られますがNetscapeは激しく崩れます。Mac Safariも元々のエンジンがNetscapeと同じものなので見られません。

完成例（サンプルなのでトップページからのリンク先は作っていません）

注意
しっかりと調べて書いているわけではないので、所々に嘘がある可能性があります。興味を持たれた方は自分で調べてみて下さい。
本文は、2005年1月24日現在のものです。

Back to Index

Copyright © 2005 012E227D Uriu Seminar