第６章　ファイル作成のまとめ

１．ホームページ作成を進めるために

前章までの説明で、ホームページ作りのあらましは分かってきたと思います。必要なことをおさらいすると、
  1. 全体構成を考える。
  2. 作るためのソフトウェア 　　 テキストエディタか WYGIWYG 型エディタか 　　 を決定し、必要とあらば新たに入手する。
  3. あなたのパソコンの中にホームページ作成作業用ディレクトリを作り、その中に各コーナーのサブディレクトリを作る。
  4. 必要とあらば画像ファイルなども用意しつつ、2 で選んだソフトウェアで頑張って HTML ファイルを作る。
結局、4 をやり遂げるには、各々のソフトウェア特有のノウハウを、ヘルプなどを読みつつ手探りで学んでいくことになると思います。ただし、その上で前章までで学んだ知識が役立つことは間違いないでしょう。
また、手探りでやっていく上で、インターネットで得られる資料は豊富です。"ソフト名 入門" や "ソフト名 HTML 作成" などの検索キーワードで、あなたの希望にピッタリなホームページが引っかかる可能性も大です。
ここでは作業を進める上で、役に立つかも知れないホームページをいくつかリストアップしてみました。参考になさって下さい。

訪問者に優しいWebサイト作り
「Webオーサリングソフト編」で各種 WYGIWYG 型ソフトを実際に使用しての比較があります。管理人の評価を鵜呑みにするかはあなたの判断次第ですが、ソフトウェアを選ぶ上で大いに参考になるでしょう。
初めてのウェブドキュメント作り
テキストエディタでのホームページ用ファイル作成の学習になるサイトです。管理人の内田明氏は HTML 4.01仕様に関する W3C 勧告文書の翻訳プロジェクトを進められた方です（W3C については、下の方のひとくちメモをお読み下さい）。
とほほの WWW 入門
ホームページ作成に関するサイトとしては非常に有名で、初心者向けの入門、HTML リファレンスなど、多彩な内容が盛り込まれています。どちらかというとテキストエディタで作成される人向けですが、WYSIWYG 型をお使いの人にも必ず役に立つでしょう。
若葉のDreamweaver入門
市販のホームページ作成用ソフトの中ではプロユースに耐えるとの評価が高い Macromedia Dreamweaver の入門サイトです。
パソコン教室＆出張サポート aim
茨城県の業者のホームページですが、この中のホームページ作成入門コーナーは、IBM ホームページ・ビルダー入門として使えます。
無料ホームページ作成〜HomepageManager〜@BG
Windows 用の WYGIWYG 型エディタで、しかもフリーウェアという HomepageManager を使ったホームページ作成入門です。
Entrance to KAY's Workroom
高機能テキストエディタＱＸをマクロでカスタマイズして、ホームページ作成用にするためのヒントが満載です。

２．基本構造への追加

以後、このページではテキストエディタで作成する人のために、幾つか覚えておいた方がいいタグに関する基礎知識を書いていきます。WYGIWYG 型で作ろうという人には必須の知識ではないかも知れませんが、サッと読んでみても無駄ではないと思います。
第４章では
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
こんな感じの、ホームページ用 HTML ファイルの基本構造を紹介しました。ここではこれらに付け加えた方がよいものを紹介します。まとめて、テンプレート用ファイルとして保存しておけば便利でしょう。

ドキュメントタイプの宣言

これはタグではありません。<html>タグに先立って、宣言した方が良いとされているものです。HTML 文書はさまざまなヴァージョンの仕様が W3C によって勧告されてきた歴史があり、ドキュメントタイプ宣言はこの文書は HTML のこのヴァージョンの仕様に従って書かれたものであるということを明示するものです。例としては、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
などがあります。大文字・小文字は間違えないようにしましょう。できれば HTML4.01 で書いた方がよろしいようです。
……といっても、まだホームページ用 HTML ファイルを書き始めたばかりなのに、こんなこと分かりませんよね？　自分の作った HTML 文書が HTML4.01 の仕様に照らして正しいか、手っ取り早く知るには Another HTML-lint の簡易ゲートウェイのコーナーで調べるのが良いのではないでしょうか。面倒くさいとか、分からない場合は……ドキュメントタイプ宣言自体、省略してもホームページの運営には差し支えないと思います。
信頼できる WYGIWYG 型エディタは、新規作成時に適切なドキュメントタイプ宣言を入れてくれます。

