Sublime TextでHTMLをブラウザ表示する方法｜簡単に確認できる便利な手順

html

「Sublime TextでHTMLファイルを作ったけど、どうやってブラウザで開くの？」「変更するたびにブラウザを手動で開くのが面倒…」

こんな悩みを持つ人は多いです。

よくある困りごと

  • HTMLファイルを作成後、ブラウザで確認する方法がわからない
  • 毎回ファイルを探してダブルクリックするのが手間
  • コードを変更するたびに手動でリロードが必要
  • 複数のブラウザで動作確認したい
  • リアルタイムでプレビューしながら開発したい

Sublime Textはとても優秀なテキストエディタですが、標準では「ブラウザプレビュー」機能はついていません。ただ、少し工夫するだけで、作ったHTMLをすぐにブラウザで表示したり、自動更新したりできます。

この記事では、以下の内容をわかりやすく解説します：

  • Sublime TextからHTMLをブラウザで表示する基本方法
  • プラグインを使った効率的なプレビュー方法
  • 自動リロード機能付きの開発環境構築
  • 複数ブラウザでの同時確認テクニック
スポンサーリンク

基本的な方法｜ファイルを直接ブラウザで開く

まずは誰でもできる最もシンプルな方法から紹介します。

手順1：HTMLファイルの保存

操作手順

  1. Sublime TextでHTMLコードを記述
  2. Ctrl + S（MacはCmd + S）でファイルを保存
  3. ファイル名に.html拡張子を付ける（例：index.html）
  4. 保存場所を覚えておく

HTMLファイル例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストページ</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>これはテストページです。</p>
</body>
</html>

手順2：ブラウザでファイルを開く

方法1：右クリックで開く

  1. 保存したHTMLファイルをエクスプローラー（MacならFinder）で右クリック
  2. 「プログラムから開く」を選択
  3. 使用したいブラウザを選択（Chrome、Edge、Firefox など）

方法2：ドラッグ＆ドロップ

  1. ブラウザを起動
  2. HTMLファイルをブラウザウィンドウにドラッグ＆ドロップ
  3. 自動的にページが表示される

方法3：アドレスバーに直接入力

  1. ブラウザのアドレスバーにfile://と入力
  2. その後にファイルの完全パスを入力
  3. Enterキーで実行

例

file:///C:/Users/username/Documents/index.html

この方法のメリット・デメリット

メリット

  • 特別なソフトウェアが不要
  • 誰でもすぐに実行可能
  • シンプルで確実

デメリット

  • 変更のたびに手動でリロードが必要
  • ファイルを探す手間がかかる
  • 複数ブラウザでの確認が面倒

プラグインを使った効率的な方法

View In Browserプラグイン

Sublime TextにView In Browserプラグインを導入すると、エディタから直接ブラウザでファイルを開けます。

インストール方法

Package Controlを使用する場合

  1. Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
  2. Package Control: Install Packageと入力してEnter
  3. View In Browserと入力してパッケージを選択
  4. インストール完了を待つ

Package Controlがない場合

  1. Package Controlの公式サイトからインストール
  2. 上記の手順でView In Browserをインストール

使用方法

右クリックメニューから

  1. Sublime TextでHTMLファイルを開く
  2. エディタ画面上で右クリック
  3. View in Browserを選択
  4. 既定のブラウザでファイルが開く

ショートカットキーで

  • Windows/Linux：Alt + B
  • Mac：Ctrl + Alt + B

設定のカスタマイズ

設定ファイルを編集して使用するブラウザを指定できます：

  1. Preferences → Package Settings → View In Browser → Settings - User
  2. 以下のような設定を追加：
{
    "browser": "chrome",
    "browsers": {
        "chrome": {
            "cmd": ["C:/Program Files/Google/Chrome/Application/chrome.exe"],
            "name": "Google Chrome"
        },
        "firefox": {
            "cmd": ["C:/Program Files/Mozilla Firefox/firefox.exe"],
            "name": "Mozilla Firefox"
        }
    }
}

その他の便利なプラグイン

SideBarEnhancements

  • サイドバーから右クリックでブラウザ表示
  • ファイル管理機能が充実

BracketHighlighter

  • HTMLタグの対応を視覚的に表示
  • コードの読みやすさが向上

自動リロード機能付きの開発環境

コードを変更するたびに自動でブラウザがリロードされる環境を構築する方法を紹介します。

Live Server（Node.js）の導入

前提条件

Node.jsがインストールされている必要があります。

Node.jsのインストール確認

node --version
npm --version

Live Serverのインストール

グローバルインストール

npm install -g live-server

使用方法

  1. コマンドプロンプト（ターミナル）を開く
  2. HTMLファイルがあるフォルダに移動
cd C:\path\to\your\project
  1. Live Serverを起動
live-server
  1. 自動的にブラウザが開き、ファイルが表示される
  2. ファイルを保存すると自動でリロードされる

Live Serverの詳細設定

ポート番号を指定

live-server --port=3000

特定のファイルを開く

live-server --open=index.html

ブラウザを指定

live-server --browser=chrome

Browsersyncの活用

複数のデバイスで同時にテストしたい場合はBrowsersyncが便利です。

インストール

npm install -g browser-sync

使用方法

browser-sync start --server --files "*.html, *.css, *.js"

機能

  • 複数デバイス間での同期
  • スクロール位置の同期
  • フォーム入力の同期
  • クリック操作の同期

