相も変わらずWindowsの和文フォントは汚いままなので、”Yahoo! Japan”の様に、ホームページの題名となる様なタイトルを示す部分は、画像で作られます。
HTMLとしても、SEO対策としても本来はh1で囲みたいところですが、正直しんどいのが現状です(‘A`)
そんなところに、両者を満足させる方法が、Ten CSS tricks you may not know : evolt.org, Codeという記事に。
なんでこんな簡単なことに気がつかなかったのだろう… onz
具体的には <h1><span>タイトル</span></h1>
としてマークアップして、cssでh1の背景に従来の画像を出し、さらにh1の中のspanの内容を見えないところに配置するだけです。
h1 {
background: url(header_img.gif) no-repeat;
width : 768px ;
height : 200px ; }
h1 span {
position: absolute;
left:-2000px; }
という感じで。
spanが気になる人はspanを取って、h1に直接text-indent : -3000px とかでも良さそうです。
ところで、うちのサイトもそうですが、ページ全体を常にウィンドウの真ん中に表示するレイアウトは沢山使われています。
そしてそこに、別にcssで絶対配置したオブジェクトがあった場合、ウィンドウサイズによって絶対配置された要素とその他の要素の位置関係が変わってしまって参ったことはありませんか。
あれ、自分だけ…？(‘A`)
上から落ちてくるホバーウィンドウの時に悩んだんですが…。
とりあえずこれは、同じ記事の項目9番にも便利な例が載っています。
親要素の配置をrelativeにしておけば、その要素の中でabsolute指定された要素は、その親要素の原点を基準に配置することが出来ます。
つまり、ウィンドウサイズが変わっても、相対的な位置関係が維持できます。
————- しかし、このevolt.orgでも、WinIEのサイズ計算のバグ対策が乗っていますが、これはDoctype宣言で標準モードにすれば良い気もするのですが、なぜ未だに語られるのでしょう。
…何か罠が？
＃追記05/07/25 WindowsIEの6より前ではDoctypeスイッチが効かないとのこと。うぅむ…。
それはともかく、CSS周りはまだまだ苦労するところが多いですね。
ちなみに、個人的には、WinIEの「floatさせた要素のmarginが2倍くらいになってしまう」というバグが一番今のところ悩みの種です。
他は個人的にはあんまり不満は無かったり。
どちらかというと、CSSをどう書けば、他の製作者に意味が伝わりやすいか、他の人が読みやすいか等の方が最近は気になります。
CSSもHTMLもフリーな記述形式なので、非常に製作者ごとに書き方に差が出やいですね。
また、少し大きなサイトになれば、量も結構な量になります。
自分が書いたものでさえ、後で見ると意味不明だったり。
きちんとポリシーを作ってやろうと思っても、途中で辛くなってきて適当になってしまったり(‘A`)
…CSSの各セレクタごとにタグをつけて管理できるツールが切に欲しいです。
適用箇所、作った意図、注意点、作成日などを参照できるようなものが。
————- ちなみに自分がやっていることは、
「全体に適用されるCSSと個別のページごとのCSSの分割」
「CSSへのコメント付け」
「全体を”header”、”menu”、”contents”、”footer”のような感じでIDを振り、セクションに分割。そしてその中の要素は特に必要が無くとも、それらを親とした、子孫セレクタとして記述」 「クラス名を考えてつけることをサボらない」
くらいでしょうか。
Discussion about this post