Pixel.United » Web Design

IE7でのインライン要素の背景指定は変？（アイコン追加にて）　ではIE8では？

J.J. — Wed, 25 Mar 2009 16:35:49 +0000

当サイトでは、外部サイトへのリンクを用いる場合、CSSで”インライン要素であるaタグの右側に適度な余白（padding-right:）を作り、アイコンを背景画像として右に配置”しています。これは割とメジャーなテクニックかと思われます。

しかし、なぜ今まで気づかなかったのか、Internet Explorer 7（以下「IE7」）ではインラインの背景をブロック要素のように取るため、以下の赤線のようなボックス状の中に画像を配置するようです。

ということは、実際のIE7での見た目は下の画像のようになり、アイコンは欠けたり、見えなくなったりします。

padding-rightで与えた右の余白はしっかりと2行目に入ってるのですが、background-position: right center;で”X軸：右、Y軸：中央”として与えた背景は”2行合計のX軸：右、Y軸：中央”にされてしまっています。
2行合計で計算されていますから、background-position: left top;で”X軸：左、Y軸：上”にすると、今度は1行目のaタグ冒頭に余白ができ、1行目の全体頭に（aタグではない部分）にアイコンが来るようです。上の画像だと”UI”と書かれてるあたりにアイコンがカブります。

IE8ではこのテクニックは通用します。しかしながら、IE8を意識し、モダンブラウザをメインターゲットに捉え、過去のブラウザと決別するのであれば、CSS3で実現すればいいという考えも浮かびます。そのためのコードは以下の通りで、当サイトもこの形式に変更してみました。

アイコンを追加したい部分のaタグに向けて……

div.post p a[href^='http']:after {
content: url(‘icon_outside.png’);
}
div.post p a[href^='http://www.eight-bits.net']:after {
content: url(‘empty.png’);
}

このa[href^='http']がCSS3によって実装されているセレクタを利用した部分で、1つ目の部分の意味は”href属性の内容がhttpで始まっているaタグだったら”ということになり、続く:afterは”その後にどうする”ということになります。また、content: urlの中で、icon_outside.pngという”外部リンク用アイコンの画像”を指定することにより、アイコンの表示が可能になります。

2つ目の指定は、そうじゃなかった場合に1つ目で指定したものを打ち消すために仕方なく書いたコードです。本来なら「～でないなら」的なコードを書きたかったのですが、ざっと探した限りでは見つからず、またcontent: none;のような「そうだった場合に、”消す”」的なものは、一部ブラウザで動作しなかったため断念。意味としては”href属性の内容がhttp://www.eight-bits.net（つまり自分のドメイン）で始まる場合は、その後にempty.pngという1*1pxの判別しづらい透明画像を追加する”となります。

以上のコードを要約すると、「httpで開始する外部リンクは後方にアイコンを付加、そうでないときは何もしない、しかし、意図しない自分のドメインへの絶対パスがリンクに設定されている場合は、代わりの判別しづらい画像を後方に追加する。」ということになります。

Windows用のIE8、Firefox3、Opera9.64、Safari3.2.2、Google Chrome1.0、Mac OSX用Safari3で動作しました。2つ目の指定をもっとスマートに書けないものかなぁ……

2009年3月28日追記

なぜ上記のようなとてつもなくやっつけ半分なコードになっているかについてですが、vanguardeさん（ご協力ありがとうございます）よりコメント欄にてご意見いただいているように、よりスマートな書き方としては……

div.post p a[href^='http']:not([href^='http://www.eight-bits.net']):after {
content: url(‘icon_outside.png’);
}

という書き方が存在します。これは”href属性がhttpで開始されているaタグのうち、http://www.eight-bits.net（自分のドメイン）での開始を除いたものの後にicon_outside.pngを追加する”という意味になりますが、この方法ですと、IE8では動作しませんでした……そもそも:notが対応していないようです。

また、その他にも2つ目に挙げたコードをちょっとでもスマートにしようと……

div.post p a[href^='http']:after {
content: url(‘icon_outside.png’);
}
div.post p a[href^='http://www.eight-bits.net']:after {
content: none;
}

“href属性がhttpで開始するaタグにicon_outside.pngを追加するが、href属性がhttp://www.eight-bits.net（自分のドメイン）で開始するaタグの場合は何も追加しない”的なコードにしてみたのですが、こちらはWindows用Opera 9.64、Windows用Safari 3.2.2、Google Chrome 1.0で動作しませんでした。2つ目の指定が1つ目に対して上書きされていないのかと思い、content: none !important;としてみてもやはり動作せず。

