MENU
  1. ホーム
  2. CSS
  3. 【CSS】unsetの使い方：initialやrevertとの違い

【CSS】unsetの使い方：initialやrevertとの違い

CSS
css-unset
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

CSSのunsetは、親要素から継承されるプロパティか否かで挙動が「継承」と「初期化」に自動で切り替わる便利なリセット値です。

本記事では、initialやrevert、noneとの違いや実務でハマりやすいホバー解除や全幅化と使い方を直感的なサンプルコードと共に解説します。

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

unsetとは：スタイルの解除と仕組み

CSSを記述していて「この要素だけ、さっき当てたスタイルを無効化したい」と思ったことはありませんか？

そんな時に便利なのが、unsetです。

unsetとは、一言で言えば「一度設定されたCSSの値をリセットする」ための特殊な値です。

MDNやw3schoolsなどの公式ドキュメントや有名なリファレンスサイトでも必ず紹介されている重要なキーワードですが、実は単純に「スタイルを真っ白に消し去る」わけではありません。

ここでは、unsetの仕組みについて解説します。

unsetとは：スタイルの解除と仕組み
  • 親から継承するか、ブラウザの初期値に戻す仕様

親から継承するか、ブラウザの初期値に戻す仕様

unsetのポイントは、対象となるプロパティが「継承されるプロパティ」か「継承されないプロパティ」かによって、その働きが自動的に切り替わるという点です。

具体的には、以下のように振る舞います。

  1. 継承されるプロパティ（colorやfont-sizeなど）
    親要素の値に戻ります（inheritと同じ動き）。
  2. 継承されないプロパティ（border やmarginなど）
    ブラウザの初期値に戻ります（initialと同じ動き）。

スタイルをリセットする際は、「むやみにunsetを使わず、親に合わせたいならinherit、ブラウザの初期値にしたいならinitial、ブラウザの標準スタイルに戻したいならrevertを明示的に使い分けること」です。

unsetは、「継承されるものは継承し、されないものは初期化する」という「CSSの自然な状態に戻したい」時にのみ使用しましょう。

⭕️ unsetは、プロパティによって「親の継承」か「初期化」に分かれる！

📦 親要素（color: red / border: 5px solid blue）

🧒 子要素（color: green / border: 5px solid orange）

👶 孫要素で「unset」を指定すると…？

  • 文字色(color)：親(子要素)の「緑色」を継承する！
  • 枠線(border)：ブラウザの初期値に戻り「枠線なし」になる！
/* 💡 親要素の設定 */
.child-box {
  color: green; /* 継承されるプロパティ */
  border: 5px solid orange; /* 継承されないプロパティ */
}

/* ⭕️ 孫要素で unset を指定した場合の挙動 */
.grandchild-box.is-unset {
  color: unset; /* 💡 継承されるので、親の「green」になる */
  border: unset; /* 💡 継承されないので、初期値の「none(枠線なし)」になる */
}
HTMLコード表示
<div class="unset-wrapper">
  
  <p class="unset-caption">⭕️ unsetは、プロパティによって「親の継承」か「初期化」に分かれる！</p>

  <div class="unset-demo-area">
    
    <!-- 💡 大枠の親要素（赤文字、青い太枠を設定） -->
    <div class="parent-box">
      <p class="box-label">📦 親要素（color: red / border: 5px solid blue）</p>
      
      <!-- 💡 子要素（緑文字、オレンジの太枠で上書き） -->
      <div class="child-box">
        <p class="box-label">🧒 子要素（color: green / border: 5px solid orange）</p>
        
        <!-- 💡 孫要素（unsetを指定） -->
        <div class="grandchild-box is-unset">
          <p class="box-label">👶 孫要素で「unset」を指定すると...？</p>
          <ul class="result-list">
            <li>文字色(color)：親(子要素)の「緑色」を継承する！</li>
            <li>枠線(border)：ブラウザの初期値に戻り「枠線なし」になる！</li>
          </ul>
        </div>
        
      </div>
    </div>

  </div>

  <div class="unset-code-area">
    <span class="hl-comment">/* 💡 親要素の設定 */</span><br>
    <span class="hl-blue">.child-box</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">green;</span> <span class="hl-comment">/* 継承されるプロパティ */</span><br>
      <span class="hl-green">border:</span> <span class="hl-red">5px solid orange;</span> <span class="hl-comment">/* 継承されないプロパティ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 孫要素で unset を指定した場合の挙動 */</span><br>
    <span class="hl-blue">.grandchild-box.is-unset</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 継承されるので、親の「green」になる */</span><br>
      <span class="hl-green">border:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 継承されないので、初期値の「none(枠線なし)」になる */</span><br>
    }
  </div>

</div>
CSSコード表示
.unset-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.unset-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.unset-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.box-label {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
}

/* ＝親要素の設定＝ */
.parent-box {
  background-color: #fff;
  padding: 20px;
  /* 親のベーススタイル */
  color: red;
  border: 5px solid blue;
}

/* ＝子要素の設定（上書き）＝ */
.child-box {
  background-color: #f1f3f5;
  padding: 20px;
  margin-top: 10px;
  /* 子でスタイルを上書き */
  color: green;
  border: 5px solid orange;
}

/* ＝孫要素の設定（unset適用）＝ */
.grandchild-box {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
}

/* 💡 ここでunsetを指定 */
.is-unset {
  color: unset;   /* 親のgreenを継承する */
  border: unset;  /* 初期値のnoneに戻る */
}

/* 結果リストの装飾 */
.result-list {
  margin: 0;
  padding-left: 20px;
  font-weight: bold;
}

/* ＝コード解説エリア＝ */
.unset-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

initial・inherit・revert・noneとの違い

CSSのスタイルを取り消す際、「unsetを使えばいいのか、それともinitialやnoneなのか？」と迷うシーンは実務で発生します。

これらの「リセット系」のキーワードは、それぞれ全く異なる役割と仕様を持っています。

ここでは、実務で必須となるunsetと他のリセット系キーワードの違いを比較・解説します。

