first-child疑似クラスと隣接セレクタ - lucky bag
CSSで:first-child疑似クラスと隣接セレクタをうまく使えば、見栄えを制御する目的だけの為にspanタグで囲んだり、クラスセレクタ・IDセレクタを付与することなく、特定要素を指定することが出来たりするので、大変便利だと思います。これらを使い、当サイトの投稿者部分のコメントとトラックバックに幅20px高さ15pxのアイコンを付けた例です。が、Win IEは対応していないので、悪しからず。一応、画像でお見せしておきます。 :first-child疑似クラスを使う まず、投稿者部分のHTMLを見てみましょう。要素としては、postedと言うクラスの段落（<p>）と、コメント部分、トラックバック部分の各アンカー（<a>）で構成されているのが分かります。 <p class="posted">投稿者 e-luck 12:32 | <a href="hogehoge#comments" tit
Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション
Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
