HTML入門講座|階層ついて学ぼう

HTML

階層についてのお話

この記事で学べること
  • ファイルの階層 / 階層別のファイルアクセス

うさタブ
うさタブ

今回はホームページの階層について学んでいくッピよ~

ユウキ
ユウキ

【階層】?

うさタブ
うさタブ

うーん、そうッピネ・・・

うさタブ
うさタブ

コンピュータにはたくさんのファイルがあって、

そのファイルを管理しやすくするために、フォルダを作ってまとめるッピね?

うさタブ
うさタブ

あれを別な言い方をすると、

階層】というッピ!

ユウキ
ユウキ

へ~ 知らなかった

同じ階層ファイルの呼び出し方

同じ階層ファイルの呼び出し方
同じ階層ファイルの呼び出し方
うさタブ
うさタブ

まず同じ【階層】のファイルの呼び出し方を教えるッピネ!

うさタブ
うさタブ

それは、同じ階層にあるファイルを呼び出すために

必要なもの・・・それは【 ./ 】を足して

.ドット / スラッシュファイル名.拡張子】で呼び出すッピ!

うさタブ
うさタブ

例えば【C-1.html】→【C-3.jpg】の画像を表示したい場合

<img src="./C-3.jpg" />

と入力するッピよ~

サンプルコード
<html>
<head></head>
<body>

<img src="./C-3.jpg" />

</body>
</html>

ユウキ
ユウキ

え、わざわざ【 ./ 】をつける必要がある?

これつけなくても、今まで表示できてたじゃん・・・

うさタブ
うさタブ

だけどこれは、他の階層のファイルを呼び出すために、わかりやすく表示したものッピよ~

うさタブ
うさタブ

次は、ひとつ前の階層のファイルを呼び出す方法を教えるッピ!

それを知ったらこの【 ./ 】の意味がわかるッピネ!

ひとつ前の階層のファイルを呼び出す

うさタブ
うさタブ

上の画像を例に説明するッピ!

うさタブ
うさタブ

たとえば、

フォルダC】に入っている『C-1』ファイルから

前の階層のファイル『A-1』を呼び出す場合

うさタブ
うさタブ

画像ならば

<img src="../A-1.jpg">

となるッピネ!

サンプルコード
<html>
<head></head>
<body>

<img src="./C-3.jpg" />

</body>
</html>

ユウキ
ユウキ

へ~! これは知らなかった!

../ 画像名 . 拡張子】で 『前のフォルダにある画像を呼び出す』ことができるんだな!

ひとつ前のフォルダの中にある別ファイルを呼び出す

うさタブ
うさタブ

次は、C-1』から『B-2』のファイルを呼び出す場合

C フォルダ】を一度上がって、

B フォルダ】にアクセスするッピ!

うさタブ
うさタブ

画像ならば

<img src="../B/B-2.jpg">

となるッピネ!

ユウキ
ユウキ

なんか色々複雑なんだな・・・

学習のまとめ
  • ./ ファイル名 . 拡張子』で今のフォルダと同じ場所のファイルを呼び出すことができる
  • ../ファイル名 . 拡張子』で一つ前の階層を呼び出すことができる
  • ../ フォルダ名/ファイル名. 拡張子』で一つ前の階層別フォルダのファイル呼び出すことができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました