ホームページを作ろう（その１）：体で覚えた初めてのホームページ作り

ホームページを作ろう（その１）

◆ホームページ作成ソフトの選択

個人的には、IBMホームページビルダーとマイクロソフトFrontpageしか使ったことはないのですが、そこでの感触ということで少し書きます。

■ホームページビルダー
・ホームページを作り始めで、HTMLが良く分からない時
・ホームページにスタイルシートを使い始めようとしている時
・ページ数が少ない時
に選択するには良いソフトかもしれません。ただ、私の個人的な経験ですが、ページ数が多くなると、すごく異常終了したり、とても動きが遅くなり、ストレスいっぱいになって、使い物にならなくなってしまいました。

■Frontpage
・ページ数が多くなってしまった時
・ＳＥＯなどを深く考慮しようとした時
・スタイルシートをフルに活用したい時
には、とても使い易いと思いました。ただ、HTMLやスタイルシートのことについて、ある程度理解できるまでの初心者には、活用するのは少し難しいかもしれません。

とは言うものの、私の経験的なアドバイスをするとしたら、ホームページビルダーを使いこなせるようになった後、必要性を感じればFrontpageに移行するという流れをお奨めします。

◆私のつまずきのまとめ

トップページのファイル名

ホームページのＵＲＬを
http://homepage.ok-jp.com/
という感じに”/”で終わる形にして、トップページにアクセスできるようにしたかったのですが、どうしたら出来るのかがわからず、かなり困りました。

結論

トップページのファイル名は、index.*にすること

　”*”の部分は、拡張子といって、次のようなものがあります
　　　○　htm　　○　html　　○　shtml　　　

※拡張子によって、使用できる機能が限られているところもあるようですので、始めにサーバーの仕様を確認しておくと安心です。
（ちなみに、私が使っているサーバーは、SSIを使おうとすると、「shtml」の拡張子にしなければなりません）

異なる拡張子の混在

例えば、index.htmとindex.htmlとindex.shtmlが同時にサーバーに存在した場合に、優先して表示されるファイルもサーバーの仕様によって決まっているようです。

《例》index.htmとindex.htmlのファイルを混在させてしまった場合
index.htmlが優先されるサーバでは、index.htmファイルをいくら変更しても、インターネットの表示には反映しないことになるのです。

結論

●拡張子の異なるファイルを作ると混乱のもと
　　（特に「index.*」には要注意！）

●作ってしまったら、特に意図が無い場合は、「変更前の拡張子のファイル」をサーバーから削除（ゴミ掃除）しておくと安心です。また、リンクミスなどの発見にもつながるかもしれません。

フレームを使ったページのリンクの設定

フレームを使ったページにリンクをつけるときは、リンクタグ（<a>タグ）のオプションに注意が必要です。

言葉では上手く説明できませんので、サンプルのページで動作を確認してみてください

フレーム内のリンク動作の
サンプルページはこちら

ファイルの一覧が表示されてしまうことを防ぐ為に

フォルダーにindex.*のファイルを置いておかないと、こんなことになってしまいます。

どんなことになるかの
サンプルはこちら

そこで、エラー画面のようなページにしたindex.htmlなどのファイルを置いておくと安心です。

エラー画面
サンプルはこちら

◆こんなことが出来なかった・・・^_^;

表を使ってレイアウトを固定

ウインドウのサイズを変えると、レイアウトが崩れてしまう・・・・。
これは、表を使って、表の幅を指定すれば解決できます。

サンプル

ブラウザの「文字のサイズ」を変えても表示される文字のサイズを変えない

せっかく、きれいに表示されるようにレイアウトを考えても、ブラウザの「文字のサイズ」を変更すると、レイアウトが崩れてしまう・・・・
そんなときは、「スタイル」を設定すると一定の大きさで表示されるようになります。

スタイルシートを用いる方法には、次の３つがあります。

　　表示サンプル　：18pxを指定するとこのように表示されます

（１）色々なHTMLタグに個別に記述する方法
　　【記述例】<font style="font-size: 18px">このように表示されます</font>

（２）ページの<head></head>にスタイルを記述する方法
　　【記述例】
　　　<style type="text/css">
　　　
　　　</style>

（３）（２）の内容を拡張子がcssで終わる名前の外部ファイルに記述します。このとき、<head></head>部分に、外部ファイル名を記述します。
　　【記述例】<link rel="stylesheet" href="外部ファイル名" type="text/css">

サイト全体のデザインに関わる記述は、記述を一元管理できる（３）の方式を用いることをおすすめします。（変更が発生した場合、外部ファイル１つを修正すれば絃ページに反映する）

また、設定は、①<font>などのタグ自体に設定する方法と，②タグにclassや③IDを指定することでスタイルシートの内容を反映させる方法があります。

文字の大きさに限らず、色は背景やその他デザインに関わる多くのことを設定することが出来ますので、色々と活用の方法を試行錯誤されてみると良いと思います。
（ちなみに、このセルの背景もスタイルシートで指定しています(^o^)丿）

スタイル設定前／後の
比較サンプルはこちら

※スタイルシート関連をとても参考にさせていただいています！
　

「戻る」

