Help and Support

カスケード スタイル シートを使用してユーザー設定のハイパーリンクを作成するには

文書番号:882588
最終更新日:2004年8月16日
リビジョン:1.3
目次

概要

カスケード スタイル シート (CSS) を使用してユーザー設定のハイパーリンクを作成する方法について、いくつかの例を使用して説明します。

先頭へ戻る

詳細

カスケード スタイル シートを使用してユーザー設定のハイパーリンクを作成するには


ここでは例として、新規作成したページに、ユーザー設定のハイパーリンクを作成する方法について説明します。
?下線だけが別の色で表示されるハイパーリンクを作成するには

?ホバー ボタンを使用するハイパーリンクを作成するには

?アウトライン ボタンを使用するハイパーリンクを作成するには

?別のテキスト書式を使用するハイパーリンクを作成するには

先頭へ戻る

下線だけが別の色で表示されるハイパーリンクを作成するには


ここでは、ハイパーリンクのテキストをドキュメントのテキストと同じ色に設定します。ハイパーリンクの下線だけが別の色で表示されます。
1.ページをコード ビューで表示します。
[コード] をクリックします。


2.ハイパーリンクの下線だけが別の色で表示されるコードを入力します。
<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>


3.本文のコードを入力します。
<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>


4.ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
?881673 (http://support.microsoft.com/default.aspx?scid=kb;ja;881673) ブラウザでプレビューするには
下線だけが別の色で表示されるハイパーリンクが作成されます。リンクをポイントすると、下線が緑色に変わります。

先頭へ戻る

ホバー ボタンを使用するハイパーリンクを作成するには


ここでは、単色の背景のホバー ボタンを使用するハイパーリンクを作成します。
1.ページをコード ビューで表示します。
[コード] をクリックします。


2.単色の背景のホバー ボタンが表示されるコードを入力します。
<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>


3.本文のコードを入力します。
<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>


4.ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
?881673 (http://support.microsoft.com/default.aspx?scid=kb;ja;881673) ブラウザでプレビューするには
単色の背景のホバー ボタンを使用するハイパーリンクが作成されます。リンクがアクティブになると、ホバー ボタンが赤色に変わります。

先頭へ戻る

アウトライン ボタンを使用するハイパーリンクを作成するには


ここでは、枠で囲まれたホバー形式のボタンを使用するハイパーリンクを作成します。ハイパーリンク テキストの周りに枠を表示する色付きのボックスが表示されます。
1.ページをコード ビューで表示します。
[コード] をクリックします。


2.ハイパーリンク テキストの周りに枠を表示する色付きのボックスが表示されるコードを入力します。
<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>


3.本文のコードを入力します。
<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>


4.ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。
?881673 (http://support.microsoft.com/default.aspx?scid=kb;ja;881673) ブラウザでプレビューするには

ホバー形式のボタンを使用するハイパーリンクが作成されます。リンク先を参照したことがある場合は、ボックスが紫色に変わります。

先頭へ戻る

別のテキスト書式を使用するハイパーリンクを作成するには


ここでは、ハイパーリンクの書式を下線なし、斜体および小文字に設定します。
1.ページをコード ビューで表示します。
[コード] をクリックします。


2.ハイパーリンクの書式を下線なし、斜体および小文字に設定するコードを入力します。
<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>


3.本文のコードを入力します。
<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>


4.ブラウザでプレビューします。
ブラウザでプレビューする方法については、下記の Q&A をご覧ください。

?881673 (http://support.microsoft.com/default.aspx?scid=kb;ja;881673) ブラウザでプレビューするには

書式が下線なし、斜体および小文字のハイパーリンクが作成されます。リンクをポイントすると、ハイパーリンクのテキストが大文字に変換されます。

先頭へ戻る

関連情報

882015 (http://support.microsoft.com/default.aspx?scid=kb;ja;882015) スタイル シートを作成するには
882016 (http://support.microsoft.com/default.aspx?scid=kb;ja;882016) スタイル シートを編集するには
881677 (http://support.microsoft.com/default.aspx?scid=kb;ja;881677) テーマを設定するには

先頭へ戻る


この資料は以下の製品について記述したものです。
?Microsoft Office FrontPage 2003

先頭へ戻る

キーワード:?
kbhowto KB882588

先頭へ戻る

"Microsoft Knowledge Baseに含まれている情報は、いかなる保証もない現状ベースで提供されるものです。Microsoft Corporation及びその関連会社は、市場性および特定の目的への適合性を含めて、明示的にも黙示的にも、一切の保証をいたしません。さらに、Microsoft Corporation及びその関連会社は、本文書に含まれている情報の使用及び使用結果につき、正確性、真実性等、いかなる表明・保証も行ないません。Microsoft Corporation、その関連会社及びこれらの権限ある代理人による口頭または書面による一切の情報提供またはアドバイスは、保証を意味するものではなく、かつ上記免責条項の範囲を狭めるものではありません。Microsoft Corporation、その関連会社 及びこれらの者の供給者は、直接的、間接的、偶発的、結果的損害、逸失利益、懲罰的損害、または特別損害を含む全ての損害に対して、状況のいかんを問わず一切責任を負いません。(Microsoft Corporation、その関連会社 またはこれらの者の供給者がかかる損害の発生可能性を了知している場合を含みます。) 結果的損害または偶発的損害に対する責任の免除または制限を認めていない地域においては、上記制限が適用されない場合があります。なお、本文書においては、文書の体裁上の都合により製品名の表記において商標登録表示、その他の商標表示を省略している場合がありますので、予めご了解ください。"

Related Support Centers

Other Support Options

  • Contact Microsoft
    Phone Numbers, Support Options and Pricing, Online Help, and more.
  • Customer Service
    For non-technical assistance with product purchases, subscriptions, online services, events, training courses, corporate sales, piracy issues, and more.
  • Newsgroups
    Pose a question to other users. Discussion groups and Forums about specific Microsoft products, technologies, and services.