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](/img/web/css_padding.png)