おふとんの人 → ホームページ教室 → テキストエディタでWebページ編集

Webページ編集に最適なTeraPad（テラパッド）

HTMLソースを記述していくのに便利なテキストエディタ「TeraPad（テラパッド）」のダウンロードとインストール、そして基本的な使い方を勉強しましょう。

テキストエディタ

テキストエディタは、英語でtext editorと書きます。textとは文書や原文のことで、edeitとは編集することです。つまり、テキストエディターとは、コンピュータで、文字を書くためのプログラムです。

皆さんは、Microsoft Wordなどのワープロソフトを使われたことは、ございますか？。ワープロソフトでは、日本語などの文書を入力していって、印刷して使います。

このようなワープロソフトでは、文字のフォントを変えて、文字を大きくしたり、ゴシック体にしたりして、文字を装飾できるのですが、これはワープロ固有の機能と言っても過言ではございません。

ところが、テキストエディターでも文字を打ち込むことは可能なのですが、文字を装飾する機能はございません。本当に、文字を打ち込むだけです。この代表作が、Windowsにデフォルトで搭載されている「メモ帳」です。

Ｗｅｂページを制作するために、HTMLソースを入力していくのですが、このようなテキストエディタを使います。

TeraPad（テラパッド）の画面。タグは青、属性値は緑で表示される。

TeraPad （テラパッド）

メモ帳でＷｅｂページのソースを入力していると、文字がすべて真っ黒ですので、とてもわかりづらいものです。タグや属性の色が違っていたら、とても便利です。

そこでご紹介したいのが、寺尾進氏が開発された「TeraPad」です。TeraPadでHTMLソースを開くと、タグや属性が青で表示され、属性値が緑で表示されるので、凝視しなくても、直感的にHTMLを理解することができます。HTMLソースの開発にとても重宝しております。このＷｅｂページの製作にも、TeraPadを使っております。

TeraPadのインストール

TeraPadの入手は、寺尾氏のサイト「TeraPad」より可能です。同サイトの中程に、ダウンロードファイルへのリンクがございます。そこをクリックすると、ダウンロードできます。

詳しいインストール方法は、「TeraPadのインストール方法」をご覧ください。

TeraPadの起動方法

TeraPadのロゴインストール時に、デスクトップにショートカットを作成するように、指定した場合は、図のようなTeraPadのアイコンが、デスクトップに作成されます。ここをダブルクリックして、TeraPadを起動します。

もし、デスクトップにTeraPadのアイコンが作成されていない場合は、インストール先のフォルダを開き、「terapad.exe」をダブルクリックするなどすると起動できます。

HTMLソースの制作

HTML形式で書かれたWebページのファイルのことを、HTMLファイルとよびますが、HTMLファイルの作り方は、笑いが出るぐらい、非常に簡単です。

答えは、拡張子を「htm」か「html」で保存するだけです。どちらの拡張子を使用しても、かまいません。文書に何も記述していない、白紙の状態でも、拡張子をhtmかhtmlで保存したらHTMLファイルになります。

今後、HTMLソースをたくさん編集していくわけですが、拡張子は、どちらかで統一しておいた方が、無難です。ちなみに、私は、「html」で統一しています。

HTMLでの保存

メニューの「ファイル」→「名前を付けて保存」の順にクリックして下さい。「名前を付けて保存」ウィンドウが開きます。

「保存する場所」で保存先を選択し、「ファイル名」のテキストボックスをクリックし、ファイル名「index.html（indexの部分は何でも良い）」を入力して、保存をクリックします。ファイル名の注意点は

  1. ファイル名や拡張子は、大文字か小文字のどちらかで統一する。
  2. 拡張子は、「htm」か「html」のどちらかで統一する。
  3. ファイル名に使用する文字は、なるべく半角英数、「_（アンダースコア）」、「-（ハイフン）」にする。（日本語は絶対にダメ）
  4. トップページのファイル名は、「index.htm」か「index.html」にする。（例外もある）

今後Webサイトを制作していく方は、専用のフォルダーを用意して、そこに保存すれば良いと思います。何もフォルダーを用意してないのであれば、単なる保存の練習ですので、保存先はデスクトップでもかまいません。

HTMLファイル保存が完了すると、図のようなアイコンができたと思いますが、これがHTMLファイルです。これで、あなたの予想に反して、HTMLファイルができました。

HTMLを編集する

できあがったHTMLファイルを編集したい場合、アイコンをダブルクリックしてしまうと、ブラウザが開いてしまい、編集することができません。そこで、TeraPadでHTMLファイルを開きます。

TeraPadを開き、HTMLファイルをTeraPadまで、ドラッグ＆ドロップすると、ＯＫです。

編集が完了したら、保存するのですが、今度は上書き保存でＯＫです。メニューの「ファイル」→「上書き保存」の順でクリックするか、ツールの「上書き保存」をクリックして下さい。

まとめ

ここでは、テキストエディタ「TeraPad」の基本的な使い方と、HTMLファイルの作成・編集方法を学びました。次は、HTMLについて、詳しく勉強したいと思います。

ここで、ちょっと番外編を

TeraPadで行番号を表示する

HTMLソースを編集しているときに、左側に行番号が表示されていたら、編集している位置がわかるので、とても便利です。番外編として、TeraPadで行番号の表示方法をまとめましたので、参考にまでどうぞ。

TeraPadで行番号を表示する方法