HTMLの理解

2024/03/27

エンジニアインターン

前回までの勤務ではどのファイルにどんな内容が入っているのか、設定はどこで行えばよいのか、
という大雑把な視点でツールの理解に努めていましたが、今回はコードレベルで見ていきました。
今日はとりあえずHTMLの概要の理解を綴ろうと思います。

HTMLとは

Hyper Text Markup Language の頭文字をとったもので、文をタグで囲むことで文章を整形できます。
Webアプリ、Webサイトの開発やHTMLメールの記述に使われます。

タグとは

何かWebサイトを開いてみてください。文字の大きさを見てみると、全て同じ大きさではないと思います。
例えばタイトルが一番大きくて、見出しはその次くらいに大きい、というのが普通ではないでしょうか。

このように、その文の役割を「タグ付け」しておくのが「タグ」です。服に例えたら学生が学生服を着て、

警察官が制服を着ていて、サラリーマンはスーツで、、、といった感じでしょうか。

クラスとは

クラスというのはまさしく小学校や中学校のクラスと同じです。運動会なんかでも、同じクラスの人は

同じ色のハチマキを巻きますよね。それと同じで、文字の色を決めるときにはクラスの色を決めれば、その

クラスの中に書いてある文の色を一気に指定できちゃうわけです。

では実際に見てみましょう。

▲HTMLのコード。難しいことは抜きにして、<h1>～</h1>に「h1タグ」が付いています。<div>～</div>に「divタグ」が付いています。h1タグの中にbigクラスのdivタグがあり、h2タグの中にsmallクラスのdivタグがあるのが見えれば満点。

▲HTMLで書いた文の色や大きさ、配置を決めるCSSのコード。h1は40ピクセル、bigは赤、h2は青、smallは20ピクセルと指定しました。

ちなみにh1タグの付いた文はデフォルトの大きさが48ピクセル、h2タグは36ピクセルです。
【クイズ】さて、どんなWebサイトが出来上がるでしょうか？次回の僕の投稿をお楽しみに。