階層構造とリンクの作り方を学ぼう
今回のブログ記事では、フォルダの階層構造とリンクの作り方について解説します。特にWebサイト制作やファイル整理をする上で役立つ知識ですので、ぜひ最後までお読みください。
階層構造とは？
階層とは、フォルダの中にフォルダを作り、その中にまた別のフォルダを作るという、いわゆる「入れ子」構造のことを指します。このように階層構造をきちんと作ることで、ファイルの場所が明確になり、後の修正や管理が容易になります。
例えば、以下のようにフォルダを分けることが考えられます。
- 画像ファイル:
imagesフォルダ - 動物ごとのファイル: 各動物ごとにフォルダ（例：
lionフォルダ,elephantフォルダ）
階層構造のメリット
フォルダ分けには主に次のようなメリットがあります。
- 管理が容易: 必要なファイルをすぐに見つけられます。
- 修正が簡単: フォルダ内の構造が明確なため、修正がしやすいです。
- リンクが整理される: 各ファイルがどこのフォルダにあるかが明らかになるため、リンクの管理も簡単に行えます。
階層構造でのリンクの設定方法
さっそくリンクの設定方法について確認していきましょう。
フォルダ内のリンク
例えば、index.html から panda.jpg にリンクを張る場合、以下のように記述します。
<a href="images/panda.jpg">Panda Image</a>
この場合、「images フォルダの中に panda.jpg がありますよ」という意味になります。
フォルダを越えたリンク
一方、階層を越えてリンクを張る場合、例えば lion.html から images フォルダ内の lion.jpg 画像にリンクを張るなら、以下のように書きます。
<a href="../images/lion.jpg">Lion Image</a>
この「../」は「一つ上の階層に戻る」という意味です。このように記述することで、現在のフォルダから一つ上の階層に戻り、そこから images フォルダ内の lion.jpg を参照することになります。
デモンストレーション
次に、実際にデモを通じてこの概念を確認しましょう。
フォルダ構成の変更
まず、以下のようにフォルダを構成します。
imagesフォルダ: 画像ファイル（例：elephant.jpg,lion.jpg,panda.jpg）- 動物ごとのフォルダ（例：
lion,elephant,panda）
ここで、例えば index.html から panda.html にリンクを張る場合は、以下のようにします。
<a href="panda/panda.html">Panda Page</a>
フォルダ内のリンクの修正
例えば、panda.html でパンダの画像を表示するためには、以下のように記述すれば良いです。
<img src="../images/panda.jpg" alt="Panda Image">
この場合、「../」を使って一つ上の階層に戻り、images フォルダ内の panda.jpg を参照しています。
まとめ
フォルダの階層構造とリンクの設定方法について理解できましたでしょうか？この知識はWeb制作やファイル管理において非常に重要です。ぜひ、実際に手を動かして練習してみてください。
練習問題や課題も用意していますので、この記事を参考にして取り組んでみてください。それでは、次回の記事でお会いしましょう。
[音楽タグが存在していた場合、余計な「[音楽]」表記は排除しました]
タイムスタンプ
1 00:00:02,310 --> 00:00:05,000 [音楽]
2 00:00:03,609 --> 00:00:08,279 me
3 00:00:05,000 --> 00:00:14,009 [音楽]
4 00:00:08,279 --> 00:00:19,920 二軍
5 00:00:14,009 --> 00:00:26,609 今日はですね階層についてお勉強していきましょう
6 00:00:19,920 --> 00:00:27,850 8階層について回送また得たリンクの作り方ですね
7 00:00:26,609 --> 00:00:35,310 でへ
8 00:00:27,850 --> 00:00:39,990 まあ改装というのはフォルダ分けした後の状態のことを言うんですけれども
9 00:00:35,310 --> 00:00:42,820 フォルダーに入れてねフォルダをなんかも作って言って入れ子になってくるよとその
10 00:00:39,990 --> 00:00:47,440 階層と言うんですけれども
11 00:00:42,820 --> 00:00:54,820 フォルダ分け web の制作だとする必要があるんですね
12 00:00:47,439 --> 00:00:56,609 それはファイルのあるところが明確になりですねあの後の修正などもしやすくなります
13 00:00:54,820 --> 00:01:03,210 ので
14 00:00:56,609 --> 00:01:08,879 一つのフォルダーの中に色々フォルダーを作ってファイルを分けていきます
15 00:01:03,210 --> 00:01:12,609 たとえば今であればずうロッパフォルダーの中ににすべてがおさまっているんです
16 00:01:08,879 --> 00:01:15,009 けれどもこれをいろいろと
17 00:01:12,609 --> 00:01:20,730 わかりやすいように負けます
18 00:01:15,010 --> 00:01:23,810 例えば画像ファイルっていうのはイメージ図というフォルダーをつくりまして
19 00:01:20,730 --> 00:01:28,490 その中に納めます
20 00:01:23,810 --> 00:01:34,079 ライオンこれからライオンの種類が増えてきますのでそれライオン
21 00:01:28,489 --> 00:01:36,669 フォルダを作ってその中にライオン関連のファイルは入れていきます
22 00:01:34,079 --> 00:01:41,920 同じようにゾウム入れます
23 00:01:36,670 --> 00:01:46,150 こんな感じでですねえっ8すべてのファイルを
24 00:01:41,920 --> 00:01:48,079 適切なフォルダーの中に納めて管理する
25 00:01:46,150 --> 00:01:53,159 ですね
26 00:01:48,079 --> 00:01:57,789 でそれらを交互にリンクさせる必要があるわけです
27 00:01:53,159 --> 00:02:01,060 今日はこのリンクのさせ方の勉強なんですけれども
28 00:01:57,790 --> 00:02:07,500 例えば8そうですね
29 00:02:01,060 --> 00:02:13,289 index . html から panda . jp にリンクを張る場合
30 00:02:07,500 --> 00:02:19,650 今までは遠い使えそうだったのでえっと誰だね img 送水口0
31 00:02:13,289 --> 00:02:24,449 panda . jp 柄なんかを陰て競った一緒に書けばよかったんですけれども
32 00:02:19,650 --> 00:02:26,650 今回はですねイメージズフォルダーの中に入ったということでイメージ
33 00:02:24,449 --> 00:02:31,899 スラッシュと書きます
34 00:02:26,650 --> 00:02:34,110 このイメージんスラッシュっていうのがイメージフォルダーの中のという意味になるん
35 00:02:31,900 --> 00:02:34,110 ですね
36 00:02:34,610 --> 00:02:43,970 じゃあ今度はえっとライオンフォルダーの中に
37 00:02:39,379 --> 00:02:50,060 lion . age てるのか2つ第4という名前でば気らしいですけれども
38 00:02:43,969 --> 00:02:56,599 ライオンフォルダーの中に lion . ag メールが入ってますがそこから
39 00:02:50,060 --> 00:02:59,969 今度はイメージ図フォルダーの中に雷雲. jp 具を参照する場合
40 00:02:56,599 --> 00:03:06,900 画像にリンクを貼る場合どうするかというと
41 00:02:59,969 --> 00:03:10,990 一旦フォルダーを出ていただいてぜひ music folder の中に入っている
42 00:03:06,900 --> 00:03:15,750 ライオン. jp をご参照するみたいな書き方になります
43 00:03:10,990 --> 00:03:20,760 当確かというと1回フォルダを出るというのはドットドットスラッシュ
44 00:03:15,750 --> 00:03:23,020 でイメージ図フォルダーの中に入って lion . jp 具を表示すると
45 00:03:20,759 --> 00:03:28,060 ..スラッシュ
46 00:03:23,020 --> 00:03:31,170 一家フォルダーでてイメージズスラッシュイメージですフォルダーの中に入ってという
47 00:03:28,060 --> 00:03:31,170 ような書き方になります
48 00:03:31,490 --> 00:03:38,319 じゃあ
49 00:03:32,870 --> 00:03:41,769 今度はリンクですねファイル英俊ファイルのリンク
50 00:03:38,318 --> 00:03:42,849 lion . h てみる angel . sml に
51 00:03:41,769 --> 00:03:48,860 から
52 00:03:42,849 --> 00:03:51,269 index . html からライオンドット絵師ブルリンクを張る場合これは
53 00:03:48,860 --> 00:03:56,340 さっきの画像と同じように
54 00:03:51,270 --> 00:03:57,819 雷桜すら july を. html と書きますこれはインデックスと uc 部
55 00:03:56,340 --> 00:04:01,090 から見て
56 00:03:57,818 --> 00:04:05,518 ライオンドット柄占めるはライオンフォルダーの中でありますよね
57 00:04:01,090 --> 00:04:05,519 なのでこういう風な記述の仕方になります
58 00:04:06,280 --> 00:04:13,080 じゃあ今度は逆に lion . html から
59 00:04:10,300 --> 00:04:16,019 インできそっと愛媛て変更貼る場合
60 00:04:13,080 --> 00:04:18,660 これはどうするかというと
61 00:04:16,019 --> 00:04:23,550 ダンフォルダーを出て
62 00:04:18,660 --> 00:04:28,880 インディくそっド s ぶりリンクを張るということで撮っドドットスラッシュ衆院で
63 00:04:23,550 --> 00:04:28,879 9. html と書いてあげます
64 00:04:29,040 --> 00:04:37,379 単自分のフォルダを出ないとコインで競って一緒にないですからね
65 00:04:33,029 --> 00:04:38,069 lion . ac 女から見て自分はラインをフォルダーの中に入ってるんじゃない
66 00:04:37,379 --> 00:04:41,350 ですか
67 00:04:38,069 --> 00:04:44,379 なので一回その自分のフォルダを出ると
68 00:04:41,350 --> 00:04:46,090 そうしたらこのエフェクトといっしょ目があるという街
69 00:04:44,379 --> 00:04:47,249 こう書けます
70 00:04:46,089 --> 00:04:54,358 じゃあ
71 00:04:47,249 --> 00:04:58,480 次今度はライオン度と html から a れファンと.いい占める銀行貼る場合
72 00:04:54,358 --> 00:05:01,359 これはですねえっフォルダ同士
73 00:04:58,480 --> 00:05:06,150 フォルダの中同市にいる場合ですよね
74 00:05:01,360 --> 00:05:10,620 これは行ったんですねフォルダをでデー
75 00:05:06,149 --> 00:05:12,349 でエレファントフォルダーの中に入っているバンドとって閉めるを
76 00:05:10,620 --> 00:05:18,319 私鉄
77 00:05:12,350 --> 00:05:20,939 一旦掘る..スラッシュでれパーンとスラッシュエレヴァンドドット石分
78 00:05:18,319 --> 00:05:26,129 公開で上げます
79 00:05:20,939 --> 00:05:27,360 でまあまあこういうひとつフォルダーを出るって言うのはドットドットスラッシュって
80 00:05:26,129 --> 00:05:34,129 いうのを覚えておいてください
81 00:05:27,360 --> 00:05:34,129 でフォルダの中に入る場合はそのフォルダ名を指定してあげると
82 00:05:34,449 --> 00:05:40,689 スライドは以上になるんですけれどもじゃあこれからデモンストレーションもお見せし
83 00:05:39,339 --> 00:05:42,539 ますね
84 00:05:40,689 --> 00:05:48,780 では
85 00:05:42,540 --> 00:05:52,730 デスクトップにですねずうロッパというのを用意してますのでこれをドラッグしてサブ
86 00:05:48,779 --> 00:05:52,729 ライムテキストで開いてみましょう
87 00:05:54,100 --> 00:05:59,330 ん
88 00:05:55,670 --> 00:06:01,210 サブライムテキストでまぁ開いた状態で
89 00:05:59,329 --> 00:06:06,418 じゃあ
90 00:06:01,209 --> 00:06:06,418 ブラウザーでもですね一旦確認してみましょうか
91 00:06:07,300 --> 00:06:11,340 いろんなもうちょっと開いちゃっても
92 00:06:08,740 --> 00:06:13,730 んで閉じますね
93 00:06:11,339 --> 00:06:13,729 a 車
94 00:06:17,069 --> 00:06:25,060 このサブラムテキスト開いて陰でと html
95 00:06:21,949 --> 00:06:25,060 を開いています
96 00:06:27,579 --> 00:06:36,120 これは前回あの皆さんに作っていただいたものになりますので8リンクが貼られている
97 00:06:33,279 --> 00:06:36,119 んじゃないかなぁと
98 00:06:36,540 --> 00:06:41,830 パンダペーストから会ホームページとか
99 00:06:39,870 --> 00:06:44,009 大丈夫そうですね
100 00:06:41,829 --> 00:06:45,539 象とか
101 00:06:44,009 --> 00:06:49,030 はいはい
102 00:06:45,540 --> 00:06:51,810 じゃあこのですねフォルダーの中身
103 00:06:49,029 --> 00:06:55,959 というのを
104 00:06:51,810 --> 00:06:58,269 えっと変えてみますねちょっと分かりやすいこの表示で
105 00:06:55,959 --> 00:07:03,129 新規フォルダーで
106 00:06:58,269 --> 00:07:07,689 まずイメージズフォルダー画像はイメージフォルダーに入れますので
107 00:07:03,129 --> 00:07:12,899 エレファント. jp ぐらい温度と jpeg panda . jp 9 top
108 00:07:07,689 --> 00:07:12,899 . jp くっていうのはイメージ図フォルダーの中に入れちゃいましょう
109 00:07:13,069 --> 00:07:23,709 同じように新規フォルダー作っているアイオン
110 00:07:17,899 --> 00:07:23,709 入所新規フォルダーのパンが
111 00:07:24,720 --> 00:07:28,610 でえっとエレファント
112 00:07:30,620 --> 00:07:33,660 ファン
113 00:07:31,800 --> 00:07:39,150 と
114 00:07:33,660 --> 00:07:41,569 っていうのをですねそれぞれこう入れちゃいましょうかエールパーンとはここで来
115 00:07:39,149 --> 00:07:43,159 オウムはここで
116 00:07:41,569 --> 00:07:45,460 パンダは
117 00:07:43,160 --> 00:07:47,849 ここでどう
118 00:07:45,459 --> 00:07:52,918 フォルダー構成を変えました
119 00:07:47,848 --> 00:07:55,930 じゃあこれでどうなってるが a子の index . html を更新してますね
120 00:07:52,918 --> 00:08:00,899 するとまぁリンクがきれちゃってます
121 00:07:55,930 --> 00:08:00,900 これはそうなんですよねあのリンクがきれ当然です
122 00:08:01,319 --> 00:08:05,360 index . html を
123 00:08:03,889 --> 00:08:09,460 見ているでしょうか
124 00:08:05,360 --> 00:08:11,949 index .へしゃべれど今画像リンクこの旧嫁が
125 00:08:09,459 --> 00:08:19,149 リンク切れちゃってたわけです
126 00:08:11,949 --> 00:08:22,180 で index . html から見てえっとこの top . jp グっていう
127 00:08:19,149 --> 00:08:25,149 のはこのイメージすフォルダーの中であるじゃないですか
128 00:08:22,180 --> 00:08:29,040 このイメージフォルダーの中にあるので
129 00:08:25,149 --> 00:08:30,810 ここにはイメージ図スラッシュと書いてあります
130 00:08:29,040 --> 00:08:34,019 すると
131 00:08:30,810 --> 00:08:35,538 じゃあこの更新ボタンを押しますね出てきます
132 00:08:34,019 --> 00:08:39,948 このようにですね
133 00:08:35,538 --> 00:08:40,759 何でにフォルダーの中のとかって書いてあげるとちゃんと表示されるようになるんです
134 00:08:39,948 --> 00:08:46,609 ね
135 00:08:40,759 --> 00:08:50,019 心優の画像のまあリンクがパスとかって言いますけれども
136 00:08:46,610 --> 00:08:56,080 パスをしっかりと書いてあげる
137 00:08:50,019 --> 00:09:01,519 じゃあ今度はトップページは ok のよう寸でパンダページ見てみたパンダを
138 00:08:56,080 --> 00:09:06,790 クリックするとそうするとパンダページ見つかりませんよと言われてしまいました
139 00:09:01,519 --> 00:09:10,559 じゃあ見てみましょうか陰でクソッと愛媛から見て panda . s bell は
140 00:09:06,789 --> 00:09:14,599 このパンダフォルダーの中におります
141 00:09:10,559 --> 00:09:19,549 なのでさっきと同じように
142 00:09:14,600 --> 00:09:22,580 ここの部分ですねこの16行目のパンダでリンク貼ってあるところを
143 00:09:19,549 --> 00:09:25,889 たんだスラッシュと書いてあります
144 00:09:22,580 --> 00:09:26,930 これパンダフォルダーの中のパンダ.1名
145 00:09:25,889 --> 00:09:30,259 じゃあ
146 00:09:26,929 --> 00:09:32,239 トップページに戻って更新ボタンを押して
147 00:09:30,259 --> 00:09:35,958 でパンダクリックしています
148 00:09:32,240 --> 00:09:38,710 するとパンが出ましたけれども今度はパンダー
149 00:09:35,958 --> 00:09:41,739 画像が出てません
150 00:09:38,710 --> 00:09:45,970 画像が出てないのはこれ一体どうしてでしょうか
151 00:09:41,740 --> 00:09:49,919 まフォルダ分けしたからですよね海藻が違うから出てきません
152 00:09:45,970 --> 00:09:49,920 ちょっと分かりやすいようにこの
153 00:09:50,089 --> 00:10:00,600 フォルダー view をちょっと変えますけれども
154 00:09:52,860 --> 00:10:03,960 panda . h てみるから見ると目的の番だ. jp くっていうのは一つ回送
155 00:10:00,600 --> 00:10:09,670 上がったこの買えそうですよねこの階層があった
156 00:10:03,960 --> 00:10:15,610 イメージ図フォルダーの中のパンダ. jp くっていうことになります
157 00:10:09,669 --> 00:10:17,409 パーンなど体してるから見て panda . jp 9は1倍そう上がって命術
158 00:10:15,610 --> 00:10:23,200 フォルダーの中にあるってこと
159 00:10:17,409 --> 00:10:25,278 これを支えてあげましょうかじゃあバンダフォルダーの中の番だ撮ったりしてみる開き
160 00:10:23,200 --> 00:10:28,150 まして
161 00:10:25,278 --> 00:10:32,470 この部分ですよね
162 00:10:28,149 --> 00:10:33,519 パンダ取ってしてみるから見て panda . jp が一つ回数判る. rohto
163 00:10:32,470 --> 00:10:37,710 スラッシュ
164 00:10:33,519 --> 00:10:39,600 そしてイメージズフォルダーの中にありますので
165 00:10:37,710 --> 00:10:42,730 非公開で上げます
166 00:10:39,600 --> 00:10:44,899 これでじゃあ見てみましょうか
167 00:10:42,730 --> 00:10:48,310 入れましたねっ
168 00:10:44,899 --> 00:10:51,789 これで海藻がうまくいきました
169 00:10:48,309 --> 00:10:57,009 ではではパンダとと jpeg から今度は
170 00:10:51,789 --> 00:10:58,240 らいよんに飛んでみましょうから栄養をクリックするとこれもまあうまくいきませんよ
171 00:10:57,009 --> 00:11:02,419 ね
172 00:10:58,240 --> 00:11:08,480 当然ですね海藻が違いますのでじゃあまた見ているでしょうか
173 00:11:02,419 --> 00:11:10,309 バンダー. age てみるから見て lion .いっしょみれば一つ回送
174 00:11:08,480 --> 00:11:14,310 上がって
175 00:11:10,309 --> 00:11:18,818 雷桜フォルダーの中にあります
176 00:11:14,309 --> 00:11:21,768 そう書いてあげましょうさっきと同じです
177 00:11:18,818 --> 00:11:28,208 この部分ですよねこの部分に
178 00:11:21,769 --> 00:11:30,679 一つ..すらし買えそうなってライオンフォルダーの中
179 00:11:28,208 --> 00:11:35,539 ライオンスラッシュと書いてあげる
180 00:11:30,679 --> 00:11:38,689 そうするとさっきの更新しましょ更新
181 00:11:35,539 --> 00:11:45,179 ライオンをクリックするとラインを受けました
182 00:11:38,690 --> 00:11:49,350 まあ同じようにここまで電気消えてますんで雷桜もじゃあ財布直してあげましょうか
183 00:11:45,179 --> 00:11:53,189 じゃないよ雷桜をダブルクリックして開いて
184 00:11:49,350 --> 00:11:59,759 雷様はライオンさっきの快走で言うと
185 00:11:53,190 --> 00:12:01,779 雷雲奪って締めから見て雷雲. jp 部は一つ階層があったイメージ州ボルダーの中
186 00:11:59,759 --> 00:12:08,208 に入っています
187 00:12:01,778 --> 00:12:11,259 じゃあここからです狙いを治しましょうね雷様は一つ回送上がった
188 00:12:08,208 --> 00:12:13,739 イメージ図フォルダー動画ですね
189 00:12:11,259 --> 00:12:18,750 画像はイメージの中であります
190 00:12:13,740 --> 00:12:20,870 のでイメージフォルダーの中にあるから follow と更新してみると空いてまし
191 00:12:18,750 --> 00:12:20,870 た
192 00:12:23,000 --> 00:12:28,570 8
193 00:12:24,460 --> 00:12:35,350 海藻のお話に関しては以上になります
194 00:12:28,570 --> 00:12:39,820 でですねここら辺の考え方っていうのはこれからすごく大切になってきます4巻ほんで
195 00:12:35,350 --> 00:12:46,480 今日なのでしっかりと押さえておいてください
196 00:12:39,820 --> 00:12:48,410 下の方にですねこの練習問題を用意しておきましたのでぜひ書の練習問題
197 00:12:46,480 --> 00:12:50,440 あとは行ってみよう
198 00:12:48,409 --> 00:12:55,949 課題もねやってみてください
199 00:12:50,440 --> 00:12:55,950 それではまた次回お会いしましょう願いします
200 00:12:59,870 --> 00:13:04,538 [音楽]