CSS | NORISUKETV.COM

Norisuke Official Site

CSSでウェブデザイン!

CSSとは何だろうか?

CSS(Sascading Style Sheet)は、Webの見た目を制御するためのもので、単にスタイルシートとも呼ばれたりする。 HTMLと共に使用し、HTMLの要素ごとに、サイズなどを指定する。このページのデザインにも使われている。

CSSの書き方

CSSの基本的な書き方は、セレクタによって対象となるHTML要素を選び、プロパティ(CSSプロパティ)と値を記述し、スタイルを設定するというものである。セレクタと{}で囲まれた部分をルールセットと呼ぶ。以下に文章の対応図(図-1)及び例を示す。
図-1  ルールセット

セレクタ{ -----------------対象の要素を設定
     プロパティ:値;   ----|
     プロパティ:値;   ----|-----------スタイルを設定
     プロパティ:値;   ----|
         *
         *
         *
}

例(<body>要素に、「背景を黒にしてください」と指示している)

body{   -----------------対象の要素を設定
  background:#000000;-----------スタイルを設定
}


CSSを記述する方法

◆ <link>を用いた外部CSSファイルで指定する方法

<link> タグにより、外部CSSファイルを読み込むことができます。外部CSSファイルを用いることで、複数の HTML文書で共通のCSSを共有することができます。

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <link rel="stylesheet" type="text/css" href="CSSファイルのパス名">
  5. <title>CSSのテスト</title>
  6. </head>
  7. <body>
  8. <h1>CSSとは</h1>
  9. <p>CSSはCascading Style Sheetsの略で・・・</p>
  10. </body>
  11. </head>

外部CSSファイル(例:style.css)には、次のように記述しておきます。ファイル名は何でもよいですが、拡張子は通常 .css です。

h1 { color: red; }
◆ @importを用いた外部CSSファイルで指定する方法

下記の様に @import を用いて外部CSSファイルを読み込むことも可能です。

<style type="text/css">
@import url(CSSファイルのパス名);
</style>

CSS2 では下記のような記法もサポートされました。

<style type="text/css">
@import "CSSファイルのパス名";
</style>

CSS3の進化

CSS3の改良ポイントは主に以下の6つだと思われます。