HTMLとCSSの基本構造|要素・タグ・値・属性・セレクタ・プロパティの違い

HTML&CSS

HTMLとCSSの基本構造はシンプルです。難しく考える必要はありません。

自動車に例えると、

  • 自動車の部品(CSS)
  • 自動車のパーツ(HTML)

という感じで覚えると整理しやすいと思います。

自動車の製造過程は細かい部品(ネジ・鉄・ポンプ等)を合わせることで一つのパーツ(エンジン・燃料タンク等)を組み上げます。

細かい部品を集めて自動車のパーツを組み上げて、パーツを配置し、1つの自動車を完成させます。

ここでの細かい部品はCSSで、パーツはHTMLを示し、完成された1つの自動車は1つのページのことを指しています。

このページではHTMLとCSSの基本構造について解説しています。

HTMLとCSSの基本構造

冒頭で少し触れました。

HTMLとCSSの基本構造としては、HTMLとCSSの2つの言語の集合体で1つのページを完成させます。

  • HTML(HyperText Markup Language)
  • CSS(Cascading Style Sheets)

HTML言語の中に直接、CSSの内容を書き込むことも可能ですが、多くの場合はHTMLに外部データであるCSSを読み込むことで機能させます。

これは、別々のファイルで管理することでWebサイトの作り手の管理性を向上させるためです。

また、HTMLとCSSの中には「要素」「プロパティ」「値」「セレクタ」「属性」「タグ」と、幅広い用語が存在します。この用語の多さこそ、Webプログラミングをややこしくする一つの原因だと筆者は感じています。

これらの用語を理解することができれば、HTMLとCSSの記述が気持ち的に楽になるはずです。

要素・タグ・プロパティ・値・セレクタ・属性の意味

冒頭で解説した通り、HTMLは自動車の1つのパーツで、CSSは1つのパーツを組み上げる上で必要な部品と紹介しました。

これから紹介するのは、1つのパーツを組み上げる上で必要な部品の更なる部品。

つまり、ネジを製造する上で必要な部品です。

HTML&CSSを書く上で覚えておきたいのは以下の用語の意味です。

  1. HTML言語
    • タグ
    • 要素
    • 属性
  2. CSS言語
    • セレクタ
    • プロパティ

HTMLとCSSでは使用する用語が異なります。

というより、それぞれを分けた方が理解が早いと思います。

これらの違いと意味について紹介していきます。

HTML(HyperText Markup Language)

HTMLではタグの開始からタグの終了までを1つの文として数えます。

それぞれに使われる用語と意味は以下の通りです。

タグ

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表記における「プロパティ」に該当するのは何か?

以下のHTMLにおける「終了タグ」とは何か?

以下のCSS表記における「値」に該当するのは何か?

Your score is

HTMLとCSSの基本構造を理解しよう!

HTMLとCSSの基本構造について解説しました。

HTMLとCSSを分けて考えると各用語も頭にスラリと入ってくると思います。

それぞれの単語・用語の意味が分からなくなった場合には、このページの内容を少しでも思い出して頂ければ嬉しく思います。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました