2008年12月25日 木曜日  著者:

リンクを貼る

リンクを貼るには、<a>を使用します。
<a href=”リンクしたいURL”>リンクさせる文字</a>と記述します。
実際に、検索エンジンの「Google」と「Yahoo」のリンクを作成してみましょう。
それぞれGoogleのURLは、http://www.google.co.jp/、YahooのURLは、http://www.yahoo.co.jp/となっています。

ブラウザでは、以下のように表示されます。

実際にクリックしてみてリンク先へ飛べるか確認してみましょう。

リンクの色を変更する

次に、CSS(スタイルシート)を利用して、リンクの色を変えてみましょう。
スタイルシートとは、WEBページ上の「見栄え」を設定するために使われる言語です。

リンクの色は、「通常のリンク」「既に見たリンク」「リンクの上にマウスを置いた時」「実際にクリックした時」の4種類を設定することができます。それぞれ以下のタグを記入することになり、色が変更になります。

タグ
通常のリンク a:link
既に見ているリンク a:visited
リンクを選択した時 a:hover
実際にクリックした時 a:active

スタイルシートをHTMLで使用するには、ヘッダ部分に記入します。
色を指定するには、カラーコード(例:#FFFFFF)か、カラーネーム(例:red,blue)などを使用します。
今回は、カラーコードを使用しました。(参照先:Web Safeカラー 216色【Web制作のインデックスサイト】)

ヘッダ部分に記入してください。
リンクの色変更

スタイルシートに対応していないブラウザのために、<!—-と—->を記述してコメントアウトしてしておきます。
実際に、リンク色が指定できているか、ブラウザで確認してみましょう。
リンクの色変更

テキストを装飾する

指定したテキストに、下線・上線・打ち消し線などを入れたい時には、「text-decoration」を使用します。
text-decoration

何もなし none
下線 underline
上線 overline
打ち消し線 line-through
点滅 blink

「style=”text-decoration:値;”」をテキストに挿入させます。
それぞれ以下のように表示されます。(※blinkは、IEでは何も変化しません。)
text-decoration
text-decoration

応用させてみる

それでは、今回紹介した「リンクの色を変更する」と「テキストを装飾する」を組み合わせてみたいと思います。
「a:hover(リンクの上にマウスを置いた時)」に「下線がなくなる」ようにしてみます。
linkにtext-decoration
「a:hover」に「text-decoration」を追加で記入してください。(値はnoneになります。)

ブラウザで確認すると、ちゃんと下線が消えています。
linkにtext-decoration

人気ブログランキング にほんブログ村 IT技術ブログへ

関連する投稿

カテゴリー: 7日で覚えるHTML  | タグ: , ,

コメントはまだありません >コメントする

コメントはまだありません。

コメントする