CSSのTips12

CSS Code Snippets : 15 Wicked Tricks | DevSnippets

上記のエントリを適当に訳したメモです。あんまり興味のなかったtipsは省略しています

Hide text with text indent

h1 {  
  text-indent:-9999px;/*Hide Text, keep for SEO*/  
  margin:0 auto;  
  width:948px;  
  background:transparent url("images/header.jpg") no-repeat scroll;
}

text-indentを使った画像置換のテクニック。個人的には画像置換は好きじゃないのでなるべく使わないつもり。

画像置換についての参考記事

画像置換に関する考え方

Cross Brouser Minimum Height

#container  { min-height:500px; } * html #container { height:500px; }

min-heightが効かないIE6用のCSSハック。IE6のheightはmin-heightと同じように伸縮するらしい。ハックを使わないvalid版も紹介されてた。

#container{  
  height:auto !important;/*all browsers except ie6 will respect the !important flag*/  
  min-height:500px;  
  height:500px;/*Should have the same value as the min height above*/  
}  

Highlight links that open in a new window

a[target="_blank"]:before,  
a[target="new"]:before {  
    margin:0 5px 0 0;  
    padding:1px;  
    outline:1px solid #333;  
    color:#333;  
    background:#ff9;  
    font:12px "Zapf Dingbats";
    content: "\279C";  
} 

新しいウィンドウを開くリンクを目立たせるtips。属性セレクタや疑似要素を使っているのでIE6では使えません。(IE7でも使えないらしいです。IE8のみ)

Highlight links to PDF and Word files

a[href$="pdf"]:after,  
a[href$="doc"]:after {  
  margin:0 0 0 5px;  
  font:bold 12px "Lucida Grande";  
  content: " (PDF)";  
}  
a[href$=".doc"]:after {content: " (DOC)";} 

拡張子が.pdfまたは.docのものを目立たせるtips。
一つ上のと同じくIE6,7は使えません。

The order of link pseudo-classes

a:link {color: blue;}  
a:visited {color: purple;}  
a:hover {color: red;}  
a:active {color: yellow;} 

疑似クラスのlink,visited,hover,activeは上記の順番で書かないとうまくいかないという話

Simple Clearing of floats

これは使えるかもなと思ったテクニック。入れ子になったdivで、内側のdivがfloatを指定していた場合、下に飛び出してしまうケースがある。(調べてみた限り、Firefox3とSafari3は下に飛び出した。IE7は飛び出さなかった。)

<div id="outer">  
        <div id="inner"> <h2>A Column</h2> </div>  
        <h1>Main Content</h1>  
        <p>Lorem ipsum</p>  
</div>

#inner{  
  width:26%;  
  float:left;  
}  
#outer{  
  width:100%;  
}  

CSS Code Snippets : 15 Wicked Tricks | DevSnippets via kwout

overflow:autoを#outerに追加すると下記のようにinnerがはみ出なくなる。

CSS Code Snippets : 15 Wicked Tricks | DevSnippets via kwout

Creating a Page Break

プリントアウトするときに、コメントページで強制的に改ページするtips

#comments {page-break-before:always;}

Style Your Orderd List

ol要素のフォントを変更することで、olの数値を装飾するtips。

こちらのページが参考になります。
RedLine Magazine : OLリスト 番号だけ画像なしでスタイルを変更

Create Resizable Images With CSS

ブラウザの設定でテキストのサイズを変更したときに、画像のサイズも変更するtips

まず、img要素をdivでくくる。

<div class="resize2"><img src="image.jpg" alt="" /></div>

div要素のheightとwidthをemで定義する。

.resize2 {
  border: 3px double #333;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  overflow: hidden;
  width: 12em;
}

.resize2 img {
  margin: -220px 0 0 -210px;
  padding: 6em 0 0 6em;
}

Create a Block Hover Effect for a List of Links

IEでは通常ブロック要素のhoverを使えないけど、そこをなんとかするtips

<div id="links">
  <ul>
    <li><a href="#" title="Text">Link Heading One
      <em>Description of link.</em>
      <span>Date posted</span></a></li>
    <li><a href="#" title="Text">Link Heading One
      <em>Description of link.</em>
      <span>Date posted</span></a></li>
  </ul>
</div>

#links ul {
        list-style-type: none;
        width: 400px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

CSS Transparency Settings for All Browsers

ブラウザ共通で透明度を設定するtips

.transparent_class {  
   filter:alpha(opacity=50);  
   -moz-opacity:0.5;  
   -khtml-opacity: 0.5;  
   opacity: 0.5;  
}

Rounded Corners with Border-Radius

CSSで角丸を実現するtips。CSS3対応ブラウザ限定版

.container{  
    background-color: #fff;  
    margin: 10px;  
    padding: 10px;  
    -moz-border-radius-topleft: 20px;  
    -webkit-border-top-left-radius: 20px;  
    -moz-border-radius-bottomright: 20px;  
    -webkit-border-bottom-rightright-radius: 20px;  
} 

CSS3に対応してないブラウザは下記のように、角丸画像を別途用意する方法がある。

<div class="roundBox">  
  <p>beautifully-encapsulated paragraph</p>  
  <div class="boxBottom"></div>  
</div> 

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}