HTMLとCSSの基本構造はシンプルです。難しく考える必要はありません。
自動車に例えると、
- 自動車の部品（CSS）
- 自動車のパーツ（HTML）
という感じで覚えると整理しやすいと思います。
自動車の製造過程は細かい部品（ネジ・鉄・ポンプ等）を合わせることで一つのパーツ（エンジン・燃料タンク等）を組み上げます。
細かい部品を集めて自動車のパーツを組み上げて、パーツを配置し、１つの自動車を完成させます。
ここでの細かい部品はCSSで、パーツはHTMLを示し、完成された１つの自動車は１つのページのことを指しています。
このページではHTMLとCSSの基本構造について解説しています。
HTMLとCSSの基本構造
冒頭で少し触れました。
HTMLとCSSの基本構造としては、HTMLとCSSの２つの言語の集合体で１つのページを完成させます。
- HTML（HyperText Markup Language）
- CSS（Cascading Style Sheets）
HTML言語の中に直接、CSSの内容を書き込むことも可能ですが、多くの場合はHTMLに外部データであるCSSを読み込むことで機能させます。
これは、別々のファイルで管理することでWebサイトの作り手の管理性を向上させるためです。
また、HTMLとCSSの中には「要素」「プロパティ」「値」「セレクタ」「属性」「タグ」と、幅広い用語が存在します。この用語の多さこそ、Webプログラミングをややこしくする一つの原因だと筆者は感じています。
これらの用語を理解することができれば、HTMLとCSSの記述が気持ち的に楽になるはずです。
要素・タグ・プロパティ・値・セレクタ・属性の意味
冒頭で解説した通り、HTMLは自動車の１つのパーツで、CSSは１つのパーツを組み上げる上で必要な部品と紹介しました。
これから紹介するのは、１つのパーツを組み上げる上で必要な部品の更なる部品。
つまり、ネジを製造する上で必要な部品です。
HTML＆CSSを書く上で覚えておきたいのは以下の用語の意味です。
- HTML言語
- タグ
- 要素
- 属性
- CSS言語
- セレクタ
- プロパティ
- 値
HTMLとCSSでは使用する用語が異なります。
というより、それぞれを分けた方が理解が早いと思います。
これらの違いと意味について紹介していきます。
HTML（HyperText Markup Language）
HTMLではタグの開始からタグの終了までを１つの文として数えます。
それぞれに使われる用語と意味は以下の通りです。
タグ
HTMLの基本的な書き方は以下の通りです。
<b>文字を書く</b>上記のソースコードの<b>と</b>のそれぞれがタグと呼ばれています。
<b> 開始タグ</b> 終了タグこのように開始タグは<b>、終了タグはスラッシュを付けて</b>と表記されます。
要素
HTMLの要素はタグの始まりから終わりまでを指します。
例えば、
<b>文字を書く</b>このように開始タグ<b>から内容を挟み、終了タグ</b>に至るまでの間が要素と呼ばれています。
属性
HTMLにおける属性とは開始タグの間に入力する内容のことを指します。
例えば、
<b class="sample">文字を書く</b>上記のような要素があるとします。
この中の属性は、以下に該当します。
class="sample"属性には様々な種類があり、この場合は「クラス属性」を利用しています。
CSS（Cascading Style Sheets）
CSSではプロパティと値を反映したいセレクタに指定します。
それぞれに使われる用語と意味は以下の通りです。
セレクタ
CSSにおけるセレクタは以下の通りです。
セレクタ {
●●：▲▲;
}この「セレクタ」と書かれた部位の単語をセレクタと呼びます。
例えば、
.sample {
●●：▲▲;
}上記の例で言うと「.sample」がセレクタにあたる部分です。
プロパティ
CSSにおけるプロパティは以下の通りです。
●● {
プロパティ：▲▲;
}この「プロパティ」と書かれた部位の単語をプロパティと呼びます。
例えば、
●● {
color：▲▲;
}上記の例で言うと「color」がプロパティにあたる部分です。
値
CSSにおける値は以下の通りです。
●● {
●●：値
}この「値」と書かれた部位を値と呼びます。
例えば、
●● {
▲▲：12px;
}上記の例で言うと「12px」が値にあたる部分です。
HTMLとCSSの構造【問題】
HTMLとCSSの基本構造を理解しよう！
HTMLとCSSの基本構造について解説しました。
HTMLとCSSを分けて考えると各用語も頭にスラリと入ってくると思います。
それぞれの単語・用語の意味が分からなくなった場合には、このページの内容を少しでも思い出して頂ければ嬉しく思います。
コメント