初心者向けにわかりやすくCSSについて解説しています。
CSSとはどんな言語なのか、どんな書き方をするのかなど実際にCSSを書きながら解説しています。

CSSとは

CSSはHTMLで作成された文書のデザインについて指定を行う際に使用される言語です。

以前はHTMLのタグでもスタイルに関する指示を行っていましたが、現在は画像の表示位置や背景や文字の色・大きさなどの指定はCSSで行うのが一般的となっています。そのためWebサイト作成には欠かせない言語といえます。

バージョンでは現在CSS3がHTML5との組み合わせで広く使用されています。

CSSの書き方

CSSの記述方式にはHTMLのヘッダ内に書く方法(内部参照)、HTMLのタグ内に書く方法(インライン)、外部ファイルを用意してそこに書く方法(外部参照)があります。
このうち、外部参照を使用する方法が現在よく使用されている形式となります。

簡単な文字列をHTMLで用意し、その文字色をCSSによって内部参照・インライン・外部参照で変えた場合の例です。

/uploads/picture/asset/14/css_ep_11.png

↓

/uploads/picture/asset/15/css_ep_21.png

内部参照

内部参照でスタイルシートを適用させる場合の例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      p{color:#ff1493;}
    </style>
  </head>
  <body>
    <p>
      テキストの色を変更
    </p>
  </body>
</html>

内にを入力し、その中にCSSを書きます。

インライン

インラインでスタイルシートを適用させる場合の例です。
適用したい要素のタグ内に以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="color:#ff1493;">
      テキストの色を変更
    </p>
  </body>
</html>

外部参照

外部参照でスタイルシートを適用させる場合の例です。
外部スタイルシートのファイル(拡張子.css)を作成します。スタイルに関する指定はこのファイルに入力します。
次に適用させるHTMLの<head></head>内に以下のコードを追加します。

<link rel="stylesheet" href="外部スタイルシートのファイル名.css" type="text/css">

最終的にこのような形になります。(※CSSファイル名が”sample.css”の場合)

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p>
      テキストの色を変更
    </p>
  </body>
</html>

CSSファイル

p{color:#ff1493;}

※外部ファイルとHTML内の両方でスタイルが指定されている場合は、インライン＞内部参照＞外部参照の順で優先されます。

idとclassの違い

CSSはスタイルを適用させる対象をセレクタによって指定します。

セレクタはHTML内の特定の要素(<p>,など)を指定したり、あるいはページ全体を対象にするなどさまざまな範囲で適用することができます。
また、特定の場所に自分で分かりやすいように任意の名前をつけることもできます。それがclassセレクタとidセレクタです。

classセレクタは一度指定すると、そのページ中同じ名前のものを何回も使うことができます。同じページ内で複数適用させたい箇所があるときに役立ちます。
idセレクタはページ中同じ名前は1回だけの使用となります。その場所にだけスタイルシートを適用させたい場合に使うことができます。

実際に書いてみよう

タイトル(<h2>の部分)、本文(<p>の部分)、画像(の部分)の要素があるHTMLファイルを用意します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <h2>タイトル</h2>
    <p>テキスト<span>強調したテキスト</span>テキスト</p>
    <img src="img1.png" class="bread">
  </body>
</html>

CSSを適用していない場合、画面では以下のように表示されます。

/uploads/picture/asset/16/css_ep_31.png

次にそれぞれについて以下のようにCSSでスタイルの指定を行います。ここでは外部参照を使用します。

タイトル→色を変える
本文→<p>タグ内の、タグで囲まれた部分だけを太字にする 画像→表示位置を変える

また、コンテンツ全体(<body>の部分)の背景色も変更します。

body {
  background-color: #eee8aa;
}

h2{
  color:#20b2aa;
}

span{
  font-weight: bold;
}

.bread{
  display:block;
  margin-left: auto;
  margin-right: auto;
}

スタイルが適用されると以下のようになります。背景色・タイトルの文字色・テキスト内の指定した部分・画像の表示位置がCSSによって変更されているのが分かります。

/uploads/picture/asset/17/css_ep_41.png

以上、CSSとは何なのか、CSSの書き方について解説しました。
HTMLとCSSはセットで覚えておきたい知識なので、ぜひ一緒に理解しておきましょう。