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

スポンサーリンク

Bracketsエディタでhtml・cssファイルの編集・変更をした時に、「保存操作をしないで、リアルタイムに、ブラウザーでプレビュー確認できる機能」であるライブプレビューの使い方について今日は説明しますね。

『ライブプレビュー機能を使わなければBracketsを使う意味がない』と思えるほど、優れた機能なのでぜひ使い方をおぼえてくださいネ。

そうそうBracketsライブプレビューを実行するにはGoogle Chromeブラウザーが必要ですので、インストールしておいてください。

Bracketsのライブプレビューで「ブラウザーの起動時エラーが発生しました」が表示されたらGoogle Chromeのインストールが必要
Bracketsでライブプレビューを使用した時に「ブラウザーの起動時エラーが発生しました」という画面が表示されたらGoogle Chrome(クローム)が必要なのでインストールしましょう。

それでは、はじめますね。

ライブプレビューって?

ライブプレビューというのは、Bracketsエディタでhtml・cssファイルの編集・変更をした時に、保存操作をしないで、リアルタイムに、ブラウザーでプレビュー確認できる機能です。



Bracketsは、なんといってもこのライブプレビュー機能がすごい。さらにcssでも保存操作なしで、ブラウザーでプレビュー確認できるのがスゴイのです。


ちなみにテキストエディタAtomでもhtmlのライブプレビューはできますが、cssのライブプレビューはできません(現時点で)。

ライブプレビューの起動方法

ライブプレビューの起動方法は、「稲妻アイコン」「メニューバー」「ショートカットキー」と3つあります。あなたのやりやすい方法でライブプレビューを起動実行してください。

稲妻アイコンをクリック

キーボードのショートカットキーCtrl+Alt+p

メニューバーの[ファイル]→[ライブプレビュー]

ライブプレビューは起動できましたか? 起動できたら次に進んで下さい。

ライブプレビューの起動操作は1度だけでOK

ライブプレビューは起動してありますか? 1度ライブプレビューを起動しておけば、「Bracketsエディタの編集←→ブラウザー」の画面切替だけで確認できます。Bracketsエディタの編集後に、稲妻アイコンをクリックする操作は不要(もちろん保存操作も不要)。です。




あっ、これ重要です。ちなみに私は、最初のころ何度も稲妻アイコンをクリックしてました……

稲妻アイコンの状態

Brackets画面右側にあるツールバーの稲妻アイコンですが、ライブプレビューの状態によって大きく4つの表示形式があります。

未実行状態

ライブプレビューを実行していない状態です。

ライブプレビュー接続中状態

稲妻アイコンの色が半分だけ黄色になっている状態です。これはライブプレビューを実行するための準備をしている状態です。しばらくそのまま待つと、ブラウザーが起動してライブプレビューが実行されます。

ライブプレビュー実行中状態

ブラウザーでライブプレビュー実行中の状態です。Bracketsエディタで編集しているhtml・cssを変更するとスグに反映されます。もちろんhtml・css保存操作不要です。

ライブプレビューキャンセル状態

ライブプレビューを実行しているブラウザーを閉じると表示されます。再び稲妻アイコンをクリックすればライブプレビューを実行します。

他のhtmlをライブプレビュー表示したい時

例えば、ライブプレビューでindex.htmlを表示している最中に『about.htmlにプレビュー表示を切り替えたい』と思いますよね。その時はBrackets画面左側にあるサイドバーでファイルを変更するだけで、ブラウザー表示が切り替わります。稲妻アイコンなどをクリックして、ライブプレビューを起動する操作は不要です

まとめ

今日はBracketsエディタでhtml・cssファイルの編集・変更をした時に、「保存操作をしないでリアルタイムでブラウザーに反映し確認できる機能」であるライブプレビューの使い方について説明しました。『ライブプレビュー機能を使わなければBracketsを使う意味がない』と思えるほど、優れた機能なのでぜひ使い方をおぼえてくださいネ。他にもライブプレビューの使い方についていろいろありますので、今後紹介していきますね。

