HTML初歩の初歩

〜その7〜
すぐ役に立つスタイルシート2


スタイルシートを書いてみよう(続き)

<style type="text/css">
p{text-indent:1em;line-height:170%}
a{text-decoration:none;}
a:hover{color:#ff0033;text-decoration:underline}
   </style>
(再掲)

前回例示した上記スタイルシートの解説を続けます。二行目のa { text-decoration : none }によって、リンク部分の下線が表示されなくなります。

リンクの復習

aというのは「アンカー」といい、属性としてhrefとnameを取ります。(HTMLの領域について復習をします。)

HTMLでは<a href="アドレス">を使ってハイパーリンクを作りました。<a name"キーワード">を文中に埋め込んでおけば、その箇所にリンクさせることも出来ました。

アンカーについての詳しい説明は<a href="dainikai.htm">第2回の第3章</a>をご覧下さい。

と書けば、"dainikai.htm"というページにジャンプしました。
<a name="ch3">を第3章の冒頭に埋め込んでおき、次のようなリンクを設定すれば、ページを開いた後にいちいちスクロールさせなくても"dainikai.htm"の第3章に直接ジャンプ出来ました。

アンカーについての詳しい説明は<a href="dainikai.htm#ch3">第2回の第3章</a>をご覧下さい。

XHTMLでは<a name="ch3">の代わりに<a id="ch3">としますが、現状ではidを解釈できないブラウザーがあるので、nameid を併記しなければなりません。<a name="*" id="*">と、併記しても良い事になっていますし、問題も生じません。

書き方 6

a { text-decoration : none }と書くと全てのアンカーについて、テクストの装飾がnone=「なし」になります。初期設定ではunderline=下線付きです。

下線を表示させないとページがすっきり見えるという意見と、下線がないとどこがリンクか分からないという意見のあることを承知しておいて下さい。もちろん初期設定ではリンクしてある文字が青色に表示されますからそれ程心配する必要はないかもしれません。

お好みで、リンクの青色文字を他の部分と同じ(例えば黒)にしたければ、
a { text-decoration : none ; color : black } としておけば良いでしょうが、リンク場所を隠すようでお勧めしません。

特定の属性への指定

a:hover{color:#ff0033;text-decoration:underline}

「hover」というのはマウスが文字の上に重なった時に適用される属性です。a:hoverと書けば、リンクのある文字の上にマウスがかざされた場合にのみ{〜}の内容が適用されます。

ここの場合はマウスをかざした場合にだけ、フォントの色を#ff0033(このページで使っている赤)にし、下線を付加します。

同様の方法で、初期設定の青色を変える事も出来ます。例えばこのページでは「初期設定の青」が眼に優しくない(と私には感じられる)ので、以下のように書いて#4169e1(色名ではroyalblueといいます)に設定してあります。

a:link,a:visited{color:#4169e1}

また一度訪問したリンク表示の色を、訪問していない色と同じにするために、カンマで続けてa:visitedとも加えてあります。これも好みの問題で、訪問したかどうかを判別するには同じ色にしない方を好む方もあるでしょう。

他にはa:activeという指定もあって、これはそのリンクが生きている(=指定中)際に指示が有効になります。例えばa:active{color:#006400}とこのページのように書けば、ジャンプした部分が解除されるまで緑色になります。フレーム版で私のページを見ている人は、今居るページの見出しが緑で表示されているのが分かるでしょう。

CSS Tips

スタイルシートの属性一覧は MSDN で見られます。Microsoft の解説ですから、「独自拡張(Extension)」も織り込まれています。IE6 や 5.5 の新機能に関する日本語による解説はこちらが便利です。

Netscape4.xのようにW3Cによって勧告された要素についても、誤った解釈をしてCSSを適用するような愚かなUAもあります。Netscape4.xで見ていて、文字が重なって表示されたら、スタイルシートを無効にして見るしかないでしょう。(無効に出来るかどうかまでは知りませんが)

独自拡張というと、悪名高き marqueeblink を想像して嫌悪感をあらわにする方があるかも知れません。しかしCSSの独自拡張を表示しない(出来ない)UA( User Agent = ブラウザーの事をこう言います)は無視してくれますから、心配は要りません。

しかし独自拡張(Extension)をした CSS は独自拡張(Extension)をしたHTMLのタグとは異なり、単に無視されるだけです。この点で marqueeblink とは違うので安心です。

スクロールバーの見栄え変更

IE5.5によって表示可能になったMicrosoftの独自拡張スタイルシート属性のうち、効果的と思われるスクロールバーに関するものをTipsとして紹介します。Microsoftの独自拡張ですからNetscape6でも効果はありません。単に無効になるだけです。

スクロール・バーの見栄えを変更するには、スタイルシートで以下の属性を指定します。色は#プラス3桁、または6桁のRGB、もしくは色名で指定してやります。上下左右のスクロールバーが一括して変更されます。上述の通り、Internet Explorer5.5でのみ効果が現われます。

適用する要素はbody,select,divなどです。出典は MSDN Scrollbar Color Properties です。

scrollbar-base-color
スクロールバー全体の色を一括して指定します(これだけ指定しても一括して色が変わります)
scrollbar-face-color
マウスでスクロールさせる四角形(スクロールボックス)と両端の四角(スクロールアロー)の部分の色を指定します
scrollbar-highlight-color
スクロールボックスが動く道の色を指定します
scrollbar-dark-shadow-color
スクロールボックスの右と下の隅の色を指定します
scrollbar-shadow-color
スクロールボックスの右と下の隅の色で、darkshadow-colorの内側に来る色を指定します
scrollbar-3d-light-color
スクロールボックスとスクロールアローの上と左の色を指定します
scrollbar-track-color
スクロールボックスの地の色を指定します(MSDNの一覧表にはありませんが使えるようです
scrollbar-arrow-color
スクロールアローにある三角形の色を指定します

Filter

もう一つ効果の顕著な例をご紹介しておきましょう。Filterは正確にはCSSではなくInternet Explorer 4.*以降のプラグインを用いた効果です。以下の大きなサイズの例示は、GIFでもJPEGでもありません。このページのサイズは12KB程で、もしGIF等の画像を使うとその数倍のサイズになるでしょう。

Filterを解釈できないUAでは指示は無視されるだけですので、それ程抵抗なく使えるでしょう。また現状では、9割の閲覧者がIE4.*以降を使っていますから、ある程度の実効性も見込めます。

SHADOW 1

SHADOW 2

GLOW

DROP SHADOW

BLUR

第1回  第2回  第3回  第4回  第5回  第6回  第8回  第9回  第10回  詳細目次  ページ冒頭


saiton.net/easy/html7.htm

©SAITO Toshiyuki