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という拡張子になっているものなどが代表例です。
対して、バイナリファイルは下記のようにそれぞれデータ形式が違います。
- 画像ファイル
- 動画ファイル
- 音声ファイル
そのため、どのようなファイルなのかを判断するには各拡張子を確認する必要があります。
これらのファイルはディレクトリに入れることになるもの、ファイルの構造を意識して配置しなければなりません。
一番上の階層を「ルート階層」と呼び、その直下の階層が第一階層、さらにその下の階層が第二階層となります。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
ディレクトリを作ってみよう
ディレクトリはマウス操作の右クリックなどでも作成できるものの、今回はプログラミングコードを記述して作成しましょう。
windowsのコマンドプロンプトなどのターミナルを開きます。
現在の開いているディレクトリを確認するために下記のように入力しましょう。
pwd
その際、下記のようにディレクトリ名が分かります。
/Users/test1/test2
test2のような末尾に表示されている表記が現在開いているのディレクトリ名です。
これをカレントディレクトリと呼び、カレンディレクトリの直下に新しいディレクトリを作成します。
mkdir test3
このように実行すると、test2の下の階層にtest3のディレクトリが作成されています。
確認するためには以下のコマンドを実行します。
ls
以下のように返ってきていればディレクトリの作成は成功です。
「/Users/test1/test2/test3」
執筆してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
HTMLのフォルダ・ディレクトリ構造がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
