Blog_Rでタグ「CSS」が付けられているもの

CSSによる文字組み

|

shimaihudousan.jpg

いつまでもこの街にいたいから|株式会社島井不動産

2009年も数多の素晴らしいWebサイトが出現して、それらを見るたびに、自分もまだまだ目指す頂は遠く、頑張らねばならないことだらけだ、と戒めるわけですが、Flash によるテクニックや、jQuery の目新しい活用法などはさておき、個人的に一番グッときたのが、冒頭のキャプチャにある株式会社島井不動産さんのサイトです( by 5ive さん)。

最初は、すっきりしてきれいなデザインだなぁ~、と思いながら拝見してたんですが、文字組みの整然さに気づき、ソースを覗かせてもらって、目から鱗でした。

10年ほど前の、世の中の猛者たちが群雄割拠して、まだまだ技術的なセオリーや定番化したテクニック、みたいなものが固まりきっていなかった頃は、『 なるほどそう来たか! 』という感動がそこかしこにありました。

久しく感じていなかった感動が、このサイトの文字組みにありました(大袈裟 !?w)。

CSS の達者な人たちにとっては、すでに定番な組み方なんでしょうか。不勉強だった僕にとってはまさに『 なるほど! 』でした。

 

******* 追記 *******

このエントリを書くにあたって、再度しっかりと(拝見した当時は激務で荒い見方してました)隅々まで拝見しましたが、感動した文字組部分には、jQuery のプラグインが活用されていたんですね!

なんだか結局 jQuery プラグインが感動した、て話にすり替わったようなエントリになってしまってますが決してそんな意図はないことを付け加えておきます。島井不動産さんのサイトが気づかせてくれたことは大切なことだったし、きっちりそういうプラグインの存在も熟知しつつデザインに取り入れているところなど、見習うところの多いサイトだ、という認識はまったく変わってません。
(なんか言い訳がましくなって泣けてきた(反省))

周知の問題かもしれないけど、今まで遭遇してなかったIEのバグ。
ちょいハマったので備忘録。

ボックスに背景画像を表示する時の

background: url(img/hoge.gif) 0 0 no-repeat;

みたいな指定で、

url() 直後でリピート指定を記述する部分にurl()の")"の後に半角スペースを空けずくっつけて0 0 no-repeat、と記述すると、IEだと画像が表示されないとかいううんこ仕様。

background: url(img/hoge.gif)【ココ】0 0 no-repeat;

なんか今まで、意識もせず半角空けてたんですね。
で、最近携わった案件でたまたま半角空けずに記述しちゃってた。ディレクターさんからの指摘で発覚、原因わからずしばらくハマりました。

どないかしてIE滅ぼせませんかね。

CSSでもまぁ<table>は使うことはたまにあって
思い起こせばその都度ハマってる気がするのでメモ。

table#hoge
{
  border-collapse: collapse;
}

*UTF-8&YUI on IE

|
YUI使ってるのにIE6でフォントサイズが指定パーセンテージ通りにならず、なんでなんだーさすがIE、とイラつきつつ若干放置してましたが、改めて調査巡回してたら対策がそこかしこにあったのでメモ。


font-family に MS Pゴシック を指定すること。


Shift_JISEUC-JP なら問題はそもそも発生しない。
でも周知の通りxhtmlだとUTFにしないとxml宣言のウダウダがあるんで、結局font-family指定するしかないってか。まったくうんこ呼ばわりし過ぎてうんこに申し訳ないくらいうんこなブラウザだぜIE。

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。