www.wanichan.com

Web > Resources > CSS & JavaScript Tips > CSS > スタイルシートについて

スタイルシートについて

  • このエントリーをはてなブックマークに追加
Webデザインを思い通りにするために定義づけるのに一番効率的な方法としてスタイルシートがあります。ぜひ、スタイルシートを活用してみましょう!

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

<HEAD>と</HEAD>の間に、次のように記述してみてください。

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

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

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

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

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

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

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

▲Page TOP

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

ほとんどInternet Explorerを標準ブラウザとして使っているとは思いますが、たまにNetscapeでチェックしてみると、フォントサイズがちょっと小さく見えますよね?

ブラウザの文字の大きさをブラウザで設定していても関係なく同じフォントで表示させるには、スタイルシートで定義するとよいでしょう。

私のホームページの標準フォントサイズは0.9emにしています。ちなみにその単位となる「em」は相対単位であり、1emが1文字分の大きさになります。私のサイトでは別にスタイルシートの設定自体を別ファイルとして作成し、すべてのページにリンクさせています。そのほうがわざわざ一つ一つ記述する必要がないという利点があります。

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

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

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

ちなみに、最近のホームページエディタではスタイルシートを簡単に編集するための機能が備わっています。

FrontPageでは[書式]→[スタイル]コマンドで編集可能 です。

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

最近では、ユーザビリティーの観点から、フォントサイズは相対的に指定することが推奨されています。お年寄りの方や視力があまりよくない方にとって、文字を大きく表示して読みたい! という願望を叶えてあげられるような配慮も必要ではないかと思います。

どうしてもナビゲーションメニュー部分だけはフォントサイズを固定したい、という場合は、そのメニューを画像化するといった対処になるでしょう。

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