Home

ホーム>>2:最低限の知識

Webサイトの構造とindex.html

まず以下の画像をご覧ください。これがwebサイト構造の一例です。全体を保存する【保存フォルダ】の中に【index.html】(htmlファイル)【a】【b】フォルダがあって、さらに【a】【b】フォルダ各々にhtmlファイルを保存している構造です。

webサイト構造例

この構造だけ見てもwebサイトがどのように表示されるかわからないかもしれませんが、例えば自分のwebサイトアドレスが【http://example.com/】だとします。

そして【http://example.com/】にアクセスするとindex.html(1)が表示されます。つまり【保存フォルダ】は「http://~/」を表し、そこを基点にしてwebサイトが構成されるわけです。

【http://example.com/】といったアドレスはレンタルサーバーと契約時、取得できます。

index.htmlについて

画像では各フォルダに【index.html】というhtmlファイルが置いてありますが、これはデフォルトファイルといって、ファイル名が省略された際に表示されるファイルの事を指します。

http://○○○.×××/"ファイル名を省略"
デフォルトファイル(index.html)を表示

上記で【http://example.com/】にアクセスするとindex.html(1)が表示されると解説しましたが、これは【http://example.com/】とファイル名が省略された状態でアクセスされているため、デフォルトファイルであるindex.html(1)が表示されます。

また【aフォルダ】【bフォルダ】も同様です。

【http://example.com/a/】にアクセス
【a】フォルダの中にあるindex.html(2)が表示。
【ttp://example.com/b/】にアクセス
【b】フォルダの中にあるindex.html(3)が表示。

もちろんファイル名を指定してhttp://example.com/index.htmlとしてもindex.html(1)が表示されます。

デフォルトファイルがない場合

ファイル名が省略されてアクセスされた際ページが表示されないだけでなく、サーバーの設定によってはフォルダに保存してあるファイル一覧が表示されてしまうことがあります。

デフォルトファイルがない
サーバーの設定によって【フォルダに保存してあるファイル一覧が表示】

ページが表示されない状態を避けたい方やファイル一覧を見られたくない方は、各フォルダに必ずデフォルトファイル(index.html)を置くようにしましょう。

デフォルトファイルの指定

デフォルトファイルは設定で任意のファイルに変更できます。しかし、多くのレンタルサーバーでは【index.html】がデフォルトファイルとして設定されているため、特別な理由がない限りデフォルトファイルは【index.html】にしましょう。

デフォルトファイルの内容について

デフォルトファイルは指定されたファイル名(【例】index.html)であれば、ファイルの内容は何でもかまいません。何も記述されていない空のファイルでも大丈夫です。(空のデフォルトファイルは、画像専用フォルダなどページを表示する必要がない時に使います。)

【相対パス/絶対パス】へ>>

当サイトは初めてWebサイトを作る方向けの解説サイトです。文法は抜きにして"とにかく作って出す"という事を前提に解説しています。

一度作成してみてさらに興味がわいた方は、専門の参考書を読む事をおススメします。

はじめに - Webサイトについて -

1:予め用意するもの
テキストエディタ
画像編集ソフト
2:最低限の知識
拡張子の表示
htmlタグとは
覚えるべき要素
htmlファイルの構成
htmlファイルの保存
htmlファイルの確認
Webサイトの構造とindex.html
相対パス/絶対パス
3:作成手順
【1】保存フォルダの作成
【2】htmlファイルの作成
【3】ファイルを送信
【4】完成
応用
デザインの変え方
背景色・文字色を変える
文字サイズを変える
縦横のサイズを指定する
行揃えの位置を指定する
間隔をあける
線を引く