コピペで出来る!簡単ホームページ作成入門

リンクを張るときや画像を表示させる時に必要になる知識の1つに「パス」というものがあります。
このページではそのパスについて説明していきます。

• パスとは？
• 絶対パス
• 相対パス

パスとは？

パスというのは、そのファイルがどこにあるのかを表す文字列のことです。

Webサイトの場合はURLのことになります。
URLの例としては、Yahoo!Japanの場合はhttp://www.yahoo.co.jp/のことで、Googleの場合はhttp://www.google.co.jp/のことになります。 ブラウザの↓部分に表示されている文字列のことです。

さてここで重要なのは、パスには2種類あるということ。
1つは絶対パス、もう1つは相対パスです。
では、次でそれぞれについて説明してきます。

[事前説明]
以下で出てくる/はフォルダ(ディレクトリ)の区切りという意味です。
たとえば、test/page.htmlという場合はtestフォルダ内のpage.htmlというファイルという意味になります。
Windowsの\と似たような意味と考えればOKかと思います。

絶対パス

絶対パスとは、URLを最初から最後まで全て記述したもののことを言います。
さっき上であげたhttp://www.yahoo.co.jp/やhttp://www.google.co.jp/は絶対パスということになります。

この絶対パスの特徴は、どのページに書いても問題が無いことです。
この絶対パスは、他のサイトやブログへリンクを張るとき、他サイトのバナーを表示する時に主に使います。

相対パス

相対パスは、今書いているWebページから見てファイルがどこにあるかを記述したものです。
ちょっと分かりにくいので、例を示しながら説明していきます。

下のような構成のページがあったとします。
http://www.netgamebm.com/
∟index.html
∟ about.html
∟ bbs               － bbs.html
∟ link              － link.html

作業用フォルダの中にindex.htmlabout.htmlという2つのファイルとbbslinkという2つのフォルダがある。 bbsフォルダの中にはbbs.htmlというファイルが、linkフォルダの中にはlink.htmlというファイルがあるとします。

index.htmlからabout.htmlにリンクを張りたいと思った時。
■絶対パスでは
http://www.netgamebm.com/about.html
と書かないといけません。

■相対パスでは
about.html
とだけ書けばOKとなります。
つまり、index.htmlから見て同じフォルダの中にabout.htmlファイルがありますよということですね。

他のファイルの例も記してみます。
■index.htmlからみたbbs.htmlへの相対パス
bbs/bbs.html

■bbs.htmlからみたabout.htmlへの相対パス
../about.html

ここで出てきたのが../というものです。
これは、1つ上のフォルダ(ディレクトリ)にあるという意味です。 ..が1つ上という意味になります。
つまりは、1つ上は../、2つ上は../../、3つ上は../../../ってことになります。

このように、相対パスは自分のサイト内のファイルにリンクを張るときに使います。
絶対パスの様に長いURLを書かなくて良いし、サイトを引っ越した時に楽なのです。
絶対パスだと、引っ越した時に全てのサイト内へのパスを書き換えなきゃいけなくなりますので。
(例えばこのサイトの場合http://c.netgamebm.com/部分がhttp://c.netgamebm.com/ohikkoshi/に変わったら、絶対パスで書かれていたパスは全て書き直さなきゃいけなくなると考えると理解できるでしょうか。)

ホームページは作るだけでは駄目です。 みんなに見てもらうためには公開する必要があります。
ということで、以下で公開の仕方を紹介していきます。

1. ホームページを公開するには？
2. ホームページをサーバにアップロードする
3. アップロード時の注意

ホームページを公開するには？

ホームページを公開するには、Webサーバと呼ばれるコンピュータに自分で作成したHTMLファイルや画像ファイル等ををコピーする必要があります。 Webサーバには以下のような種類があります。

プロバイダのホームページスペース

自分又は家族が契約しているプロバイダ(インターネット接続業者)のサービスの中にホームページスペースというものが提供されている場合があります。
プロバイダの説明書類やプロバイダのホームページにこのサービスがあるか、有料なのか無料なのか、ホームページの公開方法、使える機能等が書いてあるので確認してみましょう。
プロバイダの具体的な紹介等はここではしませんので、各自ご自分が契約・利用しているプロバイダを確認してください。

レンタルサーバ/レンタルホームページスペース

企業や個人が運営しているサーバを借りる(レンタルする)方法です。 有料の超高機能なものから無料のものまで幅広く揃っています。
プロバイダのホームページスペースを利用したくない時はこの方法を取るのが一般的で楽です。
レンタルサーバ紹介の記事でいくつかお勧めの無料/有料レンタルサーバを紹介していますので、よろしければ参考にどうぞ。

自宅サーバ

自分の家にWebサーバを作って、そこでホームページを公開する方法です。 ただし、かなりの知識と24時間起動しっぱなしに出来るパソコン、常時接続のインターネット環境、セキュリティに関する知識等が必要になります。一般的ではない(初心者向けではない)ので、ここでの説明は省きます。

ホームページをサーバにアップロードする

Webサーバと呼ばれるコンピュータに、自分で作成したHTMLファイルや画像ファイル等ををコピーすることをサーバにアップロードするといいます。

そのサーバへのアップロードにはFTPソフトを使います。
Windowsの方はFFFTPというソフトがお薦めします。 これを使うと、簡単にHTMLファイルや画像をサーバへアップロードすることが出来ます。
FFFTPの使い方説明はFFFTP Surpport Page.をご覧下さい。

アップロード時の注意

Webサーバへファイルをアップロードする際の注意点がいくつかあります。

プロバイダ/レンタルサーバの説明・注意書きをしっかり確認する

ファイルをアップロードする前に、プロバイダやレンタルサーバ等のアップロード先規約・禁止事項等をしっかりと読んで守りましょう。 違反すると、利用禁止やホームページ公開停止になったりします。

ファイル名は小文字英数字のみにする

Webサーバではファイルの大文字/小文字が区別されます。
例えば、index.htmlとINDEX.htmlは違うと認識されます。
混乱を避ける為にも、HTMLファイルや画像ファイル等のファイル名は全て小文字英数字にしましょう。 また、日本語ファイル名は色々とトラブルの元になりかねないので、使用しないようご注意を。

フォルダ名も小文字英数字のみにする

フォルダ名(ディレクトリ名)も上のファイル名と同じでファイルの大文字/小文字が区別されます。ですので、フォルダ名も全て小文字英数字にしましょう。