initial・inherit・revert・noneとの違い
  • unsetとinitial・inheritの違い
  • unsetとrevertの違い
  • unsetとnoneの違い

unsetとinitial・inheritの違い

unsetとinitialは、CSSを学ぶ上で誰もが一度は通る疑問です。

これらはCSSのグローバルキーワードと呼ばれ、どのプロパティに対しても使用できますが、結果は大きく異なります。

  • initial
    親のスタイルを無視し、ブラウザが定めたCSS仕様上の初期値に強制リセットします。
  • inherit
    自身の初期値や標準スタイルを無視し、親要素の値を強制的に引き継ぎます。
  • unset
    プロパティが継承タイプならinherit、非継承タイプならinitialとして働く「ハイブリッドなリセット」です。

スタイルを初期化する際は、「テキスト関連にはinitialを使わず、親のデザインに馴染ませるためにunsetかinheritを使うこと」です。

⭕️ 文字色（color）に対する、3つのキーワードの決定的な違い！

📦 親要素（サイト全体のベースとして color: green を設定）

initial

親の緑を無視し、初期値の「黒」になる

inherit

親の「緑」を強制的に引き継ぐ

unset

親の「緑」を自然に引き継ぐ（inheritと同じ動き）

/* 💡 colorプロパティに対するリセットの挙動 */
.box-initial {
  color: initial; /* 🚨 ベースの文字色も無視して「黒」にする */
}
.box-inherit {
  color: inherit; /* 💡 親の「緑」を強制的に継承する */
}
.box-unset {
  color: unset; /* 💡 colorは継承タイプなので、親の「緑」になる */
}
HTMLコード表示
<div class="comp-ini-wrapper">
  
  <p class="comp-ini-caption">⭕️ 文字色（color）に対する、3つのキーワードの決定的な違い！</p>

  <div class="comp-ini-demo-area">
    
    <!-- 💡 ベースとなる親要素（緑文字） -->
    <div class="parent-base-box">
      <p class="base-label">📦 親要素（サイト全体のベースとして color: green を設定）</p>
      
      <!-- 比較用の子要素たち（元々は赤い文字色を持たせている想定） -->
      
      <div class="demo-row">
        <!-- ❌ initial：親を無視して黒に戻る -->
        <div class="child-item is-initial">
          <p class="item-title">initial</p>
          <p>親の緑を無視し、初期値の「黒」になる</p>
        </div>

        <!-- ⭕️ inherit：親の緑を強制継承 -->
        <div class="child-item is-inherit">
          <p class="item-title">inherit</p>
          <p>親の「緑」を強制的に引き継ぐ</p>
        </div>

        <!-- ⭕️ unset：colorは継承プロパティなので緑になる -->
        <div class="child-item is-mixed-unset">
          <p class="item-title">unset</p>
          <p>親の「緑」を自然に引き継ぐ（inheritと同じ動き）</p>
        </div>
      </div>

    </div>
  </div>

  <div class="comp-ini-code-area">
    <span class="hl-comment">/* 💡 colorプロパティに対するリセットの挙動 */</span><br>
    <span class="hl-blue">.box-initial</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">initial;</span> <span class="hl-comment">/* 🚨 ベースの文字色も無視して「黒」にする */</span><br>
    }<br>
    <span class="hl-blue">.box-inherit</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">inherit;</span> <span class="hl-comment">/* 💡 親の「緑」を強制的に継承する */</span><br>
    }<br>
    <span class="hl-blue">.box-unset</span> {<br>
      <span class="hl-green">color:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 colorは継承タイプなので、親の「緑」になる */</span><br>
    }
  </div>

</div>
CSSコード表示
.comp-ini-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.comp-ini-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.comp-ini-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

/* 親要素（緑色のベース） */
.parent-base-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #adb5bd;
  /* 💡 サイトのベースカラーを想定 */
  color: #198754; 
}

.base-label {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
}

/* 子要素を並べる枠 */
.demo-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* 各子要素の基本スタイル（一旦、全てに赤い文字色を当てておく） */
.child-item {
  flex: 1;
  min-width: 200px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  /* 一旦、目立つ赤色を指定して、これをリセットする */
  color: #dc3545;
}

.item-title {
  font-weight: bold;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 5px;
  text-align: center;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}

/* ＝❌ initialの挙動（強制リセット）＝ */
.is-initial {
  color: initial; /* 黒に戻る */
}

/* ＝⭕️ inheritの挙動（親の緑を継承）＝ */
.is-inherit {
  color: inherit; /* 緑になる */
}

/* ＝⭕️ unsetの挙動（継承プロパティなので緑になる）＝ */
.is-mixed-unset {
  color: unset; /* 緑になる */
}

/* ＝コード解説エリア＝ */
.comp-ini-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

unsetとrevertの違い

実務で一番やってはいけないミスを防いでくれるのがrevertです。

  • unset：CSSの初期値（真っ白な状態）か、親の値に戻します。
  • revert：ブラウザが元々持っている「デフォルトのスタイル」に戻します。

HTMLタグが本来持っている意味や見た目を守るには、「h1〜h6、ul、ol、buttonなどのブラウザ標準スタイルを持つ要素のスタイルをリセットする際は、unsetではなくrevertを使うこと」です。

⭕️ h1〜h6やリストタグをリセットする時は、必ず「revert」を使え！

元の状態（クラスで派手な装飾を当てたH3タグ）

派手な装飾がされた見出し

❌ 罠（all: unset）
太字もサイズも消え、平文になってしまう

unsetされた見出し

⭕️ 成功（all: revert）
派手な装飾だけ消え、本来の見出しスタイルに戻る！

revertされた見出し
/* ❌ 初心者のミス：h3要素に対して unset をかけてしまう */
h3.trap {
  all: unset; /* 🚨 CSS初期値になるため、h3の太字や文字サイズまで消滅する！ */
}

