前回の記事【ウェブサイトコーディングでよく使用するCSSプロパティのまとめ（1）】 に引き続き、今回もCSSでよく使用されるプロパティをまとめていきたいと思います。たくさんあるCSSのプロパティも難しく考えず必要なものから覚えて、サイトコーディングに活かしていきましょう。    

1.　配置・表示

float：；	要素を左右に配置し、続く内容を回り込ませる指定をする。
clear：；	要素の回り込みを解除します。先述のfloatプロパティと合わせて使用します。
display：；	要素の表示方法を指定します。ブロック要素、インライン要素、非表示などを設定できます。
overflow：；	はみ出した領域の処理を指定します。表示、非表示、スクロールなどを設定できます。
visibility：；	要素の表示・非表示を指定します。
position：；	要素の配置を指定します。絶対位置、相対位置、位置固定などを設定できます。
top：；	上からの要素の位置を指定します。pxなどの絶対指定や、％などの相対指定が設定できます。
bottom：；	下からの要素の位置を指定します。pxなどの絶対指定や、％などの相対指定が設定できます。
right：；	右からの要素の位置を指定します。pxなどの絶対指定や、％などの相対指定が設定できます。
left：；	左からの要素の位置を指定します。pxなどの絶対指定や、％などの相対指定が設定できます。
z-index：；	要素の重なり順を指定します。数値が大きいほど表面に配置されます。
clip：；	要素の切り抜き範囲の指定をします。上下左右の端からの距離で設定します。

 

2.　リスト・テーブル・コンテンツ

list-style-type：；	リストのマーカーの種類を指定します。箇条書き、数字、記号など設定出来ます。
list-style-position：；	マーカー表示位置を指定します。リスト範囲の内側もしくは外側を設定できます。
list-style-image：；	リストのマーカーに使用する画像を指定します。
table-layout：；	テーブルの幅の表示方法を指定します。内容に合わせた自動可変と数値に合わせた固定を設定できます。
border-collapse：；	セルの表示方法を指定します。セル同士の境界線を隣接して表示させるか、間隔をあけて表示させるかを設定できます。
border-spacing：；	セルの表示方法を指定します。テーブルとセルの境界線に対しての間隔を設定できます。
content：；	要素の前後に文字や画像などを挿入します。after擬似要素及びbofore擬似要素のみ適用されます。

 

3.　ボックス

box-shadow：；	ボックスの影を設定します。水平、垂直方向への距離や影のぼかし半径、影の色の指定ができます。
box-sizing：；	ボックスのサイズ算出方法を指定します。widthとheightにパディングとボーダーを含める設定ができます。
box-orient：；	フレキシブルボックス内における子要素の表示方法を指定します。フレキシブルボックス内で子要素を水平方向や垂直方向に配置します。
box-pack：；	フレキシブルボックス内の子要素の水平方向への配置の割付方法を指定します。

 

4.　透過色・グラデーション

opacity：；	要素の透明度を指定します。0.0〜1.0の数値範囲で設定し、0.0が完全な透明になります。
background：linear-gradient（）；	線形のグラデーションを指定します。backgroundプロパティに適用され、開始色と終了色及び位置を設定します。
background：radial-gradient（）；	円形のグラデーションを指定します。backgroundプロパティに適用され、開始色と終了色及び位置を設定します。

 

5.　変形・変化・アニメーション

transform：；	要素への平面・立体変形を指定します。各関数を使って設定します。
transition：；	要素の時間的な変化を指定します。変化させるCSSの効果や変化にかかる時間などを設定します。
animation：；	要素へのアニメーション効果を指定します。キーフレームルールに基づき、アニメーションの内容や変化する時間や速度を設定します。

 

6.　その他

cursor：；	カーソルの形状を指定します。

    いかがでしたでしょうか。今回は第2回にわたってCSSのプロパティをまとめてみました。CSS3に移行したことによりCSSを使って表現出来る幅が広がり、リッチなコンテンツのサイトを作成することが可能になりました。またそれぞれのプロパティを把握することで効率よくコーディングをすることができます。ぜひ参考にしてみてください。