Home ＜ 第７号 ＞ 第９号

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

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

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  目次

プレーンテキスト版

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

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

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

入力が終わったらHTML文書として保存します。同じように小文字で
page2.html　として、同じフォルダに保存します。保存が終わったら先に作った
HTML文書、page1.html　をダブルクリックしてブラウザでみてください。リンク
が貼られて通常、青色で表示され、マウスを近づけると手の形になるはずです。
試しにクリックしてください。すると２つ目に作った文書が表示されます。
">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>３ページ目</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 をダブルクリックします。
表示がうまくいかない場合は、タイプミスが考えられます。もう一度確認してく
ださい。特にコロン「：」、セミコロン「；」が間違えやすいようです。
　なお、訪問済みを未訪問にしたい時には、ブラウザのキャッシュを開放してお
く必要があります。
　ブラウザの「設定」もしくは「オプション」を選んで「履歴」をクリアしてか
ら、再度リロード（再読み込み）するようにします。">Sample
PageTop / Home / 目次
Copyright(C) 2002-2003 banban@scollabo.com