---
title: 記述ルール
description: 数値・font-size・font-weight の指定方法と、transition・z-index の使用ルール
---

## 数値

小数点の前の `0` は省略しません。Prettier を使うプロジェクトでは、フォーマット時に自動で補われます。

```css
selector {
  opacity: 0.5; /* ✅ */
  opacity: .5; /* ❌ */
}
```

## font-size

基本的に、実際に Chrome の文字サイズ変更機能（「極大」など）で検証し、拡大時のレイアウト崩れに対応できる場合のみ `rem` を使用し、それ以外は `px` を使用してください。

検証やレイアウト調整に十分なコストを割けない場合は、無理に `rem` を使わず `px` 指定とし、レイアウトの安定性を優先して構いません。

:::warning
`vw` だけで文字サイズを指定すると、小さい画面で読みにくくなり、大きい画面では過剰に拡大されます。また、ブラウザのズームで文字が大きくなりません。`vw` を使う場合は、`clamp()` で上限と下限を設定し、推奨値は `px` と `vw` を組み合わせてください。
:::

```css
.title {
  font-size: clamp(20px, 16px + 1.5vw, 32px);
}
```

## font-weight

原則として数値（`400`、`700` など）で指定してください。

```css
.title {
  font-weight: 700; /* ✅ */
  font-weight: bold; /* ❌ */
}
```

## transition

不要なプロパティまでアニメーションしないよう `all` の使用は避け、プロパティを明示的に指定してください。

```css
/* ❌ 悪い例 */
.button {
  transition: all 0.3s;
}

/* ✅ 良い例 */
.button {
  transition: background-color 0.3s;
}
```

## z-index

`z-index: 9999` のような場当たり的な値は、重なり順のトラブルや保守性の低下につながります。次の順で検討してください。

1. **DOM の順序で解決する**: 同じ重なりの文脈（スタッキングコンテキスト）の中では、HTML で後に書いた要素が上に重なります。まず `z-index` を使わずに済まないかを検討します。
2. **コンポーネント内は `1` / `-1` だけを使う**: コンポーネントの中で重なり順を指定する場合は、`z-index: 1` または `z-index: -1` だけを使います。コンポーネントのルートに `isolation: isolate` を指定して重なりの文脈を閉じれば、外側の要素と干渉しません。
3. **ページ全体のレイヤーはカスタムプロパティで管理する**: ヘッダーやドロワーなど、ページ全体で重なり順を決める要素は、用途ごとの[カスタムプロパティ](/frontend/css/variables)で一元管理します。

モーダルやポップオーバーは、`dialog` 要素や `popover` 属性で実装すると最前面（トップレイヤー）に表示されるため、`z-index` の指定が不要です（[要素の使い分け](/frontend/html/semantics#ダイアログ)）。

```css
/* コンポーネント内 */
.card {
  position: relative;
  isolation: isolate;
}

.card__badge {
  position: absolute;
  z-index: 1;
}

/* ページ全体のレイヤー */
:root {
  --z-index-dropdown: 20;
  --z-index-header: 100;
}

.header {
  z-index: var(--z-index-header);
}

/* ヘッダーより 1 つ前に出したい場合は calc() で調整する */
.header-search {
  z-index: calc(var(--z-index-header) + 1);
}
```

```css
/* ❌ 悪い例 */
.modal {
  z-index: 9999; /* 場当たり的な値 */
}

.dropdown {
  z-index: 1234; /* 用途が分からない値 */
}
```