indexファイルと階層構造

ホームページを作成する上でindexファイルと階層構造に対する理解は必須なりますので、ここは頑張って覚えましょう。

indexファイルについて

前回はwwwフォルダにindex.htmlというファイルを作成しました。今回はabout.htmlというファイルを同じwwwwフォルダに作成します。

サンプルソースコード

サンプルソースコードは以下の通りです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介｜Macで作るHTML5ではじめるホームページ制作</title>
<meta name="keywords" content="webデザイン,ホームページ,Mac,Wordpress" />
<meta name="description" content="自己紹介ページです。" />
</head>
<body>
<section>
<h1>自己紹介</h1>
<h2>NARUHIKO WAKAI</h2>
<p>webデザイナーです。</p>
</section>
</body>
</html>

<!doctype html>

<head>

<title>自己紹介｜Macで作るHTML5ではじめるホームページ制作</title>

</head>

<body>

<h2>NARUHIKO WAKAI</h2>

<p>webデザイナーです。</p>

</section>

</body>

</html>

//create.irec.jp/demo/www/ にアップロードしましたので、クリックしてみて下さい。

index.htmlの内容が表示されたとおもいます。
//create.irec.jp/demo/www/about.htmlをクリックするとabout.htmlの内容が表示されます。

index.htmlにアクセスする時にはアドレスにindex.htmlの指定はしませんでしたがアクセスできました。それは指定がない場合はindexファイルから参照するというルールがあるからです。ちなみにindex.htmlを抜いて最初のアドレスにアクセスしてもabout.htmlにはアクセスできません。indexファイルが特別なのです。そのような理由からトップページには一般的にindexファイルが用いられます。

wwwの更にその中にcaseというフォルダーがあったとしてもcaseフォルダーのindexファイルが優先されます。

階層構造

階層構造を理解するためにhtmlファイルに画像ファイルをリンクしてみます。画像を表示する場合はhtmlが記述されたファイルに画像ファイルのある場所を指定してリンクする必要があります。画像ファイルはimgタグを使いsrc属性（sourceの略）にファイルの場所を指定します。

wwwフォルダの中のindex.htmlにwwwフォルダの中の01.pngをリンクさせる場合は以下の様に記述します。

<img src="01.png">

1	<img src="01.png">

リンクするファイルとリンクされるファイルが同じ階層にある場合はファイル名だけを記述すればOKです。

wwwフォルダの中のindex.htmlにwwwフォルダの中のimgフォルダの中の01.pngをリンクさせる場合は次の通りです。

<img src="img/01.png">

1	<img src="img/01.png">

リンクするファイルがフォルダの中に入っている場合はフォルダ名+ファイル名の記述が必要です。

wwwフォルダの中のaboutフォルダの中のindex.htmlにwwwフォルダの中の01.pngをリンクさせる場合は以下の様に記述します。

<img src="../01.png">

1	<img src="../01.png">

index.htmlから見て01.pngファイルは一つ上の階層のフォルダに存在しますので階層を一つ上あげてからリンクする必要があります。階層を一つあげる記述は../になります。

wwwフォルダの中のaboutフォルダの中のindex.htmlにwwwフォルダの中のimgフォルダの中の01.pngをリンクさせる場合は次の通りです。

<img src="../img/01.png">

1	<img src="../img/01.png">

index.htmlから見て01.pngファイルは一つ上の階層のフォルダの中のフォルダに存在しますのでこちらも階層を一つ上あげてからフォルダ名+ファイル名を記述しリンクする必要があります。

ちなみに../../と連続すれば二つ階層をあげることができます。../../../と数が増えれば増える程階層をあげることができます。

階層の参照

今までの例を見てもらうと分るようにhtmlでは階層を「/」で区切り上の階層を参照するには「../」を使います。wwwフォルダの中のaboutフォルダの中のindex.htmlの階層は下記の様に表します。

www/about/index.html
www/about/

1 2	www/about/index.html www/about/

他にindexファイルがない場合index.htmlは省略可能です。wwwフォルダのなかのaboutフォルダのなかのskillフォルダのなかのhtml5.htmlファイルの階層を表す場合は以下の通りです。

www/about/skill/html5.html

1	www/about/skill/html5.html

先ほどのwww/about/skill/html5.htmlからwwwフォルダの中の01.pngファイルをリンクさせる場合とその逆のwwwwフォルダのindex.htmlからskillフォルダの01.pngをリンクさせる場合はそれぞれ以下の通りです。

<img src="../../01.png">
<img src="about/skill/01.png">

1 2	<img src="../../01.png"> <img src="about/skill/01.png">

冒頭でも触れましたがホームページ作成では階層に対する理解は必須になりますので、実際にマークアップしてみて理解してください。

HTML5 コーディング