/* ⭕️ プロの鉄則：ブラウザ標準のスタイルに戻したい時は revert を使う！ */
h3.success {
  all: revert; /* 💡 派手な装飾だけが消え、ブラウザ標準の「太くて大きい見出し」に戻る */
}
HTMLコード表示
<div class="comp-rev-wrapper">
  
  <p class="comp-rev-caption">⭕️ h1〜h6やリストタグをリセットする時は、必ず「revert」を使え！</p>

  <div class="comp-rev-demo-area">
    
    <!-- ベースとなる派手な見出し -->
    <div class="rev-base-section">
      <p class="rev-label">元の状態（クラスで派手な装飾を当てたH3タグ）</p>
      <div class="demo-heading is-base-heading">派手な装飾がされた見出し</div>
    </div>

    <div class="rev-compare-section">
      <!-- ❌ unset：ブラウザの標準スタイル（太さやサイズ）まで消滅 -->
      <div class="rev-item">
        <p class="rev-label" style="color:#dc3545;">❌ 罠（all: unset）<br><small>太字もサイズも消え、平文になってしまう</small></p>
        <div class="demo-heading is-base-heading is-trap-unset">
          unsetされた見出し
        </div>
      </div>

      <!-- ⭕️ revert：ブラウザの標準スタイル（太字など）は残る -->
      <div class="rev-item">
        <p class="rev-label" style="color:#0d6efd;">⭕️ 成功（all: revert）<br><small>派手な装飾だけ消え、本来の見出しスタイルに戻る！</small></p>
        <div class="demo-heading is-base-heading is-success-revert">
          revertされた見出し
        </div>
      </div>
    </div>

  </div>

  <div class="comp-rev-code-area">
    <span class="hl-comment">/* ❌ h3要素に対して unset をかけてしまう */</span><br>
    <span class="hl-blue">h3.trap</span> {<br>
      <span class="hl-green">all:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 🚨 CSS初期値になるため、h3の太字や文字サイズまで消滅する！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ ブラウザ標準のスタイルに戻したい時は revert を使う！ */</span><br>
    <span class="hl-blue">h3.success</span> {<br>
      <span class="hl-green">all:</span> <span class="hl-red">revert;</span> <span class="hl-comment">/* 💡 派手な装飾だけが消え、ブラウザ標準の「太くて大きい見出し」に戻る */</span><br>
    }
  </div>

</div>
CSSコード表示
.comp-rev-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.comp-rev-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.comp-rev-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.rev-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  margin-top: 0;
}

.rev-compare-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rev-item {
  flex: 1;
  min-width: 250px;
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

/* ＝ベースとなる派手な見出しスタイル＝ */
.is-base-heading {
  background-color: #ffc107;
  color: #dc3545;
  padding: 10px 20px;
  border-radius: 30px;
  border: 4px dashed #dc3545;
  box-shadow: 0 4px 0 #c82333;
}

/* ＝❌ 罠：unsetの挙動（平文になる）＝ */
.is-trap-unset {
  /* プロパティを一括リセット */
  all: unset;
  /* 🚨 h3タグのブラウザ標準スタイル（display: block, font-weight: bold, font-size: 1.17em 等）も全て消え去る */
}

/* ＝⭕️ 成功：revertの挙動（ブラウザ標準に戻る）＝ */
.is-success-revert {
  /* プロパティを一括リセット */
  all: revert;
  /* 💡 派手な装飾は消えるが、h3タグ本来の「太字でブロック要素」という見た目は維持される */
}

/* ＝コード解説エリア＝ */
.comp-rev-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

unsetとnoneの違い

noneとunsetの違いです。

noneは、特定のプロパティにおいて「要素を描画しない」「機能をなくす」という具体的な命令です。

  • display: none;：要素そのものを画面から完全に消し去る（存在しなかったことになる）。
  • border: none; / background: none;：枠線や背景を「描画しない」。
  • unset：CSSで指定された「値」をリセットし、初期状態（または親の状態）に戻す。

表示・非表示をコントロールするには、「要素を隠したい時はdisplay: none;を使い、メディアクエリ等で再度表示させたい時にdisplay: revert;（またはunset）を活用すること」です。

⭕️ 要素を「消す」なら none、「スタイル設定を消す」なら unset！

元の状態（ボタンが存在する）

❌ 罠（display: unset）
初期値(inline)に戻るだけで消えない！

⭕️ 成功（display: none）
要素が完全に消滅する！

（空間ごと完全に消えました）
/* ❌ スタイルを消す(unset)のと、要素を消す(none)のを混同する */
.btn-fail {
  display: unset; /* 🚨 初期値に戻るだけなので、ボタンは画面に表示されたまま！ */
}

/* ⭕️ 画面から完全に隠したい場合は、絶対に none を使う！ */
.btn-success {
  display: none; /* 💡 これで当たり判定も空間も完全に消え去る */
}
HTMLコード表示
<div class="comp-none-wrapper">
  
  <p class="comp-none-caption">⭕️ 要素を「消す」なら none、「スタイル設定を消す」なら unset！</p>

  <div class="comp-none-demo-area">
    
    <!-- ベース状態（表示されている） -->
    <div class="none-item">
      <p class="none-label">元の状態（ボタンが存在する）</p>
      <div class="none-box is-base-box">
        <button class="demo-btn">通常ボタン</button>
      </div>
    </div>

    <div class="none-compare-section">
      <!-- ❌ 罠：unsetで消そうとする -->
      <div class="none-item">
        <p class="none-label" style="color:#dc3545;">❌ 罠（display: unset）<br><small>初期値(inline)に戻るだけで消えない！</small></p>
        <div class="none-box">
          <button class="demo-btn is-trap-unset-disp">ボタン（消えない）</button>
        </div>
      </div>

      <!-- ⭕️ 成功：noneで消す -->
      <div class="none-item">
        <p class="none-label" style="color:#0d6efd;">⭕️ 成功（display: none）<br><small>要素が完全に消滅する！</small></p>
        <div class="none-box">
          <button class="demo-btn is-success-none">ボタン（消滅）</button>
          <span style="color:#6c757d; font-size: 13px;">（空間ごと完全に消えました）</span>
        </div>
      </div>
    </div>

  </div>

  <div class="comp-none-code-area">
    <span class="hl-comment">/* ❌ スタイルを消す(unset)のと、要素を消す(none)のを混同する */</span><br>
    <span class="hl-blue">.btn-fail</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 🚨 初期値に戻るだけなので、ボタンは画面に表示されたまま！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 画面から完全に隠したい場合は、絶対に none を使う！ */</span><br>
    <span class="hl-blue">.btn-success</span> {<br>
      <span class="hl-green">display:</span> <span class="hl-red">none;</span> <span class="hl-comment">/* 💡 これで当たり判定も空間も完全に消え去る */</span><br>
    }
  </div>

</div>
CSSコード表示
.comp-none-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.comp-none-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.comp-none-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.none-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  margin-top: 0;
}

