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

Microsoft FrontPage 2002 については、次の資料を参照してください。
287706

概要

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


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


先頭に戻る

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

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


マイクロソフトは、この情報をプログラミング言語の使用方法の一例として提供するだけであり、市場性および特定目的への適合性を含めて、明示的にも黙示的にも、一切の保証をいたしません。この資料は、例示されているプログラミング言語やプロシージャの作成およびデバッグに使用するツールについて理解されているユーザーを対象としています。Microsoft Support Professional は、特定のプロシージャの機能についての問い合わせにはお答えできますが、ユーザー固有の目的に合わせた機能の追加、プロシージャの作成などの内容変更は行っておりません。プログラミングに習熟されていない場合、マイクロソフト認定パートナー、あるいはマイクロソフトの有償サポート窓口までお問い合わせください。マイクロソフト認定パートナー、有償サポート窓口については、次のマイクロソフト Web サイトを参照してください。
使用可能なサポート オプションおよびマイクロソフトの問い合わせ先の詳細については、次のマイクロソフト Web サイトを参照してください。
: この資料のサンプルをコピーして 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/08/13 - リビジョン: 1

フィードバック