毎週金曜日配信 What's New 2003/4/18
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第48号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
等福フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にしてください。
今週のコンテンツ
■ HTML基本 その10 --- target属性の利用
■ XHTML講座 その10 --- テーブルの作成
■ HTML タグの解説 --- b、em、strong
■ WebMasterへの道 第２回
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML基本 target属性の利用
ネットサーフィンを楽しんでいるとき、新たなウィンドウを開かせるリンクに
遭遇することがあります。自分のページをそのまま表示し、他のページやサイト
にリンクするときに、別の新しいウィンドウで表示させる手法です。
■target属性
そのほとんどが、アンカーに target属性を用いるものです。
<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo Japan！</a>
この記述によって、そのリンクは新しいウィンドウを開かせます。
target属性の値
_blank 現在のページをそのまま表示し、新たなウィンドウでリンクする
_self 今のウィンドウ内でリンクする
_parent 現在のページをそのまま表示し、新たなウィンドウでリンクする
_top フレームを利用している場合、フレームを解除してリンクする
フレームがない場合は _self と同じ
■target属性の功罪
メニューだけを表示するトップページから他のページをすべて新たなウィンド
ウを開かせる手法は、制作者から見れば便利な機能ですが、ユーザはたまった
ものではありません。どんどんウィンドウが開き続け、リソースを消費し、最
後には動かなくなったり、「エラー」を発生させたりします。
国際的な Web規格を制定している非営利組織である W3C（注）では、そのよ
うな理由によって、target属性の使用を控えるように勧告しています。
HTML4.01では非推奨扱いで、XHTML1.1では廃止されています。
ただし、フレームを使用している場合には重要な属性であることには違いあ
りません。リンク先のフレームを指定する場合には欠かすことの出来ない属性
なので、上手に使いましょう。
（注釈用語解説）
W3C（World Wide Web Consortium）
インターネットにかかわる規格を標準化し、HTML、XHTML、XMLなどのマークア
ップ言語を開発・制定・勧告をしている認定機関で、多くのソフトおよびハー
ドメーカーも参加しています。
ここで決定されたことは、すなわち Webの標準規格となっています。世界中
の Web制作者のバイブルとなる多くの文書を発表しており、誰もがその文書を
ダウンロードできるようになっています。
主な構成メンバーは MIT（マサチューセッツ工科大学）、慶応大学、そして
IETF（Internet Engineering Task Force）、CERN（欧州原子力研究所）など。
W3Cサイト http://www.w3.org/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座 --- テーブルによるレイアウト
今回はテーブルを利用したレイアウトについて解説します。その前に XHTMLに
おけるテーブルの特質について述べておきます。この特質を十分理解したうえで、
テーブルによるレイアウト構成の設計をするようにします。
１．ブラウザによってはテーブルのデータの読み込みが完了してからレンダリ
ングする場合があり、表示速度が遅くなる可能性がある。
２．非視覚系ブラウザでは、テーブルのセルの解釈が、横列を上から順に左か
ら右へレンダリング（この場合は、音声読み上げやテキスト表示）するの
で、ユーザがレイアウトを理解できない。
なお Web上の標準仕様を決定する機関 W3Cでは「テーブルをレイアウトに利用
すべきではない」と述べています。その最大の理由が、テーブルはあくまで表組
のために用いられるべきであり、レイアウトのための要素ではないとしているた
めです。
■何故、テーブルを使ったレイアウトはいけない？
テーブルのレンダリングは、その性質からユーザ環境に依存する傾向がありま
す。最近の視覚系ブラウザも性能が上がって、読み込み中でもテーブル表示が
できるようになりましたが、古いブラウザではちょっと辛いものがあります。
ブラウザは、テーブルの最初の横列の横幅領域を読み込んでから全体の表示
を整えるようにします。しかし、後半のセルの横幅によっては、再度調整が必
要になりもう一度整形しなおします。これが原因で表示が遅くなったりします。
また、非視覚系ブラウザでは、例えば音声ブラウザでは最初の横列の左から
右の順に読み上げを開始します。そのため、全体の構成が理解しにくい面があ
ります。
このような観点から、テーブルでレイアウトを表現するのはよくないと言わ
れているのです。
■テーブルでレイアウトする
テーブルの持つ特質を十分に理解した上で、ユーザ環境に依存しないレイアウ
ト表現を設計することはそれほど難しいものではありません。
その点を踏まえて、テーブルを使ったレイアウト表現に挑戦します。次の点
に留意しながら作成します。
１．テーブルの中にテーブルを入れる（ネスティング：入れ子）複雑な構成
を避けるようにする。
２．横列（tr要素）を１列だけで完結するテーブルにする。
３．各セル内のコンテンツを分類して配置する
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTMLの作成
早速、レイアウトを表現するテーブルのページを作りましょう。テキストエデ
ィタ（メモ帳、SmpleTextなど）を起動して以下のようにタイプしてください。
XHTML文書の保存の際には、拡張子「.html」を指定してください。
今回は、外部に置くスタイルシートも作成します。スタイルシートを保存する
際にも、拡張子を「.css」に指定してください。
■XHTML文書
<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!-- 改行なしで記述 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="table.css" />
<title>テーブルによるレイアウト</title>
</head>
<body>
<h1>Banban's Online School</h1>
<div>
<p>Webサイト構築に関わる総合学習を開催しており、新たに４月生の募集を
行っております。当校では、下記の講座を専任の講師によって実施しています。
皆様のご参加を心よりお待ちしています。</p>
</div>
<table cellpadding="0" cellspacing="0" summary="テーブルを使ったレイアウ
トのサンプル"><!-- 改行なしで記述 -->
<tr><td valign="top" id="left">
<dl title="初心者コースのご案内">
<dt>■ 初級コース</dt>
<dd>SGMLとHTML</dd>
<dd>WWWの歴史とW3C</dd>
<dd>HTMLと文書構造</dd>
<dd>文書型定義の基本</dd>
<dd>HTMLの作法</dd>
<dd>ページ作成の実践</dd>
<dd>サーバとファイル転送</dd>
</dl>
<dl title="中級者コースのご案内">
<dt>■ 中級者コース</dt>
<dd>ユーザビリティ</dd>
<dd>アクセシビリティ</dd>
<dd>スタイルシート</dd>
<dd>厳格仕様HTMLの作成</dd>
</dl>
<dl title="上級者コースのご案内">
<dt>■ 上級者コース</dt>
<dd>HTMLとXHTML</dd>
<dd>XHTMLの基本</dd>
<dd>XHTMLの作成</dd>
</dl>
</td>
<td valign="top" id="middle">
<h2>特別講座：<span>WebMaster</span>への道</h2>
<hr />
<p>
ホームページ作りから一歩先に進んだ講座を開催します。ネットワークの
基礎知識、Webサーバの構築、Webデザインと運用の知識など、Webサイトを
維持・管理するための WebMasterとして身につける基本的講座です。
</p>
<hr />
<p><em>■ ネットワークの基本講座</em>
HTTPを始めとするネットワーク・プロトコル、ファイヤーウォールなどの
セキュリティの基本、Webサーバの構築などの講座を予定しています。
</p>
<hr />
<p><em>＜ご注意＞</em>
当講座は定員制ですので、お早めにお申し込みください。
定員になり次第締め切らせていただきます。</p>
</td>
<td valign="top" id="right">
<dl title="JavaScript講座のご案内">
<dt>■ JavaScript講座</dt>
<dd>JavaScript言語仕様</dd>
<dd>オブジェクトを使う</dd>
<dd>命令文の基本</dd>
<dd>関数の作成</dd>
<dd>JavaScriptの作法</dd>
</dl>
<dl title="CGI講座のご案内">
<dt>■ CGI講座</dt>
<dd>HTMLとWebサーバ</dd>
<dd>CGIとPerl言語</dd>
<dd>CGIプログラム入門</dd>
<dd>PHPプログラム入門</dd>
</dl>
<dl title="XML講座">
<dt>■ XML講座</dt>
<dd>SGMLとXML</dd>
<dd>XMLの基本</dd>
<dd>XMLとXSLT</dd>
<dd>データベースとXML</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
入力が終わりましたら適当な名前をつけて保存してください。保存の際には
必ずファイル名に続いて 「.html」という拡張子をつけてください。これによ
って Webページ文書として保存されます。
拡張子は「.html」もしくは「.htm」でなければなりません。
■外部スタイルシート文書（文書名：table.css）
@charset "Shift_Jis";
body {
margin: 0;
padding: 0;
background-color: #fff;
color: #000
}
h1 {
margin: 0.5em 0;
color: #fff;
padding: 5px;
font-family: impact;
font-style: italic;
background-color: #900;
text-indent: 2em
}
h2 {
font-size: 120%;
color: #069;
text-align: center
}
table {
display: block;
margin: 1em 0;
width: 100%;
border-top: 1px solid #000;
border-bottom: 1px solid #000
}
td#left,td#right {
padding: 0.5em;
white-space: nowrap;
background-color: #ffc
}
td#middle {
padding: 1em 0.5em
}
dl {
margin: 1em
}
dt {
font-weight: bold
}
dt:first-letter {
color: #06f
}
dd {
margin: 3px;
padding: 2px 1em;
border: 2px dotted #06f
}
span {
color: #f00
}
em {
display: block;
font-style: normal;
color: #f00;
font-weight: bold
}
div {
padding: 0 1em;
line-height: 130%
}
入力が終わりましたら 「table」という名のスタイルシート文書として保存し
ます。先ほどの XHTML文書と同じフォルダに保存してください。
保存の際には拡張子「.css」を、ファイル名に続けて入力してください。拡
張子を忘れると、正しく表示できません。
実行結果
http://www.scollabo.com/banban/magazine/sample/mmsample_094.html
■ご注意
XHTML構文には、メールマガジンの見やすさから多数の空白スペース利用して
インデント（字下げ）を挿入しています。
もし、構文をコピーして利用する場合には、すべてのスペースを削除してから
お使いください。不用意な空白はブラウザ上での表現に多大な影響を及ぼします。
なお、スタイルシートでは半角スペースで記述していますので、問題になるこ
とはありません。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆解説
新たに読者になられた方のために、従来のメールマガジンで重複した解説があ
ります。ご了承ください。
■XHTMLから
<?xml version="1.0" encoding="Shift_Jis"?>
XML宣言です。基本的に XHTMLは XMLのサブセットのため、XML宣言の記述を強
く求められています。必須ではありませんが、使用する文字符号が UTF-8、あ
るいは、UTF-16以外では宣言するようにしましょう。
（ただし XML宣言をした場合、MSIEでは互換モードとなり、フォントの大きさ
などに影響が出ます。MSIEのバグ？）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTMLの文書型定義の宣言です。XHTMLに限らず、HTMLでも文書の冒頭で使用す
るタグセット（タグの集）がどのバージョンであるかを明示的に宣言しなけれ
ばなりません。省略することができませんので、必ず記述します。
なお、この構文は改行なしで記述してください。メールマガジンの横幅に制
限があるために、改行して表現していますが、本来は１行で記述します。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
名前空間を指定します。名前空間については本誌第35号を参照してください。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
文書情報をHTTPサーバ、あるいはブラウザに伝えるために記述で、文書のMIME
タイプがテキストで記述されたHTML形式で、その文字符号がシフト_JIS形式で
記述されたことを示しています。
<meta http-equiv="Content-Style-Type" content="text/css" />
文書がスタイルシートを利用していることを示します。スタイルシートを利用
する場合には、必須の記述形式です。
なお、meta要素は空要素なので XHTMLでは行末にスラッシュを記述しなけれ
ばなりません。
<link rel="stylesheet" type="text/css" href="table.css" />
外部にあるスタイルシートをこの文書に読み込ませる記述です。ここでは同位
フォルダに table.cssという名のスタイルシート文書を読み込んでいます。
<h1>Banban's Online School</h1>
第一見出しを設定しています。見出しは基本的に「第一」から記述しなければ
なりません。いきなり「第二：h2」や「第：h3」を配置してはいけません。
<div> 〜 </div>
汎用的に用いることが出来るブロックレベル要素です。スタイルシートを利用
するために、あえて使用しました。
<table cellpadding="0" cellspacing="0" summary=" 〜 省略 〜 ">
テーブルを設定しています。セル内の余白、セル間の余白を一切なくしていま
す。summary属性は、非視覚系ブラウザに対してどのような内容の表組なのかを
伝えるためのもので、視覚系ブラウザでは無視されるものです。アクセシビリ
ティ（バリアフリー化）の一環として必ず記述するようにしましょう。
<tr> 〜 </tr>
tr要素はテーブルの横列（行）を設定します。セルを配置する上で必ず記述し
なければなりません。このテーブルでは１列だけ横列を設定しています。
<td valign="top" id="left">
valign="top" は、セル内のコンテンツの垂直方向の位置揃えを上側に設定し
ました。この記述がなければ、コンテンツはセル内の垂直方向の真ん中で配置
されます。
id="top" とは、このセルのみ特定の識別をさせるもので、スタイルシートの
td#left を読み込みます。
<dl title="初心者コースのご案内"> 〜 </dl>
dl要素とは、定義された用語などをリスト化するブロックレベル要素です。
title属性はそのリストがどのような内容なのかを示すもので、一般的な視覚
系ブラウザでは、リスト全対にツールチップが表示されます。なお、この属性
の記述は任意ですので、必ずしも記述しなければならないということではあり
ません。
<dt> 〜 </dt>
定義リストの項目に当たる要素です。なお、補足的な説明は次の dd が受け持
ちます。この要素は基本的に、dl要素内で使われるものです。
<dd> 〜 </dd>
定義済みリストの補足説明を受け持つ要素で、この中には他のブロックレベル
要素を配置知ることが出来ます。
この要素は基本的に、dl要素内の、dt要素直後で使われるもので、単独で使
うことができません。
<span> 〜 </span>
汎用的に使われるインラインレベル要素で、このタグだけでは何もしません。
そのほとんどがスタイルシートによって表現をアレンジするために利用される
比較的自由度の高いインラインレベル要素です。
<hr />
罫線を表示します。この要素の語源はヘアライン（hairline）から来ています。
空要素のため、XHTMLでは行末にスラッシュを記述しなければなりません。
■スタイルシートから
@charset "Shift_Jis";
スタイルシートを記述した文字コードを示し、ブラウザに伝えます。
ただし XHTML文書と同じ文字コードの場合には、省略可能です。
body { margin: 0; padding: 0; background-color: #fff; color: #000 }
ブラウザによってはデフォルト（初期値）として四隅に若干の余白があります。
どれくらいの余白かはブラウザによって異なりますが、この記述はそれらの余
白を一切無くしてしまいます。なお Operaというブラウザは margin ではなく
padding を持っていますので、併記して無くしてしまいます。
背景色は白、文字色を黒としました。
h1 { margin: 0.5em 0; color: #fff; padding: 5px; font-family: impact;
font-style: italic; background-color: #900; text-indent: 2em }
第１見出し要素の左右の余白を０、上下の余白を半文字分とし、コンテンツ内
の余白は上下左右５ピクセルも足せました。
フォントの種類を Impact というフォントにしています。このフォントは、
Windows、Macintoshともに共通したフォントですが、もしこのフォントを持っ
ていない環境では無視され、通常使われているフォント種になります。
文字は斜体、背景色をマルーン（茶系色）、文字色は白、文字位置は左側か
ら２文字分インデント（字下げ）しています。
margin: 0.5em 0 この記述は上下の余白は１文字の半分、左右が０です。
つまり、
属性値が２つの場合には、最初が上下、２番目が左右となります。
属性値が１つの場合は、上下左右を一括で設定します。
属性値が３つの場合は、上、左右、下の順で設定します。
属性値が４つの場合は、上、右、下、左の順で設定します。
この設定は、padding でも同様となります。便利なので覚えておきましょう。
h2 { font-size: 120%; color: #069; text-align: center }
第２見出し要素の文字の大きさを初期値より２割増し、色を明るい紺色として
センタリングして表示するように設定しています。
table { margin: 1em 0; width: 100%; border-top: 1px solid #000;
border-bottom: 1px solid #000 }
テーブル全体の設定を行っています。テーブルの横幅はブラウザ領域の横幅目
いっぱいの 100％、テーブルの左右に１文字分の余白を持たせ、上下に１ピク
セル分の太さを持った黒の枠線を表示しています。
td#left,td#right { padding: 0.5em; white-space: nowrap;
background-color: #ffc }
２つの要素をまとめて設定しています。このように複数の要素に対して、同じ
設定をする場合には、カンマで区切って記述します。
この設定はセル内の余白を半文字分、背景色をクリーム色、そしてテキスト
の自動改行を禁止しています。
ハッシュマーク（#）は識別子をあらわすもので、id属性で指定されたものに
関連付けられます。（ 例： <td id="left"> あるいは、<td id="right"> ）
なお、この識別子で指定された設定は、同一文書内で１回しか使うことが出来
ません。（ただし、複数設定してもブラウザは表示してくれますが、基本的に
は文法違反となります。）
複数設定する場合には、分類を意味するクラス属性として指定します。
識別の設定： td#left { padding: 0.5em; 〜 省略 〜 } id属性による
分類の設定： td.left { padding: 0.5em; 〜 省略 〜 } class属性による
td#middle { padding: 1em 0.5em }
これも識別子を持った設定になっています。セル内の余白を上下に１文字分、
左右に１文字の半分を設定しています。
dl { margin: 1em }
定義リストの要素全体の余白を１文字分に設定しました。
この要素のデフォルト（初期値）は、上下のみ１文字分の余白があります。
dt { font-weight: bold }
定義リストの項目のテキストを強調させました。
dt:first-letter { color: #06f }
定義済みリストにおける最初の１文字を明るい青色に設定しています。この設
定は擬似要素といって、要素名の直後にコロン「：」を記述して設定します。
スタイルシートのレベル２ですので、ブラウザによってはサポートしていない
場合があります。
dd { margin: 3px; padding: 2px 1em; border: 2px dotted #06f }
定義リストの補足説明を加える要素に、コンテンツの外側の余白を３ピクセル
分、コンテンツの内側（この場合は枠線の内側）の上下に２ピクセル分、左右
に１文字分の余白を設定しました。
枠線は、２ピクセルの太さを持った明るい青色の破線としています。
span { color: #f00 }
汎用的に利用されるインラインレベル要素の文字色を赤色に設定しています。
em { display: block; font-style: normal; color: #f00; font-weight: bold }
文字を強調するインラインレベル要素を、見かけ上ブロックレベル要素に設定
しています。
em要素は基本的にはインラインレベル要素なので、本来ならば改行しません
が、display属性の値を block としたために、改行されて表示します。
初期値はイタリック体（斜体）で表示されますが、ここではノーマルに設定
しているので、斜体にはなりません。色を赤色として強調文字としています。
div { padding: 0 1em; line-height: 130% }
汎用的に利用するブロックレベル要素で、この中に配置されるコンテンツの内
側の余白を左右に１文字分設定しました。また、この中のテキストの行間の高
さを１文字の 130％、つまり、文字と文字の間に１文字の30％分の隙間を設け
ました。これにより、テキストが読みやすくなります。
なお、MSIE5.0 では、行間に奇数を設定すると不具合が発生することがあり
ますので、注意してください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆アレンジ
今回のテーブルで構成するレイアウトの表現では、画像を使いませんでした。
タイトルや見出しなどを画像と入れ替えると、より楽しいページになると思いま
す。皆さんで工夫してください。
なお、次週では、一切テーブルを使わずに、今回と同じようなレイアウト表現
の作成を予定しています。ブロックレベル要素をテーブルを使わず、どうすれば
横に並べることができるでしょうか？ お楽しみに。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 --- b要素、em要素、strong要素
いずれもテキストの文字を強調する場合に利用されます。
要素分類：インラインレベル要素
DTD仕様 ：HTML4.01Strict
終了タグ：必須
属性 ：特になし（id、class属性は利用できます。）
子要素として持てる要素：インラインレベル要素のみ
これらの要素はいずれも文字を強調させて表示します。b要素と strong要素は
まったく同じ表示をし、一般的な視覚系ブラウザでは「太字」で表示されます。
ただし、「太字」を表現するものではなく、「強調」を表現するものです。
em要素も「強調」を表すものですが、一般的な視覚系ブラウザでは「斜体」で
表現されます。
b要素の語源は boldから来ており、その名のように文字を太くしますが、この
タグは物理タグと呼ばれるもので、ユーザ環境に影響します。この要素とまった
く同じ働きをする strong要素を利用するようにしましょう。
記述法
<em>文字を強調します</em>
<strong>文字を強調します</strong>
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆WebMasterへの道 第２回
昨年の今頃、当時小学校６年生の私の娘が「ホームページを作りたい」と言い
出した。一体彼女に何があったのか分かりませんが、あまりにも唐突だったので
少し驚いたものでした。
話を聞くと、家で飼っている猫をモチーフにして自分の書いた「漫画」などを
掲載したいということでした。小学生にはありがちなテーマでしょう。
「材料を用意するから、ページを作って」と頼み込まれたので、渋々手伝った
ことがあります。手伝った内容は言われた通りにHTMLをコーディングするだけで
コンテンツには一切口を出しませんでした。
本人の希望通り CGIを利用してアクセスカウンターも貼りつけ、契約している
プロバイダの Webサーバにファイル転送して完了、そしてちょうど１年後の今、
アクセスカウンターは「見事」にその数を増やすことが出来ませんでした。
最初の頃は毎日、自分のページにアクセスしてカウンターの数字をチェックし
ていましたが、自分のアクセスだけで他の訪問者は１人もいなかったのです。
「どうして私のホームページに人が来てくれないの？」
■アクセスアップを目指すために
娘のサイトには一貫したデザインがありません。ポリシーもコンセプトもなく
単純に自分の作った「漫画」を掲載するだけの他愛のないものです。
偶然訪れた人も、「なんだこりゃ？」で終わってしまい次はありません。
アクセスアップだけがホームページの目的ではないのですが、まったくアク
セスがないというのも問題です。アクセスカウンターの数字が上がるのは制作
者にとって励みになることも事実です。では、どうすればアクセスアップが望
めるでしょうか？
何といってもコンテンツそのものがアクセスアップの主体です。
そこで、私から提案を出しました。「猫に関するあらゆる情報を集めろ、飼
育法、生態、由来、血統、何でもいいから猫と名づく情報を徹底的に集めろ」
娘は図書館通いや新聞の切り抜きを始めました。インターネットからの情報
収集は最初から禁止しました。独自性がなくなる危険があったためです。
次の私からの提案は、猫好きの人たちにとって知りたい情報とは何かを、集
めた情報から抽出し整理させることでした。
情報はどんなに時間がかかっても本人にテキスト形式で入力させました。
１．猫の生態（他の動物との相違点を含む）
２．猫が自分の感情を知らせる合図
３．猫のしつけ
４．猫の病気と対処法
５．猫に関するＱ＆Ａ
６．猫に関するリンク
これらを分類すればページが出来るでしょう。後は、猫好きのためのコミニ
ティをうまく運用できればかなりのアクセスは望めるかもしれません。デザイ
ン（設計）は私と共同で行うことにしました。
■デザイン制作
今回のサイト全体のコンセプト（理念）は、猫に関する総合的な情報の提供で
す。そして、サイト訪問者とのコミニケーションを目指しながら、さらにサイ
ト全体を成長させていくものです。
そのコンセプトテーマに基づいて、以下のような設計となりました。
１．トップページは、20KB前後の軽量を目指し、各ページへリンクする「玄関」
となるようにナビゲーションを工夫する。
２．各ページには統一した色使いや、配置などを織り込んで、各テーマを明確
に提示する。極力ページを軽くするために写真などを多用しない。
３．ナビゲーションは統一した方法を用意する。
４．子供らしくスクリプトなどの手法は一切使わない。
５．言葉遣いは生意気と思われないように普段の言葉を使う
６．トップページ以外はすべてカテゴリ別のディレクトリに分類する
ページの表現方法は、自分が気に入った他のサイトを観察することによって
最初は「真似」から入るように薦めました。ただし、丸っきり「真似」では能
がありません。いくつかのサイトを巡り、これはというものの画面をノートに
写し取り、自分なりに工夫して「真似」するように提案しました。
いわゆる世のプロフェッショナルなデザイナーと呼ばれる人たちは、すべて
真似から始まっています。そこから学び、習得したことから自分なりのデザイ
ンの能力が開発されていくものです。
真似をすることは悪いことではありません。ただし、すべて真似のままで終
わってはまったく意味がありません。真似をすることで感性を磨き、少しずつ
自分流を注ぎ込むことが大切なのです。
あわせて新聞の折り込み広告、雑誌、ポスターなどを観察し、色使いや構成
などのデザインを学ぶことも大切なファクターになることを説明しました。
デザインとは、個人がそれぞれ持っている「感性」にほかなりません。今は
たいしたことがなくても、修練を積むことによって、やがて誰にも負けないも
のが創れるんだと、自分を信じることが大切です。
（私の場合は、その能力がないものだとすっかり諦めています・・）
■ソフトとハードウェアの手配・素材の加工
中学生になったばかりの彼女には、新しいソフトウェアを買う能力がありませ
ん。そこでインターネット上で公開している無料のソフトをダウンロードして
使わせることにしました。
パソコンは家族で共有して使っている少し古いスペックのマシンを利用する
ことにします。古いといっても中学生が使うには十分すぎる能力を持っていま
す。お金をかけなくてもホームページ作りは出来ます。
写真やイラストはすべて自分で作ることが肝心です。著作権の法的な問題も
あるので、すべて自作するように提言し、慣れないマウス操作で絵を描き始め
ました。利用する色数を極力少なくし、絵の容量が増えないように工夫します。
■HTMLコーディング
HTMLの記述は私が担当しました。まだまだ中学生になったばかりでは、満足な
コーディングは出来ません。「肩たたき 100回」と交換です。
不思議なもので、HTMLの記述は個人の「性格」や「クセ」が出てしまうもの
です。HTMLに限らず、プログラミングすべてに言えることですが、どこかしら
必ず、「個人」を特定する足跡みたいなのが読み取れることがあります。
これは仕方のないところです。「クセ」は、ある意味では、効率を上げるた
めの手段として自分なりに「開発」した手法なのですから、これが悪いという
ことではありません。
何も特徴のないものよりは、多少のクセは歓迎すべきなのかもしれません。
今回はHTML4.01Transitionalを採用して、子供が書いたHTMLのように配慮し
て書くことにしました。（これもけっこう大変です。）
いずれ、HTMLも教えていく予定です。
■Webサーバの手配
次に Webサーバの手配です。今まで契約していたプロバイダの利用を終える
予定なので、新たなサーバが必要になってきました。無料で Web領域をレンタ
ルしているサーバもありますが、その代わり広告が掲載されてしまうこともあ
るので、慎重に選ばないといけません。
有料サーバも含め経済的な負担を考慮して選択することになります。
■まとめ
現在の段階はHTMLの作成です。まだまだ足りない素材があるので、平行して作
成しています。
今回の一連の過程の中で、彼女なりにホームページ作りの難しさや楽しさが
実感できたと思います。いずれそう遠くない日には自分ですべてができるよう
になるでしょう。
企画と立案・設計・作成・運用・保守と維持。 WebMasterに求められる最低
限の能力を身につけることは簡単ではありませんが、困難なことでもありませ
ん。何よりも楽しむことが大切です。苦痛と感じたら長続きはしません。
なお、我が娘の Webサイトが完成した折には、改めてご案内いたします。
（つづく）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_048.html
次回は、コンテンツのフローティング（浮遊）について詳しく解説します。今
回作成したテーブルによるレイアウト表現と同じような表現をテーブルなしで作
成します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆更新情報
当サイトのトップページを大幅に変更しました。一部、ナビゲーションも未完
成ながら、ユーザが利用しやすいように変更しております。
また、幾つかのスタイルシートを変更し、サイトのイメージカラーを緑色から
ややくすんだ青色に変更しました。色を変更しただけでも、サイト全体の印象が
ガラっと変わったことを実感できるでしょう。
今回のトップページの大きな変更点は、テーブルを使わずにレイアウトを表現
しました。この手法については、次週の講座で予定しております。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・るーむ＞
このところインターネットで知り合った人たちの集団自殺が相次いで、今年に
なって既に12人もの若い命を自ら絶っています。ネットがこんなことに利用され
ているなんて・・
人間、生きていればやがて死ぬわけです。考えてみれば、生き続けているとい
うことは死に向かっていることと解釈できないわけでもありませんが、何も若い
世代に「死」と直面しなくてもいいのだが、と思います。
私も何度か死にたいと思ったことがあります。それでも死ななかったのはきっ
と「死」に対して臆病だったからなのでしょうか。恥ずかしいながら今日まで行
き続けています。
まだまだ「死」とは直面することはないと思いますが、年を取っていくと、私
の親族や回りの人の「死」に出会うことが多くなっています。いずれ誰でも死ん
でいくことは分かっていても、死ぬために生きているんじゃないんだと「死」の
場面に出会うたびに、強く強く思い返されます。
明日のことは分からないけど、明日も生きているんだということは誰も意識し
なくてもそう思っているハズです。明日死ぬなんてことは考えたこともないのが
当たり前の姿でしょう。
でも、「明日死ぬ」と宣言して、実際に自殺してしまった人たちを責める気は
ありませんが、絶対に同意することはできません。
「オレの命なんだから、どうしようと勝手じゃないか」という理屈は分かりま
すが、「あんたが生きてこられたのは、あんた１人の力じゃないだろうが」と言
いたくなります。
自殺していった人たちの家族の方や友人に同情します。決して自殺を美化して
はいけません。自殺に追い込む要因こそ憎むべきでしょう。
シュールな話になってすみません。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com