【超基礎】CSSのクラスの書き方。クラスの概念を理解してレベルアップ

プログラミング

本記事では、

  • クラスの概念
  • クラスにCSSを適用させる
  • ブラウザ確認

この辺に触れていきます。

前回までは、HTMLタグにCSSを適用しました。
今回は、指定クラスにCSSを適用していきます!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p>知識をつけて、楽に生きる</p>
     
</body>
</html>

sample.css

h1{
    font-size: 20px;
    color: blue;
}

このような感じで、cssでh1タグに、文字の色と大きさを指定しました。
前回記事を載せておきます。

【初心者】CSSって 何?でも大丈夫! CSSのやり方をシンプルに解説。
CSSファイルの用意CSSの記述ブラウザでの確認本記事では、このあたりに触れていきます。なお、この記事では、↓でつくったHTMLを使います。まだの方は、以下記事からHTMLファイルの準備をしてくださ...

さて、ではクラスの説明にいきましょう!

クラスを使おう

クラスとは「分類」などと考えるとわかりやすいかもしれません。

ふむふむ、と言うと?

クラスとは、特定の要素に名前をつける事です!例をみていきましょう。

まずは以下のようにhtmlとcssを書いてください。

index.html

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="sample.css"> 
<title>Document</title>
</head>
<body> 
<h1>イージーな人生を歩みたい!</h1> 
<p>知識をつけて、楽に生きる</p>
 <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>
</body>
</html>

sample.css

h1{
    font-size: 20px;
    color: blue;
}

p{
    color: aqua;
}

pタグを1つ増やして、pタグにアクア色を適用させました。
では、ブラウザ確認してみましょう。

当然、pタグ2つともに、アクア色が適用されていますね。

これは、前回やった通りだね!

では、pタグの片方にだけアクア色を適用させたい場合はどうしましょうか??

それは、、えっと、、

そこで、クラスの出番です!pタグに名前をつけるのです。
HTMLを以下のように書き換えてください

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>
     <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>

</body>
</html>

変えたのは、pタグの1つ目に class=”yamada” を挟んでいます。
これでpタグの1つ目に”yamada”という名前をつけました。

pタグの1つ目は山田さんになったのですね。

そうです!では、cssをpタグに適用させるのではなく、山田さんに適用します

h1{ font-size: 20px; color: blue;}
.yamada{ color: aqua;}

クラス名にcssを適用させる時は、クラス名の前に”.”をつけます。
ではブラウザ確認してみましょう。

あっ山田さんにだけアクア色が適用された

クラスは、タグに名前をつける事ができます。同じタグが2つ以上あった時に、それを区別できます。
例えば、同じクラスに佐藤君が二人いれば、呼ぶときに、佐藤一郎君、佐藤次郎君、みたいにフルネームで呼びますよね。そんな感じ!

クラスの活用

以上クラスの説明をしてきました!

クラスを使いこなすと、好きな場所にcssを適用させる事ができます!

さらにレベルアップするには、

  • HTMLタグの種類を学ぶ
  • CSSで適用できるプロパティの種類を学ぶ

ここら辺を学べば、出来る幅が一気に広がります。

例えば、ボタンを作れたり、アニメーションを作れたり出来るようになります。

書籍で一気にマスターしましょう。

ではっ!

コメント