第三章

視覚表現--CSSでwebページを自由にデザイン
1.CSSの役割





CSS：カスケーディングスタイルシート.
h1要素のフォントサイズの指定する.
要素に枠線を引く、p要素の余白を１５ピ
クセルにする.
webページがどのように「表現」されるか
はブラウザなどのユーザーエジェントに依
存する.
CSSで「デザイン」という視覚的な価値を
付与する.
CSSの書式
セレクタ｛プロパティ：値｝
•セレクタ：主に「h1」や「p」などXHTML上
の要素名が該当する.
•プロパティ：そのセレクタにどのようなスタ
イルを付与するかを指定する.
•プロパティごとに指定できる値が決まってる.
セレクタ｛プロパティ：値｝

セレクタ以降で左中括弧（｛）で始まり、
右中括弧（｝）で終わる部分を宣言ブ
ロック、宣言ブロック内のプロパティを
値の組み合わせを宣言という.
例： body { color : black }
「body」セレクタ、「color」プロパティ、
「black」値.

body{ color : black ; font-size : large; }
プロパティは、セミコロン（；）で区
切って複数指定することができる.
 プロパティが多数にわたる場合は、プロ
パティごとに改行して管理しやすくする
のが一般的である.

例： body{
color : black;
background-color : white;
font-size: large;
line-height:140%;
}
複数のセレクタ
カンマ（,）で区切り
 ソースの無駄な膨張を防ぐため、同じの
スタイルを適用するセレクタは、半角カ
ンマ区切りでまとめる。

h1,h2,h3,{color :green}
abbr , acronym {border : 1px dashed gray}
大文字と小文字の区別
Id名やclass名、フォント名、URLなど
いくつかの値については区別される。
 XHTMLやXMLでは要素名や属性名につ
いても区別される。
 慣れてないうちに大文字など混乱の元に
なる。

空白文字の取り扱い

CSSでは、ユニコード上のスペース(20),Tabキー(9)、ラインフィー
ド(A)、キャリッジリターン(D)、フォームフィード(C)の五つの空白文
字とされる.
本章で半角スペースやインデント、改行を指定してい
る部分では、空白文字をいくら挿入してもよい.
例：body

{
color
:
black;
font-size:
Large;
}
値におけるキーワードとテキストの区別
CSSでは、値としてテキストを指定す
る場合は引用符（「”」または「`」）で
囲むルールがある.
 値はキーワードであった場合は、引用符
で囲まないこと.

body{
width: “ auto “ ;
border: “ none “ ;
font-family: “serif “ ;
background: “ red “ ;
}
コメントの挿入
ソースが増えてくると、重複して指定することで混乱が
防ぐため、スタイルを対象とするコンテンツごとにコメ
ントで区切り.
 コメント挿入するには、テキストを「/*」と「*/」で囲む.
例：/*ページ全体に適用*/

： body{
color : black;
background-color : white;
｝
p{margin:15px}
/*グローバルナビゲーション適用*/
：
：
略
/*メインコンテンツに適用*/
：
略
なお、コメントは「*/ページ全体の/*一部*/に適用*/」のように
入れ子にすることはできない。
長さの単位

「絶対単位」、「相対単位」の二つ.
「絶対単位」：五つがある。
pt (ポイント。1/72インチ）pc (パイカ。12pt), in (インチ2.54cm) ,
cm(センチメートル）, mm (ミリメートル)。
 「相対単位」：三つがある。
px (ピクセル）,
em (font-sizeプロパティの値を１とする単位）,
ex (小文字「x」の高さを１とする単位）。
例： p{font-size:1.2em}
注＊ CSSではデフォルトの単位は存在しないため、必ず単位を付け
ること。
「px」は同じサイズのディスプレイでも解像度の設定によって
大きさが変わるため相対単位をされているが、ほとんどのブラウザ
では絶対単位として解釈される。

色の単位：色の単位を「RBG値」または「キーワード」
のいずれかで指定する。

「RBG値」には次の
四種類の指定方法があ
る。
RBG値(16進数、6桁)
body{color :#ff0000}
 RBG値(16進数、3桁)
body{color :#f00}
 RBG値(10進数)
body{color :rgb (255,0,0)}
 RBG値(パーセンテージ値)
body{color :rgb (100%,0,0)}

キーワードcssで指定
できるキーワードには
定義されている１６色
の「標準デフォルトカ
ラー」がある。
また、ユーザのGUL環境
で使用される２８種の
「システムカラー」を
キーワードでとして指
定することも認められ
ている。

URL

CSSでは値にURLを指定する場合、
「url()」関数を利用して指定する。
body{background-images : url(“../images/gif”)}
body{background-images : url(../images/gif )}
引用符を省略することができる。
CSS自体のディレクトリである点に注意.
パーセンテージ値
一部のプロパティでは、「％」を単位と
するパーセンテージ値が指定できる.
p{font-size:120%}

なお、プロパティによって参照する基準値
が異なる。
音声スタイルシートに特有の単位
角度の単位、時間の単位、周波数の単位
３つがある。


角度の単位：
deg 度数法に基づく角度
grad グラード法に基づく角度
red ラディアン法（孤度法）に基づく角度
p.rightperson{azimuth:90deg}
角度にはマイナス値を指定することもできる。
「-10deg」と「350deg」は同じ角度を表わす。
時間の単位と周波数の単位

時間の単位：ms ミリ秒
s
秒
h2{pause-before:5s}
なお、いずれの値もマイナス値は指定できない

周波数の単位：一部のプロパティでは周波数の単位を指
定する。
Hz
ヘルツ
kHz
キロヘルツ
p. male {pitch:120Hz}
なお、いずれの値もマイナス値は指定できない。
スタイルの継承

親要素に適用したスタイルが子孫要素に
引き継がれることを継承という。
p { color : red}
abbr{text-decoration : underline}
:
:
<p>…<abbr>…</abbr>…</p>
P要素の子要素であるabbr要素にもcolorプロパティの値が自動的に引
き継がれ、abbr要素ではさらにtext-decorationプロパティの値が適
用される。
継承される値が「％」や「em」などの相対単位の
場合は、親要素の値に子孫要素を乗じる値とされ
る。
body {font-size:90%}
p {font-size:80%}
:
:
<body>
<p>…</p>
</body>
P要素のフォントサイズ「80%」は、親要素であるbody要素の
「90%」を基点として再計算され、実際には「72%」で表示される
ことになる。
このように値が自動的に子孫要素に引き継がれるかどうかはプロパ
ティによって異なるが、ほとんど直感的な範囲である。

Download Report