HTML & CSS 初級編 HTMLに触れてみよう！を深掘り 勝手に解説

どーも。さいんです。

Noteとの住み分けに少し困り始めてるWebエンジニアです。

独学でプログラミングを勉強している人の多くがProgateやドットインストールを使って勉強していますよね？

実際にWebエンジニアとして業務を行い、比較的年収も多めにもらっている私が、実際にProgateやドットインストールを試してみて、

• ここはちゃんと深掘りした方があとで役立つのになー
• ここってそんなにサラッとでいいんだ！？
• あれ？これって今じゃそんなに使わないよね

と思うことが多々あったので、それを実際に勝手に解説しちゃおうっていう企画です。

色々説明するよりみてもらった方が早いので、早速本編です！

それでは、すでにプログラミングの学習を始めているからも、これからの方もProgateのHTML & CSS 初級編を開いて、このNoteを横目に勉強していきましょう！

HTML & CSS 初級編

まずみなさんがプログラムを勉強するときに、出会うであろう講座がこの

HTML & CSS 初級編

まずはこの講座を図を用いて解説して、みなさんの反応をいただけたらなと思っています！

もし、よかった！やこの図がわかりにくいっていうのがあれば、Twitter(@1000sideincome)にどしどしご意見ください。

1. HTMLに触れてみよう！

index.htmlってなに？

index.html　ってなんぞや？

さらっと見逃した方も、いらっしゃるかもしれませんが、ここにあれ？っと思わった方は、なかなかするどいです！

まずは、基本の構成ですが、ファイル名と拡張子という2つのブロックに分けられ、それを.(ドット)でつないでファイルの名前が構成されます。

ファイル名

ファイル名とは基本的に自由につけることができますが、ファイル名だけ読んでどんなものなのか、ざっくり中身が想像できるものをつけるのがいいです。

そして、indexというファイル名だけはとても重要な意味を持ちます。
indexについては後ほど詳しく解説します。

拡張子

拡張子は、ファイルのタイプを表します。

.htmlだとホームページのファイルになりますし、.mp3だと音楽ファイルになります。.mp4だと動画だよねと拡張子を見るとどんな種類のファイルなのかがわかるようになっています

ズラーっと書いてみましたが、まだまだまだまだ種類があります。頻繁に目にする拡張子があれば、調べておくといいです。

その際の調べ方は

○○ 拡張子

で検索すると、ほとんどのものはすぐに説明が出てきます。

もし、test.csv というファイルに出会ったら

csv 拡張子

でググればOKです。

index.htmlの役割

そして、今回の講座で作成しているindex.htmlですが、indexという名前のhtml(ホームページ用)ファイルとなります。

このindexにはとても重要な意味があり、index.htmlとindex.phpだけは作る際に意味を意識する必要があります。

このindex.htmlはホームページにアクセスした際に、勝手に呼ばれるページになります。

もし、このルールがない場合、受付のないキャンプ場やホテルのようにホームページにアクセスしたときに、どのページを出していいかわからなくなってしまいます。

しかし、Web全体でindex.htmlがあれば、それを表示するというルールを決めることで、アドレスにアクセスした際にindex.htmlが受付のような役割をしてくれます。

そのため、index.htmlにはこの次にどのページに行けばいいかのコンテンツとなるようなトップページやランディングページのようなコンテンツが必要となります。

まとめ

今回は第一回でもあるProgateのHTML & CSS 初級編のHTMLに触れてみよう！をさらに深掘りをしてみました。

勉強する際は本当にサラッとただ真似してスルーしてしまうような、index.htmlですが意外とここを無視してしまい、将来苦労している人を多くみてきました。

なぜ、index.htmlというファイルなのか、どういった役割を持っているのか、みなさんはすでに知っていますよね？

今後もProgateではindex.htmlというファイルを何度も触れることになると思います。

その度に、あーindex.htmlはこういう意味があったなー。と思い出していただき、別の拡張子が出たときは是非ググってみてください。