どうもこんばんは、ロムです
前回に続いてHTMLの初級編をレクチャーしていきます！
この記事は以下の方にオススメです
・HTMLをこれから勉強しようとしている人
・勉強したいけど有料講座とか通いたくない人
・たまにHTML使っているけど詳しいことはわからない人
この記事を読むとこんなことがわかります！
・Webサイトのかなりざっくりした中身がわかります
・HTML、CSS、Javascript、Imageの違いが何となく分かります
HTMLは知ってるけどCSSとかJavascriptは初めて聞いた！
HTMLを書く章に移る前に！
HTMLあたりの予備知識をゆっくり説明するよ！
この記事で説明するのは４つのファイルについて
実はWebサイトはざっくりいうとこの４つのファイルで出来ている！
これらを今日は勉強していきます
- HTML…文字とか書いてあるファイル
- CSS…見栄え、デザインを決めるファイル
- Image(画像)…絵やアイコンのファイル
- Javascript…動きを決めているファイル
早速詳しくやっていきましょう！
Webサイトはひとつの箱をイメージすると分かりやすい！
これはWebサイトの構造を簡略化したものだよ
Webサイトってこの4つのファイルで出来てるんだね
HTMLとは何か？
CSSとは何か？？
突然そんなことを説明してもまだ勉強していないのでわからないはずです！
Wikipedia読んでも結局いまいちピンとこないんだよね…
なのでこの記事ではわかりやすさを優先して、このイメージを使っていくことにします！
HTMLは？
HTMLはWebサイトで基盤になるファイルのこと！
ただそれだけではほぼ文字だけで面白みがなく、殺風景なんです
前回少しHTMLファイルを作ってみたと思うけど、とってもダサダサページができたと思う
↓↓(こんなやつ)
試しに例として、
ディズニーのHPからCSSやJavascriptやImageを抜いてHTMLだけにするとこんな感じになるよ
ビフォー
↓↓
アフター
文字だけになった！！
ディズニーのHPは思いのほか画像がメインだったみたい
だからHTMLだけにするとかなり少なめだね
いかがでしょうか？
HTMLのイメージはなんとなくつかめたでしょうか？？
HTML…文字とか書いてあるファイル
CSSは？
CSSはいわゆるそのサイトのデザイン的なところ！
見栄えをよくするためのファイルだよ！
まぁ実際にHTMLとCSSさえあればそれなりにWebサイトだよ
さっきのHTMLだけのディズニーHPにCSSを足すとこんな感じ…
ビフォー
↓↓
アフター
どっちも真っ白でよく見えないけど、ディズニーのタイトルロゴとかヘッダーのアイコンがないね！あとど真ん中の画像もない！
いま足りないと感じてるところはすべて画像だよ！
ディズニーのHPはけっこう画像(Image)が使われてるからね
CSS…見栄え、デザインを決めるファイル
Imageは？
Imageっていうのはイメージ、つまり画像のこと！
画像をたくさん使うサイトもあれば、あまり使わないサイトもあるよ！
全体の工程から考えると「仕上げ」の部類かな
さっきまでのディズニーの画像にImageを付けるとこんな感じになるよ！
ビフォー
↓↓
アフター
画像あると全然違うね！
ディズニーだとサイトに写真あった方が分かりやすい業種だしね
けっこう画像を多用してるんだと思うよ！
でもちょっと…真ん中の画像がぼやけてる？？
すごい！気づいたね！
その違和感は次に説明するよ！
Image(画像)…絵やアイコンのファイル
Javascriptは？
あれ、もう完成じゃないの？？
Javascriptなんかなくてもサイトは完璧にできてるじゃない？
実はJavascriptだけ少し特殊なんだ
Javascriptはパっと見のサイトの見た目にあまり影響ありません
ではどのようなところに使われているのか？
こちらです！！！
これかーーーー！！
めっちゃ動くやつ！テンション上がるね！
Javascriptはブラウザの設定でOFFにできるんだ
みんなのパソコンでも気づかないうちにOFFになってることがあるかもしれない！
まぁ、OFFにしちゃっても見え方にあまり影響がないことが多いから、OFFにできる機能があるともいえる！わりと不憫なファイルなんだ
Javascript…動きを決めているファイル
まとめ
長くなってしまいましたが分かりましたか？？
次はこの４つのうちのHTMLについて深堀していくよ！
徐々にコードを書く段階に入るから注目だよ！
おわり
