• オブジェクト『object要素』
• CSS
• CSSの適用方法
• CSSの記述方法
• “セレクタ”
• 特殊な“セレクタ”
• “セレクタ”の記述方法
• “プロパティ”と“値”

様々な外部データを埋め込む場合に使用します。「Flash」と呼ばれるアニメーションや動画コンテンツの埋め込みでの使用が一般的です。

『object要素』の中には代替情報を含むことができるため、Flashを利用できない環境向けに用意した画像を『img要素』で指定しておいたり、HTMLバージョンへのリンクを含めておくと良いです。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"

width="290" height="215" title="フラッシュ">

<param name="movie" value="swf/flash.swf" />

<param name="quality" value="high" />

<img src="img/flash.jpg" alt="フラッシュ" width="290" height="215" />

</object>

ブラウザのバージョンやプラグインの判定、ウィンドウサイズなどを取得したうえでFlashを埋め込みたい場合などでは、JavaScriptで埋め込む方法もよく使用されます。

<script type="text/javascript" src="swf/flash.js"></script>

<noscript>JavaScriptに対応していないブラウザでは、Flashコンテンツは表示されません。</noscript>

これまで挙げてきた要素を用いて記述されたWEBサイトでは、テキストや画像の単なる羅列でしかなく、見栄えの悪いモノでしかありません。そこに装飾を施す意味で使用されるのがCSSです。つまり、(X)HTMLでWEBサイトの本体を作り、CSSでその本体に飾り付けをするというわけです。

(X)HTMLにCSSを適用する方法は、『link要素』で別に用意したCSSファイルを読み込む方法、@importで別に用意したCSSファイルを読み込む方法、『style要素』でCSSソースを直接記述する方法、style属性でCSSソースを直接記述する方法の4つがあります。しかし、CSSを直接記述する方法は、管理するうえで非常に手間がかかるため、CSSを一括管理できるCSSファイルを読み込む方法を使用するのが良いでしょう。

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

<style type="text/css">@import "css/style.css";</style>

<style type="text/css">p { margin: 10px; }</style>

<p style="margin: 10px;">オリジナルTシャツショップ Helios</p>

(X)HTMLにもタグを入れ子にするなど記述する際にルールがありましたが、このCSSにも記述する際にルールがあります。

まず、装飾する対象となる“セレクタ”を記述し、次にその“セレクタ”にどういった装飾を施すか(“プロパティ”)を記述します。“プロパティ”が決まれば、その“プロパティ”に装飾する具体的な内容や程度(“値”)を記述します。これらを記述する際、“プロパティ”の後にはコロン(:)を、“値”の後にはセミコロン(;)を記述し、大括弧({})で囲みます。

p {

color: #FF0000;

font-size: 1.2em;

line-height: 1.5em;

}

“セレクタ”には下記にありますよに、様々なモノがあります。

“セレクタ”にアスタリスク(*)を指定すると、全ての要素に装飾が施されます。

* {

color: #FF0000;

}

要素名の“セレクタ”で、その要素に装飾が施されます。

p {

font-size: 1.2em;

}

要素の中の子孫要素に装飾を施す“セレクタ”で、半角スペース区切りで“セレクタ”を繋ぎます。

p em {

font-weight: bold;

}

class属性でその名が指定された要素に装飾を施すので、.classnameはclass="classname"が指定された要素に適用されます。また、要素名(タイプセレクタ)をつけてdiv.classnameと指定することもできます。この場合には、『div要素』の中でclass="classname"が指定されたものだけに装飾が施されることになります。クラスセレクタはドット(.)の後にアルファベット(a～z、A～Z)、数字(0～9)、ハイフン(-)、アンダーバー(_)を使用しますが、1文字目は必ずアルファベットから始めてください。

.classname {

font-weight: bold;

}

div.classname {

font-size: 1.2em;

}

id属性でその名が指定された要素に装飾を施すので、#idnameはid="idname"が指定された要素に適用されます。また、要素名(タイプセレクタ)をつけてdiv#idnameと指定することもできます。この場合には、『div要素』の中でid="idname"が指定されたものだけに装飾が施されることになります。IDセレクタはドット(.)の後にアルファベット(a～z、A～Z)、数字(0～9)、ハイフン(-)、アンダーバー(_)を使用しますが、1文字目は必ずアルファベットから始めてください。

IDセレクタはクラスセレクタと同じ様な働きをしますが、クラスセレクタが同じページ内で何度も指定可能であるのに対し、IDセレクタは同じページ内に1度しか指定できません。

#idname {

font-weight: bold;

}

div#idname {

font-size: 1.2em;

}

以上の他に、要素の中の直接の子孫要素に装飾を施す子セレクタ、ある要素の直後の要素に装飾を施す隣接セレクタ、要素の属性や要素の属性の値に装飾を施す属性セレクタがあります。

p > em {

font-weight: bold;

}

h1 + p {

font-size: 1.5em;

}

input[type] {

padding: 5px;

}

input[type="text"] {

padding: 5px;

}

擬似クラス・擬似要素といった、要素名や属性名、属性値を手掛かりに装飾を施すのではなく、カーソルオンや要素の1文字目など状況や状態をもとに装飾を施すモノがあります。

未訪問リンクのときに装飾を施す:link、既訪問リンクのときに装飾を施す:visitedがあり、主に『a要素』で利用します。

a:link {

color: #333333;

}

a:visited {

color: #999999;

}

要素(テキストや画像など)がカーソルオンされたときに装飾を施す:hover、フォーカス(洗濯状態になったときなど)されたときに装飾を施す:focus、アクティブ(クリック後に何らかのアクションを行っている場合など)に装飾を施す:activeがあります。

a:hover {

color: #0066FF;

}

a:focus {

color: #006600;

}

a:active {

color: FF66FF;

}

要素の1文字目のみに装飾を施し、ドロップキャップやイニシャルキャップと呼ばれる視覚効果として使用されます。

p:first-letter {

font-size: 2.0em;

}

要素の前後に何らかの内容を生成するために使用されます。どちらもcontentプロパティで生成内容を指定します。

p.attention:before {

content: "ココ注意！";

}

p.featured:before {

content: "はい、注目！";

}

以上の他に、要素に()内の言語コードが指定されて場合に使用する言語擬似クラス(:lang())、要素の中の最初の子要素に装飾を施す:first-child擬似クラス(:first-child)、要素の1行目のみに装飾を施す:first-line擬似要素(:first-line)があります。

p:lang(en) {

font-size: 0.7em;

}

p:first-child {

font-style: italic;

}

p:first-line {

font-weight: bold;

}

“セレクタ”は単一でも組み合わせてもグループ化しても使用できます。

クラスセレクタやIDセレクタをもとに、子孫セレクタで装飾を施す対象を絞り込む方法で、非常に良く使用されます。

#idname h1 {

padding-top: 10px;

color: FF0000;

}

#idname h1 a {

color: 0000FF;

}

#idname .classname ul li a:hover {

color: 00FF00;

}

“セレクタ”をコンマ(,)区切りでグループ化し、同じ装飾を同時に施すことができます。子孫セレクタを使用している場合など“セレクタ”が長くなる場合には、コンマごとに改行すると見易くて良いです。

h1, h2, h3, {

color: FF0000;

}

#idname01 ul li a:hover,

#idname02 ul li a:hover,

#idname03 ul li a:hover {

color: FFFF00;

}

“セレクタ”にどういった装飾を施すのかを指定するのが“プロパティ”で、その装飾の具体的な内容や程度を指定するのが“値”です。これらは必ずセットで使用します