CSSコード一覧
【レイアウト】
・要素の配置の置き方
親要素の中で子要素の配置をどうするのかpxではなく、%でも決められる
・背景画像を使う場合。これで指定箇所を画面いっぱいに覆うことができる
div {
background-img : url("imgのurl")
height: 200px
background-size:cover
}
・要素を透明にする
数値は0.1~1.0までで設定する。またopacityは全て指定したところを全て透けさせる
opacity: 0.1 ;
文字はそのままで背景色だけを透けさせたい場合
background-color:rgba(色の指定に数字を３つ指定する必要がある）
・文字の横の間隔を広げる
letter-spacing:2px;
・文字の縦の間隔を広げる（行の高さ）
line-height : 10px;
・文字の太さを変える
font-weight: nomal; 普通
font-weight: bold; 太字
・同じ要素で複数クラスを指定する
例：ボタン
div class = "btn blue"
div class = "btn red"
.blue { color: blue;}
.red { color:red;}
・aタグはインライン要素なのでテキスト部分しかボタンが押せないので、幅ブロック要素にすることで要素いっぱいに広げることができる
display:block
・カーソルが乗った時に文字の背景に色をつける
div :hover { background-color: red;}
・カーソルにアニメーションを立てる。変化の対象や変化にかかる時間を指定できる
（hoverとセットで使う）
transition :all 1s（変化の対象、変化の時間）
・ボタンを立体的にするために影をつける
box-shadow: 水平方向（10px) 垂直方向(10px) カラー;
・ボタンを押したように見せる
セレクタにactiveを使うことで、要素がクリックされている間だけCSSを適用できる
btn : active{
box-shadow:none; →これで影を打ち消す(noneは打ち消せる)
positon:relative;
top: 6ps;
left:10px
}
・imgや枠の角を丸める
例：角を10px丸くする
border-redius: 10px;
・テキストの位置を指定する
text-align : left; （左寄り）
text-align: center; （中央より）
text-align:right; （右寄り）
・conteinerを中央に寄せる
※marginにautoを指定するときは必ずwidthを指定すること。また上下のmarginにautoは使えない。
・container{
width :300px;
margin : 0 auto
}
・要素の中央寄せで使うmarginとtext-alignの違い
margin ブロック要素に使う
text-align インラインブロック、インライン要素に使う
・要素をあえて重ねる
position: absolute;
top: 50px;
left 70px
・要素を重ねる時のスタートの基準値を変えることができる
position:relative;
top: 20px;
left:15;
・ヘッダーや特定の要素を固定して重ねないようにする
.fixed-img { →固定した所のクラス名をfixedにすると固定している所がわかりやすい
position:fixed;
top :10px;
left :40px;
※ここまでで固定できたが、他の要素と重なってします
z-index:10;
※これで優先順位が上がるので、重ならないように出来た
①HTMLに直接CSSを書く例をたくさん載せている
HTMLにCSSを直接書く場合は※styleを使う
②コピペできるデザイン
③よく使うCSS
