« メルマガ発行者の邪悪度確認方法 | トップページ | Pythonによる簡単なフィルタ »

2006/02/12

ナビゲーション文字の部分拡大

ブックマークに追加する

Ajaxian(ベタ訳すると「Ajax人」)のサイトにて、この前、ナビゲーション文字を部分拡大するためのCSSサンプルが紹介されていた。作成者は、Paul Armstrongという人のブログの次のエントリ「CSS Navigation Magnification」。

このために必要なのは、スタイルシートに下記の記述を追加しておくだけ。

------------------ ここから ------------------
li { font-size: 1em; }
li:hover { font-size: 2.4em; }
li:hover + li { font-size: 1.9em; }
li:hover + li + li { font-size: 1.5em; }
li:hover + li + li + li { font-size: 1.2em; }
------------------ ここまで ------------------

この記述では、 これによって、liタグの項目については、カーソルを近づけるだけで、自動的にサイズが変わる。
# 但し、このCSSに対応しているのは、Mozilla Firefox系で、IE6は未対応。IE7だと対応しているらしい。
# IEのみを使用している方は、是非、Firefox等を使用して同じページを見て下さい。

なお、このサンプルでは、オリジナルと同じ形式ではなく、特定のclassに限定して動くようにちょっと調整している。

以下は見えない人のための画面のハードコピー
文字の自動的拡大サンプル

■P.S.
まあ、これが何の役に立つと聞かれたら「さあ?」としか答えられないところが玉に瑕。


●お探し物は見つかりましたか?まだの方は以下の検索をご利用下さい。
 
当ブログ内 (within this blog) Web
●当ブログのRSSフィードをお手持ちのRSSリーダーにご登録いただくと、エントリ追加時のみ更新通知が届くため、確認の手間が省けます。よろしければ、どうぞ。
当ブログのRSSフィード
●当ブログの更新情報+α(deliciousのブックマーク他)はTwitter経由でも確認できます。是非フォローしてください。(実はRSSフィードよりも更新が早かったりします)

|

Ajax」カテゴリの記事

blog comments powered by Disqus


●Google広告


●その他の広告



トラックバック

この記事のトラックバックURL:

●トラックバックされる方へのご注意
本文中でこのエントリのアドレスを引用してください。引用(言及リンク)がない場合はスパム(迷惑行為)として削除します。
なお、迷惑行為かどうかを人力で判定しているため、トラックバックが反映されるまでに少々、お時間を頂いています。
For foreigners: If you would like to trackback to this entry, please include permlink of this entry in your entry. If your entry doesn't include this permlink, I will delete your trackback as spam.

この記事へのトラックバック一覧です: ナビゲーション文字の部分拡大:

» IE → Mozilla [外国語学習的ブログ by 語学中(英語とスペイン語)]
IEなんて嫌いだぁ〜。 発音記号の入力に書いた、発音記号、 IEでは、□にしか表示されないのに、 Mozillaだと、ちゃんと表示されるらしい。 ってことで、Mozillaをインストールしてみた [続きを読む]

受信: 2006/02/13 01:04

 
Google