• 
• 
• 
• 

ステップ04. 新しいページから作成

よし。じゃ～
いよいよサイトの制作を開始してみようか！
何のページ作りたいんだっけ？
フォックス家の3分お料理教室？

・・・じゃ、ないです！
Firefoxを広く世に知らしめるための崇高な紹介ページですよっ！

そんなんだったっけ？
まあいいや。

うう・・・
そんなに簡単に忘れないで！

KompoZerの起動の仕方は分かるよね。
普通のソフトウェアの起動方法と同じく、デスクトップのアイコンをダブルクリックするか、Windowsのスタートメニューから「すべてのプログラム」を選んで、アプリケーションの中から選択すれば普通に立ち上がるよ。

KompoZerのショートカットアイコン

それでは・・・
KompoZerを起動しました。

うん。TIPｓは表示させないようにしたんだね。
KompoZerは最初に起動した時点で、自動的に新規作成の空白のページが作成された状態で立ち上がる。ちょうど今見えているその「（タイトルなし）」っていうタブだよ。

自分で新しくページを作成したいときにはどうするんですか？

自分で新規作成したいときは、ツールバー上にある「新規作成」ボタンをクリックするとできるよ。

押したら「タイトルなし」のページが増えました。複数のページはこのタブで管理するんでしたよね。

うん。複数個あるタブの切り替えは、純粋にタブをクリックするだけでできるからね。
開いたタブを閉じたいと思ったら、右端にある×ボタンを押せばいいだけ。簡単でしょ。

で・・・では早速、ボクの想いを作業画面に打ち込みたいと思います！

ま～そんなに逸りなさんなって。
KompoZerでのテキストの入力方法は、まあ説明しなくても分かると思うけど、一応きちんと解説しておくよ。

まずはちょっと遠回りして、基本的な点から説明しよっかな。
ウェブページを構成する要素で、一番重要なのがテキストであるということは、異論をさしはさむ余地ないよね。わかる？

それはなんとなく理解できることですが、世の中にはいろんなサイトがありますよね。自分で撮影した写真や書いたイラストを公開するサイト、作曲した音楽を配布するサイトなんかもあります。ちなみにボクが作りたいのは、文章が中心のページですが・・・

そうだね。そういったサイトの目的は画像ファイルや音楽ファイルの公開であるかもしれない。でもウェブページでは画像や音楽はあくまでテキストに従属する要素で、それが単独で存在することはほとんどありえないんだ。

でもボク、ネット上で見たことありますよ。
前面一枚画像を貼り付けただけのページ。本来テキストで表現するはずの部分も全部画像です。ある意味作るのが楽そうでしたけど・・・

たまにあるね。そういうの。ショッピングサイトとかに多いんじゃないかな？
そういうところは、紙の媒体―――DTPっていうんだけど、店頭で配るようなチラシのノリでウェブサイトを制作してるんだね。紙でのやり方を何も考えずにウェブにもちこんで失敗しちゃったんだな。

やはり、そういった紙媒体でのやり方はウェブではダメなんですか？

うん。紙は印刷されたものをただ肉眼で見るだけだけど、ウェブではあらゆる環境から閲覧できるということが重要だからね。これをアクセシビリティって言うんだけど、閲覧者を制限して、特定のコンピュータ以外は見れなくするのは間違いでしょ。

そういうサイトを運営している会社は、ウェブでの訴求の方法を大きく取り違えてしまったんだね。実際うまくいっていないはずだよ。サイトを訪れる新規閲覧者の大半は、検索エンジンから来ているはずだけど、画像じゃインデックスされないから、新規来訪者はちっとも増えない。

そうですね。公開するからには、できるだけたくさんの人に見てもらえるようにしたいですもん。

というわけで、ウェブページ制作で最も基本となるテキストの入力についてなんだけど、フォックすけはワープロソフト使ったことあるんだよね？

はい。ですからパソコンで文章を作るのは得意です。

上出来だね。KompoZerの文章入力も基本的にワープロと同じようにやることができるから。
作業画面をマウスでクリックして、キーボードから文字を打ち込む。改行はEnterキーでできるし、何も難しいことはないよね。

で・・・では早速、文章を入力しますよ！
（カタカタカタカタ）

文字を入力すると、例の未保存を示すアイコンがタブに表示されました。

うん。文章を入力しているときは、こまめに保存したほうがいいね。
編集中の文章の保存のやり方を覚えようか。方法は至って簡単だけど、保存する前にまず作ったページを格納するフォルダをデスクトップ上などに作成しておいたほうがいいかな。

わざわざドキュメントを新しく作ったフォルダに保存する必要があるのですか？
ボクはいつもワープロで文章ファイルを作ったときは、デスクトップ上にそのまま保存しています。

ワープロソフトで作った文章ファイルならそれでもいいよね。でも、ウェブページは関連ファイルがすべて別ファイルとして保存されるんだ。

それはどういうことですか？

つまり、たとえばドキュメントに画像を埋め込んだりした場合、ワープロソフトのはひとつの文章ファイルとして保存できるけど、ウェブページのは画像が全部文章とは別に保存されるってこと。
こんな風にね。

