トップページ  第一作  TABLE  画像と背景  フレーム  CSS  Script  事例研究  ギャラリー  BBS  

HPをエディタで

- お金をかけずにウェブページを作ろう -


 高価なソフトを使わずに、フリーのエディタを使って、ホームページを作ろう。無料のウェブスペースを借りて、無料のFPTソフトでアップロードしよう。何から何まで無料でやろうというのが、このサイトの趣旨だ。


 

検索エンジンで来られた方は、ここからフレームを開いてください。
フレームを使わない場合は、上下のリンクと矢印で移動できます。


 このサイトは、エディタを使って作った。使ったのは、Jedit X というマック専用のシェアウェアだ。マックユーザーがOSにバンドルされたテキストエディットを使う場合は、多少面倒な使い方をしないと、修正に苦労する。ウィンドーズのワードパッドやノートパッドは、そのままエディタとして使うことができる。できるだけ楽に作業を進めるために、フリーのエディタをゲットすることから始めよう。 リンクを閉じる



 

無料でエディタをゲットしよう

 マックユーザー向けのフリーソフトには、上山大輔氏による mi や、山下道明氏による iText for Mac OS X、同氏による iText Express Vector でゲットできる。nakamuxu 氏による CotEditor 0.9.5 も評判の良いエディターである。AYNiMac の上の「自作ソフト Download」右にある。 リンクを閉じる

 ウィンドーズ環境では、寺尾進氏による TeraPad というフリーのテキストエディタがウェブでゲットできる。私は使ったことがないが、評価のポイントは五つ星と非常に高い。ウィンドーズの全てのバージョンでの動作が確認されているのも安心だ。vector.co.jp からダウンロードできる。Vector のウィンドーズ版エディタのサイトには、色々なテキストエディタが紹介されているので、評価コメントも含めて、参考にして欲しい。 リンクを閉じる

 iText や TeraPad などを使用する場合は、一度作ったHTMLファイルをそのアイコンにドラッグするか、マックでは「情報を見る」からアプリケーションを iText に指定し、ウィンドーズでは、「プロパティー」からソフトを TeraPad に変更しておくと、それ以後はファイルのダブルクリックで指定のソフトで開くようになる。ウェブページとしてブラウザで開く場合は、希望のブラウザのアイコンにドラッグするか、情報もしくはプロパティーで、ブラウザを指定して開く。



 

無料でFTPクライアントソフトをゲットしよう

 アップロードにはFTPクライアントソフトを使う。以下では単にFTPソフトと呼ぶことにする。サーバーによっては、ブラウザでアップロードできるところもあるが、こまめな修正や更新を考えると、FTPが便利だ。ウィンドーズなら、FFFTPというフリーのソフトが使える。Sota's Web Pageでダウンロードできる。

 マックでは、RBrowser.P.4.4.2 と RBrowser.T.4.4.7 が無料で使えるが、ダウンロードサイトは英語である。RBrowser.P.4.4.2はMac OSX 10.3 (Panther)に特化し、RBrowser.T.4.4.7はMac OSX 10.4 (Tiger)以降のバージョンに対応している。Cyberduckも無料ではあるが、寄付を期待している。英語のサイトで、多少の理解力が要求されるが、使い勝手は良好とのことだ。シェウェアではあるが、Fetch は無料の試用のまま使い続けることができる。日本語では、やりとり と姉妹ソフトFTPSyncがある。後者は、更新ファイルだけを FTP で送るという画期的な機能でる。 FTPソフトの使い方については、それぞれのソフトの説明に従って欲しい。ちなみに私はCGIとの相性の良さから、シェアウェアのTransmit を主に使っている。 リンクを閉じる



 

無料でウェブスペースをゲットしよう

 出来上がったファイルは、ウェブスペースにアップロードする。ウェブスペースを契約していない場合は、無料のウェブスペースを借りるとよい。個人的には、忍者ホームページが好みだ。無料の割には広告が少なく、細かな設定が可能なうえ、100メガを超えるとさらに100メガ借りられる。商用利用可というのも魅力だ。CGIは使えないが、カウンター、アクセス解析、アンケートフォームなどが無料で使える。私はここで無料スペースを合計300メガ借りている。芳賀で出会った野の花たちを観ていただきたい。7つのアルバムを一つにまとめたもので、これだけで61.2メガバイトもある。TOK2.comでは、容量無制限の上CGIの使用も可能だが、広告が掲載される。確認してみて、気にならない程度なら、容量無制限は魅力だ。FC2.com は、1GB、広告無しのうえ、規制が緩やかな点が嬉しい。ページ下部に「Powered by FC2.com」と表示されるだけ。ただCGIが使えないのが残念ではある。ウェブ検索すると、無料のウェブスペースは他にも見つかるだろう。自分に合ったところと契約すると良い。



 