.none-compare-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.none-item {
  flex: 1;
  min-width: 250px;
}

.none-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ボタンの基本スタイル */
.demo-btn {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* ＝❌ 罠：display: unset＝ */
.is-trap-unset-disp {
  display: unset; /* 🚨 ボタンの初期値(inline-block等)に戻るだけで、画面には残る */
}

/* ＝⭕️ 成功：display: none＝ */
.is-success-none {
  display: none; /* 💡 完全に消える */
}

/* ＝コード解説エリア＝ */
.comp-none-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

displayの使い方を詳しく知りたい人は「【CSS】displayの種類は？flexやinline-blockの違い」を一読ください。

【CSS】displayの種類は？flexやinline-blockの違い

プロパティ・状況別のunset活用

unsetの基本的な仕組みを理解したところで、実務で頻出する「具体的なプロパティに対するリセット」のテクニックを解説します。

Web制作の現場では、コンポーネントを使い回す際やレスポンシブデザインでスマホとPCのレイアウトを切り替える際に、一度当てたスタイルを「無かったことにしたい」場面が登場します。

ここでは、背景、サイズ、ホバー効果といった具体的なプロパティに対してunsetを使う際の記述方法について解説します。

プロパティ・状況別のunset活用
  • 背景やoverflowの解除
  • 幅や高さの解除
  • ホバー時のスタイルやCSS変数の解除

背景やoverflowの解除

特定の要素に設定された背景色や背景画像をリセットしたい場合、unsetが役立ちます。

また、はみ出した要素を隠すoverflow: hidden;を解除したい場合にも有効です。

これらのプロパティ（backgroundやoverflow）は「親から継承されないプロパティ」であるため、unsetを指定した場合はブラウザの初期値に戻ります。

背景やoverflowをリセットする際は、「親要素で指定された粒度に合わせて、リセットするプロパティを指定すること」です。

色だけ残したいならbackground-image: unset;とピンポイントで指定しましょう。

⭕️ 背景やoverflowの解除は、ブラウザの初期値（透明/visible）に戻る！

📦 元の状態（親でスタイル指定）

背景：色＋画像あり

画像が丸く切り抜かれている（overflow: hidden）

はみ出し

❌ 罠（background: unset）

画像だけでなく、背景の「色」まで消え去って透明になってしまった！

はみ出し

⭕️ 成功（正確にunset）

画像だけ消えて色が残る。

overflowの解除で、バッジが枠外にはみ出して表示された！

はみ出し
/* ❌ ショートハンド（一括指定）で何でも消そうとする */
.card-fail {
  background: unset; /* 🚨 画像だけでなく、背景色までまとめて透明に戻ってしまう */
}

/* ⭕️ 消したいプロパティだけをピンポイントで狙い撃ちする！ */
.card-success {
  background-image: unset; /* 💡 背景「画像」だけを初期値（none）に戻す */
  overflow: unset; /* 💡 はみ出しを隠す設定を初期値（visible）に戻す */
}
HTMLコード表示
<div class="tech-bg-wrapper">
  
  <p class="tech-bg-caption">⭕️ 背景やoverflowの解除は、ブラウザの初期値（透明/visible）に戻る！</p>

  <div class="tech-bg-demo-area">
    
    <!-- 💡 ベースとなるカード（背景画像と色、overflow:hiddenを設定） -->
    <div class="demo-card is-base-card">
      <p class="card-label">📦 元の状態（親でスタイル指定）</p>
      <div class="card-content">
        <p>背景：色＋画像あり</p>
        <p>画像が丸く切り抜かれている（overflow: hidden）</p>
      </div>
      <!-- はみ出す要素 -->
      <div class="card-badge">はみ出し</div>
    </div>

    <!-- 💡 比較用のカードたち -->
    <div class="demo-card-row">
      
      <!-- ❌ 罠：background: unset（全部消える） -->
      <div class="demo-card is-base-card is-trap-bg">
        <p class="card-label" style="color:#dc3545;">❌ 罠（background: unset）</p>
        <div class="card-content">
          <p>画像だけでなく、背景の「色」まで消え去って透明になってしまった！</p>
        </div>
        <div class="card-badge">はみ出し</div>
      </div>

      <!-- ⭕️ 成功：個別プロパティをunset -->
      <div class="demo-card is-base-card is-success-bg">
        <p class="card-label" style="color:#0d6efd;">⭕️ 成功（正確にunset）</p>
        <div class="card-content">
          <p>画像だけ消えて色が残る。</p>
          <p>overflowの解除で、バッジが枠外にはみ出して表示された！</p>
        </div>
        <div class="card-badge">はみ出し</div>
      </div>

    </div>

  </div>

  <div class="tech-bg-code-area">
    <span class="hl-comment">/* ❌ ショートハンド（一括指定）で何でも消そうとする */</span><br>
    <span class="hl-blue">.card-fail</span> {<br>
      <span class="hl-green">background:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 🚨 画像だけでなく、背景色までまとめて透明に戻ってしまう */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 消したいプロパティだけをピンポイントで狙い撃ちする！ */</span><br>
    <span class="hl-blue">.card-success</span> {<br>
      <span class="hl-green">background-image:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 背景「画像」だけを初期値（none）に戻す */</span><br>
      <span class="hl-green">overflow:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 はみ出しを隠す設定を初期値（visible）に戻す */</span><br>
    }
  </div>

</div>
CSSコード表示
.tech-bg-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.tech-bg-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.tech-bg-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.demo-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-label {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  z-index: 2;
  position: relative;
}

/* ＝ベースとなるカードの設定＝ */
.demo-card {
  position: relative;
  flex: 1;
  min-width: 250px;
  min-height: 150px;
  padding: 20px;
  border-radius: 50px; /* 特徴的な丸み */
  border: 2px solid #adb5bd;
}

/* ベースのスタイル付与 */
.is-base-card {
  background-color: #ffc107; /* 背景色：黄色 */
  /* 背景画像：ダミーの柄 */
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 10px, transparent 10px, transparent 20px);
  overflow: hidden; /* はみ出しを隠す */
}

/* カード内のテキスト */
.card-content {
  position: relative;
  z-index: 2;
  background-color: rgba(255,255,255,0.8);
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
}

/* はみ出すバッジ（右上に配置） */
.card-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #dc3545;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  z-index: 1;
}

