よく使用するCSSのプロパティ一覧を紹介します。
それぞれのプロパティに関する具体的な解説は徐々に追加していきます。
【よく使用するCSSプロパティ一覧】
width : 値 (要素の幅を指定) 解説を確認する
height : 値 (要素の高さを指定) 解説を確認する
margin : 値 (要素の外側余白を指定) 解説を確認する
padding : 値 (要素の内側余白を指定) 解説を確認する
background : 色の値 (背景色を指定) 解説を確認する
background : url (画像へのパス) (背景に画像を指定) 解説を確認する
color : 色の値 (文字の色を指定) 解説を確認する
font-family : フォントの名前 (フォントを指定) 解説を確認する
font-size : 値 (文字の大きさを指定) 解説を確認する
text-align : 値 (文字の揃えを指定) 解説を確認する
line-height : 値 (文字の行間を指定) 解説を確認する
border : 太さ 色 種類 (要素の周囲に枠線を設定) 解説を確認する
float : 値 （指定した要素の後に続く要素の回り込みを指定) 解説を確認する
clear : 値 (floatの解除を指定) 解説を確認する
display : 値 (要素の表示形式を変更) 解説を確認する
display:flex（要素を並列にレイアウト）解説を確認する
【よく使用するプロパティと値の組み合わせ】
要素の中央揃え margin : 0 auto; 解説を確認する
インライン要素をブロックレベル要素に変更 display : block; 解説を確認する
リストのマーカー(中黒や数字)を非表示にする list-style : none; 解説を確認する
要素内のテキストを非表示にする(遥か左へ移動) text-indent : -9999px;
text-indentでテキストを非表示にした際のfirefox用の対応 overflow : hidden;
左右のfloatの解除 clear : both;
リンク部分のテキストの装飾を消す text-decoration : none;
【 リンク疑似クラス】
a : link{宣言} 未読リンク部分に適用
a : visited{宣言} 既読リンク部分に適用
a : hover{宣言} リンク部分にマウスを載せたときに適用
a : active{宣言} リンク部をクリックしたときに適用
*順番を間違えないように注意すること
【リンク部分に背景画像を設定し、ロールオーバーでイメージを変更する時の動きの設定】
通常時 (既読時)
a : link,
a : visited{
background-position : xの値 yの値 ;}
ロールオーバー時 (クリック時)
a : hover,
a : active{
background-position : xの値 yの値 ;}
