見た目を定義する技術

見た目を定義する技術
CSS(スタイルシート)
スタイルシートの書式
(プロパティ)
(値)
属性
セレクタ {
: 属性値} 「セレクタの属性を属性値にする」
H1{font-size : 18pt} 「H1 の font-size を 18pt にする」
複数の属性を指定する場合
・・・セミコロン ; で区切る
H1{
font-size : 18pt;
color : white;
background : blue;
}
「H1 の
font-size は 18pt
color は white
background は blue
にする」
1. HEAD 要素内部に STYLE 要素としてまとめて設定する。
2. タグに直接設定する。・・・局所的なスタイル変更が可能
3. 別ファイルにまとめて設定する。
ソース (HEAD 要素)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="content-style-type" content="text/css">
CSS によるスタイルシート設定
<TITLE>
をしていることの宣言
簡単なCSS
</TITLE>
<STYLE>
H1 {
H1 タグはいつも
スタイルを設定するエリア
color: white;
白文字
font-size: 18pt;
18pt サイズ
background: blue;
青地
}
EM {
color: red;
font-size: 120%;
background: silver;
}
</STYLE>
</HEAD>
EM タグはいつも
赤文字
120% サイズ
銀色地
ブラウズ
ソース (BODY 要素)
<BODY>
<H1> 第1章青地に白い18pt文字の見出し </H1>
<P>この例では
<EM>強調が赤色 </EM>
で書かれる。</P>
H1 タグはいつも
白文字
18pt サイズ
青地
EM タグはいつも
<H1> 第2章青地に白い18pt文字の見出し </H1>
赤文字
<P>一時的にEM要素を
120% サイズ
<EM style="color: green;">強調を緑色 </EM>
銀色地
で書くこともできる</P>
</BODY>
EM のスタイルを局所的に変更
</HTML>
ブラウズ
クラス属性
セレクタ { 属性
: 属性値 } 「セレクタの属性を属性値にする」
H1{color : blue;} 「H1 の color を blue にする」
セレクタ .クラス { 属性 : 属性値 } 「クラス指定セレクタの属性を属性値にする」
.aka
H1{color : red;} 「aka指定H1 の color を red にする」
クラス名は自由に設定
<BODY>
<H1> 第1章の見出し </H1>
<H1>class=“aka”
第2章の見出し </H1>
<H1> 第3章の見出し </H1>
<H1>class=“aka”
第4章の見出し </H1>
</BODY>
H1 タグはいつも
青文字
aka指定H1 タグはいつも
赤文字
ブラウズ

Download Report