🛠️

Reset.cssの影響を受けずに素のHTMLを確認する

2025/02/03に公開
4

結論: all: revert; を適用する

<style>
  #debug * {
    all: revert;
  }
</style>

<div id="debug">
  <h1>Heading 1!</h1>
  <button>Click me</button>
</div>

これで、Reset.cssによってリセットされたデフォルトスタイルを復元できます

参考: https://developer.mozilla.org/ja/docs/Web/CSS/all

そもそも、なぜこれが必要か?

自分はWebフロントエンドの実装をする際、まずはAPIの疎通確認や状態管理、簡単な動作の実装を優先することが多いです

その過程で、マークダウンで文章を書くような感覚で、プレーンなHTMLを使って仮のUIを作って確認することがあります

しかし、Reset.cssなどの影響でデフォルトの見た目がリセットされ、どの要素がどういう形なのか直感的に確認しづらくなるのが悩みでした

「これ、簡単に解決できないかな?」と思い、雑にChatGPTに相談してみたところ、 all: revert; というプロパティを知りました

試してみると「お、これいいじゃん!」となり、それ以来デバッグ時によく使っています

おまけ: 自分がデバッグでよく使うHTMLタグ

素のHTMLだけでデバッグするときに、よく使うタグを紹介します

h1~h6, section

見出し要素として
sectionは区切り用に

details, summary, pre

toggle が必要なUIや、デバッグ時にデータを確認するために

<details open>
  <summary>Debug</summary>
  <pre>{JSON.stringify(data, null, 2)}</pre>
</details>

hr

区切り線として

ul, li

リスト表示が必要なときに

form, label, input, textarea, select, option, button, datalist

フォームの値を作ったり、更新したりするときに

dialog

ダイアログ的な挙動を試したい時に

最後に

CSSを使わずに素のHTMLだけでUIを組んでみると、「こんなタグがあったのか!」という発見があったり、実際に使うことで似たようなUIコンポーネントを作るときに役立つことが多いと感じています

特に details, summary, pre など、普段あまり意識しないタグが意外と便利だったりするので、CSSなしでのデバッグを試してみるのも面白いかもしれません

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element

Discussion

junerjuner

出力なら output 要素もいいですよね

https://developer.mozilla.org/ja/docs/Web/HTML/Element/output

aokikenaokiken

おー、自分これ使ったことなかったです!
ReactなりVueが動いている中で書くことが多いので、利用する機会は少ないかもですが、HTMLのみでscratchで書くこともあるので、そういうときには使ってみるかもです!

junerjuner

例えばこういうサンプルを作るときに使います (formの中の出力要素のニュアンスで使っています (多行サンプルなので id 使わない縛りしている都合上 for は使えませんが、 form の子だと form に関連付きます

document.querySelectorAll("output").forEach((output) => {
  output.form?.addEventListener("submit", (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
  });
  output.form?.addEventListener("formdata", ({ formData, target }) => {
    output.textContent = Array.from(
      formData,
      ([key, value]) => `${key}=${value}`,
    ).join(", ");
  });
});
aokikenaokiken

なるほど!例までありがとうございます!
セマンティックな要素と理解しました!

例えば人に共有するレベルのもだと、意味的にわかりやすくてよさそうですね!