⏳

CodeSandBox のプレビュー画面の位置を変更する

2022/02/06に公開

はじめに

最近、GitHub よりも手軽にコードの共有ができ、VScode のように拡張機能を入れてカスタマイズできるオンラインエディターの CodeSandBox がアツいです。

筆者も使っているのですが、使用感はほぼ VScode です。UI もかなり似ているので、VScode を使っている人は導入しやすいと思います。

先日 CodeSandBox を使っていると、プレビュー画面が右にある人もいれば、下にある人もいることに気づきました。

プレビューが右にある時
プレビューが右にある画像

プレビューが下にある時
プレビューが下にある画像

個人的には、パソコンの画面は横長なので右にプレビュー画面がある方が好きです。
移動させようと、ドラッグしたり、setting を見たりしたのですが、プレビュー画面に関する項目が見つけられず、移動できません。

ネットで調べてみても全然ヒットしなくて困っていたのですが、最終的に解決できたので、その方法を記載します。

2022.2.6 現在
Chrome
M1 mac, Windows11 で動作確認。

windows: ctrl + shift + p
mac: command + shift + p

で開きます。

flip と打つと補完が出てくると思います。

選択している様子

これで、プレビュー画面の位置が入れ替わります。

CodeSandBox は　GitHub が使えなくても簡単にコード共有できるのでおすすめです。

無料アカウントだと作ったコードはネットに公開されるので、API キーなどの秘密情報は記載しないようにしましょう。