lang 属性

日本語のページを作る場合は、<html>タグに lang 属性でそのことを明記した方が良いようです。
<html lang="ja"> とすればよいのです。

<meta>タグ

<head>タグ内に記述します。このファイルが html 文書であることに付け加えて、何かを定義したり機能拡張したりするときに使います。閉じタグは不要です。
とりあえず、必須なのは第４章のひとくちメモで触れた文字コードの宣言でしょう。
また、筆者はスタイルシートを使うときは、
<meta http-equiv="Content-Style-Type" content="text/css">
JavaScript を使うときは、
<meta http-equiv="Content-Script-Type" content="text/javascript">
というのを記述しています（意味が分からない場合は無視して構いません。スタイルシートに関してはこの章でいろいろ出てきますので、ひとくちメモで後述します）。
この他、検索サイトに引っかかってもらうために、キーワードや簡単な説明を書く人もいます（あまり効果はあるとは言えませんが、無いよりマシかと思います）。キーワードが多すぎたり、本文と関係なかったりすると、かえって逆効果になるらしいです。
<meta name="Keywords" content="キーワード１,キーワード２,キーワード３">
<meta name="Description" content="ここに簡単な説明を書きます">
この他にも、<meta>タグでいろんなことができます（〜秒後に他のページにジャンプ、とか）。興味があれば検索で調べてみて下さい。

<body>タグの属性

最初のうちは bgcolor と background を知っておけばいいでしょう。前者でページの背景色、後者で背景イメージ（壁紙用の画像ファイル）を指定します。画像ファイルは <img>タグの src 属性と同じく絶対リンクか相対リンクで指定します。
bgcolor のみ指定して background 使わない……というのはいいんですが、background を指定した場合は bgcolor で壁紙になるべく近い色を指定した方がいいと思います。壁紙のダウンロードが遅いとき、ダウンロードが終わってあんまり印象が変わるのは格好悪いからです。なお、色指定については、このページのひとくちメモをお読み下さい。
他に、<body>タグの属性でよく使われるものには、text（通常テキストの色）、link（未訪問のリンクテキストの色）、vlink（訪問済みリンクテキストの色）、alink（クリック中のリンクテキストの色）があります。
ところで、今述べたような <body>タグの属性は、全てスタイルシートというもので同じ効果が出せるのです。詳しくは触れませんが、スタイルシートを学んだ人にはその方が便利だし、W3C の HTML4.01 仕様書ではそちらが推奨されているのです。ですがホームページ作成初心者のうちは bgcolor 属性とかが分かりやすければ、そっちを使っても、そんなに問題はないかな……などと思っています。

上記を踏まえて、ちょっと詳しい基本構造タグを書いておきます（HTML4.01・Shift-JIS 用）。文字コード指定は必ず確認して、必要とあらば書き換えて下さい。
<!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 name="Keywords" content="">
<title></title>
</head>
<body bgcolor="" background="" text="" link="" vlink="" alink="">
</body>
</html>
……でも、bgcolor などは HTML4.01 では、（間違いとは書いてないが）推奨されていないことは覚えておいて下さいね。

３．その他の基本タグ

では、この他のホームページ用 HTML ファイル作成に使われがちな基本的なタグを見ていきましょう。これらはあくまで筆者の独断で「初心者の人が使いやすいタグ」ということで、経験的かつ感覚的に選んでいることをご承知下さい。

<p>タグと <br>タグ

<p>と<br>は、それぞれ、段落と改行を示すタグです。<p>タグには閉じタグがありますが、省略されることがあります（あまりお勧めしません）。<br>には閉じタグはありません。
イメージとしては、こんな感じです。
p と br
基本的には、一連の文章を書くとき最初に<p>を打ち、改行部分に<br>を入れ、区切りは</p>で閉じる……と、そんな感じですね。つまり文章のひとまとまりを段落タグで囲み、その中に改行タグを入れていくわけです。
普通の場合は <br>タグなしでソースでいくら改行してもブラウザの画面に反映されませんので、気をつけましょう。

