どうも7noteです。transformを複数設定する時など、複数指定する時の方法まとめ

初心者の頃にすぐに書き方を忘れてしまったので、忘れてもいいようにまとめます。
アルファベット順で並べています。

background➡半角スペース[ ]とスラッシュ[ / ]を使う

div{background:#333url('background.png')no-repeatborder-boxlefttop/containfixedcontent-box;/* 色　画像　繰り返し　基点　位置左右 位置上下　/ サイズ　スクロール位置　背景領域*/}

サイズを入れるときにはスラッシュ[ / ]を入れる。

background-xxx➡カンマ[ , ]でつなぐ

div{background-image:url("./images/hoge.png"),url("./images/fuga.png");/* 背景1, 背景2, 背景3・・・ */}

[hoge.png]が前面、 [fuga.png]が背面になります。
background-xxx系は基本的にカンマ[ , ]でつなぐことができます。

・background-color
・background-image
・background-repeat
・background-origin
・background-position
・background-size
・background-attachment
・background-clip

border➡半角スペース[ ]でつなぐ

div{border:1px#ff0000solid;/*太さ 色 種類 */}

※順不同

box-shadow➡半角スペース[ ]でつなぐ

div{box-shadow:10px10px10px10pxrgba(0,0,0,0.4)inset;/* 左右位置 上下位置 ぼかし 広がり 色 内側 */}

「左右位置 上下位置」の2つがあれば動かせます。

font➡半角スペース[ ]とスラッシュ[ / ]を使う

div{font:italicbold80%/150%"ＭＳ Ｐゴシック";/* スタイル 太さ サイズ / 行の高さ フォントの種類 */}

※スモールキャピタル（font-variant）は省略しています。

行の高さ（line-height）を入れる前にはスラッシュ[ / ]を入れる。

font-family➡カンマ[,]でつなぐ

div{font-family:Georgia,serif;/* フォント１, フォント2, フォント3 ・・・ */}

左側のフォントが優先的に効きます。フォント１がなければフォント2。フォント２がなければフォント3・・・と続きます。

margin・padding➡半角スペース[ ]でつなぐ

div{/* 上下 左右 */margin:10px20px;padding:10px20px;/* 上 左右 下 */margin:10px20px50px;padding:10px20px50px;/* 上 右 下 左 */margin:10px20px30px40px;padding:10px20px30px40px;}

transform➡半角スペース[ ]でつなぐ

/* 例） **位置変更**と**回転**を同時に書く */.trans{transform:translate(-50%,-50%)rotate(45deg);}

translateとrotateの間に半角スペースを空けることで複数指定することができます。

まとめ

marginpaddingとかはよくつかうので、覚えられますが忘れやすいものも多いので書き方をまとめました。
参考になれば幸いです。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