スタイルシート
人が登録
優先順位って何？
複数のスタイルシートを組み合わせることができますが、CSSの仕様として、最後に宣言された記述が最優先されます。
つまり、
-
HTML文書内に直接指定されたスタイルシート
例： <span style="font-size:18px; color: red">これは18ピクセルサイズの赤色文字です</span>
↓ - 最後に宣言された外部スタイルシートファイル
↓ - 最初に宣言された外部スタイルシートファイル
↓ -
HTMLファイル内のスタイルシートを使わないスタイル指定
例： <font color="red">この文字は赤です</font>
ざっとこんな感じです。
優先順位に関するもっと詳しい解説はおすすめサイト「Cascading
Style Sheets解説」内、「カスケード
（スタイル指定が重複した場合）」を参照してください。
このサイトではFrontPageのスタイルシート編集機能をどのようにして活用していくかを中心に取り上げたいと思います。
スクロールバーの色を変えたい
当サイト内「スクロールバーの色を変えたい」にも同じ内容が書かれていますが(^^;
あくまでもFrontPageをいかに活用するかを取り上げていきます。
スクロールバーの色をすべてのHTMLファイルに使い回しするためには、個々のHTMLにスタイルシートを記述するのは非効率ですので、外部スタイルシートを活用していきましょう。
FrontPage Expressの場合はちょっと面倒です。Wordだったらメモ帳で作ってCSSの添付機能（Word
2002よりサポート）を使ってください。
Word 2002以降でのCSSについては、Microsoft Officeアシスタント、カスケード
スタイル シート を参考にしてください。
-
IE5.5スクロールバー色設定 のサイトを使って生成し、クリップボードにコピーします。
この場合、「<style>タグなし」に設定した状態にしてください。 - FrontPage
2000の場合、メニューバーより[ファイル]→[新規作成]→[ページ]をクリックします。
FrontPage 2002の場合、標準ツールバーの
（新しい標準ページの作成）ボタンの右横の▼印をクリックして、[ページ]をクリックします。 - 「スタイルシート」タブをクリックして開き、「標準スタイルシート」をダブルクリックします。
-
クリップボードにコピーされた情報を貼り付けます。Ctrl+Vを使うか、
（貼り付け）ボタンをクリックします。 - スタイルシートファイルを名前をつけて保存します。
-
すべてのWebページにリンクしたい場合は「すべてのページ」
編集中のページにリンクしたい場合は「選択したページ」を選択して、
右側の[追加]ボタンを押します。
- 先ほど作成したスタイルシートを選んでOKボタンを押してください。
IEとNNとを分岐させたい
Internet ExplorerとNetscape
Navigatorとはスタイルシートのサポート範囲が異なります。
基本的にIEでもNNでも有効な共通スタイルシートを作成しておき、IE独自の別途スタイルシートも作ります。
私のサイトの場合、それぞれのディレクトリ直下に「style.css」と「ie.css」が存在します。
で、普通にスタイルシートへのリンクを行う方法は既出なので省略しますが(^^;
IEだけを生かせたい場合、@import
を使ってみるという方法が広く扱われています。
この @import という記述はNetscapeではサポートされないんですよね。
それを逆手に取った業、とでも言いましょうか（笑）
<style type="text/css"><!--
@import url (./ie.css);
--></style>
スタイルシートの最初の行に宣言するというのがミソです。
@import と他の記述を組み合わせる場合は以下の例の通り。
<style>
<!--
@import url (./ie.css);
form { margin-bottom: 0; text-align:center
}
ul { text-align:left; margin-bottom:0 }
-->
</style>
そうです！ そのほかのスタイルシートの記述は @import の次の行から指定していますよね？
他の方法として、IEだけ有効にして、他のブラウザをコメント扱いにすることも可能です。
私は最近、この方法を使っています。
IE5.0以上の場合、IE専用のCSSファイル「ie.css」を読み込ませるようにするには、
以下のように記述します。
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
この方法では、IEのバージョンによって分岐させたい場合などに有効ですね。
この記述はIEでのみ有効ですので、そのほかのブラウザは単なるコメントとして扱われます。
IEであったとしても、[if gte IE 5] のように、「もしIE5以上であれば」という条件を満たした場合のみ適用される、ということです。
すべて同じように表示するのは難しいものです。NetscapeやFireFox、Operaではみんな同じように表示されるのに、なぜかIEだけ・・・・という場合、とりあえず、IE以外のブラウザを基準に作成し、その後に上書きする形でIE用のCSSファイルを適用すると良いでしょう。
詳しくは、マイクロソフトのWebサイト、About Conditional Comments （英語）をご覧ください。
リンクを張った画像の属性に border="0" が入る場合の対処方法
※Microsoft Office FrontPage blogの記事より移植です(笑)
FrontPage において、画像にリンクが入ると
<a href="link.htm"><img src="picture.gif" border="0"></a>
のようになってしまいます。これは仕様です。
border属性はHTML4から非推奨になっているので、後で検索と置換機能とCSSを使って一気に修正する方法を説明します。
注：この機能はFrontPage 2003でサポートされています。古いバージョンの場合は以下の操作を行うことができません
- 外部スタイルシート（CSSファイル）に以下の記述を追加しておく
a img {
border-style:none;
} - すべてのページにその外部スタイルシートにリンクしておく
- Ctrl キーを押しながら H キーを押して、 検索と置換機能を呼び出す
- 検索と置換画面の [HTML タグ] タブを開く
- [検索するタグ] のボックス一覧から 「img」を選択する
- [置換後の処理] ボックス一覧から 「属性の削除」を選択する
- [属性] には 「border」を選択する
- 検索対象を選択する。一気に片付けたい場合は 「すべてのページ」 を選択する
- [すべて置換]ボタンを押す