見出しタグ

h1〜6 で見出し文字列を規定します（閉じタグあり）。数字が小さいほど時が大きくなり、見出し階層が高いとされています。記述例をあげると、
<h1>序章〜ある晴れた朝、突然に</h1>
みたいな感じです。
このタグで文字サイズなどが変わるからといって、その目的で使わないようにしましょう。あくまで「第〜章」とか、「第〜章　第〜項」みたいな意味合いです。

<hr>タグ

<hr>と書いた箇所に区切り線を表示します。閉じタグは不要。
align（表示位置、right・center・left）、color（線の色）、size（線の幅、ピクセルで指定）、width（線の長さ、ピクセルかパーセントで指定）といった属性が使えます。また、noshade で影のない平面的な線にできます。
いくつか例を示しましょう。
<hr align="left" width="200">

<hr align="right" color="blue">
<hr align="center" width="200" noshade>
<hr align="center" size="6" width="100">

リスト関連タグ

<ul>タグで囲んだ部分はリストと解釈されます。リストのそれぞれの項目は、<li>タグで表せます……と言っても、イメージできないかも。つまり、こういうことです。
<ul>
<li>桃太郎
<li>浦島太郎
<li>山本太郎
</ul>
  • 桃太郎
  • 浦島太郎
  • 山本太郎
上記の例で分かるように、<ul>には閉じタグがあり、<li>にはありません。
<ul>タグに type 属性をつけることで、項目それぞれの行頭の記号を変えることができます。disc（黒丸）、circle（白丸）、square（四角）の３種類です。
記述例：<ul type="circle">
この type 属性は <li>タグの方に指定することもできます。項目ごとに変えたい場合は、そちらが良いでしょう。
ul の代わりに、<ol>タグを使うと、連番リストができあがります。
<ol>
<li>桃太郎
<li>浦島太郎
<li>山本太郎
</ol>
  1. 桃太郎
  2. 浦島太郎
  3. 山本太郎
こちらは type 属性で項目番号を変えることができます。
1（1・2・3 …）、a（a・b・c …）、A（A・B・C …）、i（i・ii・iii …）、I（I・II・III …）の５種類です。こちらも li の方で指定することも可能です。
なおどのようなタグでも、スタイルシートを学べばきめ細かな表示面の指定ができようになりますが、リスト関係は特に効果的です。

テーブル関連タグ

テーブル、つまり表を作るタグです。これはちょっと面倒ですよ。
<table>タグで「ここからここまでがテーブル」、<tr>タグで「ここからここまでが１行」、<td>タグで「ここからここまでが１列」というのを指定します。この書き方で分かるように、それぞれ閉じタグが必要です。
例を示しましょう。
<table>
<tr>
<td>１行１列</td>
<td>１行２列</td>
<td>１行３列</td>
</tr>
<tr>
<td>２行１列</td>
<td>２行２列</td>
<td>２行３列</td>
</tr>
</table>
１行１列 １行２列 １行３列
２行１列 ２行２列 ２行３列
このページはスタイルシートというのを使ってるので、ちょっと普通に書いた時と表示が異なると思うんですが、まあ、だいたいこんなイメージです。
１行目を項目名などを示すテーブルヘッダとして<td>の代わりに<th>を書くこともあります。また、ヘッダ・ボディ・フッタを示すため<thead>、<tbody>、<tfoot>といったタグを使うこともあるのですが、詳しい説明は略します。
テーブル関連のタグにはさまざまな属性があるのですが、ここではすぐ使いそうなものだけを挙げておきます。詳しくはとほほさんのサイトの説明を読むなり、検索で調べるなりして下さい。