コメント

  1. しろう より:

    非IT系のものです。CSSの簡単なことに関して質問していいですか。

    • 管理人 より:

      しろうさん
      コメントありがとうございます。

      ご質問の方、どうぞ
      管理人がわかる範囲でしか、お答えできませんが(^^;

  2. しろう より:

    管理人さん どうもありがとうございます。非IT系のものです。

    目的はアンケートフォームをCSSを使ってカスタマイズしたいです。

    BracketsでCSSコードを書いてもフォームがどのようになっているかプレビューでみることはできますか。CSSばかりでなく、HTMLなども必要なのでしょうか

    下記のGyazoはJotformのCSSをInjectする画面からです。

    https://gyazo.com/4646e585c452efb5f337fe110ee57850

    その画面ではCSSの体裁面を整える画面です。そこにコードを書けば、左の画面でどんなフォームになっているか確認できるみたいです。私はまだ、それを確認はしていませんが、
    もし、できるならば、Bracketをどうからめるかを知りたくて投稿させていただきました。

    アドバイスいただければ幸いです。

    • 管理人 より:

      しろうさん

      こんにちは、管理人です。返事がおそくなり申し訳ありません。

      今回はしろうさんの満足のいく回答になっていませんが、よろしければ、遠慮なくコメントください。

      時間がかかると思いますが、できる限りご協力はさせて頂きたいと思っていますので。

      ということで、管理人がわかる範囲で、いくつか項目にわけて回答しますネ。

      ■教えてもらったリンク先について

      すみません。コメントで教えてもらった、下記のURLはエラーになってしまいます。
      https://gyazo.com/4646e585c452efb5f337fe110ee57850

      なので、ちょっとどうなっているのかがわからず……という管理人の状態で、話をすすめますネ。

      ■「Gyazo」について

      えっと……管理人は、ちょっと「Gyazo」というものが、よくわからず……。

      ということで管理人のPCにインストールしてやってみたのですが……使い方はhttps://gyazo.com/tourに書いてある通りの使い方になるのでしょうか? とりあえずこのページでの使い方はわかります。しかしこれ以上のことは、わかりません。

      なので「Gyazo」にこれ以上の機能がわかるようなページがあれば教えてもらえますか?

      また、もうすこし、しろうさんがどういう環境でやっているとかがわかれば、教えていただけますか?たとえば「ローカルサーバーを自分のPCに構築している」とか。

      ■アンケートフォームをCSSを使ってカスタマイズできるかについて

      しろうさんのコメントにあった「目的はアンケートフォームをCSSを使ってカスタマイズしたいです。」については、おそらく可能なはずです。

      ただ条件はいくつかあると思います。例えばXAMPPなどのローカールサーバー等が必要になり、さらにBracketsとの連携が必要になります。参考になるかわかりませんが、管理人がやった方法をのせておきますネ→BracketsとXAMPPを連携させ、ライブプレビューする方法

      ただライブプレビューは、CSSしかできなくなります。

      アンケートフォームということですので、おそらくphpなどの言語で記述されているはず。Bracketではhtmlとcssのライブプレビューしか対応できないので、CSSしかできないのです。とはいってもCSSのライブプレビューができるだけでも、すごく助かると思います。

      ■まとめ

      ということで、今回はしろうさんの満足のいく回答になっていませんが、よろしければ、遠慮なくコメントください。

      時間がかかると思いますが、できる限りご協力はさせて頂きたいと思っていますので。

  3. しろう より:

    >■教えてもらったリンク先について

    https://gyazo.com/7760f5027554b51b614c06a02ee3c4fa

    改めて説明しますと左のLive画面で右の1の箇所は選択している箇所のCSSで2はCSSを挿入している画面です。

    HTMLはカスタマイズできるのかと訊いたら、
    どうしてもするなら、サーバーに保管しろということです。

    どうもCSSだけでフォームをカスタマイズできるみたいです。

    >■「Gyazo」について
    私にとっては今はこのアプリがないと不便さを感じます。使い方は簡単でChromeかFirefoxのアドオンで使えます。フリー会員と有料会員がありますが、フリーで十分です。
    フリーでもサポートにメールすれば、返事が返ってきます。

    >https://gyazo.com/tourに書いてある通りの使い方になるのでしょうか? 
    はい、その通りです。

    >■アンケートフォームをCSSを使ってカスタマイズできるかについて

    考えていることはフォームのテンプレートを手にいれてJotformというFormBuiderにある
    機能を使って作成したいと思っています。JotformにはTemplateがあるのですが、フリー
    会員は作成中のフォームも含めて5つしかフリー会員には認められていません。
    だから作成の仕方を覚えて、PDFに保存して、作り方を覚えたフォームは削除します。

    >BracketsとXAMPPを連携させ、ライブプレビューする方法。
    今の私にはちょっと手が届きません。JotformのCSShelperを使うつもりです。

    >CSSのライブプレビューができるだけでも、すごく助かると思います。

    フォームのCSS構成はBracketでわかりますか。FirefoxのF12ではCSSの構成はわかるらしいですが、詳しくは確認していません。

    以上、管理人さんからコメントを頂ければ幸いです。

    • 管理人 より:

      しろうさん

      コメント&説明追加ありがとうございます。

      Jotformがどんなものだかちょっと見て、なんとなくわかったような感じです。なので少し進展すると思います。

      ただ、自己紹介で書いているように、管理人は元ITエンジニアで、現在は別の仕事をしていて、そちらの方がけっこう体力的にハードな仕事でして……なかなか時間がとれないのが実情です。申し訳ありません。

      なので、少し時間がかかってしまいそうです。

      ただ、ちゃんと管理人も検証する予定でいます。

      今しばらくお待ちください。

  4. しろう より:

    管理人さん ご連絡どうもありがとうございます。

    その間にCSSとBracketのごく基礎的な事を勉強しておきます。
    Bracketはadobeが関連している有名なEditorでUSBからも起動できるらしいですね。

    • 管理人 より:

      しろうさん

      管理人です。こんにちは。返事がおそくなり申し訳ありません。

      結論から言うと、Bracketsでライブプレビューがある程度できるようになります。ただし確認できるのは、ある程度です。正直いうとあまり役にたたないような気がします。

      ■Bracketsで確認する方法

      ということで、管理人もとりあえずJotformでフォームを作ってみました。→アートスタート全国フォーラム お申込み画面

      このページ https://form.jotform.me/73381472350454 のソースを右クリックして、「ページのソースを表示」して……
      https://gyazo.com/331a45427892298f8b2216c086d28a4e

      https://gyazo.com/ae9627763358859cf8701e21cbea630a

      このソースをコピーして、Bracketsの任意のhtmlファイルに貼り付けて……
      https://gyazo.com/b413c5dc3c246a9882fc86bac67c53c7

      Bracketsでライブプレビューがある程度できるようになります。ただし確認できるのは、ある程度です。正直いうとあまり役にたたないような気がします。

      それよりもJotFormのUser Guideを参考にしながら、JotformのCSShelperをつかってデザインしたほうが、よいフォームができるのではないかと管理人は思っています。

      ちなみにJotFormのUser Guideはこちら→JotForm User Guide

      しろうさんの答えになっていますか?
      違うようであれば遠慮なく「やりたいことと違います。」と言ってくださいネ。

      そうそうUSBから起動できるBracketsは、有志が行っている非公式プロジェクトです。

  5. しろう より:

    管理人さん 非常に助かります。本件に関して迷っていました。

    F12の検証とかBracketを考えましたが、Formだけでは私にとってはオーバースペックで奥が深すぎます。
    Jotformはフリー会員でも質問が自由にできますし、私のつたない英語でも必ず返答してくれます。

    私はユーザーガイドはある程度読みました。今後は自分でフォームを作る手順を覚え、管理さんが作成されたアートスタート全国フォーラム みたいにPC上に貼り付けたいと思うのですが、おおまかにどういいう手順で作っていけばいいのでしょうか。

    PS:Jotformのブログも最近よくみかけるようになりました。私が勉強し始めたときは日本語ののものは2、3ぐらいしかありませんでした。

    • 管理人 より:

      しろうさん

      管理人です。返事がおそくなり(年があけてしまい)申し訳ありません。

      管理人が「アートスタート全国フォーラム」を作ったのは、あくまで『JotForm上で、いろいろやっているんだけど、cssがうまく反映されない、どうしたらいいんだろう……』と考え、確認するためのものです。利用するためのものを作っているのではありません。

      確認ですが、「しろうさんも、管理人と同じ考え」ということでOKですよね。

      もし違うとなると、著作権の問題がでてきます(もちろん、Jotform社とで合意ができていれば別ですが)。

      さらに、PC上に貼り付けるやりかたは、前のコメントに書いた「Bracketsでライブプレビューがある程度できるようになります。ただし確認できるのは、ある程度です。正直いうとあまり役にたたないような気がします。」とおりです。もっというと、まったく役にたたないと言った方が正しいです。

      そして、(著作権の問題が仮にクリアになっていたとしても)最大の理由は、「CSSを覚えてJotformを利用する(本来の)方法」より、「PC上に貼り付けるやりかた」の方がはるかに難しいと思うからです。

      なので、しろうさんがアンケートフォームをつくる最速の方法は、「CSSを覚えて、Jotformを正しい方法で利用する」だと管理人は思っています。

      『CSSに自信がない』というのであれば、しろうさんが持っている「CSSの入門書」を最低3回わからなくてもいいので、打ち込んでください(IT業界では、写経って言います。ちなみに、管理人はいつもそうしています。)。そうすれば最初はわからなかったJotformも、次第に分かるようになってきます。そして利用できるようになります。

      もし「CSSの入門書」を持っていない、もしくは「よい入門書がわからない」というのであれば、相談にのりますので、遠慮なくコメントでもメールでも連絡ください。

      大丈夫です!非ITの人だって、ちゃんとアンケートフォームやホームページを作っています。自信を持ってくださいネ。

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