2011-07-07

:link、:visited、:hover、:activeの記述順

:link、:visited、:hover、:activeといった擬似クラスを指定する場合は、正しい順序で指定しないと効果が打ち消されて意図した結果が得られなくなる。
a要素にそれぞれの擬似クラスを指定する場合、通常は次のような順序で行う。

もし、マウスポインタが重なったりアクティブになったりしても、すでに訪問済みのリンクのスタイルを変化させたくないというのであれば、:visitedを最後に記述すればよい。


2011-07-06

CSSで指定したスタイルが適用される優先順位

CSSで指定したスタイルが適用される優先順位についてまとめてみる。参考にしたのは『Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則』という本の66〜67ページ。
  1. CSSの提供元による優先順位
    下記の順に優先される。
    1. Webページの制作者が作成した「制作者スタイルシート」
    2. Webブラウザのユーザーが作成した「ユーザースタイルシート」
    3. Webブラウザがデフォルトで適用する「デフォルトスタイルシート」
  2. 個別性による優先順位
    個別性の高いものが優先される。(詳細は後述)
  3. 記述位置による優先順位
    あとから出てきたものが優先される。
  4. !importantルール
    !important宣言の付いたスタイルが最優先される。
    !important宣言によって提供元による優先順位が入れ替わる。
    1. ユーザースタイルシート(!important宣言付き)
    2. 制作者スタイルシート(!important宣言付き)
    3. 制作者スタイルシート
    4. ユーザースタイルシート
    5. デフォルトスタイルシート
重要だが少々ややこしいのは、「個別性による優先順位」のルールだ。このルールは、ある要素に対するスタイルの指定が競合する場合に、より「個別性」の高いスタイルが優先されるという原則にもとづく。個別性は以下のようにして、最大4桁の正整数で表現される(値が大きいほど個別性が高い)。
  • 要素に対して直接style属性が指定された場合は、1000の位を1つカウント
  • セレクタに含まれているid属性の数だけ、100の位をカウント
  • セレクタに含まれているid以外の属性と擬似クラスの数だけ、10の位をカウント
  • セレクタに含まれている要素、擬似要素の数だけ、1の位をカウント
個別性の計算例
記述例 1000の位 100の位 10の位 1の位 個別性
* { } 0 0 0 0 0
li { } 0 0 0 1 1
li:first-line { } 0 0 0 2 2
ul li { } 0 0 0 2 2
ul ol+li { } 0 0 0 3 3
p[class="memo"] { } 0 0 1 1 11
ul ol li.menu { } 0 0 1 3 13
li.menu.service { } 0 0 2 1 21
#example { } 0 1 0 0 100
div#example { } 0 1 0 1 101
style="" 1 0 0 0 1000
HTMLの要素に直接aligh属性などを指定した場合の個別性の値は0と計算される。したがって、HTML属性の指定と、CSSのスタイル指定が競合する場合は、CSSが優先される。

Chrome Extensionのポップアップでリンクを有効化(ポップアップ内で遷移)

「Chrome Extensionのポップアップでリンクを有効化」では、ポップアップのリンクがクリックされたときに、新しく開いたブラウザのタブにページを表示する方法を紹介したが、iframeを利用すれば、ポップアップの中でページ遷移を行うこともできる。
スマートフォン用のWebページを持っているのであれば、それをそのままiframeに表示するというのも悪くないかもしれない。

2011-07-03

Chrome Extensionのポップアップでリンクを有効化

Chrome Extensionのポップアップ・ウィンドウ(popup.html)にリンク(アンカー・タグ)を仕込んでも、そのままではページ遷移することができない。リンクをクリックしても、何も起こらない。

リンクがクリックされたときに、タブにリンク先ページが表示されるようにするには、popup.htmlのhead要素に<base target="_blank" />を付け足せばよい。 base要素にtarget="_blank"を指定する代わりに、a要素にtarget="_blank"を指定するのでもよい。

なお、target="_self"を指定しても、ポップアップの中でページ遷移を行うことはできない。
ページ内で遷移を行いたい場合は、ここで紹介するようにiframeを使えば良い。

2011-07-01

Chrome Extensionで現在表示中のページのURLとタイトルを取得

Chrome Extensionで、アイコンがクリックされたときに現在表示中のページのURLとタイトルを使って何かやりたい場合は、以下のようにしてURLとタイトルを取得する。 document.titleやlocation.hrefを、popup.html(アイコンをクリックしたときに表示されるポップアップ)で呼び出しても、表示中のタブのURLやタイトルを取得することはできないので要注意。

2011-06-24

アフィリエイト・サイトのAPIは使い物にならない

商品を検索するのにアフィリエイト・サイトのAPIを使えないかどうか検討してみたのだが、なかなか難しい。
リンクシェアなどのいつくかのアフィリエイト・サイトは、APIを備えていて、提携中のECサイトを横断して検索することができる。しかし、この検索機能を利用して商品検索を行うのにはいくつか問題がある。

まず、キーワードと関連度が高い順にソートを行うことができない。商品名でソートしたり、価格でソートを行うのでは、検索語と関連性の薄い情報が並んでしまい、ユーザーが望んでいる結果が得られないのだ。

では、JANやISBNなどの商品コードで検索する場合はどうかというと、商品コードを登録しているECサイトが少ないために検索にほとんど何もヒットしない。

また、アフィリエイト・サイトのAPIは、速度が遅いという問題を抱えていることが多いようだ。

現在のところ、アフィリエイト・サイトのAPIは、使い物にならないという結論になりそうだ。

2011-06-22

Chrome ExtensionでAdSenseを使うのは規約違反

数日前からChromeブラウザ用の拡張機能を作成している。
Androidなどのスマートフォンに比べるとマーケットが小さい印象だが、作成したアプリでお金が入ってくるようにしたいと考えている。
広告を表示するのが手っ取り早いだろうと考えて、GoogleのAdSenseをExtension内に表示させられるか調べたのだが、残念ながらこれは利用規約違反になってしまうようだ。Google AdSense プログラム ポリシーの「トラフィックソース」という項目で次のことが禁止されている。
ツールバーなどのソフトウェア アプリケーションを操作した結果として、Google 広告、検索ボックス、検索結果などを表示すること
Google GroupでもAdSenseを使うのは規約違反になるという議論がされているのを見つけた(英語)。
広告収入を得る場合は、AdSense以外のサービスを利用する必要がありそうだ。