正しいというか、スマートなコードを書きたければCSS3の導入はもう少し先にすべきかもしれません。

ちなみにこれは余談ですが、jQueryによる仮想CSS3にて今までこの動作をさせていたのですが、これがIE8ではJavaScriptエラーが発生し気持ちが悪かったために、CSS3への転換を決意したというのが事の発端です。

最速ブラウザ？Safari 4パブリックベータ見参。

J.J. — Tue, 24 Feb 2009 15:35:42 +0000

Appleのウェブブラウザ”Safari”の最新版Safari 4 パブリックベータが公開されました。Windows、MacOSXともに発表されており、すでにダウンロードできます。

Windows版をインストールしてみたのですが、音楽付きのオープニング（5秒程度）はMacOSXのインストール直後のオープニングを思わせる作りで綺麗です。「あぁ、アップル製品なんだな」って思わせる、粋でもあり、人によっては無駄とも取れるそれは、しょっぱなからアップルらしさ全開です。

HTML5＆CSS3に対応しており、それに加えてInternet Explorer 7の約30倍の速度で動作すると豪語するJavaScriptエンジン”Nitro”や従来のウェブブラウザより3倍近い速度でHTMLを表示できるレンダリングエンジンを備えているようです。この具体的な数字の信憑性はともかく、確かにレンダリングスピードは半端ないです。

一つ個人的に難を挙げるとすれば、タブの位置がものすごい気持ち悪いｗ　本来ならタイトルバーであるはずの部分がタブになっているため、ウィンドウの移動とタブの入れ替えの動作が少々混乱してしまいます。タブの入れ替えはタブの右側にあるグリップっぽい部分をドラッグ＆ドロップ操作しなければなりません。今までのタブ操作の慣習のせいもありますが、何か違和感を覚えます。

本製品はまだパブリックベータであるため、お使いのPCに不具合を起こすバグが存在する可能性は十分にあります。またバグが出た際にはなるべく速やかに報告しましょう。

アップル公式プレスリリース: アップル、Safari 4を発表 — 世界最速、最も革新的なブラウザ
Safari 4パブリックベータダウンロード: アップル – Safari – Safari 4の登場です。 – 目の前にひろがる新しいウェブの世界。

社内アワードを受賞しましたー

J.J. — Mon, 16 Feb 2009 17:02:47 +0000

部署の利益や将来的な投機に貢献した（だっけ？）として、2008年度第4四半期のアワードを、関わったプロジェクトが受賞しました。自分というより周りの部署がいろんなところで折衝し、妥協点を小さくしてくれたからこその受賞だと思います。これにより、図書券がプロジェクトメンバーに贈られたわけですが、すみません、ここで言います。ふつーにマンガ買いますｗ
自分の将来の投機になる書籍は重みを感じるために、全て自腹で買っていますので……。

WPtouch、Ktai Style導入しました

J.J. — Sun, 01 Feb 2009 07:24:09 +0000

やっぱりiPhone/iPod touchにはiPhone/iPod touchに適した表示を、ケータイにはケータイに適した表示をした方がいいかなと思い、iPhone/iPod touchにはWPtouchを、ケータイにはKtai Style導入しました。

どちらとも、WordPressのプラグインディレクトリにつっこんで、パーミッションさえ設定してあげれば、後は管理画面からサクサク使えるのがいいですね。

Photoshopのカラーピッカーでアプリ外の色を拾う

J.J. — Sat, 17 Jan 2009 08:19:23 +0000

先日Twitterで”Photoshopのカラーピッカーで、デスクトップ上の色をピックアップするにはどうするの？”的な質問があったりしたので、Twitter上で回答してみましたが、もしかしたら他にも知らない方もおられるかもしれないのでエントリー。

Fireworksでは可能な”アプリケーション領域外の色の取得”。Photoshopで同様の操作を行うことができません。これにより、一見できないのかと思われてしまいますが、実はPhotoshopでもアプリケーション領域外の色は取得できます。

やり方は簡単。カラーピッカーを開いたら、キャンバス上から拾いたい色まで、ドラッグアンドドロップ操作をするだけです。

これで、アプリケーション領域外の色をピックアップできました。