初心者のためのホームページ作り:第8号

                   毎週金曜日配信 What's New 2002/7/5
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第8号>

             banban@scollabo.com

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

 この講座はタグを覚えてテキストエディタだけでホームページを作るという、
どちらかというとやや専門的な作業が中心になります。各種の専用のオーサリン
グソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みいただくと快適に読めるようになります。

 今週の課題■アンカー(リンク)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆アンカー

Web 制作において、ページ同士、あるいは他のサイトへのリンクはまさにハイ
パー・テキストの最たるところです。今回はアンカーの記述方法について詳しく
解説します。

 アンカー(リンク)を実行させるには最低2つのページが必要です。さっそく
2つばかり作ってみましょう。テキストエディタ(メモ帳や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>1ページ目</title>
</haed>

<body>
<p>これは1つ目のページです。<br>
<a href="page2.html">2ページ目</a>に移ります。
</p>
</body>
</html>

入力が終わったらHTML文書として保存します。半角小文字で
page1.html と拡張子 .htmlを忘れないようにしてください。

もう1つ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>2ページ目</title>
</haed>

<body>
<p>これは2つ目のページです。<br>
<a href="page1.html">2ページ目</a>に移ります。
</p>
</body>
</html>

入力が終わったらHTML文書として保存します。同じように半角小文字で
page2.html として、同じフォルダに保存します。保存が終わったら先に作った
HTML文書、page1.html をダブルクリックしてブラウザでみてください。リンク
が貼られて通常、青色で表示され、マウスを近づけると手の形になるはずです。
試しにクリックしてください。すると2つ目に作った文書が表示されます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

<a href="peag2.html">2ページ目</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>3ページ目</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">1ページ目</a>に移ります。<br>
<a href="peag2.html">2ページ目</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と
するのが正しい表現ですので、覚えておいて損はないと思います。

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_008.html

次回は、アンカーで使用するパス(絶対パス、相対パス)について解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆バックナンバーの配布について

 質問の中で一番多いのが、バックナンバーの配布についてです。基本的に個別
の配信はしておりません。
 しかしながら要望が非常に多いので、ある程度の号数をまとめてアーカイブと
して、サイト内で自由にダウンロードできるよう検討しています。
 時期としては8月に予定していますので、もう少しお待ちください。


質問・ご意見ははこちらまで→ 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の共に1人づつでした。

 Windowsは、95/NT/98/98SE/2000/XPなど様々です。一番多いのはWindows98です
が、XPの伸びが著しいようです。

 MacintoshではPPCユーザが最も多く、古いものはMac OS8.6 でした。古いパソ
コンが現役で働いているのは、何となくうれしいものです。

 コンピューター、それも私たちが使うパソコンの世界は凄まじいものがあり、
3ヶ月単位で大きな変化があります。昨年、最新のものを入手したとしても、今
日では、対応するパーツすら生産完了となり、OSが変わってしまうとソフトウェ
アも大幅に変わり、アップデートを余儀なくされます。

 中には最新のOSすらアップデートできず、見捨てられているのが現状です。私
も今まで散々苦い思いをしてきました。ユーザ不在のメーカーの姿勢に、少しば
かり「怒り」もあるのが正直な気持ちです。と、なるとやっぱLinuxかなぁ・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について

個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。無料配信といえども記事中のすべての内容についての著作権は放
棄していません。無断で使用することを固く禁じます。

      Copyright(C) 2002  banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com