HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】
初心者向けにHTMLのフォルダ・ディレクトリ構造について解説しています。ディレクトリの操作とファイルパスの基本、テキストファイルとバイナリファイルの違い、ディレクトリの作成方法について学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
フォルダ・ディレクトリ構造について詳しく説明していくね！
お願いします！
目次
ディレクトリとは
ディレクトリとは、パソコンのフォルダと同義です。
パソコンのフォルダには、テキストファイルやバイナリファイルなどのファイルを入れられます。
またフォルダの中に複数のフォルダを作成している場合も少なくありません。
unixやmacでは、ターミナルにコマンドを打ち込み、新しいフォルダを作ることが可能です。
その場合には、mkdirコマンドを使い、mkdir「Make ディレクトリ」＝ディレクトリを作るという意味のコマンドを使いましょう。
そのため、unix環境などではフォルダのことをディレクトリと呼んでいます。
ディレクトリの中にさらにディレクトリを作ることもでき、ディレクトリはOSの中でツリー上の階層構造として記録されることになるでしょう。
ディレクトリ構造とファイルパス
windows環境ではフォルダをダブルクリックをすると、中のフォルダやファイルを確認できます。
ディレクトリの構造から見ると、ディレクトリがツリー状になった階層構造の下位のディレクトリを参照しています。
また、ツリーの構造の一番上は、windowsの場合はcドライブです。
macの場合にはMacintochHDがそれにあたり、一番上の階層から下位の階層を見ていく形式です。
下位にある特定のファイルにアクセスする場合には、ディレクトリ名とファイル名の連ねた「ファイルバス」で指定しています。
マウス操作ではなくターミナルから特定のファイルにアクセスしたい場合にはファイルパスを打ち込みます。
windowsの場合にはcドライブからフォルダ名を連ねているため、下記のようにパス名で特定のファイルがある場所を表しましょう。
「c:¥フォルダ名¥フォルダ名￥ファイル名.txt」
また、unix環境の場合には、パス名でファイル場所を表しています。
「/Users/フォルダ名/フォルダ名/ファイル名.txt」
ファイルの種類とディレクトリ配置
ファイルの種類は大きく分けて２種類しかありません。
テキストファイルとバイナリファイルです。
テキストファイルにはファイル名の末尾が.txtや.csvという拡張子になっているものなどが代表例です。
対して、バイナリファイルは下記のようにそれぞれデータ形式が違います。
- 画像ファイル
- 動画ファイル
- 音声ファイル
そのため、どのようなファイルなのかを判断するには各拡張子を確認する必要があります。
これらのファイルはディレクトリに入れることになるもの、ファイルの構造を意識して配置しなければなりません。
一番上の階層を「ルート階層」と呼び、その直下の階層が第一階層、さらにその下の階層が第二階層となります。
ディレクトリを作ってみよう
ディレクトリはマウス操作の右クリックなどでも作成できるものの、今回はプログラミングコードを記述して作成しましょう。
windowsのコマンドプロンプトなどのターミナルを開きます。
現在の開いているディレクトリを確認するために下記のように入力しましょう。
pwd
その際、下記のようにディレクトリ名が分かります。
/Users/test1/test2
test2のような末尾に表示されている表記が現在開いているのディレクトリ名です。
これをカレントディレクトリと呼び、カレンディレクトリの直下に新しいディレクトリを作成します。
mkdir test3
このように実行すると、test2の下の階層にtest3のディレクトリが作成されています。
確認するためには以下のコマンドを実行します。
ls
以下のように返ってきていればディレクトリの作成は成功です。
「/Users/test1/test2/test3」
執筆してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
HTMLのフォルダ・ディレクトリ構造がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
