[css]小技メモ
Webクリエイターボックスさん http://www.webcreatorbox.com/tech/css-tips20/
「少しのコードで実装可能な20のCSS小技集 」記事から自分用にメモメモ。
■透明度を変更
[css]
.image {
	filter:alpha(opacity=50);  /* IE7以下用 */
	-ms-filter: "alpha(opacity=50)"; /* IE8用 */
	-moz-opacity:0.5; /* Firefox 1.5未満, Netscape用 */
	-khtml-opacity: 0.5;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */
	opacity: 0.5; /* Firefox 1.5以上, Opera, Safari用 */
}
[/css]
■ページサムネイル画像
[html]
<link rel="image_src" href="thumb.jpg" />
[/html]
■画像の好きな部分を切り抜く
[css]
div {
	width: 200px;
	height: 130px;
	border: solid 1px #ccc;
	position: relative;
}
div img {
	position: absolute;
	clip: rect(30px 165px 100px 30px);
}
[/css]
■横並びブロックのマージンを調節
[html]
<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>
[/html]
[css]
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;
}
[/css]
…cssプロパティの書き順は自分用に変えてます。
↓自分用cssプロパティ書き順
[css]
width:
height:
line-height:
margin:
padding:
text-decoration:
font-size:
letter-spacing:
color:
vertical-align: middle;
list-style:
outline: none;
border:
background:
display:
visibility: hidden;
float:
clear:
position:
z-index:
overflow:
cursor: pointer;
cursor: default;
overflow: hidden;
-moz-opacity: 0.80;
opacity: 0.8;
filter: alpha(opacity=80);
zoom: 1;
// 半角英数文字を指定された範囲内で折り返す
word-break: break-all;
// 角丸 /* IEはDD_roundies_0.0.2a-min.js必要 */
/* rounded */
padding: 10px 0 10px 15px;
-moz-border-radius: 15px 0; /* for Firefox */
-webkit-border-radius: 15px 0; /* for Safari and chrome */
border-radius: 15px 0; /* CSS3 */
behavior: url(border-radius.htc); /* for IE */
// cssシャドウ
/* box-shadow */
-moz-box-shadow: 0 0 3px #969696; /* for Firefox */
-webkit-box-shadow: 0 0 3px #969696; /* for Safari and chrome */
/* box-shadow for IE */
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696′, Direction=135, Strength=2);
/* —————————
 hack for Boxmodel
 ————————— */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* IE6 */
* html .clearfix {zoom: 1;}
/* IE7 */
*:first-child+html .clearfix {zoom: 1;}
/* —————————
 hack for IE8
 ————————— */
html>/**/body p {
	height /*\**/: 120px\9;
	width /*\**/: 120px\9;
}
/* —————————
 hack for IE7
 ————————— */
*:first-child+html p { margin: 0;}
/* —————————
 hack for IE6
 ————————— */
* html p {margin: 0;}
/* —————————
 hack for IE if
 ————————— */
<!–[if IE7]>
<link rel="styleshsst" type="text/css" href="css/for_ie7.css">
<![endif]–>
<!–[if IE 6]>
<script src="common/js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix(‘.png_bg’);</script>
<![endif]–>
/* —————————
 hack for Firefox-Safari-Opera
 html[xmlns] p {…}
 ————————— */
/* —————————
 hack for Safari
 ————————— */
html[xmlns*=""] body:last-child p { color:#FF0000; } 
/* —————————
 hack for Mac IE5
 ————————— */
Mac IE 5のみにスタイルを適用
/* これ以降Mac IE 5のみに適用される \*//*/
p { color:#FF0000; }
/* これ以降Mac IE 5以外にも適用される */ 
Mac IE 5のみスタイルを除外
/* これ以降Mac IE 5には適用されない \*/
p { color:#FF0000; }
/* これ以降Mac IE 5にも適用される */
[/css]
※一部ごちゃっとしてるけど。
 
                            
                            