Essepageでは、コードエディターでファイルを編集し、プレビュー画面でWebページに表示される結果を確認できます。
基本的な作業の流れは次のとおりです。
ファイルを開く → コードを編集する → 保存する → プレビューで確認する
特定の範囲にリアルタイムプレビュー（Live Preview）を適用すると、ファイルを保存する前でもコードの変更をすぐに確認できます。
このガイドでは、次の内容を説明します。
- ファイルを開いてコードを編集する
- プレビュー画面を開く
- 保存した変更を確認する
- プレビュー内でページを移動する
- さまざまな画面幅でページを確認する
- リアルタイムプレビューを使用する
- プレビューと公開サイトの違いを理解する
ファイルを開いて編集する
コードエディターの左側には、プロジェクトのファイルやフォルダーを確認できるファイルエクスプローラーがあります。
ファイルエクスプローラーで編集するファイルを選択すると、その内容が中央のコード編集エリアに表示されます。
たとえば、ホームページを編集するには次のファイルを選択します。
/public/+page.essepageコード編集エリアでは、既存の内容を修正したり、新しいコードを追加したりできます。
<h1>Welcome to My Website</h1>
<p>This page was created with Essepage.</p>ファイルを保存すると、変更内容が開発環境の作業用バージョンに反映されます。
ファイルの保存方法と保存状態については、作業内容を保存するを参照してください。
プレビューを開く
プレビューは、開発環境に保存されたページがWebブラウザーでどのように表示されるかを確認する機能です。
ページをプレビューで開くには、次の手順で操作します。
- ファイルエクスプローラーで
+page.essepageファイルを右クリックします。 - プレビュー（Preview）を選択します。
- 右側のプレビュー画面でページを確認します。
プレビュー画面がすでに開いている場合は、選択したページがその画面に表示されます。
プレビューできるファイル
プレビューは、公開済みの +page.essepage ファイルで使用できます。公開済みのページファイルは、ファイルエクスプローラーで緑色に表示されます。
テンプレートから作成されたホームページはすでに公開されているため、すぐにプレビューで開くことができます。
新しく作成したページはまだ公開されていないため、最初はプレビューを使用できません。ページを公開（Publish）すると、プレビューで開けるようになります。
たとえば、次のファイルを新しく作成した場合は、先に公開する必要があります。
/public/about/+page.essepage一度公開したページは、その後コードを編集して保存しても、公開サイトがすぐに変更されることはありません。保存した内容を先にプレビューで確認し、準備ができたときに公開サイトへ適用できます。
保存した変更を確認する
コードを編集してファイルを保存すると、プレビュー画面が更新されます。
たとえば、次の見出しがあるとします。
<h1>Welcome to My Website</h1>次のように変更して、ファイルを保存してください。
<h1>Welcome to My New Website</h1>変更された見出しが右側のプレビュー画面に表示されます。
ファイルを保存するとプレビューは更新されますが、訪問者が見る公開サイトは変更されません。
プレビュー内でページを移動する
複数のページで構成されたWebサイトでは、プレビュー内でもリンクを使ってページ間を移動できます。
たとえば、レイアウトに次のナビゲーションメニューがあるとします。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>プレビュー画面で About を選択すると /about ページへ移動し、Contact を選択すると /contact ページへ移動します。
プレビュー画面上部のホームアイコンを選択すると、Webサイトのホームページに戻ることができます。
さまざまな画面幅で確認する
プレビュー画面の幅を変更すると、ページがさまざまな画面サイズでどのように表示されるかを確認できます。
エディターとプレビューの間にある境界線にポインターを合わせ、ドラッグしてプレビュー画面の幅を調整します。
Tailwind CSSのレスポンシブクラスを使用している場合は、画面幅に応じてレイアウトが変化する様子も確認できます。
<div class="grid gap-4 md:grid-cols-3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>このコードでは、小さい画面ではコンテンツが1列で表示され、画面が一定の幅以上になると3列で表示されます。
リアルタイムプレビューを使用する
通常のプレビューは、ファイルを保存した後に更新されます。
コードを編集中に、保存せず変更をすぐに確認したい場合は、リアルタイムプレビュー（Live Preview）を使用できます。
リアルタイムプレビューを有効にするには、HTML要素の id をアンダースコア（_）で始めます。
<div id="_main">
<h1>Welcome to My Website</h1>
<p>This page was created with Essepage.</p>
</div>_main 要素内のコードを変更すると、ファイルを保存しなくても、その範囲がプレビュー画面ですぐに更新されます。
たとえば、次の見出しを変更してみましょう。
<h1>Welcome to My Website</h1>次のように変更します。
<h1>Welcome to My New Website</h1>コードを入力している間に、プレビュー画面の見出しが変わります。
リアルタイムプレビューの適用範囲
リアルタイムプレビューは、アンダースコアで始まる id が設定された要素と、その内側の範囲に適用されます。
<section id="_intro">
<h1>About Our Studio</h1>
<p>We create simple and useful websites.</p>
</section>この例では、_intro 内の見出しや文章を変更すると、結果がすぐに表示されます。
ページ内のほかの部分には通常のプレビューが適用されるため、変更内容を確認するにはファイルを保存する必要があります。
各 id には、同じページ内で重複しない名前を使用してください。
<section id="_intro">
...
</section>
<section id="_services">
...
</section>コンポーネントを含む領域では、ライブプレビューを使用できません。
ライブプレビューの対象として指定したHTML領域内に
<essepage-component>要素が含まれている場合、ライブプレビューは正常に動作しません。ページが構成されるとき、コンポーネントは最終的なHTMLにコンパイルされ、元の
<essepage-component>要素はプレビューページから削除されます。そのため、編集中のコードとプレビューのHTML構造が異なり、対象の領域をリアルタイムで更新できません。この場合は、ファイルを保存してプレビューページを再読み込みするか、コンポーネントをライブプレビューの対象領域の外へ移動してください。
CSSをリアルタイムでプレビューする
ページファイル内に記述した <style> にも、アンダースコアで始まる id を設定できます。
<style id="_css">
h1 {
color: royalblue;
font-size: 48px;
}
</style>_css が設定された <style> 内で色やサイズを変更すると、CSSの変更がすぐにプレビュー画面へ反映されます。ファイルを保存しなくても、見出しの色がその場で変わります。
Tailwind CSSのクラスを使用する場合は、リアルタイムプレビューが有効な要素内でクラスを変更すると、その結果をすぐに確認できます。
<div id="_main">
<h1 class="text-4xl font-bold text-rose-600">
Bloom Flower Studio
</h1>
</div>text-rose-600 を text-blue-600 に変更すると、文字の色がすぐに変わります。
リアルタイムプレビューでも保存は必要です
リアルタイムプレビューは、コードの入力中に結果をすばやく確認するための機能です。プレビュー画面が変わっても、ファイルの内容が自動的に保存されるわけではありません。
変更を残すには、編集が終わった後に必ずファイルを保存してください。
リアルタイムプレビューは変更をすぐに表示する機能であり、作業内容を保存する機能ではありません。
保存せずにファイルを閉じたりページを再読み込みしたりすると、変更内容が失われる場合があります。
プレビューと公開サイトの違い
Essepageでは、作業中の内容を確認するプレビューと、訪問者が見る公開サイトが分かれています。
| 種類 | 表示される内容 | 確認できるタイミング | 訪問者への反映 |
|---|---|---|---|
| プレビュー | 開発環境に保存された作業用バージョン | 保存後 | いいえ |
| リアルタイムプレビュー | 編集中の指定範囲の現在の内容 | 編集中 | いいえ |
| 公開サイト | 最後に公開または適用したバージョン | 公開または適用後 | はい |
ファイルを何度保存してプレビューで確認しても、公開サイトは変更されません。
作業が完了したら、公開（Publish）または変更を適用（Apply Changes）を実行することで、訪問者が見るサイトに変更が反映されます。
詳しくは、公開と適用を参照してください。
基本的な作業の流れ
コードを編集して結果を確認する基本的な流れは次のとおりです。
- ファイルエクスプローラーで編集するファイルを開きます。
- ページファイルをプレビューで開きます。
- コードを作成または修正します。
- 必要な範囲では、リアルタイムプレビューで変更を確認します。
- ファイルを保存します。
- 通常のプレビューで保存された結果を確認します。
- リンクとさまざまな画面幅でページを確認します。
- 作業が完了したら、変更を公開サイトに適用します。
編集 → リアルタイムで確認 → 保存 → プレビュー → 公開サイトに適用
プレビューが動作しない場合
プレビューが開かない場合や変更が表示されない場合は、次の内容を確認してください。
プレビューメニューが表示されない
プレビューは、公開済みの +page.essepage ファイルで使用できます。
新しく作成したページの場合は、先に公開（Publish）してください。
変更した内容が表示されない
通常のプレビューには、保存された内容が表示されます。ファイルが保存されているか確認してください。
リアルタイムプレビューが動作しない
次の内容を確認してください。
- プレビュー画面が開いている
- 要素に
idが設定されている idがアンダースコア（_）で始まっている- 編集しているコードがその要素内にある
- 同じ
idがページ内で複数回使用されていない
プレビューには表示されるが公開サイトには表示されない
これは正常な動作です。
プレビューには開発環境の作業内容が表示され、公開サイトには最後に公開または適用したバージョンが表示されます。
作業が完了したら、変更を適用（Apply Changes）を使用して公開サイトへ反映してください。
次のステップ
編集とプレビューの使い方を理解したら、次のガイドへ進みましょう。
- ファイルを保存して保存状態を確認する方法：作業内容を保存する
- ページを初めて公開したり変更を反映したりする方法：公開と適用
- プロジェクトのファイルとフォルダーを管理する方法：ファイルとフォルダーの管理
- エラーや実行メッセージを確認する方法：コンソールとデバッグ