🛠️
Reset.cssの影響を受けずに素のHTMLを確認する
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なしでのデバッグを試してみるのも面白いかもしれません
Discussion
出力なら output 要素もいいですよね
おー、自分これ使ったことなかったです!
ReactなりVueが動いている中で書くことが多いので、利用する機会は少ないかもですが、HTMLのみでscratchで書くこともあるので、そういうときには使ってみるかもです!
例えばこういうサンプルを作るときに使います (formの中の出力要素のニュアンスで使っています (多行サンプルなので id 使わない縛りしている都合上 for は使えませんが、 form の子だと form に関連付きます
なるほど!例までありがとうございます!
セマンティックな要素と理解しました!
例えば人に共有するレベルのもだと、意味的にわかりやすくてよさそうですね!