cssとは

cssはhtmlのスタイルを記述するファイルです。

cssの例

概念や理由を理解する前に簡単なcssを使用してみます。以下のhtmlファイルとcssファイルをデスクトップに用意し、ブラウザで表示して見ましょう。文字の色が赤くなります。

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div class='sample'>ああああ</div>
    </body>
    
</html>

・test.css

.sample {
  color:red;
}

セレクタ

スタイルを割り当てる対象をセレクタと呼びます。
先ほどのtest.cssを見てみましょう。 sample という classセレクタに対してスタイルを設定しています。
classセレクタに設定した内容を見てみましょう。
color を red に設定しています。
こうすることで文字の色が赤くなります。
cssではcolorの部分をプロパティ、redの部分を値と呼びます。
基本的にcssの記述は以下のような形式となります。

セレクタ {
　プロパティ:値;
}

プロパティや、プロパティに設定する値は沢山あるので、随時調べて覚えましょう。

基本的なセレクタの種類

要素

cssでスタイルを割り当てるセレクタはいくつかありますが、基本的な以下3つを紹介します。htmlの要素をセレクタに使用できます。
以下の例はpタグの文字を青色にしています。
こうすると全てのpタグの文字が青くなります。

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <p>ああああ</p>
      <div>いいいい</div>
      <p>うううう</p>
    </body>
    
</html>

・test.css

p {
  color:blue;
}

全てのhtmlタグが対象となるので、pタグだけでなく、bodyタグやhtmlタグに対してもスタイルの設定が出来ます。

idセレクタ

id属性をセレクタに使用できます。
id属性の詳しいことを触れませんが、id属性の値はブラウザで表示するhtml要素の中でユニークでなければなりません。
今はid属性をセレクタに使用出来ると覚えておきましょう。
id属性を使用するセレクタをidセレクタと呼びます。idセレクタを使用する場合、先頭に # をつけることに注意しましょう。
以下は、id属性の値が sample_id の文字が緑になります。

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div id='sample_id'>ああああ</div>
      <div>いいいい</div>
    </body>
    
</html>

・test.css

#sample_id {
  color:green;
}

classセレクタ

classセレクタclass属性をセレクタに使用できます。
class属性を使用するセレクタをclassセレクタと呼びます。
class属性の値はhtml内でユニークでなくて良いです。したがって、同じスタイルを使い回したい場合はclassセレクタを使用しましょう。
classセレクタを使用する場合、先頭に .(ドット) をつけることに注意しましょう。
以下は、class属性の値が sample の文字が赤くなります。

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div class='sample'>ああああ</div>
      <div class='sample'>いいいい</div>
      <div>うううう</div>
    </body>
    
</html>

・test.css

.sample {
  color:red;
}

最後に

次回はセレクタを複数使用して、cssの適用順位を理解します。

次回

セレクタの基本

▼ CSSに関する記事の一覧をみる

HTML目次一覧

CSS – 目次