CSS セレクタ
CSSマニュアルCSSにおけるセレクタとは、スタイルを適用する箇所のことです。
CSSのセレクタ
CSSでは、さまざまな方法でHTML要素にスタイルを適用できます。
- 要素セレクタ: HTML要素名を指定して、その要素全体にスタイルを適用します。
- クラスセレクタ: HTML要素に付与されたクラス名を指定して、特定のクラスに属する要素にスタイルを適用します。
- IDセレクタ: HTML要素に付与されたID名を指定して、特定のIDを持つ要素にスタイルを適用します。
CSSの適用方法
CSSをHTMLと組み合わせる方法は3つあります。
インラインスタイル
HTML要素のstyle属性を使用して、直接スタイルを適用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>インラインスタイルの例</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">青いタイトル</h1>
<p style="color: red; font-size: 18px;">赤いテキスト</p>
</body>
</html>内部スタイルシート
HTMLの<head>要素内に<style>要素を追加し、CSSコードを記述します。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>https://codinghaku.com/</h1>
<p>CSSはウェブページのデザインをコントロールします。</p>
</body>
</html>外部スタイルシート
別のファイルにCSSコードを記述し、HTMLの<head>要素内に<link>要素を追加して、そのファイルを読み込みます。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>https://codinghaku.com/</h1>
<p>CSSはウェブページのデザインをコントロールします。</p>
</body>
</html>h1 {
color: blue;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
}
コメント