CSS入門とサンプル


HOME > CSS > クラスを使ってみよう

クラス(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

Copyright 2023 Appli Base All Rights Reserved.

Yes:270 Total:182929 Today:129

single_css