/* ＝❌ 罠：background: unset＝ */
.is-trap-bg {
  background: unset; /* 🚨 色も画像も初期値（透明）に戻る */
}

/* ＝⭕️ 成功：個別プロパティのunset＝ */
.is-success-bg {
  background-image: unset; /* 💡 画像だけ消えて、黄色の背景色が残る */
  overflow: unset; /* 💡 はみ出し隠しが解除され、右上の赤いバッジが枠外に飛び出して見える */
}

/* ＝コード解説エリア＝ */
.tech-bg-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

幅や高さの解除

レスポンシブデザインにおいて、PC版で固定幅（width: 300px;）を指定していた要素を、スマホ版では画面幅いっぱいに広げたい時があります。

この時、特定の横幅の解除や最大幅の制限解除、最小の高さの解除にunsetが役立ちます。

サイズ関連のプロパティも継承されないため、ブラウザの初期値（autoやnone、0）に戻ります。

サイズ制限を解除して自然なブロック要素に戻す際は、「width: 100%;で上書きするのではなく、width: unset;（またはauto）を使って、ブラウザ本来の親要素のコンテンツ幅に自然に収まる状態に戻すこと」です。

⭕️ 固定幅を解除する時は「100%」ではなく「unset（auto）」を使え！

📦 親要素（padding: 20px）

元の状態

PC版を想定した固定幅（width: 250px）

❌ 罠（width: 100%）

100%＋自身のpaddingによって、親の枠を右に突き破ってしまった！

⭕️ 成功（width: unset）

初期値（auto）に戻るため、親の枠内に美しく収まる全幅になる！

/* ❌ 固定幅を解除するために 100% を指定してしまう */
.box-fail {
  width: 100%; /* 🚨 親枠100% ＋ 自身の余白 でサイズオーバーし、レイアウトが崩壊する！ */
}

/* ⭕️ 固定幅をやめるなら、初期値に戻してブラウザに計算させる！ */
.box-success {
  width: unset; /* 💡 初期値（auto）に戻り、親の余白に合わせて自然に収まる */
}
HTMLコード表示
<div class="tech-size-v2-wrapper">
  
  <p class="tech-size-v2-caption">⭕️ 固定幅を解除する時は「100%」ではなく「unset（auto）」を使え！</p>

  <div class="tech-size-v2-demo-area">
    
    <!-- 💡 親要素（パディングあり） -->
    <div class="size-v2-parent-box">
      <p class="size-v2-label">📦 親要素（padding: 20px）</p>
      
      <!-- ベース状態：固定幅 -->
      <div class="demo-size-v2-box is-base-size-v2">
        <p style="font-weight: bold; margin-bottom: 5px;">元の状態</p>
        <p style="margin: 0;">PC版を想定した固定幅（width: 250px）</p>
      </div>

      <!-- ❌ 罠：width: 100%（突き破る） -->
      <div class="demo-size-v2-box is-trap-size-v2">
        <p style="color:#dc3545; font-weight:bold; margin-bottom: 5px;">❌ 罠（width: 100%）</p>
        <p style="margin: 0; color: #842029;">100%＋自身のpaddingによって、親の枠を右に突き破ってしまった！</p>
      </div>

      <!-- ⭕️ 成功：width: unset -->
      <div class="demo-size-v2-box is-success-size-v2">
        <p style="color:#0d6efd; font-weight:bold; margin-bottom: 5px;">⭕️ 成功（width: unset）</p>
        <p style="margin: 0; color: #084298;">初期値（auto）に戻るため、親の枠内に美しく収まる全幅になる！</p>
      </div>

    </div>

  </div>

  <div class="tech-size-v2-code-area">
    <span class="hl-comment">/* ❌ 固定幅を解除するために 100% を指定してしまう */</span><br>
    <span class="hl-blue">.box-fail</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">100%;</span> <span class="hl-comment">/* 🚨 親枠100% ＋ 自身の余白 でサイズオーバーし、レイアウトが崩壊する！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ 固定幅をやめるなら、初期値に戻してブラウザに計算させる！ */</span><br>
    <span class="hl-blue">.box-success</span> {<br>
      <span class="hl-green">width:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 初期値（auto）に戻り、親の余白に合わせて自然に収まる */</span><br>
    }
  </div>

</div>
CSSコード表示
.tech-size-v2-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.tech-size-v2-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.tech-size-v2-demo-area {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
  /* 突き破った要素を見やすくするための余白 */
  padding-right: 40px; 
}

/* ＝親要素（わざとpaddingをつける）＝ */
.size-v2-parent-box {
  background-color: #fff;
  border: 2px solid #adb5bd;
  padding: 20px; /* 💡 罠を発動させるためのパディング */
  border-radius: 6px;
}

.size-v2-label {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}

/* ＝共通の子要素スタイル＝ */
.demo-size-v2-box {
  background-color: #f8f9fa;
  padding: 15px !important; /* 共通のパディング */
  margin-bottom: 20px;
  border-radius: 4px;
  border: 2px solid #ced4da;
  font-size: 13px;
  line-height: 1.5;
}

/* ベース：PC版の固定幅 */
.is-base-size-v2 {
  width: 250px !important;
  background-color: #e9ecef !important;
}

