サクラエディターはコード編集に便利な無料のテキストエディターですが、作成したHTMLがどのように表示されるのか確認したい場合、ブラウザで開く必要があります。
本記事では、初心者にも分かりやすく、HTMLファイルをブラウザで表示する方法や注意点を解説します。
サクラエディターでHTMLを保存する手順
まず、HTMLファイルとして保存する必要があります。
- サクラエディターでHTMLを書いた状態で「ファイル」をクリック
- 「名前を付けて保存」を選択
- ファイル名を「◯◯.html」にする
- 保存形式を「すべてのファイル」に変更して保存
拡張子が「.txt」のままだとブラウザでは正しく認識されません。
HTMLファイルをブラウザで表示する方法
保存したHTMLファイルをブラウザで確認するには、以下の方法があります。
ダブルクリックで開く
- 保存したファイルを探す
- ダブルクリックするだけでブラウザが起動
パソコンに設定された標準ブラウザが使われます。
右クリックから開く
- ファイルを右クリック
- 「開く」を選択
この方法でも簡単に表示できます。
ドラッグ＆ドロップ
- ブラウザを開く
- HTMLファイルをブラウザ画面内にドラッグ
手軽に確認できます。
ブラウザから指定して開く
- ブラウザで「Ctrl + O」
- ファイル選択画面が開く
- HTMLファイルを選択
Windows標準機能で利用できる方法です。
修正内容の反映方法
HTMLに変更を加えた場合は、以下の手順で再表示します。
- サクラエディターで「上書き保存 (Ctrl + S)」
- ブラウザで「更新 (F5)」
この流れで最新のコードが反映されます。
作業を効率化するショートカット
開発中に便利なショートカットを紹介します。
| 作業内容 | ショートカット |
|---|---|
| 上書き保存 | Ctrl + S |
| ページ更新 | F5 または Ctrl + R |
この二つを覚えるだけで作業が大幅に効率化します。
表示できないときに確認するポイント
HTMLが想定通り表示されない場合は、以下を確認します。
・拡張子が「.html」になっているか
・<html> <body> タグが入っているか
・文字コードがUTF-8か
特に文字化けが起きる場合は文字コードを確認します。
推奨する文字コード設定
ブラウザやWordPressはUTF-8基準のため、以下がおすすめです。
- UTF-8（BOMなし）
サクラエディターの「設定」から変更可能です。
自動でブラウザ表示は可能か
サクラエディターには標準機能としてライブプレビュー機能はありません。
リアルタイムプレビューを利用したい場合は、VSCodeなど別ツールの検討もおすすめです。
よくある質問
Q：スマホでも確認できますか？
ローカルサーバー環境を構築すれば可能です。
Q：WordPressでテーマ編集するのと同じですか？
ローカル表示はWordPressテーマの影響を受けません。
Q: HTMLに反映されない場合は？
上書き保存ができているか、ブラウザで更新しているか確認してください。
Q: 文字化けが発生する原因は？
文字コードがUTF-8以外の場合に発生します。
まとめ
サクラエディターで作成したHTMLをブラウザで表示する流れは以下の通りです。
- 「.html」形式で保存（文字コード、UTF8）
- 保存したファイルをダブルクリック
- 修正後は上書き保存してブラウザ更新
著者から一言 💭
必要な操作はシンプルで、初心者でも簡単に確認できます。
HTML学習やWeb制作の第一歩として、ぜひ活用してみてください。
