# CSS

# CSS 変数

CSS 変数で定数をまとめて管理できる。

# 変数の定義

--[変数名]と書く。 CSS 変数はセレクタごとに定義できる。:rootの中に書くとグローバル変数になる。

/* グローバル変数 */
:root {
  --color-black: #000000;
}
/* セレクタに閉じた変数 */
.hoge {
  --color-black: #000000;
}

# 変数の参照

[CSSプロパティ名]: var(--[変数名])と書く。 [CSSプロパティ名]: var(--[変数名], [デフォルト値])と書くことで CSS 変数が未定義の場合のデフォルト値を指定できる。

.hoge {
  background: var(--color-black, red);
}

# スニペット

# 特定のクラスが付与されていないときにスタイルを適用する

.app-menu {
  &:not(.visible) {
    // visibleクラスが付与されていないときに適用するスタイル
    opacity: 0.5;
  }
}

# spanで文字をセンタリングする

divで囲むしかない。

div {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;

  & > span {
    display: table-cell;
    vertical-align: middle;
  }
}

# アクペクト比を維持しつつ指定したサイズで画像を表示

img {
  width: 90vm;
  height: 75vh;
  border: 3px solid tomato;
  object-fit: cover;
}

# CSS Grid

A Complete Guide to Grid | CSS-Tricks

# 用語

• グリッドコンテナ - display: gridを適用する要素。グリッドアイテムの直接の親。
• グリッドアイテム - グリッドコンテナの直接の子要素。
• グリッド線 - グリッドの分割線。垂直（列グリッド線）または平行（行グリッド線）がある。
• グリッドトラック - グリッドの行または列。2本の隣接するグリッド線の間のスペース。
• グリッドセル - 2本の隣接する行と、2本の隣接する列グリッド線の間のスペース。
• グリッドエリア - 4本のグリッド線で囲まれた合計スペース。

# grid-template-columns(rows)の設定値

grid-template-columns - CSS: カスケーディングスタイルシート | MDN

# 横並び1列のレイアウト

max-contentを指定すると、グリッドアイテムの幅に合わせて幅が縮小される。 autoを指定すると、均等に幅が割り当てられる。

.grid {
  display: grid;
  grid-template-columns: max-content max-content max-content;
}