/* ＝❌ 罠：width: 100%＝ */
.is-trap-size-v2 {
  width: 100% !important; /* 🚨 親枠の100%の幅を取る */
  background-color: #f8d7da !important;
  border-color: #f5c2c7 !important;
  /* 💡 SWELLの安全設定（border-box）を強制解除してレイアウト崩壊を再現する！ */
  box-sizing: content-box !important;
}

/* ＝⭕️ 成功：width: unset＝ */
.is-success-size-v2 {
  width: unset !important; /* 💡 初期値の auto に戻る */
  background-color: #d1e7dd !important;
  border-color: #badbcc !important;
}

/* ＝コード解説エリア＝ */
.tech-size-v2-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

widthやheightの設定について詳しく知りたい人は「【CSS】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【CSS】width（横幅）とheight（高さ）の指定とボックスモデル

ホバー時のスタイルやCSS変数の解除

「スマホ表示の時は、ホバーエフェクトを無効化したい」といった実務でよくあるケースです。

スマホにはマウスがないため、ホバー効果が残っているとタップした直後に意図しない色変わりが発生してしまいます。

しかし、このホバーエフェクトを無効化するために、メディアクエリ内で:hover { background-color: unset; } のように記述するのはNGです。

背景色や枠線といった「親から継承されないプロパティ」にunsetを使うと、通常時の状態に戻るのではなくブラウザの初期値に戻ってしまい、ホバーした瞬間にボタンが消滅するバグを引き起こします。

一方で、unsetが真価を発揮するのは「CSS変数（カスタムプロパティ）の解除」です。

最新のCSS設計ではCSS変数を使ってテーマカラーを管理しますが、特定の子要素で一度上書きした変数を「やっぱり大元の親の色に戻したい」といった場合に--theme-color: unset;が使えます。

CSS変数は「親から継承されるプロパティ」であるため、unsetを指定することで初期値になるのではなく、親要素で定義された元の値を自動的に継承してくれます。

これにより、元の色をわざわざ直書きして戻す必要がなくなり、後からテーマカラーが変更されても修正漏れが起きなくなります。

⭕️ 背景色のホバー解除に unset を使うと透明になる！CSS変数で使え！

❌ 罠（background: unset）
非継承のため、背景が透明に消滅する！

ホバーすると
透明になる（バグ）

⭕️ 成功（CSS変数のunset）
変数は継承されるため、大元の親の色に戻る！

親（テーマ色：青）
子（赤に上書き）
孫でunsetすると
大元の「青」に戻る！
/* ❌ 背景色のホバーをunsetで消そうとする */
.btn-fail:hover {
  background-color: unset; /* 🚨 継承されないため、通常時の色ではなく「透明」になる！ */
}

