htmlやcssといったWEB制作の基本のキを覚え始めてから10余年…
未だにbootstrapやTailwindといったフレームワークを使わず、Preprosなどのコンパイルソフトも案件によって泣く泣く使うくらいのパワープレイで相棒であるDreamWeaverと共に過ごしてきました

といってもDreamWeaver使いによくあるテンプレート機能を使うわけでも無く、ただただコードエディタとしてソースフォーマット + エラーチェックぐらいの機能を使うという、色々詰め込んでいて無駄に重いDreamWeaverの利点も活用しないスーパーパワープレイです

なぜDreamWeaver使うのかという理由は特に無く、「Adobeを契約している限りそこにあるから」という流川楓レベルの気持ちで使っていたのですが、最新のcssをチェックしている際にそんなことも言っていられない事件が発生したのです…

事件1：DreamWeaver ネストを知らない

cssのネスト（入れ子）による記述方法は2023年度には主要ブラウザでサポートされていましたので、ほぼ2025年の現在ではモリモリ使っても問題ないはず

….DreamWeaver !!!???

めっちゃエラー表記出てるし、色もおかしい…
ブラウザ上では問題なく表示されているので、書き方が間違っているわけではなさそう

sassは好きではないけど、ネストは便利だなと思っていたので今後使っていきたい

事件2：DreamWeaver dvh,svh,lvhを知らない

スマホサイトで全画面背景などを設定する際、シンプルに height:100vhで設定すると実機でみたらメニューバーに被ってしまったり思っていた高さと違かったという悲しみがあります

そのため、100vhと共にjavascriptで画面の縦幅を計算し、リアルタイムで再調整を行うといった手法が取られることが多かったですが、cssの新単位であるdvh・svh・lvhを使えばスクリプトを使わなくても想定した高さをとってくれる優れものなので使わないという手は無いですね！

….DreamWeaver !!!???

赤字の注釈を見ると「Unexpected token」とエラー表示出してますけど、知らないのはDreamWeaver君だけじゃないの…？

事件3：DreamWeaver @containerを知らない

レスポンシブデザインでのサイト制作は今となっては当たり前ですが、これまでは@mediaを使用し画面幅を基準として設定していました
それが@containerが使えるようになったことで、先祖要素のサイズを基準として取ることができるようになったらしい

….DreamWeaver……. (T ^ T)

流石にエラー扱いする項目が多すぎるので、今後最新のcssを使用していく場合は他のエディターに乗り換えた方が良さげですね

エラー扱いにされていましたが、ブラウザ表示上は全部問題なく表示されておりました
最近のブラウザは足並みそえろえて新機能を実装してくれるので助かりますね！

これまでjavascriptなどで、無理やり実装していた機能がcssのみでシンプルに実装できるようになったのは本当に嬉しい限りです
たかがcssと思わず、しっかりと新機能を追っていきたいなと思いました

とりあえずコードエディタはvscode に変更かな…?