毎週金曜日配信 What's New 2003/4/4
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第46号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
等福フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にしてください。
今週の課題 ■ HTML基本 その10 --- 色の扱い
■ XHTML講座 その10 --- テーブルの作成
■ HTML タグの解説 --- abbr、acronym
■ WebMasterへの道 第１回
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML基本 色の扱い
ページを彩る効果的な手法に「色」を使うことは、日常的に行われています。
色には様々な「色調」があり、ページの性格付けに大きな役割を持っていると言
っても過言ではありません。色による視覚的な効果は、歴史的にも証明されてい
ます。
通常、HTMLで利用する場合の色の指定は、16進数で行い RGB（赤、青、緑）の
３原色が基本となっています。
コンピューターにおける色の表現は「発色」が前提となっており、３原色とは
光が持つ３つの原色で、それぞれの色の発色の度合い（各 256段階）によってデ
ィスプレイモニターに描かれます。
１つの原色は 0〜255段階で、16進数では 00〜FFと表現します。16進数は17で
桁上がりをします。10進数とは異なってアルファベット A〜F を利用します。
10進法 １ ２ ３ ４ ５ ６ ７ ８ ９ 10 11 12 13 14 15 16
16進法 ０ １ ２ ３ ４ ５ ６ ７ ８ ９ Ａ Ｂ Ｃ Ｄ Ｅ Ｆ
16進法は０から始まりＦで繰り上がり 17 は 10 となります。色の数値は２桁
で表わされていますので、00〜FFまで使われます。したがって、FFは16Ｘ16とな
り、256になります。つまり、8ビットであることが分かります。（2の8乗＝256）
これをもとに計算すると、指定できる最大色数は24ビットの、
256Ｘ３乗 ＝ 16,777,216色 となります。
最近のパソコンではほとんどが24ビットに対応しているので、問題ありません
が、少し古いパソコンですと、16ビットまで、もう少し古いと 8ビットまでしか
対応していないものがあります。
このため、どのような環境にもほぼ再現できる色として Web Safe Color とい
われる Web上で安全に利用できる 216色を定めています。
（ただし、ユーザのディスプレイの種類や OSによって若干の違いがあります。）
Web Safe Color/カラーチャート一覧
http://www.scollabo.com/banban/lectur/websafe.html
■色の設定
HTMLやスタイルシートの属性では、色の指定に「#000000」とか「#FFFFFF」とい
った16進表記によるカラー指定を行います。これはRGBカラーのR、G、Bのそれぞ
れに 00(0)〜FF（255)までの256段階で数値を指定して「#：ハッシュマーク」の
あとに RRGGBB の順に２桁ずつ指定します。
例えば、
<body bgcolor="#ffffcc"> （HTML4.01 非推奨扱い）
<body style="background-color:#ffffccc"> （CSS利用）
この記述は、どちらも背景色を指定しています。
最初の２桁 赤（R）の発色の指定 256の度合い
真中の２桁 緑（G）の発色の指定 256の度合い
最後の２桁 青（B）の発色の指定 169の度合い
通常は、このように16進数２けたずつ計６桁で記述します。
スタイルシートでは RGBを１桁ずつ計３桁で記述することも可能です。
<body stylr="background-color:#ffc">
ただしこの場合は、16の３乗＝4096色しか指定できません。
色を使ったページを作成する場合の注意点は、コントラストに十分な配慮を講
じるようにしてください。特に背景色と文字色の明確なコントラストが中途半端
ですと非常に見えづらくなります。また、液晶モニターとブラウン管式モニター
では、色の見え方が微妙に異なりますので、中間色の扱いには十分注意しなけれ
ばなりません。
また、Windows と Macintoshでは、ガンマ値が異なります。ガンマ値とは明る
さを示す単位で、Windows のほうがやや暗く見えるはずです。
色を使う場合には、是非とも「あなたの色」をモチーフにしてください。サイ
ト上の各ページに統一した配色は、サイトの好印象と提供する情報をよりいっそ
う強く訴求できることでしょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座 --- テーブルの枠線表示
今回はテーブルで表示する枠線について解説します。意外と奥の深い設定とな
っています。枠線表示を示す属性の中で、ブラウザによってはまったく解釈が異
なり、混乱することが多々あります。そういった解決法を含めて今回の講座を進
めていきます。
また、あわせてテーブルにおける背景色の設定も解説します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆枠線表示を設定する属性
以下に示した属性とその値は、いずれも table要素中で記述するものです。
■ border
属性値はピクセル単位を示す数値で、指定されたピクセルの太さの枠線を、す
べてのセルに表示します。なお XHTMLでは、必ず値を表示しなければなりませ
ん。
なお、HTMLでは属性値を省略することができますが XHTMLでは必ず属性値を
記述しなければなりません。
記述法
<table border="1" summary="サンプル">
この属性を用いて枠線を表示する場合、セルとセルの間の余白は取り去ったほ
うが見栄えがよいものです。また、枠線とコンテンツが近すぎて窮屈な場合に
は、セル内の余白を広く取るといいでしょう。
記述法
<table border="1" cellspacing="0" cellpadding="3" summary="サンプル">
■ frame
テーブル全体を囲う外枠のうち、上下左右のどの枠を表示させるかを指定しま
す。なお、ブラウザによっては表示方法が異なります。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
MSIE（注）各横列、縦列の上下左右に枠線を表示します。
Netscape テーブル全体の上下左右に枠線を表示します。（標準）
Opera 何も表示しません。（サポートしていない）
属性値は以下のとおりです。
void 枠線なし(デフォルト）
above テーブル全体の上側のみ枠線を表示
below テーブル全体の下側のみ枠線を表示
hdides テーブル全体の上下のみ枠線を表示
lhs テーブル全体の左側のみ枠線を表示
rhs テーブル全体の右側のみ枠線を表示
vsides テーブル全体の左右のみ枠線を表示
box テーブル全体の上下左右に枠線を表示
border テーブル全体の上下左右に枠線を表示
記述法
<table frame="below" summary="サンプル">
■ rules
テーブル内のセルを区切る上下左右の境界線のうち、どの線を表示するかを指
定します。なお、ブラウザによっては表示方法が異なります。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
MSIE テーブル全体を含む各セルのいずれかに枠線を表示。
Netscape 各セルのいずれかに枠線を表示します。（標準）
Opera 何も表示しません。（サポートしていない）
属性値は以下のとおりです。
none 枠線なし（デフォルト）
group thead、tbody、tfoot、colgroup などの境界線に枠線を表示します。
rows 横列の境界線に枠線を表示します。
cols 縦列の境界線に枠線を表示します。
all すべての境界線に枠線を表示します。
記述法
<table rules="group" summary="サンプル">
各属性の表示に関するサンプルは、こちらを参照してください。
あなたのブラウザではどのように見えますか？
http://www.scollabo.com/banban/magazine/sample/mmsample_086.html
上記の属性のうち、border属性以外はブラウザによって表示が異なるのでは、
実際のところ使い物にはなりません。そのための解決方法はスタイルシートしか
ありません。基本的に XHTMLをサポートしている視覚系ブラウザでは間違いなく
スタイルシートもサポートしています。
（注）MSIE（MicroSoft Internet Explorer）
MSIEとは、マイクロソフト社のブラウザ Internet Explorer の意味です。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆枠線の色
HTMLでは、MSIEの独自仕様とし bordercolor属性があり枠線に色を表示するこ
とができます。ただし、他のブラウザでは表示できません。しかし XHTMLでは、
ブラウザの独自仕様を利用することができません。
特に、XHTML1.1は、文書が論理的な構造を記述するもの、とされているので、
見栄えに供する要素や属性は利用できません。枠線に色を表示させるための唯一
の方法は、スタイルシートしかありません。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆テーブルにおける背景色の設定
テーブルにおける背景色の設定には、テーブル全体の背景色、横列や各セルの
背景色の設定などが挙げられます。HTMLでは非推奨ながら以下の属性が利用でき
ました。
bgcolor 背景色を16進数の記述で設定します。
記述法： <tabel bgcolor="#ffffcc">
残念ながら XHTMLではこの属性は利用することができません。唯一背景色を設
定する方法は、やはりスタイルシートしかありません。
背景色を用いる注意点は背景色とテキストのコントラストに注意しなければな
りません。同似色を用いる場合には特に注意してください。ユーザ環境によって
はまったく見えなくなる可能性もあります。これはテーブルに関したことだけで
はありません。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆テーブルの作成
それでは XHTML1.1による 枠線、枠線の色、背景色を表示するテーブルを作成
します。テキストエディタを起動して、以下の XHTML、スタイルシートをタイプ
してください。
なお、構文は見やすさを主体としていますので、半角や全角の空白があります。
このままコピーして作成しますと、不要な余白が発生する場合があります。ご自
分のスキルアップのために、ご面倒ですがキーボードよりコツコツと入力するこ
とを強くお薦めします。
構文は先週のセルの連結に使用したものを若干変更しています。
■XHTML1.1文書
<?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" href="table.css" type="text/css" />
<title>テーブルのサンプル</title>
</head>
<body>
<table cellpadding="5" cellspacing="0" summary="枠線と背景色のサンプル">
<colgroup>
<col width="100" />
<col span="5" width="80" />
<col width="90" />
<col width="80" />
</colgroup>
<thead>
<tr><td>氏名</td>
<td>国語</td>
<td>数学</td>
<td>英語</td>
<td>歴史</td>
<td>小計</td>
<td>平均点</td>
<td>備考</td></tr>
</thead>
<tfoot>
<tr><td>平均点</td>
<td>54点</td>
<td>56点</td>
<td>60点</td>
<td>41点</td>
<td>210点</td>
<td>52.5点</td>
<td>−</td></tr>
</tfoot>
<tbody>
<tr><td>田中さん</td>
<td>60点</td>
<td>65点</td>
<td>73点</td>
<td>40点</td>
<td>238点</td>
<td>59.5点</td>
<td>追試</td></tr>
<tr><td>鈴木さん</td>
<td>84点</td>
<td>46点</td>
<td>90点</td>
<td>68点</td>]
<td>288点</td>
<td>72点</td>
<td>合格</td></tr>
<tr><td>中村さん</td>
<td>48点</td>
<td>82点</td>
<td>55点</td>
<td>50点</td>
<td>235点</td>
<td>58.8点</td>
<td>追試</td></tr>
<tr><td>ばんばん</td>
<td>24点</td>
<td>30点</td>
<td>25点</td>
<td>5点</td>
<td>79点</td>
<td>19.8点</td>
<td id="redcell">落第</td></tr>
</tbody>
</table>
</body>
</html>
■外部スタイルシート文書（table.css）
@charset "Shift_Jis";
td {
text-align: center
}
thead {
background-color: #090;
color: #fff;
font-weight: bold
}
tbody td {
border-bottom: 1px solid #009
}
td#redcell {
background-color: #f00;
color: #fff;
text-align: center
}
実行結果
http://www.scollabo.com/banban/magazine/sample/mmsample_087.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆解説
■XHTMLより
<?xml version="1.0" encoding="Shift_Jis"?>
XML宣言です。XHTMLが XMLのサブセットであるために記述します。なお使用す
る文字符号コードが、UTF-8、UTF-16 の場合は省略が可能です。できるだけ記
述することが、強く求められています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML1.1の文書型宣言です。文書がどのバージョンの XHTMLを利用するのかを
明示的に宣言しなければなりません。必須項目です。
なお、メールマガジンの横幅に制限があるため、改行して表現していますが
実際には、改行なしで記述してください。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
名前空間を指定しています。XHTMLが、XML文書であるために、どの名前空間を
利用するのかを明示的に記述しなければなりません。
名前空間とは、タグの集合（タグセット）の意味がある場所を示します。
詳しくは、当サイトの XHTML講座「DTDと名前空間」を参照してください。
http://www.scollabo.com/banban/senior/basic/bc_03.html
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
meta要素で用いられる文書の情報は、HTTPサーバ、あるいはブラウザに伝えら
れます。ここでは、文書がテキストで記述されたHTMLであること、使用してい
る文字コードが、Shift_Jis であることを、主にブラウザに伝えています。
なお、この構文は、実際に非アスキー文字（注１）である日本語が出現する
前に配置しなければなりません。
<link rel="stylesheet" href="table.css" type="text/css" />
外部にあるスタイルシートを参照に、文書に読み込ませます。なお、この場合
は、同位ディレクトリ（フォルダ）にスタイルシートがあることを示していま
す。 XHTMLでは、HTMLのように文書内にスタイルシートを記述することが困難
なため、基本的に外部に置くよう推奨されています。
<table cellpadding="5" cellspacing="0" border="1"
summary="枠線と背景色のサンプル">
メールマガジンの横幅の制限があるため改行していますが、実際には改行なし
で記述してください。
セル内の余白を５ピクセル、セル間の余白は取り除いています。この記述が
ない場合、ブラウザが自動的に余白を設定してしまいます。
summary属性は、非視覚系ブラウザに対して、どのようなテーブルの内容な
のかを説明します。アクセシビリティを確保する上で、必ず記述します。
<colgroup> 〜 </colgroup>
この内容については、別途詳しく解説していますので参照してください。
<thead> 〜 </thead>
この要素で囲まれたテーブルの横列をまとめてグループ化します。この要素は
テーブルのヘッダ部分としてグループ化し、テーブルの最上位に表示します。
なお、必ず記述しなければならないというわけではありません。
<td> 〜 </td>
テーブルは基本的にセルの集合で構成されています。そのためテーブル内では
最低１個以上のセルがないといけません。この要素は、データが記述されたセ
ルであることを意味し、データセルと呼ばれます。なお、th要素はセルがヘッ
ダとして利用されることを意味しています。
<tfoot> 〜 </tfoot>
テーブルのフッタにあたる部分を設定します。この要素で囲まれた横列は、テ
ーブルの最下部に表示されます。
<tbody> 〜 </tbody>
テーブルの本文に当たる横列をまとめてグループ化します。複数の行をグルー
プ化できます。
この要素の記述がない場合、ブラウザ側で補完する場合があります。なお、
必ず記述しなければならないというわけではありません。
■CSS（スタイルシート：Cascading Style Sheet）より
@charset "Shift_Jis";
スタイルシートを記述した文字コードを示し、ブラウザに伝えます。
ただし XHTML文書と同じ文字コードの場合には、省略可能です。
td { text-align: center }
すべてのセル内のコンテンツの水平方向の位置を中央揃え（センタリング）す
るための設定です。
thead { background-color: #090; color: #fff }
テーブルヘッダとしてグループ化された範囲の背景色を緑色、文字色を強調し
て白色に設定しています。他のグループ化されたセルには反映しません。
tbody td { border-bottom: 1px solid #009 }
この設定は、tbody要素内の td要素のみに適用する設定です。何故このような
設定にしたのかというと、td要素だけではすべてのセルに反映してしまいます。
tbody要素だけに設定すると、tbodyグループ内のセルの下側にしか枠線が表
示されません。そのために「条件」をつけて設定したものです。
各セルの下側に、１ピクセルの幅を持った濃い青色の枠線を設定しました。
td#redcell { background-color: #f00; color: #fff }
特定のセルのみを設定しています。背景色を赤色、文字色を白色に設定しまし
た。特定のセルとは、id属性で示された１つのセルのことです。ハッシュマー
ク（#) を用いたスタイルシートは、id属性にのみ反映するもので、基本的に
１つの文書中で１回しか利用することができません。
複数利用したい場合には td.redcell というように、ドット（.）を使って
クラス属性に設定する必要があります。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆colgroup要素 と col要素の補足説明
テーブルの縦方向の列をグループ化する要素について補足させていただきます。
私の説明不足もあって、少なく読者の方が誤解されているようです。
colgroup
この要素は、表の縦列を構造的な意味でグループ化します。何列分の縦列をグ
ループ化するかは、span属性で列数を指定します。
<colgroup span="4" width="100"></colgroup>
つまり、
├───────┼───────┼───────┼──────┤
│← 100px → │← 100px → │← 100px → │← 100px →│
│←─────────── span="4" ───────────→│
となるわけです。
この場合、個々の列を指定するわけではなく、まとめて設定します。
個々の列を細かく分けて設定する場合には、この要素内で col要素を記述します。
例えば、
<colgroup>
<col span="2" width="80" />
<col width="100" />
<col width="80" />
</colgroup>
つまり次のような図式になります。
├──────┼──────┼────────┼─────┤
│← 80px → │← 80px →│←─ 100px ─→ │← 80px →│
│←─── span="2" ──→│
col要素で個々に設定した場合には、colgroup要素では設定することができま
せん。文法違反となってブラウザによっては無視されます。
なお、Netscapeなど、ブラウザによっては、個々に設定した列の横幅を無視
されてしまう場合があります。おそらくバグと思われます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 abbr と acronym要素
両者の要素が示すものは「略語」というキーワードがあり、その意味を title
属性によって明記するものです。
要素分類：インラインレベル要素
DTD仕様 ：HTML4.01Strict
終了タグ：必須
属性 ：title="略語の説明"
子要素として持てる要素：インラインレベル要素のみ
特徴 ：ブラウザによってはツールチップが表示されたり下線を表示する
この要素の大きな特徴は略語を示すものですが、少し意味合いが異なります。
abbr ：発音できない略語を説明する
acronym ：発音できる略語を説明する
例： <abbr title="World Wide Consortium">W3C</abbr>
<acronym title="Local Area Network">LAN</acronym>
通常略語とは各単語の頭文字を取った、いわば頭字語と云われるものです。
この頭字語には、言葉として発音できるものと、うまく発音できないものがあり
ます。
例えば「LAN」という略語は「らん」と発音できますが、「W3C」という略語は
発音できません。両者の違いを理解して使用するようにしましょう。
これらの要素は、視覚系ブラウザではツールチップなどが表示され、ユーザに
略語の意味を伝えます。非視覚系ブラウザでは、略語の意味を明示し音声や点字
あるいはテキストなどでユーザに伝えられます。
両者とも、ユーザビリティを提供するための要素で、難しい略語の意味を具体
的に解説することで、「使いやすい」ページを構築します。
なお、この要素は当サイトのトップページで活用しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆WebMasterへの道
今回より不定期にウェブマスター（WebMaster）を目指す人たちのために、私
なりの経験と偏見に満ちた独自の所感を綴るコラムを掲載します。Webサイト構
築のためのヒントとなれば幸いです。
■WebMasterとは？
日本のインターネット人口も5000万人を越え、誰もがインターネットを使う
時代になりました。ブロードバンド回線の普及も急激なスピードで進んでいま
す。政府の推進する e-Japan計画は直実に成果を挙げています。
そうした中で、一般の個人が自らの「意見」や「情報」をコンテンツとした
サイトの構築が非常な勢いで進んでいます。今やホームページを立ち上げるこ
とは、「特別」なことではなくなりました。
個人では、HTMLのコーディング、画像やプログラムの作成、サイトのデザイ
ンなどいった「サイト構築」に関するすべての作業を、たった１人で行ってい
るのが現状です。企業ベースでは考えられないことです。
それはすなわち、無意識のうちで WebMasterの入り口に立っていることを現
わしています。
WebMaster とは、直訳すれば「ウェブサイトの主人」となります。一般企業
においては「ウェブマスター」はホームページを作るわけではありません。基
本的には Webサイト全体のデザイナーであり、プロデューサーでもあります。
それぞれの作業を WebMasterの命じるままにそれぞれの「プロ」たちが分業し
て制作しています。
WebMaster は、それぞれの作業に精通していなければなりません。クライア
ント（サイト構築の依頼人）の意向を尊重し、計画、立案して予算を立てます。
必要な機材やサーバを用意し、ソフトウェアを手当てし、スケジュールを決め
てから作業者に細かく指示します。
その様子はまるで、システム開発のSE（システムエンジニア）のようです。
■個人ベースのサイト構築
では、一般の個人ではどうやってページ作り、つまりサイト構築を始めるでし
ょうか？
いきなりHTMLをコーディングする。そりぁ、あなた無茶というものです。何
よりも先に必要なのはデザイン（設計）です。HTMLは副次的な作業です。
デザイン構築の前の確認作業として、次の点に留意しましょう。
１．ホームページを作る動機を維持することができますか？
２．あなたが作りたいページのテーマは何ですか？
３．それは訪れるユーザにとって有益ですか？
４．それは訪れるユーザに共感を得られますか？
ホームページを作る、ということ動機は人それぞれです。それぞれに目的が
あるからこそ、大変な作業をいとわないのでしょう。
その動機、つまり目的を達しようという強い気持ちを待ち続けることができ
るなら、必ずできます。これは WebMasterを目指す上で大切なことです。
●情報の収集
テーマが決まったら、それに付随する情報を集めます。常日頃から関係する新
聞記事を切り抜いてスクラップブックに貼り付ける、図書館に行く、本屋で立
ち読みをする、インターネットから集めるなど、情報を集める手段はその気に
なればいくらでもあります。
情報を集めたら、分類します。それぞれの情報のカテゴリや性質の違うもの
を細かく分けて分類します。
●素材の作成
テーマに即した画像などを集めます。なるべく自分の手で作るようにしましょ
う。多くの Webページから無断で借用してはいけません。著作権という法律に
抵触することは避けなければなりません。
当然、画像を編集するソフトウェアやデジタルカメラなどのハードウェアは
必要になります。カメラは友人から積極的に借りることができても、ソフトだ
けは複製して使うことは許されていません。
優れたフリーソフトがありますので、インターネットを駆使して入手しまし
ょう。お金がある方は買ってください。高価ですが豊富な機能を持ったソフト
がたくさんあります。
●編集
分類した情報を元に、自分なりに編集しなければなりません。集めた情報を何
も加工せずそのまま使うのも、著作権に触れます。自分の言葉で文章を組み立
てなければなりません。難解な用語は誰でも理解できるように噛み砕いて説明
することも大切です。
編集した情報は、パソコンで入力しテキストとして保存しておきましょう。
後々自由に使い回しができます。
●デザイン（設計）
テーマが決まり情報や素材などが集まったらデザインです。カテゴリに分類し
た分だけディレクトリ（フォルダ）を作ります。各ディレクトリの名前を決め
ておきましょう。当然ながら半角数英字です。
各ページで共通したナビゲーション（リンクの形式と表示）をデザインしま
す。文字の大きさや行間、統一した配色、画像とテキストの配置や構図なども
あらかじめ決めておきます。
デザインはイマジネーションです。個人の感性が一番表われるものです。世
界中にある Webサイトを巡りながら参考にするのも方法でしょう。特に海外の
サイトでは秀逸なデザインを見せてくれるでしょう。
●HTMLコーディング
いよいよページの作成です。デザインさえしっかりできているのなら、HTMLを
書き上げるのはそれほど難しいものではありません。一気に作成できます。
私も一番時間をかけるのがデザインです。悩むときには２〜３日間、何もで
きないことも多々あります。ですが、HTMLコーディングは１ページ１時間もか
かりません。ページによっては10分くらいで完成します。やはりポイントは、
デザインです。デザインこそがページ作成の可否を決めます。
HTMLのヘッダ部分は大きく変わることがあまりないと思います。この部分だ
けをテンプレートとして別に保存しておくと便利です。作成時の効率が上がり
ます。
また、各ページで統一したナビゲーションのデザインもテンプレートとして
残しておくもの利用価値があります。
■運用と維持
WebMaster には、サイト構築だけで終わるわけではありません。実はこれから
が大変なのです。
企業サイトでは、第３者からの攻撃や不正アクセスには非常に神経を使い、
セキュリティの構築には相当の費用を惜しみません。特に、オンラインショッ
ピング・サイトでは、サーバ停止の時間が長くなれば、その被害も莫大になり
ます。こういったサポートも WebMasterの仕事です。
個人ベースでセキュリティまでと考えるのは、自宅に Webサーバを置く場合
には当然ですが、多くはプロバイダやフリーのサーバを利用しているので、あ
まり意識することはないと思います。（ただし、迷惑メールは増える・・）
それでもページを訪れたユーザからメールが来る場合には、迅速に対応しな
ければなりません。人気サイトはこれだけでも大変らしい・・
また、アクセスがあまりみられない場合には、検索サイトなどに登録したり
掲示板の書き込みをしたり、これも大変な作業です。それでもアクセスアップ
が望めない場合には、思い切ったページ更新作業をする必要もあります。
アクセス数が上がっても、やはりページの更新作業は欠かせません。どれく
らいのスパンで更新したらよいのか分かりませんが、私の経験からして、大体
が６〜10ヶ月でしょう。これは結構つらい作業です。
ニュース性の高いテーマを扱う場合には、ほぼ毎日、あるいは１週間に１度
の更新作業が要求されます。個人ベースではまず無理でしょう。
WebMaster はサイト構築までのスケジュール管理と、その後の運用のスケジ
ュール管理も当たり前の仕事です。
次回（第48号で予定）は、私の娘がホームページ作成する上で、どのような
経過をたどったのかをお話します。
（つづく）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_046.html
次回は、JavaScript講座で、乱数とマナーについて解説する予定です。あわせて
コンピュータ・ウィルスについても取り上げる予定です。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ 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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・るーむ＞
今日の天気予報を見る限りでは、北海道はまだまだ気温が低く、春は名のみと
いう印象があります。
このところめっきり体調を崩し、体重がベストのときより10キロ以上（！）も
減ってしまいました。現在、身長 172cm、体重 44Kg 。これは非常に異常なこと
で、何かイヤな感じがします。太るコツがあったら教えてください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com