# 今更ながら、CSSテクニックまとめ。(1)

- リンク: https://torounit.com/blog/%e4%bb%8a%e6%9b%b4%e3%81%aa%e3%81%8c%e3%82%89%e3%80%81css%e3%83%86%e3%82%af%e3%83%8b%e3%83%83%e3%82%af%e3%81%be%e3%81%a8%e3%82%81%e3%80%821/
- 公開日: 2009-07-10T03:32:16+09:00
- 作成者: Toro\_Unit

まぁ備忘録ですからね。CSSで使えるテクニックのまとめです。

Clearfix

[css]
 .clearfix:after { content: "."; display: block; height: 0px; clear: both;
visibility: hidden; }

/* Win IE7 */
 *:first-child+html .clearfix { height: 1%; } /* End Win IE7 */

/* Win IE6 \*/
 * html .clearfix { height: 1%; } /* End Win IE6 */

/* Mac IE\*//*/
 .clearfix { display: inline-table; } /* End Mac IE */ [/css] [http://blog.d-spica.com/entry/070307clearfix.html](http://blog.d-spica.com/entry/070307clearfix.html)

cssでのロールオーバー実装と背景画像によるテキスト置換。

XHTML
 [xhtml] <li id="bt1" class="menu_button"><a href="preview.php">preview</a
></li> [/xhtml] CSS [css] .menu_button a { overflow:hidden; height:50px; text-indent:-
9999px; display:block; } .menu_button:hover { background-position:-230px; } #bt1{
background-image:url(../images/menu_01.gif); } [/css] （[Crude　Music Web Site](http://www.curudemusic.net)
で使いますのでリニューアル後にでも見てください。）