戻り先のページが１つのときは、「戻る」のリンクに、戻り先のページを指定すれば良いのですが、複数のページからリンクされているページは、この方法では戻り先を指定することが出来ません。そんな時、次の方法が役に立ちます。

【記述方法】

○フォームや画像にイベントを設定します。

◆フォームの例
<FORM><INPUT type="button" name="back" value="戻る" onclick="history.back();"></FORM>

◆画像の例
<P><IMG src="d006btn.gif" onclick="history.back()"></P>

前の履歴へ「戻る」
サンプルはこちら

「閉じる」

メインのページを閉じずに、新しいウインドウを立ち上げて情報を表示したとき、「閉じる」ボタンを表示しておけば、たくさんのウインドウが開いてしまって、サイトを見てくれている人が混乱してしまうことを防ぐことが出来ると思います。

【記述方法】

○フォームや画像にイベントを設定します。

◆フォームの例
<FORM><INPUT type="button" name="close" value="閉じる" onclick="window.close();"></FORM>

◆画像の例
<P><IMG src="d006btn.gif" onclick="window.close()"></P>

ウインドウを閉じる
サンプルはこちら

「このページは引っ越しました（自動的に新URLへ移動）」

自動的にリンク先へページを移動させることが出来ます。これは、覚えておくと、いろいろな使い道があって便利だと思います。

【記述方法】

<head></head>間にmetaタグを使用して記述します。
サンプルは５秒後に移動するように設定していますが、０秒から設定することが出来ます。

◆例
<meta http-equiv="Refresh" content="0;URL=http://homepage.ok-jp.com/make001.shtml">

自動リンク先移動
サンプルはこちら

ページの中にページを表示（IFRAME）

【記述方法】

<IFRAME>タグを使用して記述します。

◆例
<IFRAME src="http://homepage.ok-jp.com/afi001.shtml" height="60" width="468" frameborder="0" scrolling="NO" marginwidth="0" marginheight="0"></IFRAME>

IFRAMEの
サンプルはこちら

「お気に入りに追加」ボタン

このサイトのトップページにも、設置しています。

【記述方法】

こんな感じです。（詳しいことは、分かりません^_^;）

◆例
<input type="button" value="お気に入りに登録" onclick="window.external.AddFavorite(location.href,document.title);">

※画面を参照しに来てくれた人が、特に意識しないでクリックすると、<title>で指定した名称で登録されます。ですから、各ページのタイトルは、手抜きせずに、キチンと登録しておきましょう！

「ホームページ」なんて名前にしておくと、他のタイトルを手抜きしたページをお気に入りに追加するときに、せっかく追加してもらったアドレスが、上書きされて消えてしまうことになってしまいますよ！

フレーム内のページに設置するときは、URLなどを記載する方式にしないと、フレーム内の個々のページがお気に入りに追加されることになるので、要注意です！

<input type="button" value="お気に入りに登録" onclick="window.external.AddFavorite('http://www.～/','サイト名');">

《2004.12.29追記》

流れる文字、リンク、画像・・・を表示する　　　　　　(2004/11/28追加)

使うHTMLタグは<MARQUEE >です。
私は、こんな風だけにしか使えないと思っていました

でも、リンクの文字を流したり
ホームページを作ろう

【記述方法】

◆例
<MARQUEE scrollamount="1" scrolldelay="30" truespeed bgcolor="#ffffff" width="371"><IMG src="b006lis.gif" width="16" height="16" border="0"><A href="make001.shtml">ホームページを作ろう</A></MARQUEE>

画像を流したり、

【記述方法】

◆例
<MARQUEE scrollamount="1" scrolldelay="30" truespeed bgcolor="#ffffff" width="371"><IMG src="bn_chikara01.gif" width="83" height="27" border="0"></MARQUEE>

ということは、リンクつきの画像も流したり出来ます。

【記述方法】

◆例
<MARQUEE scrollamount="1" scrolldelay="30" truespeed bgcolor="#ffffff" width="371"><IMG src="bn_chikara01.gif" width="83" height="27" border="0"></MARQUEE>

他にも、こんなことが出来たりします(^o^)丿
Javaスクリプトの実行結果を流したり
ＳＳＩのincludeも流せるかな？

簡単に言うと、

<MARQUEE>流したいもの</MARQUEE>

とすればいいだけです。
極端な例では、<BODY>の直後に<MARQUEE>、</BODY>の直前に</MARQUEE>を記述すれば、ページ全体が流れます。（使い道は、不明ですか(^_^;)）

◆知識はこちら

すごい技や、詳しいことは次のサイトがとても役に立つと思います(^o^)丿

※スタイルシート関連をとても参考にさせていただいています！

◆便利なツール（圧縮・解凍ソフト）

データ容量の大きなファイルをインターネット上でやり取りすると、伝送時間が長くかかってしまいます。そこで、インターネット上では、データを小さなサイズに圧縮してやり取りするのが一般的です。

普通のファイルを伝送用に圧縮したり、圧縮ファイルを使用可能なファイルに解凍するためのソフトを準備しておくと、いろいろな場面で役に立つと思いますよ(^o^)丿

◆お奨めのフリーソフト◆