CSS関係便利メモ

超カンタンロールオーバーCSS

a:hover img {
opacity:0.8;
filter: alpha(opacity=80);
}

コレだけで超カンタンお手軽ロールオーバーの出来上がり。ただし、背景が黒っぽいサイトには向いてないかもしれません。

CSS で上下中央揃えにする

div.sample1{}

div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline;
zoom:1;
}

これは大変便利です。ボックスの高さの分だけline-heightを指定する方法でも上下中央揃えは実現できますが、その方法ですと、ボックス内で文字が２行になったときに不都合が出ます。（行間が偉いことになるｗ）

今回紹介するこの方法だと、そのあたりの問題も解決！積極的に使って行きたいテクニックです。

引用元：http://www.yomotsu.net/wp/?p=387
小山田さんのサイト。非常に参考になるテクニックを数多く公開されております。

基本の文字サイズを10pxにする

body要素のフォントサイズを10pxと設定。1.2emなら12px、1.4emなら14px、1.6emなら16px。IEに対応の場合はIE用のCSSを読み込みbody要素のフォントを相対指定とする。

body要素のフォントサイズを62.5%と設定。その後、12ピクセル相当で表示したい箇所は、1.2emと表記。これで、ピクセル単位の考えで直感的にフォントサイズを指定することができる。

上記のbodyに10px or 62.5%を指定でIE7で上手くいかない場合、フォント指定から「sans-serif」を抜くと上手くいくようです。

clearfixメモ

.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/ /*IE6以前向け*/

個人的に使い勝手がいいのと思うのは下記のソース。だいたいはこちらのほうで問題ありませんでした。

.entry {
	overflow: hidden;
}

.entry:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html .entry {
    height: 1em;
    overflow: visible;
}
/**/

Filed under 未分類 |