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