[FP2003] [HOWTO] FrontPage 2003 でカスケード スタイル シートを使用してユーザー設定のハイパーリンクを作成する方法

文書翻訳 文書翻訳
文書番号: 825450 - 対象製品
Microsoft FrontPage 2002 については、次の資料を参照してください。 287706
すべて展開する | すべて折りたたむ

目次

概要

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

: この資料で使用するカスケード スタイル シートの機能が、Web ブラウザによってはサポートされていない場合があります。詳細については、FrontPage ヘルプを参照してください。ヘルプを参照するには、[ヘルプ] メニューの [Microsoft Office FrontPage ヘルプ] をクリックし、[FrontPage のヘルプ] 作業ウィンドウの [検索] ボックスにカスケード スタイル シートの互換性と入力し、Enter キーを押すと、該当するトピックが表示されます。

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

カスケード スタイル シートの機能を使用してユーザー設定のハイパーリンクを作成する方法の例を以下に示します。

マイクロソフトは、この情報をプログラミング言語の使用方法の一例として提供するだけであり、市場性および特定目的への適合性を含めて、明示的にも黙示的にも、一切の保証をいたしません。この資料は、例示されているプログラミング言語やプロシージャの作成およびデバッグに使用するツールについて理解されているユーザーを対象としています。Microsoft Support Professional は、特定のプロシージャの機能についての問い合わせにはお答えできますが、ユーザー固有の目的に合わせた機能の追加、プロシージャの作成などの内容変更は行っておりません。プログラミングに習熟されていない場合、マイクロソフト認定パートナー、あるいはマイクロソフトの有償サポート窓口までお問い合わせください。マイクロソフト認定パートナー、有償サポート窓口については、次のマイクロソフト Web サイトを参照してください。
https://solutionfinder.microsoft.com/ http://support.microsoft.com/default.aspx?scid=/isapi/gomscom.asp?target=/japan/support/supportnet/is.asp
使用可能なサポート オプションおよびマイクロソフトの問い合わせ先の詳細については、次のマイクロソフト Web サイトを参照してください。
http://support.microsoft.com/contactus/
: この資料のサンプルをコピーして FrontPage に直接貼り付けると、エラー メッセージが表示されることや、ページが正しく表示されないことがあります。山かっこ (< および >) が HTML コードとして表示される場合があります。この現象を回避するには、まずメモ帳で空白のドキュメントにサンプル コードを貼り付け、メモ帳から FrontPage のページにコピーします。

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

この例では、ハイパーリンクのテキストをドキュメントのテキストと同じ色に設定します。ハイパーリンクの下線だけが別の色で表示されます。ユーザー設定のハイパーリンクを作成するには、以下の手順を実行します。
  1. FrontPage を起動し、新しい空白のページを作成します。
  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. [名前を付けて保存] ダイアログ ボックスで、ファイルの保存先を指定し、[ファイル名] ボックスに Example1 と入力し、[保存] をクリックします。
  7. [ファイル] メニューの [ブラウザでプレビュー] をポイントし、使用する Web ブラウザをクリックしてページをプレビューします。

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

この例では、単色の背景のホバー ボタンを使用するハイパーリンクを作成します。ユーザー設定のハイパーリンクを作成するには、以下の手順を実行します。
  1. FrontPage を起動し、新しい空白のページを作成します。
  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. [名前を付けて保存] ダイアログ ボックスで、ファイルの保存先を指定し、[ファイル名] ボックスに Example2 と入力し、[保存] をクリックします。
  7. [ファイル] メニューの [ブラウザでプレビュー] をポイントし、使用する Web ブラウザをクリックしてページをプレビューします。

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

この例では、枠で囲まれたホバー形式のボタンを使用するハイパーリンクを作成します。ハイパーリンク テキストの周りに枠を表示する色付きのボックスが表示されます。ユーザー設定のハイパーリンクを作成するには、以下の手順を実行します。
  1. FrontPage を起動し、新しい空白のページを作成します。
  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. [名前を付けて保存] ダイアログ ボックスで、ファイルの保存先を指定し、[ファイル名] ボックスに Example3 と入力し、[保存] をクリックします。
  7. [ファイル] メニューの [ブラウザでプレビュー] をポイントし、使用する Web ブラウザをクリックしてページをプレビューします。

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

この例では、ハイパーリンクの書式を下線なし、斜体、小文字に設定します。ポインタをハイパーリンク上に移動すると、ハイパーリンクのテキストが大文字に変換されます。ユーザー設定のハイパーリンクを作成するには、以下の手順を実行します。
  1. FrontPage を起動し、新しい空白のページを作成します。
  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. [名前を付けて保存] ダイアログ ボックスで、ファイルの保存先を指定し、[ファイル名] ボックスに Example4 と入力し、[保存] をクリックします。
  7. [ファイル] メニューの [ブラウザでプレビュー] をポイントし、使用する Web ブラウザをクリックしてページをプレビューします。

関連情報

FrontPage 2003 のカスケード スタイル シートの詳細については、FrontPage ヘルプを参照してください。ヘルプを参照するには、[ヘルプ] メニューの [Microsoft Office FrontPage ヘルプ] をクリックし、[FrontPage のヘルプ] 作業ウィンドウの [検索] ボックスにカスケード スタイル シートと入力し、Enter キーを押すと、該当するトピックが表示されます。

関連情報

関連情報を参照するには、以下の「サポート技術情報」 (Microsoft Knowledge Base) をクリックしてください。
196488 Fs000: What Are Cascading Style Sheets?
205996 HOW TO: Create Cascading Style Sheets in FrontPage 2000
240972 HOW TO: Remove Underlines from Hyperlinks in FrontPage 2000
222949 FP2000: Creating Hover Effects for Form Buttons using DHTML and CSS

関連情報

この資料は米国 Microsoft Corporation から提供されている Knowledge Base の Article ID 825450 (最終更新日 2003-08-29) を基に作成したものです。

この資料に含まれているサンプル コード/プログラムは英語版を前提に書かれたものをありのままに記述しており、日本語環境での動作は確認されておりません。

プロパティ

文書番号: 825450 - 最終更新日: 2007年8月13日 - リビジョン: 3.2
この資料は以下の製品について記述したものです。
  • Microsoft Office FrontPage 2003
キーワード:?
kbhowto KB825450
"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