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


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

HTMLの超基礎については以下の記事をご覧ください。

コンテンツの転載は固くお断りいたします。

CSSとは何か

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

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

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

CSSはどこに書く?

別ファイルを用意する

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

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

コードの解説は後ほど行います。

まずはHTML


次に以下の内容がCSSです。


@charset "utf-8";

h1, h2 {
    color: blue;
}

p {
    color: red;
}

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

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

すると、ブラウザでは以下のように表示されるはずです。

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

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

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

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


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

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

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

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

ですが、一応紹介しておきます。


上のコードを表示すると、以下のようになります。

CSSの書き方

それでは、CSSの書き方の基本を解説していきます。

エンコーディングの指定


@charset "utf-8";

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

デザインの指定


h1, h2 {
    color: blue;
}

p {
    color: red;
}

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

セレクタ

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

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

ブロック

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

宣言

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

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

1つ1つの宣言の最後には『;』を書きます。

プロパティと値

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

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

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

さいごに

以上がCSSの超基礎となります。