ホームページの階層構造〜ディレクトリでファイルを整理

ホームページの階層構造〜ディレクトリでファイルを整理

ディレクトリ=フォルダです

こんにちは、ホームページ制作のオイゾウです!
HTMLとCSSについての理解が深まってきたところで、ここからはパソコン内で作ったそれらのファイルをインターネット上に公開するための方法を説明していきたいと思いますが、その前にオイゾウのホームページ講座で学んでいる篠田さんとジョージさんを招き、「ホームページの構造」についてお話ししたいと思います。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
趣味の家庭菜園をテーマにしたホームページを立ち上げるため勉強中。
Apple製品に目覚め、携帯電話はiPhone、PCはMacBook Airを愛用。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
理容師として30年以上の経験を世の中に伝えるため、店舗ホームページを作りつつブログで情報発信する予定。

no name
HTMLとCSSについては理解できてきましたか?
no name
だいぶ分かるようにはなったけど、あとは実際にやってみて覚えていければいいかな。
no name
あ、そうそうアマゾンで本を買ったよ!

no name
篠田さん、前向きにがんばってますね!
どれどれ、アマゾンで検索と・・・
ホームページ入門書部門で売れ筋ランキング1位じゃないですか!
no name
読んでたらすぐにでもホームページ作れるような気がしてきたよ。
no name
っていうか篠田さん、アマゾンで買い物できるようになったんだ。
no name
最近はコレ(iPhone)ね。
本は結構アマゾンでいろいろ買ってるよ。
カミさんの影響でベニシアさんにハマっててさ、この前はこの「ハーブ便り」買ったけど、すごい勉強になるんだよね!
これからハーブを育てようと思ってるよ。

no name
篠田さんがベニシアさんにハマるなんて意外ですね!
読み終わったら貸してください(笑)。
ところでかなり話がそれたので戻しますが、では作成したHTMLやCSSファイル、それに画像を用意して、それらをインターネット上に公開するためにはどうすればよいと思いますか?
no name
サーバにアップするんじゃないかな?
no name
正解です!
そのためにはFTPという通信手段を行なう必要があるのですが、でもその前に覚えておいてほしいことがあります。
それは「ホームページの構成」です。
まずは以下の図を見てください。

ディレクトリを使わず理路整然としてない状態

no name
ここではフォルダのことをディレクトリと呼ぶことにします。
意味は同義と思っておいてもらえればとりあえずは問題ないです。
これらのファイルがサーバ上にあると考えて、トップページである「index.html」の他に2つのHTMLファイル、そして1つのCSSファイル、あと6つの画像ファイルが同じ階層に並んでいます。
今のこの状態というのはかなりファイル数の少ないホームページと言えますが、実際にはもっとファイルの種類も数も増えますので、その場合にディレクトリを使うことで構成をもっと理路整然とした階層による構造にする必要があります。
no name
そうしなければならない理由があるの?
no name
厳密に言えばこれでも問題なく表示することは可能ですが、一方でSEO対策(検索エンジからの評価が上がる)にもなります。
また、サーバに上げたこれらのファイルを1人で管理すると考えれば気にする必要はありませんが、複数人で管理するとなれば、やはり分かりやすい構造であるべきですよね。
さらに言えば、これは今後の話になってしまいますが、WordPressなどのCMSで構築する場合は、もっと深い階層になっていますので、この「階層構造」を理解できてないといけません。
ということで、ここでは2つの新たなディレクトリを作り、そこにCSSファイルと画像ファイルをそれぞれ分けて入れてみたいと思います。

ディレクトリを使って理路整然としているホームページ構造

no name
こうすることで、ファイルの種類ごとにディレクトリにまとめられ、とてもすっきりとした分かりやすい構造になるというわけです。
ちなみに決まりはありませんが、CSSディレクトリのディレクトリ名は「css」、画像ディレクトリのディレクトリ名は「images」とするのが一般的です。
また、HTMLファイルがもっと増えてくれば「index.html」以外をディレクトリに入れて1つ下の階層にした方が良いですね。
例えば「osusume.html」というHTMLファイルについて説明すると、まず今の階層(同じ場所)に「osusume」というディレクトリを作り、このディレクトリに「osusume.html」を入れて、ファイル名を「index.html」に変えます。
そうすることでとても分かりやすい構造になります。
no name
その「index.html」っていうのは、このファイル名じゃないといけないとか、何か決まりでもあるの?
no name
特にそういうわけではないですが、その階層の中でもし「index.html」というファイルがある場合は、そのファイルを表示するという仕組みになってるんです。
no name
じゃあさ、逆にその階層に「index.html」がない場合は?
no name
その場合、よく見たことがあると思いますが「404 Not Found」(ページが見つかりません)というエラーが出ます。
具体的に説明すると、ジョージさんが「http://oizo.jp」にアクセスしたとしますよね?
すると、実際には「https://oizo.jp/index.html」を表示しているんです。
なので、「https://oizo.jp/index.html」にアクセスしても同じことなんです。
ですがもしルートディレクトリ(一番上の階層)に「index.html」がなかった場合、「http://oizo.jp」にアクセスしても「404 Not Found」エラーになってしまいます。
no name
なるほど。
とにかく、ディレクトリを作って、CSSなら「css」というディレクトリに、画像なら「images」というディレクトリに入れて、トップページ以外のHTMLもディレクトリにした方がいいってことだよね。
この解釈で合ってる?
no name
はい、バッチリです!
では次回はこの流れで「相対パス」についての説明をしていきますので、引き続きよろしくお願いします!

ところで話は少しそれますが、ファイルとフォルダに関しては以前「ファイルとフォルダの関係、パソコンの整理整頓」で詳しく書いていますので、もしよかったら併せて読んで頂ければと思います。

フォローお願いします!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です