よく使うCSS3

文字の間隔（文字詰め）と太さ

PHP


p{
letter-spacing : 0.1em;
font-weight: bold;
text-align: center;
}

絶対配置

PHP


position：「absolute」「relative」「fixed」static　　　　期値に配置しますabsolute 　 絶対位置への配置relative 　 相対位置への配置となります。fixed 　　　 絶対位置への配置

重ね順

PHP


/* 重ね順100番目 */
z-index:100;

background

PHP


background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:80% 40%; /* 左から80%,上から40%*/

CSSグラデーション

clearfix設定

回り込み禁止clearで margin-bottomが効かない、backgroundが出ない対策

clear・・・floatをただ解除するだけのもの

clearfix・・・floatを解除し、ブラウザのバグも回避できるハック

PHP


/* clearfix */
.clearfix{
	zoom:1;
}
.clearfix:after{
	content:"";
	display: block;
	clear: both;
	height: 0;
	visibility:hidden;
}

list-styleでliにアイコンを設定

PHP


/*--リストアイコン設定---*/
	list-style: square url('../images/ico32.gif') inside;
	text-decoration:underline;

透明度を指定するRGBAカラーモデル

PHP


background-color:rgba(199,198,157,0.5);

preの折り返し

PHP


pre{
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: auto;
}