カスケード スタイル シート (CSS) を使用してユーザー設定のハイパーリンクを作成する方法について、いくつかの例を使用して説明します。
カスケード スタイル シートを使用してユーザー設定のハイパーリンクを作成するには
ここでは例として、新規作成したページに、ユーザー設定のハイパーリンクを作成する方法について説明します。
ここでは、ハイパーリンクのテキストをドキュメントのテキストと同じ色に設定します。ハイパーリンクの下線だけが別の色で表示されます。
- ページをコード ビューで表示します。
[コード] をクリックします。
- ハイパーリンクの下線だけが別の色で表示されるコードを入力します。
<head> タグと </head> タグの間に、以下のコードを挿入します。
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
a:link { border-bottom-color: blue }
a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green }
a:active { border-bottom-color: red }
</style>
- 本文のコードを入力します。
<body> タグと </body> タグの間に、以下のコードを挿入します。
マイクロソフト ヘルプとサポート <a href="/">http://support.microsoft.com</a> をごらんください。 </p>
MSN のページは <a href="http://www.msn.co.jp">http://www.msn.co.jp</a> です。</p>
- ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
- 881673
(http://support.microsoft.com/default.aspx?scid=kb;ja;881673)
ブラウザでプレビューするには
下線だけが別の色で表示されるハイパーリンクが作成されます。リンクをポイントすると、下線が緑色に変わります。
ここでは、単色の背景のホバー ボタンを使用するハイパーリンクを作成します。- ページをコード ビューで表示します。
[コード] をクリックします。
- 単色の背景のホバー ボタンが表示されるコードを入力します。
<head> タグと </head> タグの間に、以下のコードを挿入します。
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; padding: 3px }
a:link { color: white; background-color: blue }
a:visited { color: white; background-color: purple }
a:hover { color: white; background-color: green }
a:active { color: white; background-color: red }
</style>
- 本文のコードを入力します。
<body> タグと </body> タグの間に、以下のコードを挿入します。
マイクロソフト ヘルプとサポート <a href="/">http://support.microsoft.com</a> をごらんください。 </p>
MSN のページは <a href="http://www.msn.co.jp">http://www.msn.co.jp</a> です。</p>
- ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
- 881673
(http://support.microsoft.com/default.aspx?scid=kb;ja;881673)
ブラウザでプレビューするには
単色の背景のホバー ボタンを使用するハイパーリンクが作成されます。リンクがアクティブになると、ホバー ボタンが赤色に変わります。
ここでは、枠で囲まれたホバー形式のボタンを使用するハイパーリンクを作成します。ハイパーリンク テキストの周りに枠を表示する色付きのボックスが表示されます。- ページをコード ビューで表示します。
[コード] をクリックします。
- ハイパーリンク テキストの周りに枠を表示する色付きのボックスが表示されるコードを入力します。
<head> タグと </head> タグの間に、以下のコードを挿入します。
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
a:link { border-color: blue }
a:visited { border-color: purple }
a:hover { border-color: green }
a:active { border-color: red }
</style>
- 本文のコードを入力します。
<body> タグと </body> タグの間に、以下のコードを挿入します。
マイクロソフト ヘルプとサポート <a href="/">http://support.microsoft.com</a> をごらんください。 </p>
MSN のページは <a href="http://www.msn.co.jp">http://www.msn.co.jp</a> です。</p>
- ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
- 881673
(http://support.microsoft.com/default.aspx?scid=kb;ja;881673)
ブラウザでプレビューするには
ホバー形式のボタンを使用するハイパーリンクが作成されます。リンク先を参照したことがある場合は、ボックスが紫色に変わります。
ここでは、ハイパーリンクの書式を下線なし、斜体および小文字に設定します。
- ページをコード ビューで表示します。
[コード] をクリックします。
- ハイパーリンクの書式を下線なし、斜体および小文字に設定するコードを入力します。
<head> タグと </head> タグの間に、以下のコードを挿入します。
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; font-style: italic; text-transform: lowercase }
a:link { color: blue; font-weight: bold }
a:visited { color: purple }
a:hover { color: green; text-transform: uppercase }
a:active { color: red }
</style>
- 本文のコードを入力します。
<body> タグと </body> タグの間に、以下のコードを挿入します。
マイクロソフト ヘルプとサポート <a href="/">http://support.microsoft.com</a> をごらんください。 </p>
MSN のページは <a href="http://www.msn.co.jp">http://www.msn.co.jp</a> です。</p>
- ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
- 881673
(http://support.microsoft.com/default.aspx?scid=kb;ja;881673)
ブラウザでプレビューするには
書式が下線なし、斜体および小文字のハイパーリンクが作成されます。リンクをポイントすると、ハイパーリンクのテキストが大文字に変換されます。
Help and Support
先頭へ戻る
