HOME 　»　 , , , 　»　スタイルシートいじりの覚え書き

スタイルシートいじりの覚え書き

2006/03/03　|　Comments & Trackbacks : 4

先日、サイトの模様替えをしたのですが、その際にあれやこれやと迷いまくって死亡したり暗い闇に沈んだりしたので、次こそはひどい目に合わないように覚え書きをしておこうと思います。
相変わらずなのですが、大した事は書いてませんので悪しからず。
そんな事はみんな知ってるよ！ってつっこまずに、生暖かく見守って頂けるとうれしいです。

Tahoma・MS UI Gothicの見栄え調整

前のデザインにした時から 英文フォント:Tahoma & 和文フォント:MS UI Gothicの組み合わせがすごく気に入っているのです。ちょっと縦長で大人っぽいフォルムがたまらないんです。
んで、さらに個人的な好みを言うとこの組み合わせでたまらんな、と思う見た目がFirefoxの13pxなのですが、IEだとかなり悲しい見栄えになってしまうのです。

と口先で言っても良く分からない事請け合いなのでキャプチャ画像などを。

Firefox 【13px】Internet Exproler 【13px】

Firefox 【12px】Internet Exproler 【12px】

左上から、Firefox・13px、IE・13px、Firefox・12px、IE・12pxのキャプチャ画像です。
Firefox・13pxとIE・13pxの見栄えが明らかに違うんですけど(泣)！と前回は泣き寝入りしたのですが、アンダースコアハック(Firefox等のモダンブラウザ用設定直下にプロパティの前に「_（アンダースコア）」を入れた設定を書いておくと、Win IEではそちらの値を上書き読み込みするバグを使った裏ワザ。詳しくはこちら。)を使って、IEのみフォントサイズは12pxのままでletter-spacingを1px取ってやると、IEでも何となく似たような見栄えになる事が判明。

IE 【12px+letter-spacing:1px】

こんな感じです。本人的には大満足。
もっともフォントサイズは絶対可変で！とか、んじゃ普通にVerdana使えばえーやん、とか言われると泣くしかないんですけどね(苦笑)。
同じ事で悩んでる人が日本のどこかにいるかも知れないので書き残してみました。

ちなみに現在の設定はこんな感じ。行間も調整しないと見栄えが似てこないみたいです。

font-size: 13px;
_font-size: 12px;
_letter-spacing: 1px;
line-height:150%;
_line-height: 160%;

ちなみにこれはIEとFirefoxで似たような見た目に、ってところだけにこだわっているので、その他のブラウザやMacさんの事は気にしてません（ひどくてスイマセン。）。
OperaはTahomaとMS UI Gothicの両方を適用させるのはどうやら無理っぽいんですね(泣)。
MS UI Gothic 一本なら行けるんだけどなぁ・・・。

Operaでリストタグがずれた事への対応

メニュー部をリストタグを使って横並びにしているのですが、なぜかOperaのみ、メニュー部が上に5pxずれてしまう事が判明。
リストをdivでくくって、外枠の高さを指定するだけではだめなご様子。
だったのですが、「height」→「line-height」と置き換えるとIE・FF・Operaでほぼ同じ位置に配置されるようです（微調整は必要ですが）。

リストタグの記述はこちらのサイトを参考させていただきました。ありがとうございます。

■参考サイト　 USEFULL CSS SAMPLE A by YEAR OF THE CAT

サイトタイトルを画像に置換

昔は出来たのになぜか出来なかったよママン(泣)、と某所で泣いていたら、神様が助けてくださいました。
その節はありがとうございます。

と言う訳で教わった記述をそのまま保存しておきます。
置き換えるだけで誰でも楽勝で変えられちゃって便利です。

h1{
width:○○px;
height:○○px;
}

h1 a{
display:block;
height:○○px;
text-indent:-9999px;
outline:none;
}

Related Posts

Google Adsense

Comments & Trackbacks : 4

Response from マオ2006 年 3 月 3 日　12時16分

ご無沙汰しちゃって申し訳なし。
模様替えしたんだねー
またグッと雰囲気が変わったけど相変わらずステキです。
MS UI Gothicはいいよねー
私も広告作るときの和文フォントはコレです。
スッキリしてるし、文字間が適度で好き。
（MS ゴシックやMS Pゴシックは文字間が間が抜けてる感じで）

Response from トルキー2006 年 3 月 3 日　19時12分

あわ、いつの間にか神になってる…！
アンダースコアハックはVaildじゃないのですよね。確実・簡単で使い勝手もいいのだけれども、その点が難しいなぁと思ってます。
あと、Operaのフォントはやはりバグみたいです。このへん。↓
http://cssbug.at.infoseek.co.jp/detail/opera/b002.html

Response from もそ2006 年 3 月 4 日　19時28分

■マオさん
いあいあ、こちらこそごぶさたなのだ。
そうなの、模様替えしたんよ。前のに飽きた(苦笑)

私もMS UI Gothic の字間が好きなんだ。
Verdanaより大人っぽいしね。
一度使い始めたらやめられまへんわー。

■トルキーさん
随分前から神棚に飾ってありますが何か(笑)？

そそ、Validじゃないのよねぇ。
でもめんどくさいからガンガン使っちゃってるよー。
私の場合、メジャーなブラウザでほぼ見栄えが一緒ならいいか、ってゆるい判断なのです。
ところでバグ情報サンクスコ。
これは早急に直してほしいなぁ(泣)

Response from +LOVE PARADISE+2006 年 4 月 3 日　22時17分

フォントとリンク色のカスタマイズ

週末はずっと雨だったので、家に引きこもり状態でCSSをいじって、フォントとテキストリンクをカスタマイズしてみたんですが、ちょっとオシャレに、そして読み…