リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの”飾り”を指定する場合は背景でやります)

1.が普通に指定したアンダーラインのあるリンク

2.飾りがnoneでボーダーの下が2pxのdotted

2.hoverの飾りがnoneでボーダーの下が2pxのsolid

文字と下のボーダーとの距離はline-heightかheightで調整します。その場合はdisplay: block;にする必要があるので少々クセがあります。

html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。

しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。

そんなときは＜img＞の中にtitle=”"を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。

僕がサイトを作る場合、基本的にXHTML 1.0 Strictで作ります。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。

右の場合は特に問題ないのですが、装飾要素のある部位だとこれは致命的です。なのでそういうときはCSSでimgに対して

vertical-align: bottom;

を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。

Firefoxはサイト全体が画面内に収まる場合はスクロールバーを表示しません(IEは縦スクロールバー常時表示)。縦にスクロールの必要がある場合にのみスクロールバーが表示されるので、制作側の大きいモニタでは問題なくても、一度に表示できない小さいモニタとFirefoxを使ってサイトを見ている訪問者は、ページ移動の度にスクロールバーが表示・非表示と切り替わってしまいます。

そうなるとページ移動の度にスクロールバーの幅だけ横にズレてしまうので、見ている人に何とも言い難い不安定感を演出してしまいます。サイトの縦幅が全ページ同じなら気にすることもないのですが、なかなかそういう風にはいきません。ですのでそういうときにはCSSに

html>/**/body { overflow-y:scroll;}

を記述することによってFirefoxでの縦スクロールバーの常時表示が実現します。これはIE7以外のモダンブラウザに適用されるようにCSSハックを利用しています。そしてこのハックはW3CのCSS Validatorには通りませんので注意してください。そもそもoverflow-y自体がCSS2.1に存在しないので最初から通らないんですが。

頑張って作ったサイトは自分の作品ですから、できるだけ色んな人に綺麗な状態で見てもらいたいですよね。

またなんか思いついたら書いてみます。

フォトレポートの画像周辺のソースをざっと見ただけなんではっきりとは言えないんだけど、＜a＞と＜img＞の間に空spanが入ってるんでなんとなくやり方がわかったようなわからないような。以前Web Designer WallでやってたCSS Decorative Galleryみたいなのの延長線上+αかなぁとは思うんだけど確証なし。でもまぁあんまり難しい事は出来ないので、簡易バージョンで再現してみました。