CSSの超基礎を解説【HTML・CSS】

初めてHTML、CSSを学ぶ方向けに、CSSを学ぶ上で大前提で知っておいた方が良い、CSSの超基礎を解説していきます。

CSSとは何か

HTMLは文書の構造を決定するものであり、CSSは、その文書の構造のデザインを指定するものです。

部屋に例えるのであれば、HTMLは、リビングにはテーブルが１つ、椅子が２つあり、寝室にはベッドが１つあるという風に構造を決定します。

また、CSSは、リビングにあるテーブルは縦横それぞれ７５cmで、色は白、椅子の色は黄色、ベッドの大きさはダブルベッドで、カラーはブラックという風に、HTMLで決めた構造のデザインを指定していきます。

CSSはどこに書く？

別ファイルを用意する

主観ですが、CSSを記述する場所として最も多いのは、HTMLファイルとは別にCSS専用のファイルを用意して、そこに書くものです。

まず、適当な場所にフォルダを１つ作成し、その中に『main.html』と『main.css』という２つのファイルを作成し、それぞれを適当なテキストエディターで開き、以下の内容を書き込んで保存してみてください。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>ページのタイトル</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <h1>文章のタイトルH１</h1>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <h2>文章のタイトルH２</h2>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
@charset "utf-8";

h1, h2 {
    color: blue;
}

p {
    color: red;
}

２つのファイルを保存したら、HTMLファイルをブラウザで開いてみてください。

macの場合は、以下のように右クリックして『このアプリケーションで開く』から『Safari』などを選んで開くと良いでしょう。

HTMLファイル内の style要素に書く

先程はHTMLとCSSを別々のファイルに書いていましたが、この方法ではHTMLファイル内に style要素を用意し、その中へCSSを記述します。

先程はファイルが２つでしたが、この方法では１つだけで済みます。どちらの方法にもメリットデメリットが存在します。

先程のコードを style要素を使用して書くと以下のようになります。（変化が分かるようにブラウザで表示される文字の色は変更しました）

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>ページのタイトル</title>
    <style>
        h1, h2 {
            color: green;
        }

        p {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>文章のタイトルH１</h1>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <h2>文章のタイトルH２</h2>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
</body>
</html>

上のコードをHTMLファイルに保存し、それをブラウザで開くと以下のように表示されるはずです。

style属性を使ってHTMLとごちゃ混ぜ

最後に、style属性を使って、HTMLのタグの中に書き込む方法です。

この方法は、コード編集の手間が増えたり、コードが見づらくなるので、可能な限り、先程ご紹介した２つの方法のうち、いずれかの方法でCSSを記述してください。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>ページのタイトル</title>
</head>
<body>
    <h1 style="color: green;">文章のタイトルH１</h1>
    <p style="color: blue;">なにかの文章</p>
    <p style="color: purple;">なにかの文章</p>
    <p style="color: orange;">なにかの文章</p>
    <h2 style="color: red;">文章のタイトルH２</h2>
    <p style="color:palevioletred;">なにかの文章</p>
    <p>なにかの文章</p>
    <p>なにかの文章</p>
</body>
</html>

CSSの書き方

エンコーディングの指定

CSS

1
@charset "utf-8";

CSS専用のファイルを用意する場合は、上の一行をファイルの１行目に書いておくと良いでしょう。

デザインの指定

CSS

1
2
3
4
5
6
7
h1, h2 {
    color: blue;
}

p {
    color: red;
}

上のコードを解説すると、h1要素とh2要素の前景色（この場合は文字色）を『blue』、つまり青色にし、p要素の文字色を red（赤色）にするものとなります。

セレクタ

『h1, h2』や『p』はセレクタと呼ばれ、セレクタに続くブロックで指定されたCSSを適用する要素、クラスなどを指定する部分です。

複数の要素などに同じデザインを適用するのであれば、『h1, h2』という風に『,』で区切って、指定したい要素、クラスなどを並べると良いでしょう。

ブロック

セレクタで指定した要素などに、特定のデザインを適用させたい場合、セレクタの後に『{』と『}』で囲ってブロックを作成し、そのブロックの中に適用させるデザインを書いていきます。

宣言

上のコードで『color: blue;』と『color: red;』はどちらも宣言と呼ばれ、ブロック内に記述します。

ブロック内で宣言した内容が、セレクタで指定された要素やクラスなどに適用されます。

プロパティと値

１つの宣言は『:』で前後に分けられており、前にあるのをプロパティと呼び、後にあるのを値と呼びます。

プロパティはセレクタで指定された部分の何を変更するかの識別子です。

例えば、上のコードの場合、『color』はプロパティであり、セレクタで指定された部分の前景色を変更するのに使用するものです。そして、『blue』や『red』は値であり、この場合は何色にするかを指定しています。

CSSの超基礎を解説【HTML・CSS】

CSSとは何か

CSSはどこに書く？

別ファイルを用意する

HTMLファイル内の style要素に書く

style属性を使ってHTMLとごちゃ混ぜ

CSSの書き方

エンコーディングの指定

デザインの指定

セレクタ

ブロック

宣言

プロパティと値

さいごに