はじめに
みなさんこんにちは、torihaziです。
一応去年、スクールで一通り学んでみたのですが
なんだか不安だったので書き残してみることにしました。
十分理解していれば爆速でアウトプットできるはずなので
またか。。と思わずさっさとやってしまいます！！
それではいってみましょう！！
HTML の基礎
HTMLはwebページを作る際の骨格を作ることができます。
HTMLという言語でファイルを記述し、
それをブラウザに読み込ませるとwebページとして表示させることができます。
ただここで "言語"としましたが、HTMLはよくあるプログラミング言語ではありません。
マークアップ言語と呼ばれるものです。
ただ書き方はあるのでそのやり方に則った方法で記述する必要があります。
それではこれからその書き方やHTMLの考え方について説明していきます。
タグと要素
HTMLで書いていく上で基本単位となるものがこのタグになります。
<h1>タイトル</h1>
このような形を見たことはないでしょうか。
web業界を志した人ならそうである人がほとんどのはずです。
ではここで問題です。
- タグとはなんでしょうか。
- 要素とはなんでしょうか。
この2つの問いに対して何も見ずに自分の言葉で言えますか？
辞書的な意味を覚えてもいいですが、しっかり腹落ちした理解をしていますか？
答えは下記です。必要に応じてご覧ください。
タグとは
不等号<>で囲まれたかたまりのことです。
先の例で言うと<h1> と</h1>がタグになります。
ちなみに<h1>は開始タグ、</h1>が閉じタグと呼びます。
タグの中に書かれているh1というような文言はタグ名と呼び
このh1は見出しを表すタグになります。
要素とは
開始タグと閉じタグで囲まれた1まとまりのブロックのことです。
(※一部のような閉じタグを必要としない例外がありますが、基本は上記でOKです)
この後記載しますが、要素は子や親を持つことができます。
どういうことかというと要素の中に別の要素を追加することが可能だ、ということです。
孫要素とか聞いたことはないでしょうか。それです。
ちなみに今回のようなh1のまとまりのことをh1要素なんて言ったりもします。
CSSの基礎
CSSはHTMLで作成した要素を装飾することができる言語でスタイルシート言語などと呼びます。
よく言いますよね。
HTMLだけだと見た目が寂しいものしかできないけど、CSSを使えば色彩豊かになる
CSSを使えば
- 文字色を変えたり
- 文字を大きくしたり
- マウスを重ねたら色が白くなったり
- ・・・
なんてことができるようになります。
プロパティとセレクタについて
さてまたもや、質問です。
CSSにおけるプロパティとセレクタとはそれぞれなんでしょうか。
どちらもよく聞くかと思います。
先ほどのh1タグをCSSで少し装飾してみるとすると
h1 {
font-size: 12px;
}
こちらも見たことある方が多いのではないでしょうか。
ではこの中でプロパティ、セレクタはどれでしょうか。
セレクタとは
そのためHTML要素名や後述するクラス名などが入ります。
cssファイルに記載するときは
セレクタ名 {
プロパティ: 値;
}
のように{}で囲む必要があります。
プロパティとは
プロパティは、指定したセレクタに適用するスタイルのことです。
文字の大きさを変えたい、文字の色を変えたいなどいろいろありますよね。
それぞれに対応したスタイルを指定することによって見た目を変更することができます。
プロパティはプロパティ値(変化の具合を表す数値や文字列のこと)を指定することによって
自分好みの見た目に変更することができます。
終わりに
流石にこのくらいは今更やる必要がないと思うので
次からは逆引きのような形でやっていきたいと思います。
