メインコンテンツにスキップ

ライブプレビュー

ライブプレビューとは、エディタの最新の状態をブラウザで確認できる機能です。ライブプレビューのURLの発行・削除の方法や、レスポンシブデザインの確認方法を解説します。

今週アップデートされました

ライブプレビューの概要と使い方

ライブプレビューとは、エディタの最新の状態をブラウザで確認できる機能です。ライブプレビューのURLを社内のメンバーなどに共有することで、編集状況をリアルタイムに知らせることができます。

注意:カスタムコードで加えた編集内容は、ライブプレビューには反映されません。

ライブプレビューとは

ライブプレビューとは、エディタの最新の状態を確認できる機能です。

様々なブラウザから、今の編集状況がサイトにどう反映されるかをリアルタイムにプレビューできます。

生成したリンクは誰でも閲覧できるので、クライアントやチームメンバー、友人などにライブプレビューのURLを共有することで、リアルタイムで作業の状況を共有することもできます。

ライブプレビューのはじめ方

  1. 画面右上にある[ライブプレビュー]をクリックします。

  2. 新しくライブプレビューを始める場合は[スタート]をクリックします。

  3. [URLをコピー]をクリックすると、自動でランダムなライブプレビューURLが生成されます。(例:preview.Studio.site/live/{ランダムな文字列}/

Point : ライブプレビューでレスポンシブデザインを確認する方法

ライブプレビューでレスポンシブデザインを確認する際、ブレイクポイントはエディタでの表示状態に関わらず、閲覧中のブラウザのウィンドウ幅に応じて切り替わります。

設定した各画面サイズごとのデザインを確認するには、ライブプレビューを表示しているウィンドウの幅を調整してください。

<例>タブレット用のレスポンシブデザインを確認したい

・OK:PCでライブプレビューを開き、ウィンドウ幅を840px以内にする

・OK:タブレット上のブラウザでライブプレビューを開く

・NG:エディタのブレイクポイント設定を「タブレット」にした上で、ライブプレビューを開く

ライブプレビューのURLを削除する

ライブプレビューのリンクを削除するには、「ライブプレビューURLを削除」をクリックします。

  • ライブプレビューのURLをエディタで削除すると、元々発行していたURLにはアクセスできなくなります。

  • URLを再度発行すると、ライブプレビューの新しいURLが生成されます。

こちらの回答で解決しましたか?