CSS(スタイルシート)って何?

トップページに戻る

CSSとは、HTMLからデザイン部分を切り離して定義するプロパティの集まりのことです!、と難しく書けばこんな感じですが、

簡単に言うと、CSSとはホームページをデザインするための言語で、CSSを使ってホームページをデザインすれば、@デザインの自由度が広がる。A複数のページを作成する際に、何度もデザイン部分を作り直さなくても済む。ASEO(検索エンジン最適化)に良い。といったメリットを享受できます。

前置きは短めにして、さっそく中身を見ていきましょう。

<p>テスト</p>

これはHTMLだけで記述したおなじみの段落です。これをブラウザで表示すると、

テスト

こうなります。これをCSSを使って文字の色と大きさを変えてみましょう。

p{
  font-size:150%;  /*pタグで囲まれた文字の大きさを150%に指定する。*/
  color:#FF0000; /*pタグで囲まれた文字色を赤にする。*/
}

テスト

こうなります。#FF0000はカラーコードと言って、文字は赤であることを16進数を使ってコンピューターに指示しています。
今度はCSSを使って文字の背景色を変えてみましょう。

p{
  background-color:#cc99ff; /*h1タグの背景色を紫にする*/
}

テスト

文字の背景に壁紙などの画像を使うことも出来ます。

p{
  background-image:url(re.gif); /*re.gifという画像を文字の背景に使うf*/
}

テスト

ここまではpタグで囲んだ文字はすべてCSSで指定したとおりのレイアウトに変更するための書式ですが、
あるpタグで囲んだ文字色は赤、あるpタグで囲んだ文字色は青といった具合に、pタグごとにレイアウトを変更したい場合は、次のように指定します。

<p class='a1'>テスト1</p>
<p class='a2'>テスト2</p>

pタグの中に、class='クラス名'を使って、場合分けします。クラス名は半角英数字であれば何でも良いです。CSSは次のとおり。

p.a1{
 color:#ff0000; /* a1というクラス名のpタグで囲んだ文字は赤に指定。
}
p.a2{
 color:#3300cc; /* a2というクラス名のpタグで囲んだ文字は青に指定。
}

これをブラウザで表示すると、

テスト1

テスト2

次は、テーブルをCSSで装飾してみましょう。
まずは、HTMLだけで、テーブルを作ってみます。

<table border="1" cellspacing="0">
<tr>
<td>テーブル1</td>
<td>テーブル2</td>
</tr>
<tr>
<td>テーブル3</td>
<td>テーブル4</td>
</tr>
</table>

これをブラウザで表示すると

テーブル1 テーブル2
テーブル3 テーブル4

これをCSSで装飾してみましょう。HTMLは次のとおりです。

<table cellspacing="0">
<tr>
<td class='a1'>テーブル1</td>
<td class='a2'>テーブル2</td>
</tr>
<tr>
<td class='a3'>テーブル3</td>
<td class='a4'>テーブル4</td>
</tr>
</table>

CSSは次のように記述します。

td.a1{
  border:1px solid #000000; /*a1というクラス名のtdタグで囲んだ部分の外郭線は、黒の直線で太さを1pxに*/
  background-color:#0033ff; /*a1というクラス名のtdタグで囲んだ部分の背景色を青で*/
}
td.a2{
  border:1px dashed #000000; /*a2というクラス名のtdタグで囲んだ部分の外郭線は、黒の破線で太さを1pxに*/
  background-color:#ff0000; /*a2というクラス名のtdタグで囲んだ部分の背景色を赤で*/
}
td.a3{
  border:1px solid #aaaaaa; /*a3というクラス名のtdタグで囲んだ部分の外郭線は、グレーの直線で太さを1pxに*/
  background-image:url(re.gif); /*a3というクラス名のtdタグで囲んだ部分の背景にre.gif画像を使う*/
}
td.a4{
  border:3px solid #000000; /*a41というクラス名のtdタグで囲んだ部分の外郭線は、黒の直線で太さを3pxに*/
  background-color:#ffff66; /*a4というクラス名のtdタグで囲んだ部分の背景色を黄で*/
}

テーブル1 テーブル2
テーブル3 テーブル4