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