古いバージョンのDreamweaverでMediaQueriesを使う方法

スマホ時代に古いDreamweaverを使うためのちょっと強引な手法

会社で使ってるDreamweaverのバージョンが古くて、サイトをPC向け表示とスマホ向け表示に切り替えるのにMedia Queriesを使うと、Dreamweaver上での表示がCSSが外れた状態になってしまった。ちょっと強引で面倒だけど問題が解消できたのでメモ。

Media Queriesを記述したサーバー上のCSSと、Media Queriesを削除したエディタ上のCSSを使い分けられればMedia Queriesに対応してないDreamweaverでも問題が起きない。だけどDreamweaverではHTMLをアップロードすると、リンクされているCSSを同期しようとするので、サーバー上のCSSが上書きされてしまう。そこで、一旦Media Queries有りのCSSをアップロードして、アップロードされたCSSファイルの書き込みを禁止する。そしてローカルのCSSからMedia Queriesを削除して編集時用として使う。デザイン変更が発生した際はサーバー上のCSSの書き込みを一時的に許可して、この作業を繰り返す。

新しいバージョンならこんな面倒な作業をしなくて済むのに・・・。DWに限らずMedia Queriesを使うと編集時に表示に不具合が出る古いWYSIWYGエディタがあったら同じ方法で対処できるかも。