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

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  目次

プレーンテキスト版

今週<第8号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                   毎週金曜日配信 What's New 2002/7/1
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■アンカー(リンク)

◆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="peag2.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="peag1.html">2ページ目</a>に移ります。
</p>
</body>
</html>

入力が終わったらHTML文書として保存します。同じように小文字で
page2.html として、同じフォルダに保存します。保存が終わったら先に作った
HTML文書、page1.html をダブルクリックしてブラウザでみてください。リンク
が貼られて通常、青色で表示され、マウスを近づけると手の形になるはずです。
試しにクリックしてください。すると2つ目に作った文書が表示されます。
Sample
a要素は擬似クラス要素と呼び、通常ブラウザ側で、未訪問、訪問済みで色を変えたり、下線を引く場合が多いようです。ある意味では、ユーザ側に状態を教えてくれるので便利な機能ですが、時には下線が邪魔だったり、意味があって色を変えたい場合が出てきます。アンカーを自分流に仕上げることがスタイルシートで可能になります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆アンカーを自分流に仕上げる
先ほども説明したとおり、アンカーで囲まれた部分の色とかテキストのスタイル
を自分の好みで仕上げることができます。当然、スタイルシートを使わなければ
実現できません。
 では、作ってみましょう。テキストエディタを立ち上げ、新規に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 をダブルクリックします。
表示がうまくいかない場合は、タイプミスが考えられます。もう一度確認してく
ださい。特にコロン「:」、セミコロン「;」が間違えやすいようです。
 なお、訪問済みを未訪問にしたい時には、ブラウザのキャッシュを開放してお
く必要があります。
 ブラウザの「設定」もしくは「オプション」を選んで「履歴」をクリアしてか
ら、再度リロード(再読み込み)するようにします。Sample



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