/* ⭕️ unset は継承される「CSS変数の上書き解除」に使う！ */
.parent { –theme-color: blue; } /* 大元の色 */
.child { –theme-color: red; } /* 赤に上書きされたエリア */
.grandchild {
  –theme-color: unset; /* 💡 変数は継承されるため、子の赤を消して親の青を引っ張ってくる！ */
  background-color: var(–theme-color);
}
HTMLコード表示
<div class="tech-hov-v2-wrapper">
  
  <p class="tech-hov-v2-caption">⭕️ 背景色のホバー解除に unset を使うと透明になる！CSS変数で使え！</p>

  <div class="tech-hov-v2-demo-area">
    
    <!-- ❌ 罠：ホバー時に背景色をunsetする（前回のミス） -->
    <div class="tech-hov-v2-item">
      <p class="tech-hov-v2-label" style="color:#dc3545;">❌ 罠（background: unset）<br><small>非継承のため、背景が透明に消滅する！</small></p>
      
      <div class="demo-hov-v2-box is-trap-hov-v2">
        ホバーすると<br>透明になる（バグ）
      </div>
    </div>

    <!-- ⭕️ 成功：CSS変数をunsetする -->
    <div class="tech-hov-v2-item">
      <p class="tech-hov-v2-label" style="color:#0d6efd;">⭕️ 成功（CSS変数のunset）<br><small>変数は継承されるため、大元の親の色に戻る！</small></p>
      
      <!-- 💡 大枠の親で「テーマカラー：青」を定義 -->
      <div class="theme-parent-v2">
        <span class="theme-label-v2">親（テーマ色：青）</span>
        
        <!-- 💡 中枠の子で「テーマカラー：赤」に上書き -->
        <div class="theme-child-v2">
          <span class="theme-label-v2">子（赤に上書き）</span>
          
          <!-- 💡 孫のボタンで変数を unset する -->
          <div class="demo-hov-v2-box is-success-var-v2">
            孫でunsetすると<br>大元の「青」に戻る！
          </div>
        </div>
      </div>

    </div>

  </div>

  <div class="tech-hov-v2-code-area">
    <span class="hl-comment">/* ❌ 背景色のホバーをunsetで消そうとする */</span><br>
    <span class="hl-blue">.btn-fail:hover</span> {<br>
      <span class="hl-green">background-color:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 🚨 継承されないため、通常時の色ではなく「透明」になる！ */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ unset は継承される「CSS変数の上書き解除」に使う！ */</span><br>
    <span class="hl-blue">.parent</span> { <span class="hl-green">--theme-color:</span> <span class="hl-red">blue;</span> } <span class="hl-comment">/* 大元の色 */</span><br>
    <span class="hl-blue">.child</span> { <span class="hl-green">--theme-color:</span> <span class="hl-red">red;</span> } <span class="hl-comment">/* 赤に上書きされたエリア */</span><br>
    <span class="hl-blue">.grandchild</span> {<br>
      <span class="hl-green">--theme-color:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 💡 変数は継承されるため、子の赤を消して親の青を引っ張ってくる！ */</span><br>
      <span class="hl-green">background-color:</span> <span class="hl-red">var(--theme-color);</span><br>
    }
  </div>

</div>
CSSコード表示
.tech-hov-v2-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.tech-hov-v2-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.tech-hov-v2-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.tech-hov-v2-item {
  width: 280px;
  text-align: center;
}

.tech-hov-v2-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ＝共通のボタンスタイル＝ */
.demo-hov-v2-box {
  color: #fff;
  padding: 15px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 2px solid transparent;
}

/* ＝❌ 罠：背景色プロパティをunset（前回のミスを再現）＝ */
.is-trap-hov-v2 {
  background-color: #198754; /* 通常時は緑 */
}
.is-trap-hov-v2:hover {
  background-color: unset !important; 
  /* 🚨 継承されないので初期値（透明）になり、ボタンが消える！ */
  color: #333; /* 透明になって文字が見えなくなるので一時的に黒に */
  border-color: #198754; /* 枠線だけ残して存在をアピール */
}

/* ＝⭕️ 成功：CSS変数のunset＝ */

/* 大枠（親）：テーマカラーを青に定義 */
.theme-parent-v2 {
  --my-theme: #0d6efd; /* 大元の色は青 */
  background-color: #e2e3e5;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #adb5bd;
  text-align: left;
}

/* 中枠（子）：テーマカラーを赤に上書き */
.theme-child-v2 {
  --my-theme: #dc3545; /* ここから下は赤になる */
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
  border: 1px dashed #adb5bd;
}

/* ラベル装飾 */
.theme-label-v2 {
  font-size: 11px;
  color: #6c757d;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

/* 孫（ボタン）：変数をunsetして上書きを解除 */
.is-success-var-v2 {
  /* 💡 CSS変数は継承される。ここで unset すると、子の「赤」が解除され、大元の親の「青」が継承される！ */
  --my-theme: unset; 
  /* 継承してきた青色が背景に適用される */
  background-color: var(--my-theme); 
}

/* ＝コード解説エリア＝ */
.tech-hov-v2-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

all: unset;の使い方

個別のプロパティを一つずつunsetしていくのは、コードが長くなり保守性も下がってしまいます。

指定した要素が持つスタイルを丸ごとリセットするプロパティ指定がall: unset;です。

ここでは、リセット技の正しい使いどころと実務でやってはいけない注意点について解説します。

all: unset;の使い方
  • 要素にかかっているすべてのスタイルを一括で解除・初期化する

要素にかかっているすべてのスタイルを一括で解除・初期化する

allプロパティは、その要素に適用されている「すべてのCSSプロパティ（unicode-bidiとdirectionを除く）」を対象にする特殊なプロパティです。

ここにunsetを指定すると、文字色やフォントサイズなどの継承されるものは親の値に戻り、背景や枠線、マージンなどの継承されないものはブラウザの初期値に一括でリセットされます。

all: unset;を使う際は、「デフォルトのブラウザスタイルが邪魔になる要素（特に<button>）をゼロからオリジナルのデザインで作り直したい時の『完全初期化』にのみ限定して使うこと」です。

単に自分の書いたクラスだけを取り消したい場合は、個別にunsetするか、前述したall: revert;を使いましょう。

⭕️ all: unset は「デフォルトスタイルを完全に破壊してゼロから作る」ために使え！

1. 標準のボタン

枠線や背景色など、ブラウザ標準のスタイルがあたっている状態。

2. 罠（all: unset のみ）

背景や枠線だけでなく、中央揃えなどのレイアウトまで消え、ただの文字になる！

3. 成功（ゼロから再構築）

ブラウザの枠線などに邪魔されず、完全にフラットで美しい独自UIが完成！

/* ❌ 罠：リセットしたままで放置する（ボタンだと認識されなくなる） */
.button-trap {
  all: unset; /* 🚨 アクセシビリティも見た目も崩壊する */
}

/* ⭕️ all: unset で邪魔な標準スタイルを消し、オリジナルを構築する */
.button-success {
  /* 💡 1. まず全てのデフォルトスタイルを破壊・初期化する */
  all: unset;

  /* 💡 2. ゼロから自由にスタイルを構築する（標準の枠線などに邪魔されない） */
  cursor: pointer;
  display: inline-block;
  background-color: #0d6efd;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
}
HTMLコード表示
<div class="tech-all-wrapper">
  
  <p class="tech-all-caption">⭕️ all: unset は「デフォルトスタイルを完全に破壊してゼロから作る」ために使え！</p>

  <div class="tech-all-demo-area">
    
    <!-- 1. ブラウザ標準のボタン -->
    <div class="tech-all-item">
      <p class="tech-all-label">1. 標準のボタン</p>
      <div class="demo-all-box">
        <button class="base-button">
          クリック
        </button>
      </div>
      <p class="desc-text">枠線や背景色など、ブラウザ標準のスタイルがあたっている状態。</p>
    </div>

    <!-- 2. ❌ 罠：all: unset だけを指定（破壊） -->
    <div class="tech-all-item">
      <p class="tech-all-label" style="color:#dc3545;">2. 罠（all: unset のみ）</p>
      <div class="demo-all-box">
        <!-- 🚨 全てのスタイルが消し飛ぶ -->
        <button class="base-button is-trap-all">
          クリック
        </button>
      </div>
      <p class="desc-text" style="color:#dc3545;">背景や枠線だけでなく、中央揃えなどのレイアウトまで消え、ただの文字になる！</p>
    </div>

    <!-- 3. ⭕️ 成功：all: unset を土台にしてゼロから装飾 -->
    <div class="tech-all-item">
      <p class="tech-all-label" style="color:#0d6efd;">3. 成功（ゼロから再構築）</p>
      <div class="demo-all-box">
        <!-- 💡 一度リセットした上で、独自のスタイルを当てる -->
        <button class="base-button is-success-all">
          クリック
        </button>
      </div>
      <p class="desc-text" style="color:#0d6efd;">ブラウザの枠線などに邪魔されず、完全にフラットで美しい独自UIが完成！</p>
    </div>

  </div>

  <div class="tech-all-code-area">
    <span class="hl-comment">/* ❌ 罠：リセットしたままで放置する（ボタンだと認識されなくなる） */</span><br>
    <span class="hl-blue">.button-trap</span> {<br>
      <span class="hl-green">all:</span> <span class="hl-red">unset;</span> <span class="hl-comment">/* 🚨 アクセシビリティも見た目も崩壊する */</span><br>
    }<br><br>

    <span class="hl-comment">/* ⭕️ all: unset で邪魔な標準スタイルを消し、オリジナルを構築する */</span><br>
    <span class="hl-blue">.button-success</span> {<br>
      <span class="hl-comment">/* 💡 1. まず全てのデフォルトスタイルを破壊・初期化する */</span><br>
      <span class="hl-green">all:</span> <span class="hl-red">unset;</span><br><br>
      <span class="hl-comment">/* 💡 2. ゼロから自由にスタイルを構築する（標準の枠線などに邪魔されない） */</span><br>
      <span class="hl-green">cursor:</span> <span class="hl-red">pointer;</span><br>
      <span class="hl-green">display:</span> <span class="hl-red">inline-block;</span><br>
      <span class="hl-green">background-color:</span> <span class="hl-red">#0d6efd;</span><br>
      <span class="hl-green">color:</span> <span class="hl-red">#fff;</span><br>
      <span class="hl-green">padding:</span> <span class="hl-red">10px 20px;</span><br>
      <span class="hl-green">border-radius:</span> <span class="hl-red">30px;</span><br>
    }
  </div>

</div>
CSSコード表示
.tech-all-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.tech-all-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.tech-all-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.tech-all-item {
  flex: 1;
  min-width: 200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tech-all-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
  width: 100%;
}

.demo-all-box {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.desc-text {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
  margin: 0;
}

/* ＝1. ブラウザ標準のボタン＝ */
.base-button {
  /* ここにはあえて何も指定しない（ブラウザ標準を活かす） */
}

/* ＝2. ❌ 罠：all: unset のみ（ただの文字になる）＝ */
.is-trap-all {
  /* 🚨 ボタンとしての見た目や機能（フォーカスリング等）が全て消え去る */
  all: unset;
}

/* ＝3. ⭕️ 成功：all: unset をベースに再構築＝ */
.is-success-all {
  /* 💡 1. 全てを初期化 */
  all: unset;
  
  /* 💡 2. 独自のデザインを適用 */
  cursor: pointer;
  display: inline-block;
  background-color: #0d6efd;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: opacity 0.3s ease;
}

.is-success-all:hover {
  opacity: 0.8;
}

/* ＝コード解説エリア＝ */
.tech-all-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  overflow-x: auto;
  text-align: left;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • unsetの基本仕様
    継承されるプロパティは親の値に戻り、継承されないプロパティはブラウザの初期値に戻る。
  • 対initial
    initialは親を無視して常にブラウザ初期値に戻すが、unsetは親のスタイルを自然に継承できる。
  • 対revert
    unsetはCSS仕様上の初期値に戻すが、revertはブラウザのデフォルトスタイルを保持する。
  • 対none
    display: none;は要素そのものを消滅させるが、display: unset;は要素の表示設定を初期値に戻すだけで画面には残る。
  • 背景・枠線の解除
    background: unset;のような一括指定ではなくbackground-image: unset;のように解除したいプロパティをピンポイントで指定する。
  • 固定幅の解除（全幅化）
    width: 100%;はパディングによってはみ出す危険があるため、固定幅の解除にはwidth: unset;（またはauto）を使用して自然に収める。
  • ホバーエフェクトの解除
    メディアクエリ内で元の色を直書きせずbackground-color: unset;のように記述することは非継承プロパティにおいては誤りである。
    ホバー解除には@media (hover: hover)を使用する。
  • CSS変数の解除（unsetの真価）
    --theme-color: unset;のようにCSS変数に対して使うと、大元の親要素で定義された変数の値を安全に継承できる。
  • all: unset;の用途
    <button>などのブラウザ標準スタイルが邪魔になる要素を、フラットな状態から独自のUIとして作り直す際の「土台作り」にのみ使用する。

よくある質問（FAQ）

unsetとinitial（初期値）の違いは何ですか？

大きな違いは「親要素のスタイルを引き継ぐ（継承する）かどうか」です。

initialは、親の指定を完全に無視して「ブラウザが定めたCSS仕様の初期値」に強制リセットします。

一方unsetは、文字色（color）のように「元々親から継承されるプロパティ」に対しては親の色を引き継ぎ（inheritの動き）、背景などの「継承されないプロパティ」に対しては初期値に戻る（initialの動き）、より自然で使い勝手の良いリセット値です。

display: unset;を指定しても要素が非表示になりません。

unsetは「スタイル指定を解除して初期状態に戻す」だけであり、要素を「隠す」命令ではないためです。

例えば、<div>に対してdisplay: unset;を指定すると、初期値であるinlineに戻るだけで、要素自体は画面に表示され続けます。

要素そのものを画面から消し去りたい場合は、unsetではなくdisplay: none;を使用してください。

all: unset;とはどのような時に使うものですか？

指定した要素にかかっている「すべてのCSSプロパティ」を一括で解除・リセットしたい時に使います。

実務で活躍するのは、<button>や<a>タグなど「ブラウザがデフォルトで持っている邪魔なスタイル」を真っ白に破壊し、ゼロからオリジナルのデザインでUIを作り直す際の「リセット」の用途です。

スマホでホバーエフェクト（:hover）を消すためにunsetを使ってもいいですか？

背景色や枠線など「継承されないプロパティ」の解除に使うのは危険です。

例えば:hover { background-color: unset; }とすると、通常時の色に戻るのではなく、ブラウザの初期値であるtransparentになってしまい、ホバーした瞬間にボタンが消滅するバグが起きます。

スマホでのホバー解除には@media (hover: hover)を使うか、CSS変数をunsetして親の色を継承させる手法をとるのが安全です。

正しくunsetを指定したはずなのに、スタイルが解除されません。

CSSの「詳細度（優先順位）」で元のスタイルに負けている可能性が高いです。

例えば、元のCSSが.card .button { background: red; }と強く指定されているのに対し、.button { background: unset; }とだけ書いた場合、セレクタの強さで負けているためリセットは適用されません。

解除したい場合は、元の指定と同じか、それ以上に強いセレクタを使ってunsetを指定する必要があります。

CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次