Python簡易サーバー

Node.jsがない環境でも、Pythonがあれば簡易サーバーを立てられます。

Python 3の場合

python -m http.server 8000

Python 2の場合

python -m SimpleHTTPServer 8000

ブラウザでhttp://localhost:8000にアクセスしてファイルを確認できます。

高度なテクニック

複数ブラウザでの同時確認

ブラウザ別の設定

View In Browserでの複数ブラウザ設定

{
    "browsers": {
        "chrome": {
            "cmd": ["chrome"],
            "name": "Google Chrome"
        },
        "firefox": {
            "cmd": ["firefox"],
            "name": "Mozilla Firefox"
        },
        "edge": {
            "cmd": ["msedge"],
            "name": "Microsoft Edge"
        }
    }
}

一括でブラウザを開くスクリプト

Windowsバッチファイル例

@echo off
start chrome %1
start firefox %1
start msedge %1

開発者ツールとの連携

Chrome DevToolsの活用

  • F12キーで開発者ツールを開く
  • Elements タブでHTML構造を確認
  • Consoleタブでエラーチェック
  • Networkタブで読み込み状況を確認

ライブエディット機能

Chrome DevToolsのElementsタブで直接HTMLを編集し、リアルタイムで結果を確認できます。

ファイル監視システム

Gulpを使った自動化

package.jsonの設定

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0"
  }
}

gulpfile.jsの例

const gulp = require('gulp');
const connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: '.',
    livereload: true,
    port: 8000
  });
});

gulp.task('html', function() {
  return gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('watch', function() {
  gulp.watch(['./*.html'], gulp.series('html'));
});

gulp.task('default', gulp.parallel('connect', 'watch'));

よくある問題と解決法

ファイルが表示されない場合

確認ポイント

  • ファイルが正しく保存されているか
  • ファイル拡張子が.htmlになっているか
  • ファイルパスに日本語や特殊文字が含まれていないか
  • HTMLの構文エラーがないか

解決方法

  1. ファイルの再保存
  2. ファイル名を英数字のみに変更
  3. HTML Validatorでエラーチェック
  4. 別のブラウザで確認

CSSやJavaScriptが読み込まれない

相対パスの確認

<!-- 正しい例 -->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

<!-- ファイルが同じフォルダにない場合 -->
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

ファイルの存在確認

  1. 参照しているファイルが正しい場所にあるか確認
  2. ファイル名の大文字小文字を確認
  3. ブラウザの開発者ツールでエラーメッセージをチェック

文字化けが発生する場合

文字エンコーディングの設定

Sublime Textでの設定

  1. File → Reopen with Encoding → UTF-8
  2. HTMLのmeta タグでUTF-8を指定
<meta charset="UTF-8">

プラグインが動作しない

トラブルシューティング

  1. Package Controlが正しくインストールされているか確認
  2. Sublime Textを再起動
  3. プラグインの設定ファイルを確認
  4. 他のプラグインとの競合がないかチェック

効率的なワークフロー

推奨される開発フロー

初心者向け

  1. Sublime TextでHTMLファイルを作成
  2. View In Browserプラグインでブラウザ表示
  3. 変更後は手動でリロード

中級者向け

  1. Sublime TextでHTMLファイルを作成
  2. Live Serverで自動リロード環境を構築
  3. 複数ブラウザで動作確認

上級者向け

  1. Gulpやwebpackで自動化環境を構築
  2. Browsersyncで複数デバイス同期
  3. 継続的インテグレーション（CI）との連携

ショートカットキーの活用

Sublime Text基本ショートカット

  • Ctrl + S：ファイル保存
  • Ctrl + Shift + P：コマンドパレット
  • Ctrl + D：単語選択
  • Ctrl + /：コメントアウト

ブラウザ基本ショートカット

  • F5：ページリロード
  • Ctrl + Shift + R：キャッシュクリア後リロード
  • F12：開発者ツール
  • Ctrl + U：ソース表示

実用的な設定例

プロジェクトフォルダの構成

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── README.md

Sublime Textのプロジェクト設定

プロジェクトファイル例（project.sublime-project）

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "tab_size": 2,
        "translate_tabs_to_spaces": true,
        "auto_indent": true
    },
    "build_systems": [
        {
            "name": "Open in Browser",
            "cmd": ["start", "$file"],
            "shell": true,
            "windows": {
                "cmd": ["start", "", "$file"]
            }
        }
    ]
}

まとめ

Sublime Textで作ったHTMLをブラウザで表示する方法は、レベルに応じて選択できます：

初心者におすすめ

  1. 直接ファイルをブラウザで開く
    • 特別なツール不要
    • すぐに始められる
    • シンプルで確実

中級者におすすめ

  1. View In Browserプラグインを使用
    • Sublime Textから直接ブラウザ表示
    • ショートカットキーで効率化
    • 複数ブラウザの管理が可能

上級者におすすめ

  1. Live Serverなど自動リロードツール
    • ファイル保存時の自動更新
    • 開発効率の大幅向上
    • 複数デバイスでの同時確認

開発効率を上げるポイント

  • 用途に応じた方法の使い分け
  • ショートカットキーの活用
  • 開発者ツールとの連携
  • 自動化ツールの導入

トラブル回避のコツ

  • ファイルパスと文字エンコーディングに注意
  • HTMLの構文エラーをチェック
  • 複数ブラウザでの動作確認
  • 開発者ツールでエラー監視

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました