クラス(class)とは
正式には「クラスセレクタ」といいます。
CSSの基本で作成したスタイルは、ページにある<p>タグ全てに適用されますが、 クラスでは指定したタグにのみスタイルが適用されるので、デザインの幅が広がります。
基本の型
クラスセレクタ{
プロパティ:値;
}
.クラス名{
color:#4040FF;
}
クラスセレクタに名前を指定し、プロパティと値を指定します。
クラスの書き方
クラス名の前にドット「.」を付けます。
つけた名前をタグに使います。
style.css を作成しましょう。
.class1{
color:#4040FF;
}
index.php を作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<p>CSSの練習です</p> //---1
<p class="class1">CSSの練習です</p> //---2
</body>
</html>
//1と2では文字の色が違います
<p>タグだけでなく、<h1>や<div>、<span> など様々なタグに使えますので、いろいろ試してみてください。
最終更新日:2023/07/21