題名にはあまり意味は無いです。たぶん書いてる本には書いてると思います。なので正確には
「僕の持っている 教科書には書いてない か、僕が見落としている XHTMLとCSS」
なのでニュアンス的にはちょっとした小技みたいな感じで受け取ってくれるとこちらも気が楽ですけど、いかがなものでしょうか。さて情けない逃げ口上もすんだことですので、本題に入ります。
テキストリンクのアンダーラインをボーダーで表現する
リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの”飾り”を指定する場合は背景でやります)
1.が普通に指定したアンダーラインのあるリンク
2.飾りがnoneでボーダーの下が2pxのdotted
2.hoverの飾りがnoneでボーダーの下が2pxのsolid
文字と下のボーダーとの距離はline-heightかheightで調整します。その場合はdisplay: block;にする必要があるので少々クセがあります。
IEデフォルトのツールチップを表示させない
html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。
しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。
そんなときは＜img＞の中にtitle=”"を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。
DTDによる画像の下に出現する意図しない隙間を埋める
僕がサイトを作る場合、基本的にXHTML 1.0 Strictで作ります。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。
右の場合は特に問題ないのですが、装飾要素のある部位だとこれは致命的です。なのでそういうときはCSSでimgに対して
vertical-align: bottom;
を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。
Fiirefoxの縦スクロールバーを常時表示させる
Firefoxはサイト全体が画面内に収まる場合はスクロールバーを表示しません(IEは縦スクロールバー常時表示)。縦にスクロールの必要がある場合にのみスクロールバーが表示されるので、制作側の大きいモニタでは問題なくても、一度に表示できない小さいモニタとFirefoxを使ってサイトを見ている訪問者は、ページ移動の度にスクロールバーが表示・非表示と切り替わってしまいます。
そうなるとページ移動の度にスクロールバーの幅だけ横にズレてしまうので、見ている人に何とも言い難い不安定感を演出してしまいます。サイトの縦幅が全ページ同じなら気にすることもないのですが、なかなかそういう風にはいきません。ですのでそういうときにはCSSに
html>/**/body { overflow-y:scroll;}
を記述することによってFirefoxでの縦スクロールバーの常時表示が実現します。これはIE7以外のモダンブラウザに適用されるようにCSSハックを利用しています。そしてこのハックはW3CのCSS Validatorには通りませんので注意してください。そもそもoverflow-y自体がCSS2.1に存在しないので最初から通らないんですが。
頑張って作ったサイトは自分の作品ですから、できるだけ色んな人に綺麗な状態で見てもらいたいですよね。
またなんか思いついたら書いてみます。
関連する投稿
