www.wanichan.com
ワニchanのうぇぶわーるど～Expression Web & FrontPage 総合情報＆Tips～

スタイルシートについて

はてなブックマーク | Yahoo!ブックマーク Yahoo!ブックマークでこのサイトを登録している人数 人が登録

はじめに

スタイルシートは、Webページのデザインを細かく設定することができます。
例えば、フォントサイズを10.5ポイントにしたい、リンクの文字のアンダーラインを消したい、などなど。
通常のHTMLでは、フォントサイズは7段階のみです。通常サイズはSIZE=3と同じで、ブラウザによって見え方さまざま。Internet Explorerでは通常フォントサイズは12ポイントでしょうか？（いや、14ポイントだったりしてヾ(-_-;)

これから紹介するスタイルシートは、Internet Explorerのみの対応で、Netscapeでは未対応のものがあります。

スタイルシートは、HTMLファイルの<HEAD>と</HEAD>の間に記述する場合と、スタイルシート専用のファイル、つまり、拡張子が.cssとするファイルを作り、外部ファイルとして読み込ませる方法の2種類があります。

▲Page TOP

リンクの文字のアンダーラインを消したいけど・・・？

<HEAD>と</HEAD>の間に、次のように記述してみてください。
※ちなみに、一部の設定はInternet Explorerのみ有効となります。ご注意くださいませ。

★その１★
リンク貼っている文字のアンダーラインを消して、その文字に触れると青色に変化させたい場合

<style type="text/css">
<!--
a:link,a:visited{text-decoration:none;}
a:hover{color:blue;}
--></style>

★その２★
リンク貼っている文字列のアンダーラインは、文字に触れたときに表示され、同時にその文字を赤色に変化させたい場合

<style type="text/css">
<!--
a:link,a:visited{text-decoration:none;}
a:hover{color:red; text-decoration:underline;}
--></style>

★その３★
リンク貼っている文字列のアンダーラインを常に表示させて、文字が触れたとき、白に変化させたい場合

<style type="text/css">
<!--
a:link,a:visited{text-decoration:underline;}
a:hover{color:white;}
--></style>

※色の設定の詳細はカラーコード表を参照してくださいね(^^)

▲Page TOP

どのブラウザでも同じフォントで表示させるには？

ほとんどInternet Explorerを標準ブラウザとして使っているとは思いますが、たまにNetscapeでチェックしてみると、フォントサイズがちょっと小さく見えますよね？　それぞれの基準が異なるからですけど。

ブラウザの文字の大きさをブラウザで設定していても関係なく同じフォントで表示させたい場合はどうすればいいのでしょうか？

私のホームページの標準フォントサイズは0.9emにしています。私のサイトでは別にスタイルシートの設定自体を別ファイル(default.css)として作成し、すべてのページにリンクさせていますけど（笑）
そのほうがわざわざ一つ一つ記述する必要がないという利点がありますね。

では、本題に入ります（笑）
まず、設定したいHTMLページに直接記述する方法を紹介します。

すべてのタグ内の文字を10ポイントにしたい場合はこのようにします

<style type="text/css">
<!--
body,th,td{font-size:10pt;}
--></style>

ちなみに、最近のホームページエディタではスタイルシートを簡単に編集するための機能が備わっています。
FrontPageでは[書式]→[スタイル]コマンドで編集可能 です。

しかしながら、ブラウザによって、特にNetscapeでは相対（フォントサイズによって文字の大きさが変わる）で解釈されたりします。Netscapteでは文字サイズを100%にしてはじめて見え方が統一されます。

最近では、ユーザビリティーの観点から、フォントサイズは相対的に指定することが推奨されています。お年寄りの方や視力があまりよくない方にとって、文字を大きく表示して読みたい！ という願望を叶えてあげられるような配慮も必要ではないかと思います。
どうしてもナビゲーションメニュー部分だけはフォントサイズを固定したい、という場合は、そのメニューを画像化するといった対処になるでしょう。

▲Page TOP

スクロールバーの色を変えたい

OSがWindowsでInternet Explorer 5.5以降のブラウザのみ再現するスタイルシートですので、
使ってもそんなに意味はないかも知れないです。

<style type=text/css><!--
body{
color :black;
background-color:ivory;
scrollbar-base-color:gray;
scrollbar-highlight-color:ivory;
scrollbar-arrow-color:gray;
scrollbar-face-color:ivory;
scrollbar-track-color:eeeeee;
scrollbar-shadow-color:ivory;
scrollbar-darkshadow-color:gray
}
--></style>

color: 文字色
background-color: 背景色
scrollbar-base-color: スクロールバーの下地色
scrollbar-highlight-colorより外側の色（左辺及び上辺）
scrollbar-highlight-color: スクロールバーのハイライトカラー（左辺及び上辺）
scrollbar-arrow-color: スクロールが表示されている場合の矢印色（▲や▼などの部分）
scrollbar-face-color: スクロールバーの表面色
scrollbar-track-color: スクロールバーの道筋の色
scrollbar-shadow-color: スクロールバーの影の色（右辺及び下辺）
及びスクロールバーが表示されていない場合の▼や▲などの部分色
scrollbar-darkshadow-color: scrollbar-shadow-colorよりも外側の色（右辺及び下辺）

▲Page TOP