CSS小技

参考サイト http://www.webcreatorbox.com/tech/css-tips20/ リンクの点線を消去
a{ outline: none; }
長いURLや英文をを途中で折返す
ul li{ word-wrap: break-word; }
逆に途中で折り返さず、次の行に
p span { white-space: nowrap; }
リストの最初の仕切り線を消去
<ul>
<li>リストメニュー 1</li>
<li>リストメニュー 2</li>
<li>リストメニュー 3</li>
<li>リストメニュー 4</li>
<li>リストメニュー 5</li>
</ul>
ul {
_zoom: 1;
overflow: hidden;
}
ul li {
margin-top: -1px;
padding: 5px;
border-top: 1px dotted #999;
}
IE6で有効にするmin-height
.minheight {
min-height:500px;
height:auto !important;
height:500px;
}
横並びブロックのマージンを調節 div内にある横並びブロックにマージンを、でも最初と最後のブロックをdivの幅に合わせる方法。何かと使う機会が多いです。
<div>
<ul>
<li><img src="image/001.jpg" alt="サンプル画像1" width="150" height="100" /></li>
<li><img src="image/002.jpg" alt="サンプル画像2" width="150" height="100" /></li>
<li><img src="image/003.jpg" alt="サンプル画像3" width="150" height="100" /></li>
</ul>
</div>
div{
width: 470px;
border:2px solid #F33;
}
div ul {
width: 480px;
margin-right: -10px;
overflow: hidden;
_zoom: 1;
}
div ul li {
float: left;
margin-right: 10px;
}
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 − ten =