Bracketsのライブプレビューハイライト（＝強調表示）を効果的に使っていますか？ Bracketsのエディタ画面にあるカーソル位置が、ブラウザー上では青色枠線で囲まれて表示される機能です。
「えっ？ cssのoutlineプロパティをつかって、確認作業をするのと一緒じゃないか？」ですって……。たしかに……似ていますが、それよりもずっと便利な機能です(｀・ω・´)ゞ。
ところで、「ライブプレビューは知っているけど、ライブプレビューハイライト（＝強調表示）は知らない」という人もいるのではないでしょうか？
ということで、今日はこのライブプレビューハイライトをわかりやすく説明しますね。たいへん便利な機能ですので、使い方をおぼえて、効率よくホームページを作成しましょうネ。
そうそう、ライブプレビューハイライト（＝強調表示）の設定方法については、こちらをご覧ください。
ちなみにライブというのは「リアルタイムで」とか「即座に」といった意味です。
それではまず、Bracketsをインストールすると最初に表示される「BRACKETSをはじめる前に」の説明をみてみましょう。
「BRACKETSをはじめる前に」の説明をみてみよう
ということでBracketsをインストールすると表示される「BRACKETSをはじめる前に」をみてみましょうか。そこには、ライブプレビューハイライト（＝強調表示）について、次のように説明されています。
Brackets では、HTML や CSS の編集内容がどのようにページに反映されるかを、簡単に確認することができます。Brackets で CSS ルール上にカーソルを置くと、ブラウザー上でそのルールに対応するエレメントがすべてハイライト表示されます。これと同じように、HTML ファイルを編集しているときも、ブラウザー上でそれに対応する HTML エレメントがハイライト表示されます。
……
ってわかりますか(。´･ω･)?
よくわからないですよね。ということで、詳しく見ていきましょう。まずは、HTMLエレメントのライブハイライト（強調）表示からいきますね。
HTMLエレメントのライブハイライト（強調）表示
まず、HTMLエレメントのライブハイライト（強調）表示の説明をしますね。「BRACKETSをはじめる前に」の説明にある以下の部分です。
これと同じように、HTML ファイルを編集しているときも、ブラウザー上でそれに対応する HTML エレメントがハイライト表示されます。
っと、いきなり「エレメント」という言葉が……エレメントというはhtmlの要素のことです……えっ、「要素って何ですか？」ですか……( ..)φ
要素というのは、「開始タグと終了タグ・その2つで囲まれた中身」になりま
す。わかりずらいか……たとえば、以下のhtmlの場合を考えましょう。
<ul> <li>li要素1</li> <li>li要素2</li> <li>li要素3</li> </ul>
この場合、
- ulエレメント（＝要素）は、<ul>～</ul>までの1つが存在
- iエレメント（＝要素）は、<li>li要素1</li> と <li>li要素2</li> と <li>li要素3</li> の3個が存在
ということになります。
たとえばここで、Bracketsエディタ画面でindex.htmlのulエレメント（＝要素）の開始タグ<ul>内に、カーソルを持っていきましょう。
この状態でブラウザをみると、ulエレメント（＝要素）に対応するブロックが青色枠線で囲まれています。これがライブプレビューハイライトです。
では今度は1つ目のliエレメント（要素）の開始タグ<li>内に、カーソルを持っていきましょう。
この状態でブラウザをみると、1つ目のliエレメント（要素）に対応するブロックが青色枠線で囲まれています。
どうですか？ ライブプレビューハイライトって便利ですよね。
CSSルールのライブハイライト（強調）表示
つぎにCSSのハイライト（強調）表示について説明しますね。
「BRACKETSをはじめる前に」の説明にあるこの部分です。
CSS ルール上にカーソルを置くと、ブラウザー上でそのルールに対応するエレメントがすべてハイライト表示されます
たとえば前に記述した以下のhtml……
<ul> <li>li要素1</li> <li>li要素2</li> <li>li要素3</li> </ul>
のcssルールがstyle.cssファイルに、以下のように記述されているとします。
ul li { font-color: #ffffff;}
ここで、このcssルールにカーソルを持っていきましょう。
この状態でブラウザをみると、cssルールにマッチングする全てのliエレメント（＝要素）に対応するブロックが青色枠線で囲まれています。
どうでうか？ ライブプレビューハイライトってすっごく便利ですよね。なんといってもルールに対応するすべてのエレメント（＝要素）がわかるのですから。
まとめ
今日は、Bracketsのライブプレビューハイライト（＝強調表示）について詳しく説明しました。Bracketsのエディタ画面にあるカーソル位置が、ブラウザー上では青色枠線で囲まれて表示される機能で大変便利です。使い方をおぼえて、効率よくホームページを作成しましょうネ。
「なんだか青色枠線が表示されない！」という人はこちらのページで、ライブプレビューハイライトが有効になっているか確認してくださいネ→Brakcetsライブプレビューのハイライト（強調表示）を設定する方法
それでは。
コメント