WEBトレ

ディレクトリ構成

ディレクトリとは

ディレクトリ構造とはwebサイトを構成するフォルダ・ファイル群の構成のことです。
普段みなさんが使用しているパソコンの中にあるフォルダやファイルの集まりがそれにあたります。ちなみに、箱がフォルダで、フォルダに入っているものがファイルになります。

構成のルールと注意点

フォルダ・ファイル名

フォルダ・ファイル名は、半角英数字で名付けることが原則とされています。テストフォルダの五番目のファイル名に名前をつけるとするならば
・test05 ・test-05 ・test_05
などの付け方がわかりやすく、また見やすくなります。注意点として、全角英数字、スペース、日本語、数字の0から始まる名前は、データが破損したり、うまく読み込みがされない場合があるので気をつけましょう。また、名付けに使用できる記号は「-(ハイフン)」「_(アンダーバー)」「.」です。

作成場所

作成したフォルダやファイルは、移動させた階層やフォルダの場所によってはリンクが切れてしまう可能性があるので、一度作成した場所からはできるだけ動かさないようにしましょう。

データの読み取り順

WebブラウザはHTMLを通常上から下に順番に行を読み込みます。
この動作はHTMLコードを上から順に文法に則っているかチェックしながら解析する「HTMLパース」というシステムによって行われています。
script、cssに優先順位はなく、HTMLに記述されている順番通りに読み込まれています。
外部ファイルを読み込む箇所に到達すると解析を一旦停止し、外部ファイルのダウンロードと、外部ファイル内に記述された処理の実行を優先します。
script要素があると、Webブラウザはscript要素の中身を解釈し実行を終えるまで次の要素の処理に進みません。
ライブラリや処理の大きいJavaScriptを上部に書くと読み込みに時間がかかり、文書構造を整形するCSSを下部に書くのもスタイルの反映があとになり、結果読み込みに時間がかかります。

例としてこのように、HTMLデータのheadタグに記述されているcssデータが先に、bodyの閉じタグ上部に書かれているjs・libが後に読み込まれます。

XXX.htmlデータについて

まず、HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。
「マークアップ」とは文章の構成や、文章の役割を示すという意味の言葉です。

HTMLデータへの名付け

HTMLファイルへの名付けはTOPページ以外は、基本的に自由です。
index.htmlと名付けられたデータは、サイトのシステム上一番最初に読み込まれるという性質を持ちます。なので、TOPページの名前は原則index.htmlで固定です。また、画像のように同じフォルダ内に複数のHTMLフォルダが存在する場合は、フォルダ内で先に表示したいデータにindex.htmlと名付けると、自動的にそのデータを先に読み取りに行くのでSEO対策にも繋がります。