BracketsでChrome・Firefox・Opera同時にhtml・cssのライブプレビューをする操作方法

Pocket

BracketsではChrome・Firefox・Operaなど複数ブラウザで同時にライブプレビュー(=クロスブラウザ ライブプレビュー)することが可能です。Windows7ではさらにIEも可能です。
操作方法は ・試験ライブプレビューを有効にする ・URLをアドレスバーに1回だけコピー&貼り付けする だけです。その後はBracketsエディタ画面を変更するだけで、変更内容が各ブラウザーに反映されます

ということで、今日のページの目次はこちら

はじめに

ちなみに2016年5月での各ブラウザのシェア率は1位Google Clome、2位Internet Exploler、3位Firefoxと続いています。→ついにGoogle Chromeが首位 – 4月ブラウザシェア

ということもあり、複数のブラウザで表示確認する人もいるかと思います。なのでBracketsライブプレビューを、Chrome・Internet Exploler・Firefox・Operaなど複数のブラウザで、同時に行う操作方法について説明しますね。なおInternrt Explolerは、Windows7のみ可能です。

なお、管理人の環境はWindowsのためMacのsafariは確認できていません。Mac欲しいなぁ(。-_-。)

あっ、「ライブプレビューって何?」という人はこちらをどうぞ。

html・cssの保存操作は不要! Bracketsライブプレビューの使い方

ということではじめます。今回の手順では、既定のブラウザはGoogle Chromeとして説明しますね。

試験ライブプレビューを有効にする

まずは試験ライブプレビューを有効にしましょう。Bracketsメニューバーの[ファイル]→[試験ライブプレビューを有効にする]を選択します。

ライブプレビューを実行する

次に、ライブプレビューを実行してください。 既定(デフォルト)のブラウザであるGoogle Chromeが起動してライブプレビューが実行中になります。

ちなみに起動方法は3つあります →ライブプレビューの起動方法

確認したいもう1つのブラウザを起動する

ここで確認したいもう1つのブラウザ(ここではFirefox)を起動します。

起動するブラウザはOperaでもOKです。さらにWindows7の人はInternet ExplolerでもOKです。

ライブプレビューのURLをコピー&貼り付け

ライブプレビュー実行中であるGoogle ChromeのURL入力欄を右クリックしてコピーした後…… もう1つのブラウザ(ここではFirefox)のURL入力欄を右クリックし、[貼り付けて移動]を選択します。

この時点で、Google ChromeとFirefoxには同じものが表示されていますね。

なおOperaでも同様の操作になります。

Windows7の場合はInternet Explolerでも可能です。ただし[貼り付け]を選択した後に、キーボードのEnterキーを押します。

クロスブラウザ ライブプレビューの実行

では、Bracketsエディタでhtmlかcssを編集してみましょう。 ブラウザーを見てみると、Google Chromeに反映されると同時に、Firefox・Operaの各ブラウザにも反映されています(※Windows7の場合は、Internet Explolerにも)。これがクロスブラウザ ライブプレビューです

Chrome
Firefox
Opera
Internet Exploler

まとめ

今日は、BracketsでChrome・Firefox・Operaなど複数ブラウザで同時にライブプレビューする(=クロスブラウザライブプレビュー)操作方法について説明しました。 メニューバーの[ファイル]→[試験ライブプレビューを有効にする]にした後、ChromeブラウザーのURL入力欄からURLをコピーして、各ブラウザーに[貼り付け移動]で簡単にできます。Internet ExplolerについてはWindows7でしかできないのが残念ですが……それでは。

Pocket