Dreamweaverを開いたら、画面の上にあったはずの「コード」「分割」「デザイン」の切り替えボタンが、いつの間にか消えてしまった――。そんな経験はありませんか？
実はこれ、私である私も昔やらかしたことがあります。気が付いたら切り替えボタンが丸ごと消えていて、「壊れた！？」とかなりテンパりました（汗）。でも、原因さえ分かってしまえば、なんてことはありません。
この記事では、Dreamweaverの「コード／分割／デザイン」切り替えボタンが消えてしまう原因と、初心者の方でも迷わず元に戻せる複数の解決方法を、WEB制作歴25年の私がやさしく解説します。
「どこを触ったら消えたのか分からない」という方でも、手順どおりに進めれば復活します。お使いのバージョンによってメニューの名前が少し違う場合もありますが、考え方は同じです。
ボタンが見当たらないと、コードを書く画面とデザインを確認する画面を切り替えられず、作業がまったく進みません。とくにDreamweaverを使い始めたばかりの頃は、「自分が何か壊してしまったのでは」と不安になってしまいますよね。私も初心者の頃はそうでした。
でも結論から言うと、このトラブルのほとんどは「ちょっとした表示設定の変化」が原因です。データが壊れたわけでも、ソフトが故障したわけでもありません。だからこそ、正しい場所さえ分かれば、ものの数秒で元どおりにできます。この記事では、初心者の方がつまずきやすいポイントを押さえながら、原因の説明から戻し方まで、できるだけ遠回りせずにお伝えしていきますね。
そもそも「コード／分割／デザイン」ボタンとは？
まず、消えてしまったボタンが何者なのかを確認しておきましょう。これを知っておくと、「なぜ消えると困るのか」もイメージしやすくなります。
Dreamweaverの画面上部には、編集する画面を切り替えるためのボタンが並んでいます。これが「コード」「分割」「デザイン」（バージョンによっては「ライブ」）の切り替えボタンです。
「コード」はHTMLやCSSのソースコードを表示する画面、「デザイン（ライブ）」は実際の見た目を確認する画面、「分割」はその両方を上下または左右に並べて表示する画面です。このボタンが並んでいる帯のことを、Dreamweaverでは「ドキュメントツールバー」と呼びます。
つまり、切り替えボタンが消えた状態というのは、このドキュメントツールバー自体が非表示になっているケースがほとんどなのです。原因が分かれば、あとは表示し直すだけ。難しいことは何もありません。
参考: Adobeヘルプ（ドキュメントウィンドウの使用方法）
関連記事：VS CodeとDreamweaverを徹底比較！Web制作で選ばれる理由とは
なぜボタンが消えてしまうの？
「自分は何も変な操作をしていないのに、勝手に消えた」と感じる方も多いと思います。でも、たいていはちょっとしたきっかけで起きています。
いちばん多いのは、知らないうちにツールバーの表示設定がオフになってしまうパターンです。メニューを操作している途中で、うっかりチェックを外してしまうことがあります。
次に多いのが、ウィンドウのレイアウト（ワークスペース）が崩れてしまうケースです。パネルをドラッグして動かしたり、画面サイズを変えたりした拍子に、表示の配置がおかしくなることがあります。
また、Dreamweaverのバージョンアップ後や、設定ファイルが不安定になったときにも、表示が初期状態と変わってしまうことがあります。いずれの場合も、ソフトが壊れたわけではなく「表示の設定が変わっているだけ」なので、落ち着いて対処すれば必ず元に戻せます。
ちなみに、「消えた」と思っていたボタンが、実はウィンドウの外にはみ出していたり、別のパネルの裏に隠れていたりするだけ、ということもあります。まずは画面全体をざっと見渡して、本当に無くなっているのかを確認してみるのも一つの手です。
ここからは、具体的な戻し方を順番にご紹介します。まずはいちばん簡単な方法から試してみてください。どれも数クリックで終わる操作なので、身構えなくて大丈夫ですよ。
解決方法1：メニューからドキュメントツールバーを表示する
もっとも基本的で確実なのが、メニューからツールバーの表示を切り替える方法です。手順はとてもシンプルなので、まずはこれを試しましょう。
現在のCreative Cloud版のDreamweaverでは、おおむね次の流れで操作します。
- 画面上部のメニューバーから「表示」をクリックします
- 「ツール」（バージョンによっては「ツールバー」）にマウスを合わせます
- 表示されたメニューの中から「ドキュメント」をクリックしてチェックを入れます
これで、消えていた「コード／分割／デザイン」の切り替えボタンが戻ってくるはずです。チェックが入っていれば表示、外れていれば非表示、という仕組みになっています。
古いバージョン（CS系など）をお使いの場合は、「表示」→「ツールバー」→「ドキュメント」という並びになっていることが多いです。メニューの名前や階層はバージョンによって少しずつ変わっていますので、「表示」メニューの中に「ツール」または「ツールバー」という項目がないか探してみてください。
もし「ドキュメント」という項目が見当たらない場合は、次の解決方法2を試してみましょう。
参考: Adobeヘルプ（ツールバー、インスペクター、コンテキストメニューの使用）
解決方法2：ワークスペースをリセットして元に戻す
「メニューから表示してみたけれど、どうも他の表示も崩れている気がする」というときは、ワークスペース全体をリセットするのがおすすめです。
ワークスペースとは、ツールバーやパネルの配置をまとめた「画面のレイアウト設定」のことです。これを初期状態に戻すと、消えたツールバーも含めて、すべてが標準の配置に戻ります。
手順は次のとおりです。
- メニューバーから「ウィンドウ」をクリックします
- 「ワークスペースレイアウト」にマウスを合わせます
- 表示された一覧から「（現在のレイアウト名）をリセット」を選びます
この操作をすると、移動したり閉じたりしてしまったツールバーやパネルが、まとめて元の位置に戻ります。個別に直すのが面倒なときや、何をどう触ったのか分からなくなってしまったときに特に便利です。
レイアウト名は「標準」「開発者」など、選んでいるワークスペースによって変わります。今使っているものを選んでリセットすれば大丈夫です。リセットしても、作成中のファイルやサイトの設定が消えることはありません。あくまで画面の見た目だけが初期状態に戻る操作です。
参考: Adobeヘルプ（Dreamweaverワークスペースの概要）
解決方法3：それでも直らないときは環境設定を見直す
解決方法1も2も試したのに表示が戻らない、表示がやけに不安定だ、という場合は、Dreamweaverの設定ファイルそのものが不調になっている可能性があります。
こうしたときは、環境設定（Preferences）を初期状態に戻すことで改善することがあります。ただし、設定をリセットすると、自分で入れたカスタマイズや一部の拡張機能が消えることもあるので、その点は事前に頭に入れておきましょう。
環境設定のリセット方法はバージョンや使っているOS（WindowsかMacか）で異なります。手順を確定で断言するのは避けますので、実行する前に必ずAdobe公式のヘルプで、お使いのバージョンに合った正しい方法を確認してください。
いきなり環境設定をリセットするのではなく、まずは解決方法1・2を先に試すのが安全です。たいていのケースは、ツールバーの表示切り替えかワークスペースのリセットで解決します。
まとめ：あわてず順番に試せば必ず戻せます
Dreamweaverの「コード／分割／デザイン」切り替えボタンが消えてしまう原因と、その戻し方をご紹介してきました。
切り替えボタンが消えるのはソフトの故障ではなく、ドキュメントツールバーが非表示になっているか、ワークスペースのレイアウトが崩れているだけのケースがほとんどです。原因が分かってしまえば、あわてる必要はまったくありません。
戻し方は、まず「表示」メニューから「ツール（またはツールバー）」→「ドキュメント」にチェックを入れる方法。それでも直らなければ「ウィンドウ」メニューからワークスペースをリセットする方法。それでもダメなら環境設定の見直し、という順番で試すのがおすすめです。
私自身、初めてこれが起きたときは本当に焦りましたが、一度仕組みを知ってしまえば、次からは数秒で直せるようになりました。みなさんも「あ、また消えたな」くらいの気持ちで、落ち着いて対処してみてくださいね。
なお、メニューの名前やボタンの位置はDreamweaverのバージョンアップで少しずつ変わっています。この記事の手順で見当たらない項目があったときは、お使いのバージョンのAdobe公式ヘルプもあわせて確認すると確実です。名前が違っていても、「表示」や「ウィンドウ」といったメニューの中を落ち着いて見ていけば、必ず近い項目が見つかります。
WeberNoteでは、こうしたWEB制作ソフトのちょっとした「困った」を、初心者目線でこれからも取り上げていきます。同じところでつまずいている誰かの役に立てたなら嬉しいです。それでは、よいDreamweaverライフを！