テーブル関連のタグは初心者の方が一番引っかかるところじゃないでしょうか。面倒なら、ホームページ作りでテーブルを避けて通るのもアリかとは思います。
しかし、使えるようになるとホームページのレイアウトの幅がグッと広がります。このページでも「ひとくちメモ」の枠をはじめとして、随所にテーブルが使われています。ライブシネマのホームページは、本文部分はほとんどテーブルの中に書かれています。ある程度 HTML が書けるようになったら、使ってみる努力をしましょう。

書体関係タグ

<font>、<b>（太字）、<i>（斜体）などがあります。全て閉じタグが必須です。このうち <font>タグは属性が必須で、size で大きさ、color で色、face でフォント名を表します。記述例は、こんな感じです。
<font size=7 color="red" face="ＭＳ ゴシック","Osaka">大きなサイズのゴシック体の赤文字になります</font>
size は、1〜7 で数値が大きいほど大きくなります。+1、+2 …などのように、標準で使われているサイズに対する大きさも指定できます。
face は "," で複数指定できます。先に指定したものが優先されます。例の場合、Windows の人のために ＭＳ ゴシック、Macintosh の人のために Osaka を指定しているわけです。特別な環境しかないようなフォント（例えば、一太郎などのワープロをインストールしてオマケで入ってくるフォントなど）を指定しないよう心掛けましょう。
ところで上記の書体関係タグは、全てスタイルシートで同じ効果が出せて、なおかつきめ細かい指定ができるものです。W3C では、上記のタグは廃れつつあるものとされており、スタイルシートでできることはそっちを使うように……と言われています。しかしまあ、現状ではスタイルシートを学ばないうちは使っちゃっても、ただホームページを見せるということでは、そんなに問題はないのではないでしょうか。ただし必要がないのに、使いまくることは避けた方がよいと思います。

<div>タグと <span>タグ

これら自身では特に意味を持たず、属性を指定することで、活かされるタグです。どちらも閉じタグが必須です。
<div>タグは前後に改行が入り、<span>タグは入りません。どちらもスタイルシートを指定する style ないしは class 属性が使われることが多いです。特に span は、スタイルシートを使うようになると、よく使うようになります（じゃないと、ほとんど使いません）。
div の場合は、スタイルシートを使わない人でも align 属性とともに使うことがあります。align 属性では、横方向での表示位置を center（中央）、left（左寄せ）、right（右寄せ）、justify（両端揃え）で指定することができます。<div align="center"> などとするわけですね。