サイトの内容とリンクの仕組み

 このサイトでは、HTML 4.01 Transitional に準拠したページを作成する。文書、写真、テーブル(表)を配して、アルバムを完成させながら、シンプルでアクセスしやすいページを目指す。共通の材料として、567px×425pxとそれに対応する200px×150pxのそれぞれ6枚の写真を用意した。使用に際しては、photos.zip(1008KB)をダウンロードし、解凍して使って欲しい。もちろん実際にアップロードするときは、自分の写真と自分の言葉で綴ったものでなければならない。

 最初の作品を完成するためには、HTMLの他に、スタイルシートとJavaScriptを少し使う。最初の作品を完成した後で、これらの基本的な事項を調べるが、さらに詳しい利用法は、HTMLクイックレファレンスとほほのWWW入門heoFactoryのタグ辞典などのサイトで調べて欲しい。

 サンプルのソースが必要なときには、目的のページを開いた状態で右クリックし、「ページのソースを表示する」から開いてコピーし、エディタのファイルにペーストして使う。(ワンボタン式のマウスでは、「表示」から「ページのソース」を選択するか、control を押しながらクリックする。)必要な箇所を自分の作品に合うように変更し、Internet Explorer や Firefox あるいは Safari などのウェブブラウザで開いて確認する。ウェブブラウザで開くには、HTMLドキュメントを右クリックして、ブラウザで開いてもよいし、HTMLドキュメントのアイコンをブラウザのアイコンにドラッグ&ドロップしてもよい。プロパティー(マックでは情報を見る)でデフォルトのソフトをウェブブラウザに設定しておけば、ただダブルクリックするだけでよい。

 ウィンドーズ版 Internet Explorer とマック版 Netscape では、サブウィンドーを開いた後に更に次のファイルを同じターゲットに開くと、メーンページの前に出ずに、後ろで内容が入れ替る。マック版 Firefox では3以上のウィンドーが開いていると、目的以外のウィンドーも同時に背後から前に回ってくる。メーンウィンドーからのリンクだけが表に出るべきだが、そうはならない。致し方なくサンプルが開くと同時に、メーンウィンドーが自分を後ろに回すよう設定した。開いたサブウィンドーのどこかをクリックすると、この設定が解除され、メーンウィンドーをクリックすると再び表に回る。ただし Firefox では反応が異なるので、同時に開くウィンドーは2つに限るようにする必要がある。ここでは説明の都合上3つのウィンドーが開いてしまうが、アルバムなどで写真を同じターゲットに表示する際には、この点に注意しよう。

 このサイトはいくつかのページに別れている。それぞれのページへは、左のフレームの濃いグレーのリンクから移動する。そのページ内の項目へは、淡いグレーのリンクから移動する。もしフレームを好まない場合は、ページの下のほうにある「前のページ 次のページ」とページの上下のリンクから移動できる。ただしフレームとは連動しないので、フレーム使用の場合は無視して欲しい。

 ソースの記載に当たっては、ブラウザの表に出る文字部分(テキスト)を黒色で、HTML、スタイルシート、ジャバスクリプトは緑色で、現在説明中の箇所は青色で記載し、特に注意すべき箇所は赤色にした。しかし必要に応じて色を変えた箇所もあり、必ずしも統一していない。また、私が苦労した用語については、要所要所でコメントを入れたが、不十分だったと反省しきりである。喉もと過ぎればと言うが、どうやら初心を忘れかけているようだ。大方の叱咤を期待する。

 HTMLを記述する場合、一般にHTMLタグを大文字で記し、行を次第に下げてのち戻して相互の関連を見やすくしている。しかし私は、原則小文字を使い、行頭を下げずに、ブラウザの表に表示されるものの行替えの前後ではなく、行を改めた前後にタグを配し、まとまりごとに1行の空白を入れて視覚的なまとまりを試みた。このやり方を推奨するのではないから、各自の好みで変更したらよい。

 最後に、写真10枚を使った、形式の異なるアルバムを9つ作った。自分の表現したい内容に合った方式を選択するようお薦めする。これらのアルバムは独立しているので、ウェブ制作に先立ってご覧になることもできる。URLは http://www.geocities.co.jp/erde8873/gallery/index.html で、タイトルを『HPをエディタで - 色々なアルバム -』とした。

 オマケのページとして、『2011年カレンダー』を急遽掲載する。サイズや写真が手頃なものに出会わなかったので、自分で作った経過と結果を簡単に公開する。ここから外部ファイルとして開くのでクリックして欲しい。

 なおパラグラフの最後に置いた サンプルを閉じる はサンプルを、リンクを閉じる はサイト外のリンクを、それぞれ閉じるボタンである。

 このサイトで説明してない事項は、ホームページのプチアイディア集ウェブページの荒ワザに掲載しているが、このサイトとの重複もある。 リンクを閉じる

 このサイトは、現在72歳の私が、64歳からインターネットをはじめ、65歳でホームページを公開し、いくつかのホームページを作る中で、色々なページを参考にしながら習得したものを、これからウェブページを作ろうという人の立場から整理したものである。HTMLや JavaScript、CSSを解説するページや出版物は多いが、私のような予備知識の無い後発の年配者には、かなり手強い。そこで、上級生が下級生に教えるように、私よりさらに後から来る人たちに、取りあえずのトッカカリになればと考えて公開した。万一役に立ったら、嬉しい。私の知見を乗り越えていってくれれば、さらに嬉しい。また先輩たちからは、心ならずも犯しているであろう誤りを正していただければ、私の今後の進歩につながり、幸いである。








2007年3月31日  初回公開
2008年7月10日  ウィンドーズ向けに一部内容を修正
2008年11月14日  全面一新

検索エンジンで来られた方は、ここからフレームを開いてください。


黒猫シャノワール :

 


最後のページ 最後のページ  次のページ 次のページ

トップページ  第一作  TABLE  画像と背景  フレーム  CSS  Script  事例研究  ギャラリー  BBS