スタイルシートの基本


スタイルシート CSS とは

 CSSはCascading Style Sheetsの略号です。CSSはHTMLタグのスタイル(外観や位置など)を決めるのに使用します。HTML5では、HTMLタグのスタイルはほとんどCSSで決めるようになっています。

 CSSの文法は以下のように単純です。

セレクタ { 宣言; 宣言; ... }

 セレクタとは、HTMLのタグ名、クラス名、HTMLのid属性の値のどれかです。クラス名とは、そのCSSに付ける名前です。以下に上のCSS文法に設定したCSSを示します。このセレクタは divタグに適用するクラスとしてelemという名前を付けています。

  div.elem {
    background-color: blue;
    color: white;
    padding :20px;
    font-size: 20pt;
    width: 400px;
    height: 26px;
  }

セレクタの書き方

 セレクタに書くことができるのは、HTMLのタグ名、クラス名、HTMLのid属性の値のどれかですが、これらを区別するために以下のルールがあります。


p { color: gray; }
.cla { color: gray; }
#id0 { color: glay; }

 タグ名.クラス名という書き方もできます。下の例は、pタグのclaクラスという意味になります。したがって、pタグ以外にはclaクラスは適用されません。

p.cla {
  padding: 5px;
  font-size: large;
}

 セレクタは1個だけでなくまとめて書くこともできます。

table, th, td {
  border-style: solid;
  border-width: 1px;
  border-color: navy;
  border-collapse: collapse;
}

セレクタの書き方一覧
セレクタ説明
要素pそのすべての要素のスタイル
.class.stdクラス名classのスタイル
#id#div1id属性で指定された要素のスタイル
**すべての要素
要素,要素th, td複数要素のスタイル
要素2 要素1div p要素1の内側の要素2のスタイル
要素2 > 要素1div > p要素2を親とする要素1のスタイル
要素2 + 要素1div + p要素2直後の要素1のスタイル
要素2 ~ 要素1div ~ p要素2直前の要素1のスタイル
[属性]a[target] { ... }[]内の属性名のスタイル
[属性=値]a[target=_blank] { ... }[]内の属性の値が指定した通りのもののスタイル
[属性~=値]a[href~=error][]内の属性の値が指定した値を含むもののスタイル
[属性|=値]lang|=en[]内の属性の値が指定した値で始まるもののスタイル
[属性^=値]a[href^=/img][]内の属性の値が指定した値で始まるもののスタイル
[属性$=値]a[href$=.jpg][]内の属性の値が指定した値で終わるもののスタイル
[属性*=値]a[href*=servlet][]内の属性の値が指定した値を含むもののスタイル
:擬似クラス名a:hover擬似クラスと擬似エレメント参照
::擬似エレメント名p::after擬似クラスと擬似エレメント参照

 

宣言の書き方

 宣言は CSS名:値; という形式です。これを { } で囲んだものが宣言全体になります。{ }の中には複数個の宣言があってもかまいません。見やすさのため、改行や空白を途中に入れることができます。

.cla {
  background-color: #e8e8e8;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  padding: 5px;
}

 

CSSのコメント

 CSSのコメントはC言語のコメント同じように /* と*/で囲みます。C言語と同様に改行を含んでも問題ないです。

/* これはコメントです。*/
/* 改行を含んでも
   かまいません。 */

 

styleタグ内にCSSを書く

 CSSはstyleタグ内に記述します。styleタグはheadタグに含まれている必要があります。

<head>
  ...

 <style>
  span {
    color: green;
  }
  .item {
    padding: 4px;
    color: maroon;
  }
  #name {
    font-size: large;
  }
 </style>
</head>

 

外部CSSファイルをリンクする

 スタイルシート(CSS)はHTML文書と分けて作ることができます。そうすることにより、そのサイトの「テーマ」を外部CSSファイルで定義できます。外部CSSファイルをリンクするには、linkタグを使います。linkタグは通常、headタグ内に記述します。

<link rel="stylesheet" href="default.css" />
linkタグの詳細

 

 

このページの先頭へ戻る