ひとくちメモ
W3C
読み方：ダブリュースリーシー
フルスペル：World Wide Web Consortium
別名：WWWコンソーシアム
WWWで利用される技術の標準化をすすめる団体。WWW技術に関わりの深い企業、大学・研究所、個人などが集まって、1994年10月に発足した。
W3Cの設立にはマサチューセッツ工科大学(MIT)や、WWWが開発された欧州合同素粒子原子核研究機構(CERN)などが大きな役割を果たしている。
現在では、マサチューセッツ工科大学計算機科学研究所(MIT/LCS)、フランス国立情報処理自動化研究所(INRIA)、日本の慶應義塾大学SFC研究所(Keio-SFC)がホスト機関としてW3Cを共同運営している。
なお、2003年1月にはこのうちINRIAがホストから抜ける予定で、INRIAに代わって欧州情報処理数学研究コンソーシアム(ERCIM)が欧州からのホスト機関として参加する。ERCIMはINRIAやFraunhofer-Gesellschaftなど、欧州各国の研究機関からなる組織。
（IT用語辞典 E-Words の解説より）
……ということで、ホームページ作成の上では「WWWで利用される技術」としての HTML の仕様の「標準化」を進めている権威ある団体と考えればいいです。こういう拠り所がないと混乱が広がるばかりですので（例えば現在でも InternetExplorer 独自のタグや Netscape 独自のタグがあったりします）、良心あるホームページ作者は W3C の定めた基準に従いつつ、現状のメジャーなブラウザで見て問題のない HTML 文書作成を進めるのが良いわけですね。
W3C では HTML のヴァージョンごとの仕様書（勧告とされています）を公開してきており、現在単なる HTML としての最新のものは 4.01 となっています。その全文は W3C のホームページ（英語）で読むことができ、日本語訳もW3Cの仕様書等の文書の日本語訳集のページで読むことができます。
ひとくちメモ
HTML での色指定
HTML での色指定は、R（red）G（green）B（blue）の３色の混合比によって規定します。それぞれが 0〜255 の数値で段階分けされ、各色がどの程度の割合で混じっているかを、数値を表す文字列で表現するわけです。
たとえば R：148、G：108、B：50 ですと土色っぽい茶色になります。これを文字列で表す時にそれぞれ 16 進数にします。148→94、108→6C、50→32 というわけで、"#946C32" という文字列が、くだんの色に該当するわけです。ですから本文部分の背景色にこの色を指定したい場合は、<body bgcolor="#946C32"> と書くわけです。
どうです、ややこしいでしょう。 16 進数ってものに対して「何じゃいな？」と思う人はもちろん、慣れてる人も数値と色のイメージを重ね合わせるのはほぼ不可能ではないかと思います（色を見て言い当てる人がいるという伝説は聞いたことありますけど）。というわけで、色のイメージから HTML 用の文字列に変換してくれるソフトはけっこう発表されてます。Vector で探せばフリーウェアがすぐに見つかるでしょう。また、WYGIWYG 型エディタでは指定が容易になる工夫がされているのがほとんどだと思われます。
この他、特定の 16 色に関しては、下図のように色の名前での指定ができます。"#00FF00"（RB が 0 で、G が 255）が Green ではないことに注意して下さい。
16色
ひとくちメモ
スタイルシート
HTML 文書での見栄えを規定するためのもので、CSS（Cascading Style Sheets）という言語で記述することが W3C により推奨されています。文書全体の構造は HTML で、見栄えは CSS で……というわけですね。
実際問題、スタイルシートを使うことにより HTML タグだけでは不可能な細かいレイアウトが可能になります。また、CSS でできることは CSS でやった方が、今後の汎用性を考慮した書き方といえるわけです（そのように標準化は進められているわけですから）。
CSS の実装方法としては
  • タグに style 属性で記述。
  • ヘッダ部分に記述。
  • 別ファイルに記述。
の３通りがあります。
最初の例を挙げると、例えば
<p style="background-color:Black;color:White;">
などとすることで、その部分の段落は全て黒背景・白文字にできるわけです。
次の例を挙げると、例えば <head>タグ内に
<style type="text/css">
<!--
a {text-decoration:none;}
-->
</style>
としておけば、その文書の <a>タグの全てに、リンク文字列によくある下線がつかなくなるわけです。
最後の例は最も便利な方法で、実際、多くのホームページで活用されています。CSS を別ファイルに記述しておき、HTML ファイルの側では <head>タグ内に
<link rel="stylesheet" type="text/css" href="./option/style.css">
などと記述することで（href 属性でファイル名を指定していることは分かりますよね）、ブラウザでの読み込み時に参照させるのです。
これにより、１つのスタイルシート用ファイルの内容を変更することで、それを参照している HTML ファイル全ての見栄えを一発で変更することができるわけです。例えばあなたのホームページを全面的にお色直しする場合など、便利です。例えば
body {background-color:Yellow;}
などというのを変更すると、背景色が一括して変更できます。
上に挙げた例で分かって頂けたかと思いますが、CSS はタグごとの見栄えを変更することができます。しかし、同じタグでも、使う箇所によって見栄えを変えたいことはあります。その場合は、class というのを使うのですが、ここでは説明を略します。
スタイルシートを使いこなしたい人は、"スタイルシート 入門" なんてキーワードで検索してみて下さい。いろいろ出てきますよ。
最後に。こんなに便利なスタイルシートですが、ブラウザ側で解釈できないために思ったような見栄えにならないことは多々あります。特に古いヴァージョンのブラウザでは、ほとんど効果がない……といえましょう。ですから、古いブラウザで見ていて、「あなたのページは見栄えがめちゃくちゃ」と言われたら、こう言うしかないです。ブラウザを新しくして下さい……と。

トップへ ／ 次へ ／ 戻る
ライブシネマ