今日、4月9日は “CSS Naked Day” です。Webページから CSS（見た目）を外して (X)HTML（構造）を見直そうという日。
このブログもニューヨーク時間の9日午前０時（日本時間の午後1時）から CSS を外しています。
CSS Naked Day 終わったのですが元に戻すことを忘れてました。11日午後1時、元に戻しました。
「XHTML+CSS」カテゴリのアーカイブ
IE7のズーム機能による問題の解決策
February 14, 2008 Thursday 7:54 am
以前書いた IE7のズーム機能の問題の解決策がわかりました。
まず、position プロパティを使ってレイアウトした場合に、拡大/縮小すると要素同士の間隔が広がっていったり、縮まって重なり合ったりする問題。
これは position:relative を指定した要素同士を包括する要素（例えば body）にも position:relative を指定してやることで解決します。
そして、 body の背景に画像を配置した場合に背景画像が拡大/縮小されない問題。
これは背景画像を body 以外に指定してやればいいわけで、<body> の内側に例えば <div id="body-inner"> といった要素を追加し、この #body-inner に背景画像を指定すれば解決します。
もうひとつ、前回書かなかったのですが、float あるいは display:inline を設定して li 要素などを横に並べた場合、それに設定している背景画像やボーダーがズームによってずれます。
これはその要素に zoom:1 を指定してやればOKですが、zoom プロパティは IE の独自仕様なので W3C の Validation に引っかかります。なので、IE専用の CSS に書いて IE の条件付きコメントで HTML に読み込ませるなどの工夫が必要です。
＃このサイトは見直したいところが沢山あるので、まだ直していません。w
IE7のズーム機能の問題
January 14, 2008 Monday 1:35 pm
2月13日から Windows Update による“強制配布”が始まる Internet Explorer 7。公開から1年以上。諸外国ではとっくに配布されていますが、やっと日本でも強制配布が始まるわけです。
さてその IE7。他のブラウザではとっくに実装されていたタブブラウズや縮小印刷などの機能がようやく実装され、Ver.6 までのチープな CSS の対応や表示の問題が様々改善されてはいるものの、他のブラウザに比べるとやはり問題だらけです。
とりわけ厄介なのがズーム機能。これまでのフォントの拡大/縮小に加え、画像等を含めて画面全体が拡大/縮小されるようになった（Ctrl + ホイールの操作はこっちが優先）わけで、ユーザビリティ的には有効な機能なのですが、CSS の表示が中途半端で、拡大/縮小を行うと表示にズレが発生する場合があります。
テキストの両端揃え
November 4, 2007 Sunday 1:02 am
今までWebサイト上ではテキストの両端揃えは出来ないと諦めていました。というより、Internet Explorer が存在するが為に諦めていたといべきでしょう。
Firefoxなど、Web標準に準拠したブラウザでは、text-align プロパティに“justify”の値を指定することで両端揃えにできますが、IE は最新版の Ver.7 でさえも text-align:justify に対応していません。
でも、IEでも両端揃えが、それも W3C の Validator をクリアして実現する方法を知り、最近仕事で制作するサイトはこれを使っています。このBlogも本文部分を両端揃えにしました。
外部リンクに対してアイコンを表示する
April 28, 2007 Saturday 2:29 pm
本文内の外部リンクに対して、それを示すアイコンを表示する方法として、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトに、a要素に「.external」といった class を付け、
- アイコン画像を a要素の背景として右端にひとつ表示する方法
- :after擬似要素と contentプロパティを使ってアイコン画像を追加する方法
と、2種類の方法が載っています。
ただし、Win IE と Mac IE はいずれのバージョンも :after擬似要素と contentプロパティをサポートしていないため、背景関連プロパティを利用して実現したほうがよいだろう。
このように書かれているのですが、IE ではリンクテキストが折り返している場合、リンクテキストが含まれる行の右端に表示されてしまい、返ってみにくい状態となってしまいます。
また、いちいち外部リンクの a要素に対して class 指定するのも面倒ですし、漏れがあるかもしれません。
Recent Comments