IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアルを紹介します。 IE7でのキャプチャ 背景色はRGBaとは別に指定しておくと、カラーも反映されます。 実装 元記事では最初に、a要素のtitle属性を利用した実装例がありますが、それは省略して、デモページの実装を紹介します。 HTML ポイントはツールチップに表示するテキストをどこに配置するかで、ここではa要素内のspan要素に配置しています。 <a href="">adipiscing elit<span>This is the first tooltip</span></a> CSS 最初にspan要素は非表示にし、CSS3を使ってツールチップを美しくデザインします。 span要素はホバー時に表示にします。 a span{ display:none; color:#fff; backgroun

55 Wonderful CSS Navigation Menu Designs | inspirationfeed.com CSSのナビゲーションメニューサンプル５５。 ページトップに置くような水平のナビゲーションメニューのデザインカタログみたいな感じで使えそうなまとめです。 水平ナビゲーションをちょっと変わったものにしたいけどなんとなく煮詰まったみたいな時に参考にしてみてもよさそう。 色々なデザイン方法があるのだなぁと感心しますね。 関連エントリ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集