872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. StyleSeet について[基本と記述]

StyleSeet について[基本と記述]

 スタイルシートはW3C(World Wide Web Consortium)という団体によって、1996年に提唱された、Webページのデザインを制御するための規格です。正式には「カスケーディングスタイルシート(CSS)」と呼びます。
WebページはHTMLで記述されています。Webページのデザインを優先すると複雑なコードになり、Webページの作成や修正も大変な作業になります。それに対し、スタイルシートはスタイルだけをまとめて記述できるので、スタイルシートを使用するとHTMLのタグで設定するよりもはるかに効率的にデザインをすることができます。
また、W3Cは今後デザインにカンする記述はHTMLではなくスタイルシートで設定することを推奨していて、デザインに関するHTMLタグのいくつかは廃止される予定です。

CSSの基本と記述

スタイルシートはセレクタに対して、その属性に値を指定してスタイル設定します。
「セレクタ」「属性」「値」の3つを組み合わせてスタイルを定義します。
セレクタはスタイルを設定する要素のことで、属性はセレクタで指定した要素に設定するスタイルの種類、値は属性で設定したスタイルごとに予め決められている値を指定します。
記述の仕方は次のようになります。

セレクタ {属性 : 値;}

<p>のフォントの色を#FF0000に指定したい場合は、次のような記述になります。

p {color : #FF0000;}

複数のスタイルを設定する場合は、それぞれの属性の間をセミコロンで区切ります。1つのスタイルを設定する場合でも、値の後ろはセミコロンを記述するようにしましょう。
記述の仕方は次の通りです。

p {color : #FF0000; font-size : 15pt}

また、指定するスタイルが多い場合は、次のように記述することができます。

p {
	color : #FF0000;
	font-size : 15pt;
	font-weight : bold;
}

セレクタのグループ化

複数のセレクタに同じスタイル設定をしたい場合は、それぞれのセレクタの間をカンマで区切ります。

セレクタ1 , セレクタ2 {属性 : 値;}

<p>と<h1>のフォントの色を#0000FFに指定したい場合は次のように記述します。

p, h1 {color : #0000FF;}

また、セレクタに親要素のタグと子要素のタグを半角スペースで区切って記述すると、セレクタに記述した親要素に含まれる個要素に対してスタイルを設定することができます。

セレクタ1(親要素) セレクタ2(子要素) {属性 : 値;}

<p>で囲まれている<em>にだけスタイルを設定し、<p>で囲まれていない<em>にはスタイルを設定しない場合は次のようになります。

p em {
	color : #0099FF;
	font-size : 15pt;
}

セレクタの種類について

基本セレクタ

基本セレクタとは<p>や<table>等のタグ(要素)にスタイルを設定します。

要素名 {属性 : 値;}

p {
	color : #00FFFF;
	font-weight : bold;
}

classセレクタ

classセレクタは設定したスタイルにclass名を付けておき、そのスタイルを適用したい要素にそのclassを関連づけます。classセレクタはピリオドの後に任意のclass名を付けて定義します。idセレクタとは違って、ページ内でも1つのクラス名で複数の要素に指定できます。基本セレクタメイト組み合わせて記述すると、基本セレクタで定義した要素にだけ有効なclassセレクタを定義することもできます。

.クラス名 {属性 : 値;}
基本セレクタ名.クラス名 {属性 : 値;}

.class_sample1 {
	color : #FF00FF;
	font-weight : bold;
}
h6.class_sample2 {
	color : #003333;
	font-weight : bold;
	font-size: 16px;
}
<p class="sample1">アジの開き</p>
<h6 class="sample2">カツオのたたき</h6>
<p class="sample2">イワシのさんが焼</p>

アジの開き

カツオのたたき

イワシのさんが焼

idセレクタ

idセレクタは設定したスタイルにid名を付けておき、そのスタイルを適用したい要素にそのidを関連づけます。idセレクタは任意のid名の横にシャープを付けて定義します。idセレクタは、1つのid名ではページ内で1つの要素にしか指定できません。基本セレクタと組み合わせて記述すると、基本セレクタで定義した要素にだけ有効なidセレクタを定義することもできます。

#id名 {属性 : 値;}
基本セレクタ名#id名 {属性 : 値;}
#id_sample1 {
	color : #000080;
	font-weight : bold;
}
h6#id_sample2 {
	color : #006400;
	font-weight : bold;
	font-size: 16px;
}
<p id="id_sample1">アジの開き</p>
<h6 id="id_sample2">カツオのたたき</h6>
<p id="id_sample2">イワシのさんが焼</p>

アジの開き

カツオのたたき

イワシのさんが焼

疑似クラス

疑似クラスは、リンクなどの状況やタイミングに対してスタイルを設定します。要素の後にコロンで区切って、決められた予約語を指定して定義します。
通常は、要素<a>を指定します。

要素:疑似クラス {属性 : 値;}

疑似クラスは主に次の種類があります。

疑似クラス名 内容
:link 未訪問のリンクスのタイル
:visited 既訪問のリンクのスタイル
:hover マウスカーソルが要素の上にある時のスタイル
:active マウスボタンを押した時のスタイル
a:link {
	color : #4169e1;
	text-decoration: none;
}
a:hover {
	color : #dc143c;
	text-decoration: underline overline;
}

TEST LINK

疑似要素

疑似要素は指定した要素の1行目や1文字目にスタイルを設定するなど、要素の特定の部分に対してスタイルを設定することができます。疑似要素は要素の後にコロンで区切って、決められた予約語を指定して定義します。

要素:疑似要素 {属性 : 値;}

疑似要素名 内容
:first-line 指定した要素の1行目のスタイル
:first-letter 指定した要素の1文字目のスタイル
p.gijiyoso_sample1:first-line {
	color: #800000;
}
p.gijiyoso_sample1:first-letter {
	color: #4169e1;
	font-size: 200%;
	font-family: "MS 明朝", "MS P明朝", "ヒラギノ明朝 Pro W3", 細明朝体, 平成明朝;
	font-weight: bold;
}

二人の若い紳士が、すつかりイギリスの兵隊のかたちをして、ぴか/\する鉄砲をかついで、白熊のやうな犬を二疋つれて、だいぶ山奥の、木の葉のかさ/\したとこを、こんなことを云ひながら、あるいてをりました。 「ぜんたい、こゝらの山は怪しからんね。鳥も獣も一疋も居やがらん。なんでも構はないから、早くタンタアーンと、やつて見たいもんだなあ。」 「鹿の黄いろな横つ腹なんぞに、二三発お見舞まうしたら、ずゐぶん痛快だらうねえ。くる/\まはつて、それからどたつと倒れるだらうねえ。」