HTMLにおけるCSSタグとは？
HTMLは、Webページの構造を記述するためのマークアップ言語です。CSS（Cascading Style Sheets）やJavaScript・TypeScriptとともにWebページを構築するために用いられます。 HTMLではタグと呼ばれる目印を使い、テキストをどのように表示するか指示します。 ブラウザが、このタグにあわせて表示を行うことでWebページが表示されます。
CSSタグは存在しない
結論から言うと、HTMLの中に「CSSタグ」というものは存在しません。 HTMLは文書構造を、CSSは見た目を記述するための言語であり、それぞれ役割が異なります。 つまり、HTMLの中にCSSの記述を含めることはできません。
HTMLとCSSの関係性
では、どのようにしてHTMLとCSSを連携させるのでしょうか？ HTMLでは、CSSを適用したい要素に対して、 style 属性を用いる方法と、 <link> タグを用いる方法の二つがあります。
1. style 属性を用いる方法
style 属性は、HTML要素の開始タグ内に記述し、特定の要素のみにスタイルを適用する場合に便利です。
<p style="color: blue; font-size: 16px;">このテキストは青色で、16pxの大きさで表示されます。</p>2. <link> タグを用いる方法
<link> タグは、外部CSSファイルを読み込む際に使用します。 HTMLファイルとは別にCSSファイルを作成し、複数のページで共通のスタイルを適用する場合に便利です。
<head> <link rel="stylesheet" href="style.css"> </head> 上記は、「style.css」という外部CSSファイルを読み込む例です。
CSSの基本的な記述方法
CSSは、基本的に以下のような形式で記述します。
セレクタ {
プロパティ: 値;
}
| 用語 | 説明 |
|---|---|
| セレクタ | スタイルを適用するHTML要素を指定します。 |
| プロパティ | 要素に適用するスタイルの種類を指定します。（例：色、大きさ、余白など） |
| 値 | プロパティに対して具体的な値を設定します。 |
例えば、全ての段落を青文字にしたい場合は、以下のように記述します。
p {
color: blue;
}
まとめ
HTMLには「CSSタグ」というものは存在せず、 style 属性や <link> タグを用いることでCSSを適用します。 HTMLとCSSを連携させることで、Webページにデザインを施すことができます。
関連QA
Q1: HTMLとCSSの違いは何ですか？
A1: HTMLはWebページの構造を、CSSはWebページの見た目を記述するための言語です。HTMLが骨組みを作り、CSSで装飾を施すイメージです。
Q2: CSSはどこに記述すれば良いですか？
A2: CSSを記述する方法は、HTMLファイル内に直接記述する方法、HTMLファイルとは別にCSSファイルを作成し読み込む方法の二つがあります。状況に応じて使い分けましょう。
Q3: CSSを学ぶメリットは何ですか？
A3: CSSを学ぶことで、Webページのデザインを自由自在に操れるようになり、より魅力的なWebページを作成することができます。また、Webデザイナーやフロントエンドエンジニアといった職種にも繋がるスキルです。