We were born in 1967. » XHTML+CSS

CSS Naked Day

haru3 — Thu, 09 Apr 2009 04:16:39 +0000

今日、4月9日は “CSS Naked Day” です。Webページから CSS（見た目）を外して (X)HTML（構造）を見直そうという日。

このブログもニューヨーク時間の9日午前０時（日本時間の午後1時）から CSS を外しています。

CSS Naked Day 終わったのですが元に戻すことを忘れてました。11日午後1時、元に戻しました。

IE7のズーム機能による問題の解決策

haru3 — Wed, 13 Feb 2008 22:54:00 +0000

以前書いた IE7のズーム機能の問題の解決策がわかりました。

まず、position プロパティを使ってレイアウトした場合に、拡大/縮小すると要素同士の間隔が広がっていったり、縮まって重なり合ったりする問題。

これは position:relative を指定した要素同士を包括する要素（例えば body）にも position:relative を指定してやることで解決します。

そして、 body の背景に画像を配置した場合に背景画像が拡大/縮小されない問題。

これは背景画像を body 以外に指定してやればいいわけで、の内側に例えば

といった要素を追加し、この #body-inner に背景画像を指定すれば解決します。

もうひとつ、前回書かなかったのですが、float あるいは display:inline を設定して li 要素などを横に並べた場合、それに設定している背景画像やボーダーがズームによってずれます。

これはその要素に zoom:1 を指定してやればOKですが、zoom プロパティは IE の独自仕様なので W3C の Validation に引っかかります。なので、IE専用の CSS に書いて IE の条件付きコメントで HTML に読み込ませるなどの工夫が必要です。

＃このサイトは見直したいところが沢山あるので、まだ直していません。w

IE7のズーム機能の問題

haru3 — Mon, 14 Jan 2008 04:35:13 +0000

2月13日から Windows Update による“強制配布”が始まる Internet Explorer 7。公開から1年以上。諸外国ではとっくに配布されていますが、やっと日本でも強制配布が始まるわけです。

さてその IE7。他のブラウザではとっくに実装されていたタブブラウズや縮小印刷などの機能がようやく実装され、Ver.6 までのチープな CSS の対応や表示の問題が様々改善されてはいるものの、他のブラウザに比べるとやはり問題だらけです。

とりわけ厄介なのがズーム機能。これまでのフォントの拡大/縮小に加え、画像等を含めて画面全体が拡大/縮小されるようになった（Ctrl + ホイールの操作はこっちが優先）わけで、ユーザビリティ的には有効な機能なのですが、CSS の表示が中途半端で、拡大/縮小を行うと表示にズレが発生する場合があります。

一つは position プロパティを使ってレイアウトした場合。拡大/縮小すると要素同士の間隔が広がっていったり、縮まって重なり合ったりします。

もう一つは body の背景に画像を配置した場合。困ったことに body の背景は拡大/縮小されません。
私のこのサイトは、横幅 800ピクセルで表示したときに、コンテンツが横スクロールが発生することなくできるだけギリギリ一杯に表示されるように、左右の区切りと中央のカラムの背景はまとめて body の背景画像として表示しています。だからこのサイトを IE7 で拡大/縮小してみるととんでもないことになってしまいます。
下は 120% に拡大したときと、80% に縮小したときの表示です。

なお、Opera は以前からズーム機能があるわけですが、こっちは問題なく body に指定した背景も拡大/縮小してくれます。さすが、というか、それが当たり前。

ちなみに私は Firefox 派。みんな、IE なんか捨てて、。

2月14日追記　解決策はこちら

テキストの両端揃え

haru3 — Sat, 03 Nov 2007 16:02:11 +0000

今までWebサイト上ではテキストの両端揃えは出来ないと諦めていました。というより、Internet Explorer が存在するが為に諦めていたといべきでしょう。
Firefoxなど、Web標準に準拠したブラウザでは、text-align プロパティに“justify”の値を指定することで両端揃えにできますが、IE は最新版の Ver.7 でさえも text-align:justify に対応していません。

でも、IEでも両端揃えが、それも W3C の Validator をクリアして実現する方法を知り、最近仕事で制作するサイトはこれを使っています。このBlogも本文部分を両端揃えにしました。

それは、IE の独自拡張である“text-justify: inter-ideograph;”を、IE の独自タグである条件付きコメントで読み込む方法です。

“text-justify: inter-ideograph;”は、IE で両端揃えを実現できますが、W3C の仕様に無いため、構文エラーとなります。
そこで、これを IE 専用の CSS ファイルにして、条件付きコメントで XHTML に読み込みます。

つまり、正規の CSS には“text-align:justify”を記述し、IE 専用の CSS に“text-justify: inter-ideograph;”を記述して、これを XHTML の内に、

という具合に記述して読み込むわけです。
これで、IE 以外には“text-align:justify”の指定によって、IE は“text-justify: inter-ideograph;”の指定によって両端揃えとなります。
その上、XHTML に記述した条件付きコメントは、IE 以外には単なるコメントとして扱われるため、W3C の Validator もクリアできるわけです。

連続する半角英数を折り返す“word-break: break-all;”も同様で、これについては以前から同様の方法で実現していました。

一方、最近ではこれら IE が対応していない CSS プロパティや値を補うための JavaScript もいろいろ公開されているみたいですね。

外部リンクに対してアイコンを表示する

haru3 — Sat, 28 Apr 2007 05:29:33 +0000

本文内の外部リンクに対して、それを示すアイコンを表示する方法として、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトに、a要素に「.external」といった class を付け、

アイコン画像を a要素の背景として右端にひとつ表示する方法
:after擬似要素と contentプロパティを使ってアイコン画像を追加する方法

と、2種類の方法が載っています。

ただし、Win IE と Mac IE はいずれのバージョンも :after擬似要素と contentプロパティをサポートしていないため、背景関連プロパティを利用して実現したほうがよいだろう。

このように書かれているのですが、IE ではリンクテキストが折り返している場合、リンクテキストが含まれる行の右端に表示されてしまい、返ってみにくい状態となってしまいます。

また、いちいち外部リンクの a要素に対して class 指定するのも面倒ですし、漏れがあるかもしれません。

で、このサイトに採用した方法は、属性セレクタを使ってリンク先を判別し、:after擬似要素と contentプロパティを使ってアイコン画像を追加する方法です。したがって、IE では表示できません。
＃みなさん、poor な IE より、Firefox を使いましょう。

因みに、IE7 では属性セレクタには対応するようになりましたが、相変わらず :after擬似要素あるいは :before擬似要素には未対応です。

具体的には、

div#main a[href^="http:"]:after,
div#main a[href^="https:"]:after {
	content: url(css_img/external.gif);
	vertical-align: middle;
}
div#main a[href^="<$MTBlogUrl$>"]:after {
	content: "";
	vertical-align: baseline;
}

href属性が”http:”か”https:”で始まる a要素に対して、リンクテキストの後にアイコン画像を追加し、その上で href属性が自サイトの URL である場合は追加したアイコン画像を消します。

なお、div#main を指定してコンテンツ領域のみに限定しています。

参考にしたサイト： CFDN | 外部リンクにアイコンを付ける