ホームページ作成/ホームページ作成補助ソフト

タグを色分けできるテキストエディタを使う(4ページ目)

HTMLやCSS・JavaScriptなどのソースはテキストエディタで編集できます。しかし「メモ帳」では機能が少なすぎて不便です。タグやプロパティの色分け表示ができ、高度な編集機能のあるテキストエディタを使いましょう!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

お勧めの設定

前ページで紹介した「EmEditor」では、以下のカスタマイズをお勧めいたします。

■行番号の表示

行番号の表示
▲行番号の表示 (修正された行の番号は太字に)

デフォルトでは、ファイルの種類によっては行番号が表示されません。 EmEditorでは、「前回の保存以降に修正があった行」は、行番号が強調表示される仕様になっています。 また、行番号の位置をクリックすると、その行全体を簡単に選択できます。 行番号は常に表示させておく設定がお勧めです。

設定は、メニューの「ツール」→「すべての設定のプロパティ」(※)をクリックして、「基本」ページ内にある「行番号を表示」項目にチェックを入れ、「OK」を押します。
※この項目を選択して設定を変更すると、すべてのファイル種類に対する設定を一括して変更することになります。関連付けや強調設定はファイル種類に設定しますので、ここでは変更しないようご注意下さい。

「ツール」→「すべての設定のプロパティ」
※上図はVer 8.05 Professional版の表示です。Free版では少し異なります。

■HTMLバーの表示

HTMLバーの表示
▲HTMLバーの表示(Professional版のみ)

HTMLを編集する際には、HTMLタグが簡単に入力できる「HTMLバー」を表示させておくと便利です。 特にテーブルの入力は面倒なので、この機能が役に立ちます。
※HTMLバーは、Professional版にのみ搭載されています。Free版にはありません。

このツールバーは、メニューの「ツール」→「プラグイン」→「HTMLバー」で表示させられます。 (ツールバー右端の「プラグイン」項目からも表示させられます。) HTML以外の編集時には不要なので、必要に応じて表示させて下さい。

各ボタンで実際に入力されるタグは、HTMLバーの右端にある「カスタマイズ」ボタンで自由にカスタマイズできます。

色分け表示のカスタマイズ方法

色分け方法の設定は、ファイルの種類(HTML、CSS、JavaScriptなど)ごとに別々に保持できます。 HTMLの色分け方法を設定したい場合は、HTMLファイルを開いている状態(※)で「ツール」→「現在の設定のプロパティ」をクリックします。
※もしくは、「ツール」→「設定の選択」で望みの設定に変更しても構いません。

■「強調(1)」タブ:

色分け設定のカスタマイズ「強調(1)」項目
色分け設定のカスタマイズ「強調(1)」項目 (※設定対象の種類が「HTML」の場合)

「強調(1)」では、強調する対象を設定しています。ここには、例えばHTML要素名や属性名などが並んでいて、それぞれ表示に使う色設定番号が登録されています。 強調文字列を選択している状態で[F9]キーを押すごとに、色番号を切り替えていけます。
※色番号1~10の10種類からしか選択できませんが、この番号に対応する配色は下記で自由に修正できます。

■「表示」タブ:

色分けの配色設定のカスタマイズ「表示」項目
色分けの配色設定のカスタマイズ「表示」項目

「表示」では、「引用符で囲まれた部分」の色や「コメント部分」の色など、文法に関する色分けの色設定や、先の「強調(1)」で使った「色設定番号」の具体的な配色を登録できます。 例えば、「色設定番号1」の配色を修正するには、「強調文字列(1)」をクリックして配色を設定します。

おわりに

今回は、「メモ帳」よりも遙かに高機能なテキストエディタを使うメリットについてご紹介いたしました。
HTMLやCSSなどは確かに「メモ帳」でも編集可能です。しかし、今回の記事でご紹介してきたように、もっと高機能なテキストエディタを使う方が圧倒的に便利です。 ぜひ、試してみて下さい。

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます