【初心者でもわかる】1行で複数の値が書けるCSSプロパティ一覧と書き方

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

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

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

style.css

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

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

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

style.css

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➡半角スペース[ ]でつなぐ

style.css

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

※順不同

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

style.css

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

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

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

style.css

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

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

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

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

style.css

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

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

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

style.css

div {
  /* 上下 左右 */
  margin: 10px 20px;
  padding: 10px 20px;

  /* 上 左右 下 */
  margin: 10px 20px 50px;
  padding: 10px 20px 50px;

  /* 上 右 下 左 */
  margin: 10px 20px 30px 40px;
  padding: 10px 20px 30px 40px;
}

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

style.css

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

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

まとめ

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

おそまつ！

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