練習問題～リンクを修飾する～

CSS ソース：リンクの下線の表示を指定する
- a:link { text-decoration : none; 　}　　　　　　　　　　
- a:visited { text-decoration : none; }
- a:hover { text-decoration : underline; }
- a:active { text-decoration : underline; }

リンク修飾の記述順
上記４つのリンク修飾を複数記述するときは、記述順は上記の通りとします。すなわち、a:link→a:visited→a:hover→a:active の順に記述します。

スタイルの設定ダイアログ：

ビルダーのメニューで設定する方法：［スタイルエクスプレス］→［スタイル構成］パネル→中央の領域で右クリック→［追加］クリック→ HTMLタグ名に「a:link」などを▼をクリックしたリストから選択、あるいは直接入力→［スタイル設定］ダイアログで設定する。

➊ファイルakita_center.htmlを開き、akita_link.htmlとの名前を付けてhtmlフォルダーに保存する。

➋リンク文字の下線を表示しないようにします。

リンクの修飾：リンクの下線を表示しない
- リンクが設定されている文字列には、文字飾り（下線）が引かれる。この下線を表示しないように指定する。これには、以下のCSS記述 a:link を直接ソースに記入する。既に他のリンク修飾が記述されているときは、それらのリンク修飾の記述よりも先に記入すること。

➌リンク移動後（リンク先閲覧済み）のリンク文字の色を指定します。

リンクの修飾：　リンク済みの表示
- リンク移動後（閲覧後）のリンク文字の色を指定する。これには、以下のCSS記述 a:visited をソースに直接入力する。但し記述の順番は a:link の後に記述すること。

CSSソース：リンク済みのリンク文字を茶色で表示する
- a:link { text-decoration : none; }
- a:visited {color : maroon; }

リンク済みの判定
該当リンクを閲覧したかどうかの判定は、閲覧履歴を使う。従って、［インターネットオプション］の［閲覧の履歴］を削除すると、未閲覧となる。

❹リンク文字にマウスを乗せた時、下図のようになるようにリンクの修飾を設定します。

❺ ブラウザで表示し、確認します。

リンクの修飾：マウスオンの時
- リンクの文字にマウスポインターが乗った時に、文字が大きくなり、文字の色を変え、文字の背景色も変えるようにする。これを、以下のようにCSSで直接入力して指定する。a:hover は a:visited の次に記述すること。

❻上書き保存します。練習を記録します。

➊htmlフォルダにあるakita_dog.htmlとakita_diary.htmlを開く。

➋［戻る］文字のリンク先を変更します。

➌それぞれのページでのリンク文字を同じように修飾します。

❹上書き保存します。

❺akita_link.html、akita_dog.html、akita_diary.html間でリンクが機能していることを確認します。

資料小分類