Ｗｅｂ作成ソフトはまるでワープロ
ということは、あのわけのわからない「htmlタグを覚えなくて良い」ということか？ まさしく、その通り。
文章を打ち、色や大きさを指定する、というような場合、ドラッグで範囲指定をして、その後色々な指示をするという、ワープロとほぼ同じ使い方をします。画面上には、ブラウザで見たときのように表示され、ソース表示を選べばアラ不思議、自分では全く記述していないhtmlタグが、書き込まれているではありませんか！
htmlタグは、とても簡単で単純なものですが、それでも慣れないうちは何だかよくわからなくて、うっとおしく感じます。また、文字の大きさや色などを「指示」として書き込みますので、その色や大きさを目で確認することが出来ないため、自分が作ろうとしているページのレイアウトや全体像を視覚的にとらえることが出来ません。その点、ｗｅｂ作成ソフトは、編集・制作中のページもｗｅｂページとして見せてくれますから、とってもわかりやすくてラクチンです。
例えば、１～７まである文字サイズのうち、６の大きさで、赤い文字で、「こんにちわ」と書くとしましょう。
ソースで表記した場合
＜ｆｏｎｔ ｃｏｌｏｒ＝＃ｆｆ００００ ｓｉｚｅ＝６＞こんにちわ＜／ｆｏｎｔ＞
ｗｅｂ作成ソフトで記述した場合
こんにちわ
と、このようになるわけです。
web作成ソフトの落とし穴
では、ｗｅｂ作成ソフトは万能なのでしょうか？
残念ながら、そうではありません。
インターネットエクスプローラーやネットスケープナビゲーターの、それぞれどちらかしか対応していないタグがあるように、ｗｅｂ作成ソフトにも対応していないタグがあります。タグは日々進化していっているのです。
また、ｗｅｂ作成ソフトの作成者が想定をしていないようなタグの使い方をすることはできません。想定していないような使い方自体が、文法として間違っている場合もありますが、ブラウザは寛容なので、往々にしてそれを表現してくれます。また、それが表現されるならば、必ずしも間違った文法とは言い切れなくもなってくるわけです。
個人的な経験をもうします。
箇条書きのタグ、というのがあります。例として、果物の名前を列記するとします。通常は、次のように記述します。
＜ＬＩ＞みかん＜ＬＩ＞りんご＜ＬＩ＞バナナ
すると、次のように表現されます。
みかん りんご バナナ
この文字を、青くしたいと思いました。
みかん りんご バナナ
ところが、僕の使っているｗｅｂ作成ソフトは、箇条書きの最初の・は、色を変えることを認めてくれなかったのです。
みかん りんご バナナ
こんな状態になってしまったんです。
これが最初の経験だったために、「いや、使い方が悪いのだ。何とかする方法があるはずだ」と、色々やってみたけれどダメでした。もしかしたら僕がその方法を見つけられなかっただけかも知れませんが、１時間以上あれこれためしてだめだったら、僕なら他の方法を考えてしまいます。
他の方法、それがつまり、「そこのところはいったん放置して置いて、ページ全体を構成してから、あとはソースを直接手直しする」という方法です。手直ししたあと、もう一度そのｗｅｂ作成ソフトでそのページを開くと、なんと、苦労して手直ししたはずのソースが元に戻されてしまっているではありませんか！ そこで、「これは想定外の使い方なのだ」と、理解したわけです。
そのソフト上では、こういう使い方は、文法として認識されない、と。
これは箇条書きタグに限ったことではなくて、色々なところで散見されるので、もう諦めています。諦めているけれど、それでも最初の頃はｗｅｂ作成ソフトをある程度使っていました。「初めてのページを作るのには、その大枠を構成してしまうのにとても便利」だからです。なぜなら、視覚的にページを作れるからなのです。特に複雑な表組は、最初から自分で記述するよりも、ｗｅｂ作成ソフトの方が遙かに手っ取り早いと思って、頼り切っていました。
しかし最近では、Ｗｅｂ作成ソフトは全く使っていません。全て「メモ帳」「ワードパッド」などのテキストエディタに、ｈｔｍｌタグを直接書き込んでいます。慣れて来たせいもあるのですが、Ｗｅｂ作成ソフトだといったんワープロのように文字を入力した後で、ドラッグなどで範囲指定をして、色々な設定をしなくてはならないから面倒なのです。行ったり来たりしないといけないんですね。最初からタグ＆テキスト混じりの文章であれば、左から右へ文字を綴るだけです。
もうひとつの理由は、「こんな風にしたい」という希望通りにＷｅｂ作成ソフト上で表現させるには、まずそのＷｅｂ作成ソフトの使い方を習得せねばならず、それがまどろっこしいからです。
だからといって、僕はむやみに「Ｗｅｂ作成ソフトを使うな」とは言いません。自分にとってあった方法をとるのが一番です。ホームページ作成の入り口としては、ｈｔｍｌタグを覚えるよりもＷｅｂ作成ソフトを使った方が早道でしょう。そこで、Ｗｅｂ作成ソフトの落とし穴と注意点を公開します。
リンクの設定には気を使って
Ｗｅｂ作成ソフトの場合、リンクや画像の張り付けなどでは、比較的不便で間違いのもとになります。
自分のパソコンでは画像がちゃんと表示できているのに、アップロードすると画像が表示されるべき位置に×印が出て、画像が表示されません。
これもよくある質問です。
Ｗｅｂ作成ソフトでリンクや表示する画像の位置を指定すると、自分のパソコンのハードディスクにある画像やリンク先ファイルの保存場所を「フルパス」で指定されてしまうことがあります。
自分のパソコンの中の位置をフルパスで指定すると、例えば、「C:\WINDOWS\ﾃﾞｽｸﾄｯﾌﾟ\internet\myhomepage\homepage03.html」という風に書き込まれてしまいます。これだとサーバーにアップしたさいに全くリンクできていない、という状態になります。「ｃ：」というのは自分のパソコンのことであり、インターネット上でフルパス指定するには、「http://www.geocities.co.jp/HeartLand/2762/homepage/homepage03.html」となってなくてはいけませんからね。
何故、こんな事が起こるかというと、リンク先アドレスやファイル名を自分で記入せずに、「参照」という機能を使って書き込んでいるからです。「参照」を利用してＨＤＤ内のファイルを指定すると「自分のＰＣの中」という世界だけでリンク設定してしまうのです。こうしなければ、自分のパソコンで作成中のファイルのリンクが働かないし、画像も表示されないからです。
では、サーバーにアップしたあとはもちろん、アップする前に自分のＨＤＤ内でもリンクを確認したい、という場合はどうすればいいのでしょうか？
答えは、「ディレクトリ構成をサーバーにアップするのと同じ状態で、自分のＨＤＤにも設定する」、です。
具体的にアドバイスしましょう。わかりやすいところ、例えばデスクトップに「ホームページ」というフォルダ（ディレクトリ）を作ります。そこを、サーバーの自分のディレクトリの最上層（ルートディレクトリ）と同じ扱いにします。
そして、自分のＨＤＤの「ホームページ」というディレクトリ内に、サーバーにアップしたいと思っているのと同じ構成で、サブディレクトリとしてのフォルダを作成します。さらに、リンク先の指定を「絶対パス」（最初から全てのアドレスを書く、フルパスともいう）ではなくて、相対パス（今、自分がいてるアドレスを中心にして、リンク先がどこにあるかを指定する）で書けばいいのです。
相対パスは、次のように書きます。
同じディレクトリの中ならば、ファイル名のみ。
ひとつ下の階層ならば、ディレクトリ名とファイル名。
ひとつ上の階層ならば、「．．／ファイル名」。
ＨＤＤではリンクしたり画像が表示されたりするのに、サーバーにアップしたらリンクしない、画像が表示されない、というのは、こういうｗｅｂ作成ソフトの落とし穴に落ちた事が原因で、ここに書いてあるように少し工夫すれば、それは解決できます。
なお、Ｗｅｂ作成ソフトとファイルをサーバーにアップロードするためのＦＴＰソフトは、通常セットになっています。Ｗｅｂ作成ソフトにセットされている転送ソフトで転送すれば、自動的にこれらの問題を解決（リンクを書き直して転送）してくれるものもあるようです。ただ、ＦＴＰソフトにもやはり癖があって、使いやすいから、なれているからという理由で、Ｗｅｂ作成ソフトに添付されているのとは違うＦＴＰ（転送）ソフトを使うことがあります。そんなときに、このようなリンクの不具合が起こるのですが、これもここに提案した「サーバーと同じディレクトリ構成を自分のＰＣに設定して、相対パスでリンクを記述する」という方法で通常は解決できます。
ワープロソフトでｈｔｍｌファイルに変換は絶対ダメ
一太郎やワードといったワープロソフトの、比較的新しいバージョンには、「ｈｔｍｌファイルに変換」という機能がついています。この機能を使うと、一発でｈｔｍｌファイルに変換してくれ、インターネットのホームページとして見れる状態にしてくれるので、あとはアップロードするだけ、という状態になります。
しかし、この機能を使って、ｈｔｍｌファイルへの変換作業は絶対に行ってはいけません。無駄なタグをたくさん書き込んで容量が２～３倍になってしまいますし、ワープロでレイアウトした通りには決して表現してくれません。
例を提示しましょう。
赤い文字で、「こんにちわ。皆さんお元気ですか？」という文字だけを表示したファイルを作ってみます。
こんにちわ。
みなさんお元気ですか？
これを僕がｈｔｍｌで書くと、次のようになります。
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞例＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0080ff" ALINK="#ff0080" VLINK="#0000a0"＞
＜BASEFONT SIZE=3＞
＜font color=red＞
こんにちわ。＜ｂｒ＞
みなさんお元気ですか？
＜／ｆｏｎｔ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
同じことをワード２０００を使って記述し、ｈｔｍｌ変換をしたあと、そのソースを見てみると、次のようになりました。
＜ xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40"＞
＜head＞
＜meta http-equiv=Content-Type content="text/html; charset=shift_jis"＞
＜meta name=ProgId content=Word.Document＞
＜meta name=Generator content="Microsoft Word 9"＞
＜meta name=Originator content="Microsoft Word 9"＞
＜link rel=File-List href="./こんにちは.files/filelist.xml"＞
＜title＞例＜/title＞
＜!--[if gte mso 9]＞＜xml＞
＜o:DocumentProperties＞
＜o:Author＞とらお＜/o:Author＞
＜o:LastAuthor＞とらお＜/o:LastAuthor＞
＜o:Revision＞1＜/o:Revision＞
＜o:TotalTime＞0＜/o:TotalTim＞
＜o:Created＞2000-05-28T12:10:00Z＜/o:Created＞
＜o:LastSaved＞2000-05-28T12:10:00Z＜/o:LastSaved＞
＜o:Pages＞1＜/o:Pages＞
＜o:Lines＞1＜/o:Lines＞
＜o:Paragraphs＞1＜/o:Paragraphs＞
＜o:Version＞9.2812＜/o:Version＞
＜/o:DocumentProperties＞
＜/xml＞＜![endif]--＞＜!--[if gte mso 9]＞＜xml＞
＜w:WordDocument＞
＜w:PunctuationKerning/＞
＜w:DisplayHorizontalDrawingGridEvery＞0＜/w:DisplayHorizontalDrawingGridEvery＞
＜w:DisplayVerticalDrawingGridEvery＞2＜/w:DisplayVerticalDrawingGridEvery＞
＜w:Compatibility＞
＜w:SpaceForUL/＞
＜w:BalanceSingleByteDoubleByteWidth/＞
＜w:DoNotLeaveBackslashAlone/＞
＜w:ULTrailSpace/＞
＜w:DoNotExpandShiftReturn/＞
＜w:AdjustLineHeightInTable/＞
＜w:UseFELayout/＞
＜/w:Compatibility＞
＜/w:WordDocument＞
＜/xml>＜![endif]--＞
＜style＞
＜!--
/* Font Definitions */
@font-face
{font-family:"ＭＳ 明朝";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-alt:"MS Mincho";
mso-font-charset:128;
mso-generic-font-family:roman;
mso-font-pitch:fixed;
mso-font-signature:1 134676480 16 0 131072 0;}
@font-face
{font-family:Century;
panose-1:2 4 6 4 5 5 5 2 3 4;
mso-font-charset:0;
mso-generic-font-family:roman;
mso-font-pitch:variable;
mso-font-signature:647 0 0 0 159 0;}
@font-face
{font-family:"\@ＭＳ 明朝";
panose-1:2 2 6 9 4 2 5 8 3 4;
mso-font-charset:128;
mso-generic-font-family:roman;
mso-font-pitch:fixed;
mso-font-signature:1 134676480 16 0 131072 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0mm;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
mso-pagination:none;
font-size:10.5pt;
mso-bidi-font-size:12.0pt;
font-family:Century;
mso-fareast-font-family:"ＭＳ 明朝";
mso-bidi-font-family:"Times New Roman";
mso-font-kerning:1.0pt;}
/* Page Definitions */
@page
{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}
@page Section1
{size:595.3pt 841.9pt;
margin:99.25pt 30.0mm 30.0mm 30.0mm;
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
layout-grid:18.0pt;}
div.Section1
{page:Section1;}
--＞
＜/style＞
＜/head＞
＜body lang=JA style='tab-interval:42.0pt;text-justify-trim:punctuation'＞
＜div class=Section1 style='layout-grid:18.0pt'＞
＜p class=MsoNormal＞＜span style='font-family:"ＭＳ 明朝";mso-ascii-font-family:Century; mso-hansi-font-family:Century;color:red'＞こんにちは。＜/span＞＜span lang=EN-US style='color:red'＞＜o:p＞＜/o:p＞＜/span＞＜/p＞
＜p class=MsoNormal＞＜span style='font-family:"ＭＳ 明朝";mso-ascii-font-family:Century; mso-hansi-font-family:Century;color:red'＞みなさんお元気ですか？＜/span＞＜/p＞
＜/div＞
＜/body＞
＜/html＞
いかがですか？ 絶対やってはいけない、といった理由がわかってもらえましたか？
出来たファイルをアップロード
通常、完成したｗｅｂページは自分のＰＣのＨＤＤ（ハードディスク）に保存されています。こいつをブラウザで呼び出せば、サーバーにアップしていなくても、それと同じ状態で自分の作ったページを見ることが出来きます。だけど、それは自分が見れるだけで、他の誰も見ることが出来ません。
このページをインターネットのサーバーにアップすれば、誰でも見ることが出来るようになります。既に第１章でサーバースペースの確保は出来ています。アップ（アップロード）とは、サーバースペースにＨＤＤにあるページを転送することです。通常、ＦＴＰといわれる転送ソフトを使って電話回線を通じて（インターネットに接続した状態で）アップします。
そのためのアプリケーションが、先ほどから何度かでているＦＴＰソフトといいます。
ＦＴＰとは確かファイルトランスポーションプロコトルとかの略だったような気がするけれど、正確に覚えているわけではないので、信用しないで下さい。僕は通常これを「ファイル転送プログラム」と理解しています。どっちだっていいじゃない、結果は同じなんだから、なんて暴言は申しません。
厳密にはＦＴＰは通信システム（といえばいいのかなあ）のひとつであり、ＦＴＰがアプリケーションというわけではないのです。だから、ＦＴＰではなくて、「ＦＴＰソフト」なんて呼ばれていますね。
さて、この使い方なんですが。ものにもよるでしょうけれど、基本的には一緒です。まず、サーバーに接続します。そのために、サーバー名を指定してやります。
ジオの場合は、ftp.geocities.co.jpです。
アメリカのジオなら、ftp.geocities.comです。
それから、ＩＤとパスワードをそれぞれ入力欄に入力して、接続すればオッケーです。通常これで、自分のサーバースペースに入れますから、ここで色々な操作が出来ます。
ＨＤＤから、サーバーへファイルやフォルダ（ディレクトリ）を転送したり、サーバーのファイルをダウンロードしたり、サーバーのファイルやフォルダ（ディレクトリ）を削除したり、といった具合です。サブディレクトリを作っている（作りたい）場合は、フォルダ（ディレクトリ）ごと転送処理をしてしまえば、その中のファイルも一緒に転送されます。サブディレクトリに移動してから転送するということも出来ます。
ところで、ついでながら、「更新したファイルをアップしたのにつないでみたら古いままだった」という現象が起こることがあります。
これも代表的な質問のひとつです。いったんつないで見たｗｅｂページは、実はＨＤＤのキャッシュといわれる部分に記憶されます。ブラウザがこのキャッシュからｗｅｂページを読み込んでいれば、当然それは古いものです。これは「リロード」「再読込」などのボタンを押せば、最新のｗｅｂページを読み込んでくれますから、すぐに解決します。
ジオの「ファイルマネージャー」
ジオシティーズには、ファイルマネージャーというとても便利なツールが用意されています。
詳しくは、ジオシティーズのそれぞれのページやヘルプを参照してもらいますが、ここにはホームページ作成支援システムとＦＴＰの機能があります。
極論をすれば、Ｗｅｂ作成ソフトもＦＴＰソフトも持っていなくても、これがあればホームページは作れます。なにもかもこれに頼ると多少不便ですが、それでもホームページは出来ます。
ＦＴＰソフトの代わりになるのが、ＥＺファイルアップロードツールというもので、僕は通常、これを使っています。（ジオに関してはＦＴＰソフトを使っていません)
また、アドバンスドエディタというのは、ｈｔｍｌを直接メモ帳などに書き込むのと同じように使えます。その間、つなぎっぱなしにしておかなくてはなりませんが、テキストエディタとして使えるわけです。
残念ながら、Ｗｅｂ作成機能については、市販のＷｅｂ作成ソフトの方が使いやすいですが、前例の「カエルちゃんのホームページ」で例示したように、「とりあえず表紙ページを作ってみる」などの場合には便利です。対話式で進められ、定型書式になっていますから、誰が作ってもレイアウトはほとんど同じになってしまいます。
ジオ以外にも、無料ホームページレンタルを実施しているサーバーのいくつかは、ジオのファイルマネージャーに似た機能を所持している場合があります。アップロードに関しては、ミルトクラブやフリーティケットシアターでもツールがあり、それぞれのサーバーのシステムに密着していますから、ＦＴＰソフトより使いやすい場合があるでしょう。
自慢話
先にも述べましたが、僕は現在では、Ｗｅｂ作成ソフトのお世話にならずに、ホームページを作っています。
直接ｈｔｍｌを記述するもうひとつの利点は、ｈｔｍｌソースのデザインを自分で好きなようにできる、ということです。
コンピューターのプログラミングの場合、ルーチンが入れ子状になることが多く、それがどの階層でルーチンしているのかわかりやすいように、右へ右へとずらして記述するのが暗黙の了解になっています。
ｈｔｍｌソースも多くの場合「入れ子」になり、それがプログラムと同じように、ひとつ階層が深くなるごとに、右にずれて記述する癖が継承されているようです。これは場合によってはかえってわかりづらくなってしまいます。ｈｔｍｌソースを手書きするということは、自分にとってわかりやすいソース記述のデザインができるのです。
ｈｔｍｌタグを覚えて直接打ち込んでいます、というと、さも自慢話に聞こえそうですし、そういうタイトルになっていますが、しばらく続けていると作者の癖というのが現れて、「よく使うタグ」と「ほとんど使わないタグ」に分類されます。つまり、「よく使うタグ」だけを覚えていればよく、逆にいうと、限られた小数のタグだけでホームページは作れてしまうのです。僕の自慢とは、「限られた機能で思い通りのページを作っています」ということなのです。
そのかわり、第２章で書いたような「邪道な使い方」もしますし、中途半端なスタイルシートの使い方もします。あまり使う人がいないようですし、Web作成ソフトでもサポートしているかどうか心もとないのですが、＜ｔｈ＞というタグもよく使います。これは表組みの中で＜ｔｄ＞の変わりに使うのですが、＜ｔｄ＞だと、＜ｃｅｎｔｅｒ＞＜ｂ＞と合計三つのタグを使わなくてはいけないところを、＜ｔｈ＞ひとつで済んでしまうのです。
その他、省略できるタグはかなり徹底的に省略しています。スラッシュを最初に入れた「閉じタグ」は、かなり省略できますし、タグそのものも省略できるものがいくつかあります。あとでソースを見たときにわかりやすいように、省略できる場合でもあえて記述している場合がありますが、＜ＴＢＯＤＹ＞なんてタグは一切使っていません。Ｗｅｂ作成ソフトではこのような省略は認めてくれませんし、＜ｐ＞タグなど、勝手なところに挿入されたり、思わぬところで閉じられたりして往生することがままあります。
自分なりに「使いやすい」すなわち「更新しやすい」ページを作るには、やはりｈｔｍｌは手書きに限ると思います。みなさんも、徐々にタグを覚えて、自分流にホームページを作ってください。タグを覚えるといっても、自分流が確立すれば、それほどたくさんのタグを覚える必要はありません。
[「第４章」に進む]
[僕たち初心者ホームページ作成講座目次へ] [ホームに戻る]