CSS

CSS(スタイルシート)とは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略。
単にスタイルシートとも呼びます。

HTML,XMLの要素を修飾するための仕様です。

HTMLに文書の構造を記述し、CSSにデザインを記述することによって、
文書の構造とデザインを分離することができます。

CSSの記述方法

以下のCSSテキストを例として、CSSの構造を解説します。


a.alert{
  color:#ff0000;
  font-size:18px;
}
{ }
宣言ブロック。
この範囲中でプロパティと値を記述する。
a.alert
セレクタ。
HTML文書内の要素を指定する。直後に宣言ブロックを加え、要素に関連付ける。
color
プロパティ。
色や大きさなどデザインの特性を記述する。プロパティの後にコロン(:)を加え、値を記述する。
#ff0000
(プロパティの)値。
直前のプロペティに関する情報を記述する。終わるときはセミコロン(;)で閉じる。

CSSをHTMLに関連付ける

外部スタイルシートにリンクする

ヘッダー部分で別ファイルに記述したスタイルシートファイルを呼び出す

この方法だと同じスタイルシートを
全てのページに適用できるのでカスタマイズが簡単です。


<head>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>

html文書内にstyleタグを書く

記述したページ全体にルールが適用されます

styleタグに対応していない環境ではそのまま表示されてしまうので、
必ずstyleタグ内はhtml記述でコメントアウトしてください。


<style type="text/css"><!--
a:hover{
  color:#ffffff;
}
//--></style>

html文書内のタグ要素に直接style属性を書く

ページ全体に適用したスタイルよりも優先されます。

しかし、HTMLとCSSを分離するメリットが
失われてしまうので推奨しません。


<a style="color:#ff0000;">cssss</a>

要素のセレクタ

対応するhtmlタグすべてに定義する


<div></div>


div{

}

id属性に定義する

シャープ(#)の直後にid名を指定する。

id属性はページ内で名前が重複してはいけないので注意。

HTML文書で一度しか使わない要素に指定してください。


<div id="select01">　</div>


#select01{

}

class属性に定義する

ピリオド(.)の直後にclass名を指定する。

一番汎用的に使える定義方法です

class属性はHTML文書内で何度も記述することができます


<div class="select02">　</div>
<div class="select02">　</div>


.select02{

}

セレクタ指定内に複数のプロパティを定義する

{ } 内にいくつもプロパティを記述できる。

各プロパティ指定は必ずセミコロン(;)で閉じること


<div class="select02">　</div>


.select02{
  color:#000000;
  background-color:#ffffff;
  border:2px;
}

複数のセレクタを同時に指定する

セレクタ指定をカンマ(,)で区切り、次のプロパティを記述できる。

{ }内は同時に指定したすべてのセレクタに適応される。


<div class="list">　</div>
<ul>
  <li>　</li>
  <li>　</li>
</ul>


div.list,
ul li{
  color:#000000;
  background-color:#ffffff;
  border:2px;
}

CSSプロパティの解説

color

文字色を指定します

値は赤緑青3色の16進法表記です。

初期値： #000000 (黒)

初期値(リンクの場合)： #0000ff (青)


div{
  color:#ff0000;
}

background-color

背景色を指定します

値は赤緑青3色の16進法表記です。

初期値： transparent (透明)


div{
  background-color:#ff0000;
}

background-color

背景画像を指定します

CSSから画像へのパスを指定します。


div{
  background-image:url(/img/sample.gif);
}

background-color

背景画像の位置を指定します

初期値： 0px 0px


div{
  background-position:0px 0px;
}

background-color

背景画像の繰り返しを指定します

初期値： repeat


div{
  background-repeat:no-repeat;
}

paddingとmargin

padding
内側の余白
margin
外側の余白
padding border margin