なるほど。
これではフォルダの中に保存しないと、ファイルがごちゃごちゃになってしまいますね。

フォルダは必ず必要であるわけじゃないけど、どれがページに関連付けられたファイルだかわかんなくなっちゃうと困るから、作るようにしよう。
じゃあ適当な場所に保存用のフォルダを作成してごらん。

マイドキュメントの中に、コレを作りました。

うん。じゃあさっきためしに打った文章をそのフォルダの中に保存してみよう。
保存のやり方は、まずツールバー上の保存ボタンをクリックすることから始めるよ。

クリックしたら、こんなウインドウが表示されました。

それは、ページのタイトルを設定するためのダイヤログだね。ページタイトルを設定していないと保存の際に表示されるよ。
ページタイトルってのは、htmlファイルの名前とは別に、そのページを識別するための名前で、通常ブラウザで閲覧したときに一番上の部分に表示されるやつだよ。
ここだよ、ここ。

ブックマークしたときにも表示されるやつですね。ページタイトルには一体どんな名前をつけたらいいのですか？

ん～
タイトルだから、ページの内容に最も合ったものであれば、何でも好きな名前をつけたらいいよ！
ページタイトルは後からでも自由に設定することができるから、まあ適当につけちゃって。

そ・・・それではひとつ気合を入れて、
「先進的ウェブブラウザであるFirefoxの主要機能概説、および他の製品に対する比較優位点の・・・」

あ・・・あんたね～
タイトルなんだから、もっと短くしなさいよ。
それじゃブラウザのタイトルバーに全部表示されないよ。

それでは「Firefoxのページ」にします。
入力してOKボタンを押したら、保存場所を尋ねるダイヤログが表示されました。

うん。それで保存先にさっきフォックすけが作ったフォルダを指定しよう。

で、「保存」ボタンを押せば保存完了ですね！

ちょっと待った！
ファイル名確認してごらん。

ファイル名ですか？
自動でさっき入力したタイトル名がファイル名になっているようですが・・・

うん。そうなんだけど、このページは将来サーバーにアップロードして一般に公開する予定なんでしょ？

はい！
もちろんです。

だったら、ファイル名に日本語は使っちゃだめなんだ。日本語の文字はマルチバイト文字っていうんだけど、これをファイル名に使うとサーバー側が認識できなくて、エラーが出てしまう可能性があるからね。

それでは、アルファベットで命名すればいいんですね。

そう。さらに1バイト文字の中でも、使っちゃいけない文字が決まっていて、特殊文字やスペースは入力しちゃダメだよ。
まあ、小文字のアルファベットと数字だけ使ってればそんなに問題になるようなことじゃないけど、画像ファイルの名前なんかも、すべて同じように日本語は使っちゃダメだから、ちょっと記憶にとどめておいてね。
ちなみにローカルで閲覧する分には問題にならないよ。

そ・・・それでは気合を入れて、命名をしたいと・・・・

ちょっとあんた、またとてつもなく長大な名前を付けるつもりじゃないでしょーね。

熟考の結果、page01とすることに決めました！

・・・・
今度はやたら普通な名前だね。
ま、ファイル名もあとで別なのに変えられるからそんなに悩むこともないんだけど。

ページタイトルを決定したら、KompoZerのタブの赤いフロッピーが消えて、代わりにタイトル名が表示されるようになりました。

ページタイトルがタブに表示されたほうが、複数ページを開いているときに、切り替えが簡単だね。それと、ページの保存方法は、未保存状態でタブを閉じようとしたときに表示される以下のダイヤログから「保存」を選択することでも実行することができるよ。

これで、ページを保存しないまま閉じてしまうことを防げますね。

さて、保存に成功したら、作成したHTMLファイルがフォルダの中にできているはずだよ。ファイルはダブルクリックすることで、ブラウザで普通に閲覧することができるからね。

作成されたHTMLファイル

おっ・・・おおおお・・・・
ダブルクリックしたら、ブラウザで表示できました！

これでごく簡単なHTMLページを作成することができたね。よかったじゃん。

でもなんだか・・・とっても・・・・・

とっても何よ。

巷にはもっとこう・・・・
華やかなサイトがあふれているように思います。
それに比べて、ボクが今作ったサイトはとっても質素な感じです。

そりゃこれはただのテキストだけのページだからね。これからもっと見やすくなるように作りこんでいくことにしよう。

テキストだけといえば、KompoZerには入力した文章を普通のテキストファイルとして保存できる機能も備わっているんだ。

普通のテキストファイルといいますと、メモ帳などで保存される形式のことですよね。

そうだよ。KompoZerを普通のテキストエディタとして使いたかったら、この機能を使えばいい。やり方は、メニューバーのファイルから「テキストとして出力」をクリックすれば・・・

あとは保存先を決めるダイヤログが表示されるから、HTMLファイルのときと同じようにやればいいよ。
この形式で保存すると、埋め込んだ画像や文字の修飾はすべてリセットされるから気をつけてね。
それじゃ次はテキストの書式を設定するとしよう！

• 
• 
• 
• 
• 

おたよりはこちら

Copyright(C) 2008 hpmaid.com All rights reserved.