毎週金曜日配信 What's New 2002/7/5
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第８号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、
どちらかというとやや専門的な作業が中心になります。各種の専用のオーサリン
グソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みいただくと快適に読めるようになります。
今週の課題■アンカー（リンク）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆アンカー
Web 制作において、ページ同士、あるいは他のサイトへのリンクはまさにハイ
パー・テキストの最たるところです。今回はアンカーの記述方法について詳しく
解説します。
アンカー（リンク）を実行させるには最低２つのページが必要です。さっそく
２つばかり作ってみましょう。テキストエディタ（メモ帳やSimpleText）などを
起動して次のようにタイプしてください。ま、そんなめんどくさがらず・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>１ページ目</title>
</haed>
<body>
<p>これは１つ目のページです。<br>
<a href="page2.html">２ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったらHTML文書として保存します。半角小文字で
page1.html と拡張子 .htmlを忘れないようにしてください。
もう１つHTML文書を作ります。
同じくテキストエディタで新規に、次のようにタイプします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>２ページ目</title>
</haed>
<body>
<p>これは２つ目のページです。<br>
<a href="page1.html">２ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったらHTML文書として保存します。同じように半角小文字で
page2.html として、同じフォルダに保存します。保存が終わったら先に作った
HTML文書、page1.html をダブルクリックしてブラウザでみてください。リンク
が貼られて通常、青色で表示され、マウスを近づけると手の形になるはずです。
試しにクリックしてください。すると２つ目に作った文書が表示されます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
<a href="peag2.html">２ページ目</a>に移ります。
a要素はアンカーと呼び、href属性によって指定されたURL(Universal Resource
Locator) へ飛んで、画面に表示します。この場合は、page2.html にリンクする
ことになります。ご存知のようにアンカーは錨の意味です。
ブラウザの初期設定では、アンカー要素に囲まれた部分が未訪問の場合は青色
訪問済みでは紫色で、なおかつ下線付きで表示されます。
この設定は、自分の思うような表示にすることが可能です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆アンカーを自分流に仕上げる
先ほども説明したとおり、アンカーで囲まれた部分の色とかテキストのスタイ
ルを自分の好みで仕上げることができます。スタイルシートを使って自分流のア
ンカーに仕上げます。
では、作ってみましょう。テキストエディタを立ち上げ、新規にHTML文書を作
成します。次のようにタイプしてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>３ページ目</title>
<style type="text/css">
<!--
a:link { color: #00f;
text-decoration: none }
a:visited { color: #36c;
text-decoration: underline }
a:hover { color: #fff;
text-decoration: none;
background-color: #f00 }
a:active { color: #fff;
background-color: #0f0 }
-->
</style>
</head>
<body>
<p>
<a href="peag1.html">１ページ目</a>に移ります。<br>
<a href="peag2.html">２ページ目</a>に移ります。
</p>
</body>
</html>
入力が終わったら保存します。今まで使っていたフォルダに半角小文字で
page3.html と、必ず拡張子 .html をつけます。
保存が終わったら、今作ったHTML文書 page3.html をダブルクリックします。
表示がうまくいかない場合は、タイプミスが考えられます。もう一度確認してく
ださい。特にコロン「：」、セミコロン「；」が間違えやすいようです。
なお、訪問済みを未訪問にしたい時には、ブラウザのキャッシュを開放してお
く必要があります。
ブラウザの「設定」もしくは「オプション」を選んで「履歴」をクリアしてか
ら、再度リロード（再読み込み）するようにします。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
a:link { color: #00f; text-decoration: none }
未訪問の URLに対して、青色に下線なしとしました。text-decoration属性は、
他に overline（抹消線）、line-through（同じく抹消線）があります。
none の場合は何もしませんが記述しないと、ブラウザが勝手に下線を引い
てしまいます。
a:visited { color: #36c; text-decoration: underline }
訪問済みアンカーの設定で、ややくすんだ青色で、下線付きとしました。
a:hover { color: #fff; text-decoration: none; background-color: #f00 }
マウスオーバーでの変化をもたらすのが hover属性です。ここでは背景色を赤
に文字色を白として下線なしに設定しました。
なお、この属性は、Netscape6.0 から対応していますので、それ以前のバージ
ョンでは変化ありません。IEでは 4.0より対応しています。
a:active { color: #fff; background-color: #0f0 }
マウスで選択したものをクリックした時に変化させる属性です。背景色を緑に
文字色を白としました。これも hover属性と同じくNetscape6.0 から対応して
いますので、それ以前のバージョンでは変化ありません。IEでは 4.0より対応
しています。
なお、Macintosh版のIEでは、5.0からの対応となっています。
またMacintosh専用のiCabでは大部分で対応していないものがあります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆同一ページでのジャンプ
同じHTML文書内でもアンカーを設定できます。皆さんもよく見たことがあると
思います。「Topへ」とか「上へ」とか、当講座のサイトでは「PageTop」とか。
これはname属性を使ってアンカー（錨）を打ち込みます。
HTML文書中で下記のように記述します。
<a name="top">ここが一番上です</a>
：
：
<a href="#top">上へ</a>
とします。
<a name="top">〜</a> 通常の表現で下線も色も付きません。
<a href="#top">〜</a> リンクとなって色や下線などが付きます。クリックする
とその場所に飛んで表示します。
同一ページならば name属性を使って、リンク先のURLにハッシュマーク「 # 」
をつけて記述します。 # を忘れると動きません。
ページの最初に目次などがあって、同じHTML文書内にその内容がある場合には
この name属性を使うことによって簡単に移動することができます。
見本として http://www.scollabo.com/banban/tips/diction.html
また他のページにこれらのアンカーがある場合は、
（例えば、index.html の中でname属性で "middle" と指定があった場合）
<a href="index.html#middle">真ん中に</a>
となってページが切り替わって指定された場所で表示します。
当講座のサイトでも多用しています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆用語＝URLとURI
HTML文書をはじめインターネット上の特定の資源（リソース）を示すために、
HTML3.2 までは URL（Universal Resource Locator）という名称が使われてきま
した。HTML4.0 からは、このURLに代わってより広義な URI（Unversal Resource
Identifers）という用語が使用されるようになっています。
URLと同様に HTML文書・画像・ビデオクリップ・プログラムなどを指定できま
すが URLはURIのサブセットで、URIのほうが上位の概念です。
本講座では、読者にとって馴染みの深いと思われるURLを使用しますが、URIと
するのが正しい表現ですので、覚えておいて損はないと思います。
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
Ｗｅｂページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_008.html
次回は、アンカーで使用するパス（絶対パス、相対パス）について解説します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆バックナンバーの配布について
質問の中で一番多いのが、バックナンバーの配布についてです。基本的に個別
の配信はしておりません。
しかしながら要望が非常に多いので、ある程度の号数をまとめてアーカイブと
して、サイト内で自由にダウンロードできるよう検討しています。
時期としては８月に予定していますので、もう少しお待ちください。
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
当講座のサイトのログを見てみると、やはり圧倒的にIEユーザが多く、80％を
超えています。
次いでNetscapeが13％、残りの中に、iCab、Internet Ninja、Opela 等です。
また、OSもWindows 各種が75％で、24％が Macintosh、残りがUNIX系のOSでした。
Macintoshが多いのには少々驚きです。
ブラウザのバージョンも多くが最新のものを利用しています。一番古いもので
IE4.5、NS4.7の共に１人づつでした。
Windowsは、95/NT/98/98SE/2000/XPなど様々です。一番多いのはWindows98です
が、XPの伸びが著しいようです。
MacintoshではPPCユーザが最も多く、古いものはMac OS8.6 でした。古いパソ
コンが現役で働いているのは、何となくうれしいものです。
コンピューター、それも私たちが使うパソコンの世界は凄まじいものがあり、
３ヶ月単位で大きな変化があります。昨年、最新のものを入手したとしても、今
日では、対応するパーツすら生産完了となり、OSが変わってしまうとソフトウェ
アも大幅に変わり、アップデートを余儀なくされます。
中には最新のOSすらアップデートできず、見捨てられているのが現状です。私
も今まで散々苦い思いをしてきました。ユーザ不在のメーカーの姿勢に、少しば
かり「怒り」もあるのが正直な気持ちです。と、なるとやっぱLinuxかなぁ・・
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。無料配信といえども記事中のすべての内容についての著作権は放
棄していません。無断で使用することを固く禁じます。
Copyright(C) 2002 banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com