HTMLビューア

HTMLビューアの使い方

1. 1

   HTMLを開くか貼り付ける

   「ファイルを開く」で.html・.htmを選ぶか、エディタにファイルをドロップします。ほかの場所でコピーしたソースをそのまま貼り付けてもかまいません。

2. 2

   文字コードを確認する

   meta タグで Shift_JIS や EUC-JP などの文字コードが宣言されていればそれで読み込み、それ以外は UTF-8 として扱います。ファイル名と判定した文字コードはヘッダーに表示されます。

3. 3

   ライブプレビューを見る

   入力が止まってから約0.5秒で、右側のペインがブラウザと同じようにページを描き直します。

4. 4

   編集して保存する

   コードを直しながら表示の変化を確かめ、「.htmlをダウンロード」で保存、「コピー」でコードを持ち出し、全画面で作業スペースを広げることもできます。

参考資料

• WHATWG — HTML Standard

  HTMLの構文・要素・モダンブラウザのレンダリング動作を規定するリビングスタンダード。

• MDN — HTML

  HTML要素・属性・ベストプラクティスに関する包括的なリファレンスとチュートリアル。

関連ツール

よくある質問

HTMLファイルをオンラインで開いてプレビューするには？

「ファイルを開く」で.htmlを選ぶか、デスクトップからエディタへドラッグ＆ドロップすると、ソースと表示結果がすぐに並んで表示されます。コード片だけなら貼り付けでも大丈夫です。インストール不要で、ファイルが端末の外に出ることはありません。

HTMLビューアとはどのようなツールですか？

HTMLビューアはHTMLコードを入力すると、ブラウザ上でリアルタイムにレンダリング結果を表示するツールです。HTMLの学習、デバッグ、ページ構造の確認などに活用できます。

HTMLファイルが文字化けするのはなぜ？

このビューアは先頭のBOMを確認したあと、最初の1024バイトにある<meta charset>やhttp-equivの宣言を読み、Shift_JIS・EUC-JPなども宣言どおりに読み込みます。宣言がなければUTF-8扱いです。古いページがShift_JISで保存されているのにmeta charsetを書いていないと文字化けするので、<meta charset="Shift_JIS">を追加してから開き直してください。

編集したHTMLを保存（ダウンロード）できますか？

できます。「.htmlをダウンロード」でエディタの内容をUTF-8のファイルとして保存し、開いたファイルがあれば元のファイル名を引き継ぎます（なければindex.html）。元のファイルがShift_JISなど別の文字コードを宣言していた場合、保存時にmeta charsetをutf-8へ書き換えるので、保存したファイルも文字化けしません。

iPhoneやiPadでHTMLビューアを使えますか？

はい。モバイル版のSafariやChromeでも「ファイルを開く」からファイルアプリやダウンロード内の.htmlを選べます。アプリのインストールは不要です。

外部CSSやJavaScriptをテストできますか？

https で始まる絶対URLなら読み込めるので、CDNのスタイルシートやスクリプト、画像は動作します。./style.css のような相対パスは、プレビューに自分のフォルダがないため解決できません。プレビューはスクリプトを許可したサンドボックスiframeで、同一オリジンではないため、Cookie・ストレージ・alertダイアログはブロックされます。

HTMLコードはサーバーに送信されますか？

いいえ。すべての処理はブラウザ内でローカルに行われます。コードがデバイスの外に出ることは一切ありません。

編集中にプレビューは自動的に更新されますか？

はい。入力や変更のたびにリアルタイムでプレビューが再レンダリングされます。更新ボタンを押す必要はありません。

HTMLエディタでおすすめの初心者向け機能はありますか？

リアルタイムプレビューにより、コードの変更が即座に反映されるため、HTMLタグの効果を視覚的に確認しながら学習できます。ブラウザのみで動作するため、環境構築なしに始められます。