はてなはてな黙示録（その５）
今日はパジャマで朝からビールというわけで、なにやらご機嫌な感じですが、朝早くから今日の分の日記を書くなんていうのは構造的にどこかおかしいような気もします。
まぁ、いろんな日記があるってこった。
現在使用中のテキストは、yms-zun様の「CSS再構築」。今日は「その３」です。
・リンクアンカー
次に、リンク部分の色を設定する。ブラウザの標準色では大抵暗すぎて、暗い背景色には合はないのだ。リンクを示すa要素に対して次の様に設定する。
今回は、「a要素」さえ分かれば、おそらく大丈夫では無いでしょうか。上のテキストをそのまま読むと、「リンク関係のものはa要素にまとめられている」と読めます。それとも、どこの世界へ行っても「a要素」はリンク関係なのでしょうか。
・登場するクラス名と（対応する部分）
- link（リンクが張られている部分の色）
- visited（一度訪れたことのあるリンクの色）
- hover（マウスのポインタが重なった時の色）
- active（クリックされた瞬間の色）
言われてみれば、マウスを操作しているとリンクは色々な変化をしてるんだねぇと実感。
特に重要なのは上の二つ。下二つは必要ないといへばないし、遊びの範囲だ。なほ、link、visited、hover、activeはこの順番で書かないと狙ひ通りに機能しない。CSSは常に「後から書いたものを優先」するからだ。理屈を考へてみよう。
えーと、「一番大きいところから始めて、一番小さいところで終わりなさい」と理解しましたが、正しいでしょうか。
- 書式
- a:link { color:#ff6 ; background-color:transparent ; }
「color」と「background-color」を指定するのですね。わざわざ「transparent（透過）」と指定するからには、やらなくてはいけないということなのでしょう。確か、「body要素」の時には、「background-color」はもともと「transparent」だったような記憶があります。こっちは違うのね。
で、
「はてなダイアリー」にはもう一つ重要な「キーワードリンク」というのがあって、これに対する指定も当然可能というわけです。
- 書式
- a.keyword { color:#fff ; border-bottom: 1px #99c dashed ; }
これで、「はてな」特有の「キーワードリンク」を装飾できるそうです。
横着して調べないのですが、「border-bottom: 1px #99c dashed」と書くと、リンクの下に点線が引かれるということでしょう。下線とその下の点線の色が違うとようやく気がつきました。
これで、自分が「意図的に」張ったリンクと、はてなダイアリーが張った「意図的でない」キーワードリンクの見分けがつくようになると。
ああ、いい、うう。。
「要素」だとか、「プロパティ」だとか「セレクタ」とかの細かい固有名詞はともかく、なんとなく理解が進んでいるような……
今まで丸呑みしてきた「お約束」が徐々に消化されてきているような気がします。
なんだか、自分で「スタイルシート」を書きたくなってきましたね。
やっぱり、面白いのはそっちの方っぽいぞ。
