CSSの最近のブログ記事

<div><table><tr><td>テーブルの中身</td></tr></table></div>

こんなのは良くやるところ。外側のdivに指定した背景が、tableの下に設定したmargin部分から消えてしまって焦ったことはないだろうか?

IEだと大丈夫なのだが、OperaとFirefoxだと消える。
そして仕方がないからpaddingにしようかーとすると、IEの古いバージョンでは余白が反映しなかったり。

何とかならないものかとググって解決策を見つけたので覚え書き。

display: inline-table;

これをtableに設定してやるとちゃんとmargin部分にも背景が出てきた。
めでたしめでたし。

filter:alpha(opacity=**)

を使えばIEでは画像の透明度を変えられる。しかしCSS3を使えば他のブラウザでも透明化を実現できる。これを使ってちょっとマウスオーバーで画像が光る(ってか白っぽくなる)ような効果を出してみたり。

透明化で白っぽくなるためには背景が白っぽくないとダメかもしれない。
(まあ逆に言えば黒っぽくしたかったら背景を黒くすればいいかも←未確認)

a:hover img { opacity:0.7; filter:alpha(opacity=70); }

これ一個書いておくとマウスオーバーしたリンク画像はみんなちょっと光ったような感じになる。
※個人の感想です。

メニューのロールオーバーをCSSで書いてて、全ページ共通のテンプレートにしてたりすると、自ファイルへのリンクはロールオーバーしないようにしたいけど手作業で直すとあとあと大変だったりする…よね?
JavaScriptで自ファイル名を取得して、ロールオーバーのclass名を書き換えてしまうと楽ちん~かな?

メニューをつくって、CSSでロールオーバーをやっていると、そのページに移ったときはそのページへのリンクメニューはロールオーバーしないようにCSSを追加したりするんだけど、ページがやたら多くてテンプレート使いたくなると手作業でやるのが面倒にならないだろうか?
それで同じファイル名のスタイルシートを自動で適用するJavaScriptを作ってみた。

そもそもスクロールバーの要らないページが本当にあるかどうかは別として…

IEはスクロールする必要が無くても灰色の縦スクロールバーが常に出ている。
それが邪魔だーという人用。

body{ overflow-y:hidden; }

このアーカイブについて

このページには、過去に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

前のカテゴリはAS3です。

次のカテゴリはetcです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。