第2回 授業ページ

今回の授業の内容
Step1. リンクの色を変える
Step2. カーソルを乗せた時のリンクの色を変える

●Step1. リンクの色を変える

１．「CSS教育_202○」フォルダーの中で右クリックする
２．「新規作成（X)」→「テキスト ドキュメント」をクリック
３．テキストのファイル名（新しいテキスト ドキュメント.txt）をクリック
４．「lesson02.html」を入力して「Enter」キーを押す。
５．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
６．下の内容をテキストにコピーして貼り付ける。
７．テキストを閉じる。
８．「保存する(S)」をクリック
９．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">

<style type="text/css">
a:link { 
 color: #006400;
 background-color: #dcdcdc;
}
a:visited { 
 color: #ff0000;
 background-color: #afeeee;
}
</style>

</head>
<body bgcolor="#ffffff" >

<a href="http://chibahakkyo.net/index2.htm" >千葉ハッキョのHPに移動します。</a><br>
<a href="https://chosonsinbo.com/jp/" >朝鮮新報のHPに移動します。</a><br>

</body>
</html>


CSSを使用するとリンクの文字の色と背景の色を変えることが出来ます。
それぞれの記述がどこの色に対応しているのか見てみましょう。 
<style type="text/css">
a:link { 
 color: #006400;　　　　　　　訪問前のリンクの文字の色を変更できます。
 background-color: #dcdcdc;　訪問前のリンクの背景の色を変更できます。
}
a:visited { 
 color: #ff0000;　　　　　　　訪問後のリンクの文字の色を変更できます。
 background-color: #afeeee;　訪問後のリンクの背景の色を変更できます。
}
</style>


これまでの授業では色を指定するときはred, blueのような英単語を記述していました。
しかし英単語だと細かな色の指定を行うことが出来ません。
背景の色にしたいのに、色が濃すぎて困ることも有ります。
#006400のようなカラーコードならば色を細かく指定することが出来ます。（最大16,777,216通り！）

カラーコードは以下のページで参照できます。
使いたいカラーコードを探してみましょう。
※いつものように色の英単語を指定しても問題ありません。自分に合った方法を見つけましょう。
原色大辞典のリンク


●Step1. カーソルを乗せた時のリンクの色を変える

１．作成したテキストを右クリックして、「プログラムから開く(H)」→「メモ帳」をクリックする
２．下の赤文字の部分を書き加える。
３．テキストを閉じる。
４．「保存する(S)」をクリック
５．作成したテキストをダブルクリックしてブラウザで表示する。
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">

<style type="text/css">
a:link { 
 color: #006400;
 background-color: #dcdcdc;
}
a:visited { 
 color: #ff0000;
 background-color: #afeeee;
}
a:hover { 
 color: #007fff;
 background-color: #ff0fff;
}
</style>

</head>
<body bgcolor="#ffffff" >

<a href="http://chibahakkyo.net/index2.htm" >千葉ハッキョのHPに移動します。</a><br>
<a href="https://chosonsinbo.com/jp/" >朝鮮新報のHPに移動します。</a><br>

</body>
</html>


リンクにカーソルを合わせるとhoverで指定した色に変わります。
それぞれの記述がどこの色に対応しているのか見てみましょう。 
<style type="text/css">
a:link { 
 color: #006400;　　　　　　　訪問前のリンクの文字の色を変更できます。
 background-color: #dcdcdc;　訪問前のリンクの背景の色を変更できます。
}
a:visited { 
 color: #ff0000;　　　　　　　訪問後のリンクの文字の色を変更できます。
 background-color: #afeeee;　訪問後のリンクの背景の色を変更できます。
}
a:hover { 
 color: #007fff;　　　　　　　カーソルを乗せたリンクの文字の色を変更できます。
 background-color: #ff0fff;　カーソルを乗せたリンクの背景の色を変更できます。
}
</style>


前のページに戻る