DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 12 HTMLエディタの利用

このLessonまではすべてHTMLのタグを書いてページを作成してきましたが、「HTMLエディタ」と呼ばれるアプリケーションを使うと、タグを自分で書かなくてもワープロソフトと同じように文章をレイアウトしたり、画像や表などを挿入して、ウェブページを作成することができます。 このLessonでは無料で入手できるNvu(エヌビュー)というHTMLエディタを使ってみましょう。 HTMLエディタには、Nvuのほか、Macromedia DreamweaverやMicrosoft FrontPageなどたくさんのHTMLエディタが流通しています。

タグを学ぶ意味

HTMLエディタだけで話がすむのならば、タグをおぼえる必要ないのですが、これまでタグについて一所懸命学んできたのは、次のような理由があるからです。

画像の挿入や位置指定、表(テーブル)の作成、細かなレイアウトの指定などを行うには、HTMLエディタがとても便利で効率的です。 したがって、一応タグの働きを理解した上で、HTMLエディタを利用するというのがおすすめです。 そうすれば、両方の「イイトコ取り」ができます。

Nvuのインストール

NvuはもともとNetscape Navigator(ネットスケープナビゲータ)というウェブブラウザと一体になっていたNetscape Composer(ネットスケープコンポーザ)というHTMLエディタから派生したもので、現在は無料で配布されています。 なお、あまり改良作業は行われていませんがNetscape Composerもhttp://wp.netscape.com/ja/downloads/index.htmlから無料でダウンロードすることができます(こちらは日本語版があります)。

では、次の手順でNvuをインストールし使えるようにしてください。

  1. Nvuのウェブページhttp://www.nvu.com/を開きます。
  2. 上の方に並んでいるメニューからdownloadのリンクをたどります。 Linux、Macintosh、Windowsなどのバージョンが並んでいますので、自分の環境に合ったものをクリックしてダウンロードします。 Windowsを使っている人ならば、nvu-1.0PR-win32-installer-full.exeなどといった名称のリンクをクリックしてダウンロードします。
  3. 他のアプリケーションをインストールするときと同じように、インストーラーを起動してインストールします。

文字列の入力とレイアウト

Nvuを実行すると図12-1のようなウィンドウが表示されます。 まず文字を入力して簡単にスタイルを指定してみましょう。

図12-1 Nvuのウィンドウ
  1. 図12-1のように、ウィンドウ右下のテキストを入力する領域(ここを「メインペイン」と呼ぶことにしましょう)に2行分の文字列を入力してみてください。
    インナーウェブへようこそ
    インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。 
       
  2. 1行目の「インナーウェブへようこそ」を選択してから左上に「Body Text」と表示されているポップアップメニューで、「Heading 1」を選択してください。
  3. その右側に並んでいるアイコンの中から「センタリング」を選択してください。
    これで、1行目の文字列が大きくなりセンタリング(中央揃え)されたはずです。
  4. 2行目を選択して「Body Text」を「Paragraph」に変更してみてください。
    これで、タイトルと本文の間に少し空きができたはずです。

HTMLコードの確認

このように、HTMLエディタを使うと、ワープロを使うときのように簡単にウェブページを作成できます。 また、これだけではなく、HTMLコードを見ることもできます。 メインペインの下にある、4つの「タブ」の中から左から3つ目の「Source」をクリックしてみてください。 すると図12-2のように先ほど見たページの裏側で作られていたHTMLのコードを見ることができます。 「Normal」のタブをクリックして入力すると、余分な<br>タグなどが入力されてしまうことがありますが、必要ならばこの「Source」を確認して、不要なタグなどを削除することもできるわけです。

図12-2 ソースコードを表示

表の作成

HTMLコードを直接書くのに比べて、表の作成はHTMLエディタを使った方が圧倒的に簡単です。 ウィンドウ上の「Table」のアイコンをクリックして、大きさを選択すれば、表の枠組みは簡単にできます。 升目に文字列を入れれば簡単にできあがります(図12-3)。

図12-3 表の作成

セル(升目)の合体や行や列の挿入、削除も簡単にできますので、試してみてください。 このとき、裏側でNvuは<tr>...</tr>、<td>...</td>などのタグやcolspan= " ... "、rowspan="..."などの属性を一所懸命に追加したり削除して、指定されたとおりの表を表示するようにタグを編集しているわけです。 「Source」のタブを押してどのようなタグが挿入されているか確認してください。

画像の配置

imageのアイコンをクリックすると、画像を簡単に挿入できます。 画像は編集中のHTML文書との相対的な位置を指定するのが普通ですから、Lesson 8で紹介したアプリケーションなどを使ってあらかじめ画像を用意して適当なフォルダに入れておく必要があります。 画像ファイルを準備したら、Imageのアイコンをクリックして文書の中に挿入します。 画像の大きさは、画像をクリックすると表示される枠をドラッグするだけで簡単に変更できます(図12-4)。

図12-4 角をドラッグするだけで大きさが変更できる

まとめ

HTMLのタグを使わずにウェブページが編集できるHTMLエディタについて簡単に紹介しました。 作成したページでどのようなタグが使われているかも見ることによって、タグや属性を新たに覚えることもできます。 Nvuなど無料のHTMLエディタをインストールしていろいろ試してみてください。

この講座はこれで修了です。 ここまでご紹介した知識を生かして色々なページを作成してみてください。 よろしければ続いて『文系の人にもわかる プログラミング入門』の講座でJavaScriptの勉強もなさってみてください。

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 12