カスケード スタイル シートを使用して Expression Web でカスタムのハイパーリンクを作成する方法

文書翻訳 文書翻訳
文書番号: 928715 - 対象製品
すべて展開する | すべて折りたたむ

目次

概要

カスケード スタイル シート (CSS) を使用して Microsoft Expression Web でカスタムのハイパーリンクを作成する方法について説明します。 CSS 機能を使用してカスタムのハイパーリンクを作成する方法を説明する例が含まれます。

詳細

例 1: 下線の書式を表示する別の色でハイパーリンクを作成します。

次の使用例をドキュメントのテキストとして同じ色に、ハイパーリンクのテキストします。 別の色に表示されますだけ下線の書式設定のハイパーリンク。 これらのユーザー設定のハイパーリンクを作成するには、次の手順に従います。
  1. 開始 Expression Web を開き、新しい空白ページを作成します。
  2. [ 表示 ] メニューの [ ページ ] をクリックし、ページ下部にある コード
  3. <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> 
  4. <body> </body> 次のコードをページの領域が挿入:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. [ ファイル ] の [ 保存 ] をクリックします。
  6. ボックスで、 [名前を付けて保存 ] ダイアログ ファイルの保存先となる場所を指定します。
  7. ファイル名 ] ボックスで Example1 ] を入力して、[ 保存 </a0>] をクリックします。
  8. [ ファイル ] メニューの [ ブラウザーでプレビュー ] をポイントし、[ブラウザーを使用してページをプレビューしたい] をクリックします。

例 2 : ホバー ボタンを使用するハイパーリンクを作成する

この例を単一の背景を持つホバー ボタンを使用するハイパーリンクを作成します。 これらのユーザー設定のハイパーリンクを作成するには、次の手順に従います。
  1. 開始 Expression Web を開き、新しい空白ページを作成します。
  2. [ 表示 ] メニューの [ ページ ] をクリックし、ページ下部にある コード
  3. <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> 
  4. <body> </body> 次のコードをページの領域が挿入:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. [ ファイル ] の [ 保存 ] をクリックします。
  6. ボックスで、 [名前を付けて保存 ] ダイアログ ファイルの保存先となる場所を指定します。
  7. ファイル名 ] ボックスで Example2 ] を入力して、[ 保存 </a0>] をクリックします。
  8. [ ファイル ] メニューの [ ブラウザーでプレビュー ] をポイントし、[ブラウザーを使用してページをプレビューしたい] をクリックします。

例 3: アウトライン ホバー ボタンを使用するハイパーリンクを作成します。

この例はアウトライン ホバー ボタンを使用するハイパーリンクを作成します。 これらのハイパーリンク上に置いた、色付きのボックスが、ハイパーリンク テキストの周り表示されます。 これにより、アウトライン効果作成されます。 これらのユーザー設定のハイパーリンクを作成するには、次の手順に従います。
  1. 開始 Expression Web を開き、新しい空白ページを作成します。
  2. [ 表示 ] メニューの [ ページ ] をクリックし、ページ下部にある コード
  3. <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> 
  4. <body> </body> 次のコードをページの領域が挿入:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. [ ファイル ] の [ 保存 ] をクリックします。
  6. ボックスで、 [名前を付けて保存 ] ダイアログ ファイルの保存先となる場所を指定します。
  7. ファイル名 ] ボックスで Example3 ] を入力して、[ 保存 </a0>] をクリックします。
  8. [ ファイル ] メニューの [ ブラウザーでプレビュー ] をポイントし、[ブラウザーを使用してページをプレビューしたい] をクリックします。

例 4: 別のテキストの書式を使用するハイパーリンクを作成します。

ハイパーリンク テキストの下線付きのない、斜体、小文字を使用する例します。 これらのハイパーリンク上に置くと、文字列大文字になります。 これらのユーザー設定のハイパーリンクを作成するには、次の手順に従います。
  1. 開始 Expression Web を開き、新しい空白ページを作成します。
  2. [ 表示 ] メニューの [ ページ ] をクリックし、ページ下部にある コード
  3. <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> 
  4. <body> </body> 次のコードをページの領域が挿入:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p> 
  5. [ ファイル ] の [ 保存 ] をクリックします。
  6. ボックスで、 [名前を付けて保存 ] ダイアログ ファイルの保存先となる場所を指定します。
  7. [ ファイル名 ] ボックスで Example4 、入力を 保存 をクリックします。
  8. [ ファイル ] メニューの [ ブラウザーでプレビュー ] をポイントし、[ブラウザーを使用してページをプレビューしたい] をクリックします。

関連情報

についてには、記事の「サポート技術情報」(Microsoft Knowledge Base) を表示する次の資料番号をクリックしてします。
825450カスケード スタイル シートを FrontPage 2003 で使用してカスタムのハイパーリンクを作成する方法
196488どのようなカスケード スタイル シートはでしょうか。
222949DHTML と CSS を使用して FrontPage フォーム ボタンのホバー効果を作成する方法

プロパティ

文書番号: 928715 - 最終更新日: 2006年12月6日 - リビジョン: 1.0
この資料は以下の製品について記述したものです。
  • Microsoft Expression Web [1.0]
キーワード:?
kbhowto kbexpertiseinter kbmt KB928715 KbMtja
機械翻訳の免責
重要: このサポート技術情報 (以下「KB」) は、翻訳者による翻訳の代わりに、マイクロソフト機械翻訳システムによって翻訳されたものです。マイクロソフトは、お客様に、マイクロソフトが提供している全ての KB を日本語でご利用いただけるように、翻訳者による翻訳 KB に加え機械翻訳 KB も提供しています。しかしながら、機械翻訳の品質は翻訳者による翻訳ほど十分ではありません。誤訳や、文法、言葉使い、その他、たとえば日本語を母国語としない方が日本語を話すときに間違えるようなミスを含んでいる可能性があります。マイクロソフトは、機械翻訳の品質、及び KB の内容の誤訳やお客様が KB を利用されたことによって生じた直接または間接的な問題や損害については、いかなる責任も負わないものとします。マイクロソフトは、機械翻訳システムの改善を継続的に行っています。
英語版 KB:928715
Microsoft Knowledge Base の免責: Microsoft Knowledge Baseに含まれている情報は、いかなる保証もない現状ベースで提供されるものです。Microsoft Corporation及びその関連会社は、市場性および特定の目的への適合性を含めて、明示的にも黙示的にも、一切の保証をいたしません。さらに、Microsoft Corporation及びその関連会社は、本文書に含まれている情報の使用及び使用結果につき、正確性、真実性等、いかなる表明・保証も行ないません。Microsoft Corporation、その関連会社及びこれらの権限ある代理人による口頭または書面による一切の情報提供またはアドバイスは、保証を意味するものではなく、かつ上記免責条項の範囲を狭めるものではありません。Microsoft Corporation、その関連会社 及びこれらの者の供給者は、直接的、間接的、偶発的、結果的損害、逸失利益、懲罰的損害、または特別損害を含む全ての損害に対して、状況のいかんを問わず一切責任を負いません。(Microsoft Corporation、その関連会社 またはこれらの者の供給者がかかる損害の発生可能性を了知している場合を含みます。) 結果的損害または偶発的損害に対する責任の免除または制限を認めていない地域においては、上記制限が適用されない場合があります。なお、本文書においては、文書の体裁上の都合により製品名の表記において商標登録表示、その他の商標表示を省略している場合がありますので、予めご了解ください。

フィードバック

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com