CSSのinitialとは何ですか？

initialは、指定したプロパティをCSS仕様で定義された初期値にリセットするためのCSSグローバルキーワードです。

initialを使用するとどのような効果がありますか？

initialを使用すると、親要素からの継承や以前の設定を無視して、プロパティをCSS仕様のデフォルト値に戻すことができます。

CSSのどのプロパティにinitialを使用できますか？

initialはすべてのCSSプロパティに使用できます。スタイルのリセットやデバッグ、特定の設定を初期状態に戻したい場合に効果的です。

【CSS】initialキーワードの使い方 - プロパティを初期値にリセットする

概要

initialは、CSSのグローバルキーワードの一つで、プロパティをCSS仕様で定義された初期値（デフォルト値）にリセットします。親要素からの継承や以前に設定されたスタイルを無視し、プロパティを「生まれたての状態」に戻すことができます。

initialとは

initialは、各CSSプロパティがCSS仕様で定義している初期値を適用します。これは「ブラウザのデフォルトスタイル」とは異なり、純粋にCSS仕様上の初期値を意味します。

initialの基本的な使い方

.element {
    property: initial;
}

基本例

.parent {
    color: red;
    font-size: 24px;
}

.child {
    color: initial; /* CSS仕様の初期値（通常は黒）にリセット */
    font-size: initial; /* CSS仕様の初期値（medium）にリセット */
}

<div class="parent">
    親要素（赤い文字、24px）
    <div class="child">
        子要素（黒い文字、medium）
    </div>
</div>

主要なプロパティの初期値

テキスト関連

.text-reset {
    color: initial; /* 通常は黒（実際はブラウザ依存） */
    font-size: initial; /* medium */
    font-weight: initial; /* normal */
    text-align: initial; /* start または left */
    line-height: initial; /* normal */
}

ボックスモデル

.box-reset {
    display: initial; /* inline */
    width: initial; /* auto */
    height: initial; /* auto */
    margin: initial; /* 0 */
    padding: initial; /* 0 */
    border: initial; /* medium none currentColor */
}

配置とレイアウト

.layout-reset {
    position: initial; /* static */
    top: initial; /* auto */
    left: initial; /* auto */
    float: initial; /* none */
    flexGrow: initial; /* 0 */
}

実践的な使用例

1. スタイルのリセット

カスタムスタイルが適用された要素を初期状態に戻す：

/* カスタムボタン */
.custom-button {
    background-color: #007bff;
    color: white;
    border: 2px solid #0056b3;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
}

/* デフォルトボタン */
.default-button {
    background-color: initial; /* transparent */
    color: initial; /* 黒 */
    border: initial; /* medium none currentColor */
    padding: initial; /* 0 */
    border-radius: initial; /* 0 */
    font-weight: initial; /* normal */
}

2. 特定のブレークポイントでリセット

レスポンシブデザインで、特定の画面サイズでスタイルをリセット：

.card {
    margin: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .card {
        margin: initial; /* 0にリセット */
        border-radius: initial; /* 0にリセット */
        /* paddingとbackgroundは維持 */
    }
}

3. フォーム要素のリセット

ブラウザのデフォルトスタイルをリセット：

/* ブラウザのデフォルトスタイルを持つフォーム要素 */
input[type="text"],
input[type="email"],
textarea {
    border: 2px solid #ddd;
    padding: 8px;
    border-radius: 4px;
}

/* 特定のフォーム要素だけリセット */
.plain-input {
    border: initial; /* medium none currentColor */
    padding: initial; /* 0 */
    border-radius: initial; /* 0 */
}

4. リストのスタイルリセット

カスタムスタイルのリストを標準に戻す：

/* カスタムリスト */
ul.custom-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

/* デフォルトリスト */
ul.default-list {
    list-style: initial; /* disc */
    padding-left: initial; /* ブラウザ依存 */
    margin: initial; /* ブラウザ依存 */
}

Before/After比較

Before: 継承されたスタイル

.parent {
    color: #ff6600;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.child {
    /* 親のスタイルを継承 */
}

After: initialでリセット

