2005/01/16

こう云うのはアリなのか

サイトを見る時に、色々なデザインを施してあるわけで、中には派手派手な色遣いの所もあれば、品よく小さめのフォントを指定してある所もあります。

が、老眼には（正確には、軽い近視と乱視と老眼）にはつらいところがあります。

で、普段は自前のスタイルシートを当てて、どのサイトも同じ色、同じフォント、同じ大きさでみているわけです。

リンクも複数のリンクが近い場合、実際カーソルが目的の所にあるかどうか微妙な点もあるので、リンクに色を付け下線を引き、なおかつカーソルが乗っかった場合はっきりと変わる様にしてあります。

例えば a:link は下記の様にしています。

A:LINK{
   color : #0000bd;
   border-bottom-width : 1px;
   border-bottom-style : solid;
   border-bottom-color : blue;
   text-decoration : none;
   font-weight : normal;
   font-style : normal;
}

これでリンクの張ってあるところは、フォントの色が変わり下線が引かれるはずです。

所が某有名どころのサイトでは、どうも大きい文字のリンクは色も変わらない下線も付かない、でおかしな事もあるものだと。

いよいよ不便で、今日どうなっているのか中身を調べました。

こうなっていました

<a href="/news/articles/0501/14/news042.html" id="right">
<h5></h5>
<img src="http://image.itmedia.co.jp/news/articles/0501/14/top_news042.jpg"
width="120" height="90" align="right" hspace="2"
vspace="2" border="0" alt="icon">
<h3>iPod shuffleは怖くない？　ライバルは余裕の反応<br></h3></a>

なんだかよく判りませんが、<a></a>の中に<h5>やら<h3>が入っています。

この中の<h5></h5>は愛嬌でしょうが、<a>はinlineで、その中に<hn>はまずかろうと思いますが、素人にはよく判りません。ブラウザはえらいもので、そのサイトのスタイルシートを有効にするとちゃんとリンクはリンクらしく表示してくれます。

ただ私的なスタイルを当てた場合になんだかよく判らなくなってしまいます。（行の途中で「右」って何ですか？）せめて下記の様に、シロートの年寄りに優しい書式で書いて頂けると有り難いのですが、かといってサイトを乗っ取って勝手に書き換えると、手が後ろに回りかねません。（技術的にも私には出来ませんし）

<h3><a href="/news/articles/0501/14/news042.html" id="right">
<img src="http://image.itmedia.co.jp/news/articles/0501/14/top_news042.jpg"
width="120" height="90" align="right" hspace="2"
vspace="2" border="0" alt="icon">
iPod shuffleは怖くない？　ライバルは余裕の反応</a></h3>

実際、シロートの悲しさ何ヶ月もそのまま見ていたので、リンクの印がなくともカンでクリックしていたのです。また自分のcssの中でaのスタイルが適用された後にhnのスタイルが適用されているのではないかと思い、記述の順序が悪いのだろうかと確認すると、ちゃんとhnより後にaを書いてあります。わけが判りません。判らないままに過ぎていきました。

それではいけないと一念発起、何とか誤魔化す回避する方法はないかと、シロートなりに考えてみました。

必ずしも「hn」にリンクが張ってあるわけではないから直接hnにスタイルを当てるわけにはいかない。で、結局は大して考えずに

A:LINK,A:LINK h1,A:LINK h2,A:LINK h3{
   color : #0000bd;
   border-bottom-width : 1px;
   border-bottom-style : solid;
   border-bottom-color : blue;
   text-decoration : none;
   font-weight : normal;
   font-style : normal;
}

などとやってみました。意味を考えると<a>の中の<hn>何て云うのを,cssとして認められるのかと不安になります。そこでW3C CSS 検証サービスを通してみると、「へっ？」通るではありませんか。なんでやねん？ではありますが、とりあえず成功であり良かった良かったで終わりにしました。

副作用として、<a>にdisplay:blockを指定していないにもかかわらず<a>の中の<hn>はあくまでブロックだからということでしょうか、その<a>もブロックで表示されています。ま、そこだけ変わっていて視認性が良くはなったのですが。

何も知らない老眼の人間を驚かす様なものは、何とかして頂ければと強く思うのでありました。

終わり