ＨＰ作成実録 No.15
スタイルシートを使う (文字)
shinがトップページで使っている、スタイルシートの記述方法です。
当たり前ですが、ココに書いてある事はスタイルシートのごく一部です。
でも比較的良く見るモノもあると思います。
このページも説明のために同様の記述をしています。
もし上手く表示されなかった方がいたら、すいません、教えて下さい。
説明部分のリンクのボタンの行き先はこのページになっています。
まず説明前に、shin's PSYCHOMMUNITYでは
リンク先に行く前は
ここ
で、リンク先に行った後は
ここ
の様な色で表示されてます。
ここだけタグで作っているので本当のリンクじゃないです。タグでは
<body link="#000080" vlink="#5353FF" alink="#000080">
と指定しています。
・マウスを乗せたらリンクの色が変わる
これは<head>タグの間に次のような記述をします。
<STYLE TYPE="text/css"><!-- A:hover { color: red } --></STYLE>
又は
<STYLE TYPE="text/css"><!-- A:hover { color: #ff0000 } --></STYLE>
こうすると→ここ←の様になります。
redや#ff0000の部分を変えることで色を変えられます。
・リンクの下線を消す
これは<body>タグの間のリンクの記述を次のようにします。
<a href="./hpmade15.htm" style="text-decoration:none">
こうすると→ここ←の様になります。
・フォントのサイズをポイント数で指定する
これは<body>タグの間の変化させたい部分に次のような記述をします。
<span STYLE="font-size:20pt">
こうすると→ここ←の様になります。
・フォントの色を指定する
これは<body>タグの間の変化させたい部分に次のような記述をします。
<span STYLE="color:#FF4500;>
こうすると→ここ←の様になります。
・全て使う
ここまでのタグを全て使って、次のような記述をします。
<head>
<STYLE TYPE="text/css"><!-- A:hover { color: red } --></STYLE>
</head>
<body>
<a href="./hpmade15.htm" style="text-decoration:none">
<span STYLE="font-size:20pt;color:#FF4500;">
</body>
こうすると→ここ←の様になります。
こうするとマウスを乗せた時の色が反映されてません、色が変わりませんよね？
そこで色の指定だけとってみます。
<head>
<STYLE TYPE="text/css"><!-- A:hover { color: red } --></STYLE>
</head>
<body>
<a href="./hpmade15.htm" style="text-decoration:none">
<span STYLE="font-size:20pt;">
</body>
こうすると→
ここ←の様になります。
こうすると最初に書いた<body 〜の部分が反映されてることがわかります。
<font color=〜としても同様の結果になります。
何故だか判らないですけど、結果として優先順位は
bodyタグはheadのstyleより高い、
font color〜やspan style color〜はheadのstyleより低い、
という事です。
つまりbodyタグでの設定は有効だけど、
font〜やspan〜での設定は無効、となるということです。
書き方によっては違うのかもしれませんが、shinはよく判りませんでした。
インターネットやブラウザの変化は早いので、
スグこの位は変わってしまうかもしれませんし、
違うやり方で、この位の事は解消されるかもしれません。
知っていたらshinにコッソリと教えて下さい m(__)m