.parent {
    color: #ff6600;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.child {
    color: initial; /* 黒に戻る */
    font-family: initial; /* ブラウザのデフォルトフォント */
    font-size: initial; /* medium */
    font-weight: initial; /* normal */
}

initialと他のグローバルキーワードの比較

initial vs inherit

.parent {
    color: red;
}

.child-inherit {
    color: inherit; /* 親の値（red）を継承 */
}

.child-initial {
    color: initial; /* CSS仕様の初期値（黒）にリセット */
}

initial vs unset

unsetは、プロパティが継承されるかどうかによって動作が変わります：

継承されるプロパティ: inheritと同じ動作
継承されないプロパティ: initialと同じ動作

.element {
    /* colorは継承されるプロパティ */
    color: unset; /* inherit と同じ（親の色を継承） */
    color: initial; /* 初期値（黒）にリセット */

    /* marginは継承されないプロパティ */
    margin: unset; /* initial と同じ（0にリセット） */
    margin: initial; /* 0にリセット */
}

initial vs revert

revertは、ユーザーエージェントスタイルシート（ブラウザのデフォルトスタイル）に戻します：

button {
    /* ブラウザのデフォルトボタンスタイル */
}

.custom-button {
    background: blue;
    color: white;
}

.reset-button {
    background: initial; /* transparent */
    color: initial; /* 黒 */
}

.revert-button {
    background: revert; /* ブラウザのデフォルトボタン背景 */
    color: revert; /* ブラウザのデフォルトボタン文字色 */
}

よくある使用パターン

1. デバッグ用のリセット

スタイルの問題をデバッグする際、一時的にリセット：

.debug-reset {
    all: initial; /* すべてのプロパティを初期値にリセット */
    display: block; /* 表示は維持 */
}

2. カスケードの制御

特定の要素で親からの継承を断ち切る：

.theme-dark {
    color: white;
    background: #333;
}

.independent-section {
    color: initial; /* テーマカラーを無視 */
    background: initial; /* テーマ背景を無視 */
}

3. コンポーネントの分離

独立したコンポーネントを作成：

.widget {
    all: initial; /* すべてリセット */
    /* 以下、独自のスタイルを定義 */
    display: block;
    padding: 10px;
    background: white;
}

注意点と制限事項

1. ブラウザごとの初期値の違い

一部のプロパティは、ブラウザによって初期値が微妙に異なる場合があります：

.example {
    /* font-familyの初期値はブラウザごとに異なる */
    font-family: initial;
}

2. displayプロパティでの使用に注意

div {
    display: initial; /* inline になる（divのデフォルトはblock） */
}

/* divをブロック要素として使いたい場合は不適切 */

3. allプロパティと組み合わせる場合

all: initialは強力ですが、予期しない結果を招くことがあります：

.reset-all {
    all: initial;
    /* displayもinitial（inline）になるため、
       ブロック要素として使いたい場合は再設定が必要 */
    display: block;
}

ブラウザサポート

initialキーワードは、すべてのモダンブラウザでサポートされています：

Chrome: 1.0+
Firefox: 1.0+（一部プロパティは3.0+）
Safari: 1.2+
Edge: 12.0+
Internet Explorer: 11.0+（一部サポート）

古いブラウザでは一部のプロパティで動作しない場合があります。

デバッグとトラブルシューティング

開発者ツールでの確認

要素を右クリック→「検証」
Stylesタブでinitialが適用されているか確認
Computedタブで実際の計算済み値を確認

よくある問題

問題: initialを設定したが、期待した見た目にならない

解決策:

CSS仕様の初期値とブラウザのデフォルトスタイルは異なることを理解する
revertを使うべきかinitialを使うべきか再検討する
開発者ツールで実際の計算済み値を確認する

まとめ

initialキーワードは、CSSプロパティをCSS仕様の初期値にリセットするための重要なツールです。

使用時のポイント

スタイルのリセット: 親要素や以前の設定を無視して初期状態に戻せる
デバッグ: スタイルの問題を切り分ける際に有用
レスポンシブデザイン: 特定のブレークポイントでスタイルをリセット
コンポーネント分離: 独立したスタイルスコープを作成

inherit、unset、revertなど他のグローバルキーワードとの違いを理解し、適切に使い分けることが重要です。

概要