HTMLとCSSの基本知識!ウェブデザイン技能検定3級学科解説その10

ウェブデザイン技能検定3級学科出題範囲

3.ウェブデザイン技術

3-2.スタイルシート(CSS)とそのコーディング技術

1.スタイルシート(CSS)のスタイルおよびコーディング、利用について一般的な知識を有すること。

2.スタイルシート(CSS)のバージョン、各ウェブブラウザの対応状況に関して一般的な知識を有すること。

 

スタイルシート(CSS)のスタイル及びコーディングについて

スタイルシート (style sheet)とは

スタイルシート (style sheet) とは、構造化文書などにおける表示形式を制御するしくみである。

見栄えと構造を分離するという目的で提唱された。

HTML、XML、SGMLといったマークアップ文書や、オフィスソフトにおいて広く使用されている。

Web上で広く使われているHTML文書にスタイルシートを適用する場合には、一般的にCSSが利用される。

CSSが圧倒的に普及しているので、単にスタイルシートといえばCSSを指すことがある。

 

CSSとは

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略で

HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。

文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、

具体的な仕様の一つ。

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、

新たなデザイン機能を備える。

また、以下のような特徴を持つ。

・ページを表示するメディアに合わせてスタイルシートを切り替えることで、

メディアごとに表示を変化させることができる。

・ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザが

それぞれ定義したCSSのもたらす効果を重ね合わせる(カスケードする)ことができる。

 

コーディングとは

コーディングとは、プログラミング言語を用いて

プログラムのソースコードを記述する作業のことである。

コーディングは、ソフトウェアの仕様をプログラムで実現するプログラミング作業の中でも、

特にプログラム設計を行い導き出されたアルゴリズムをプログラム言語を用いて

符号化(code)する作業のことを指す。

プログラミングが、与えられた課題に対して解決策を考えることであるとすれば、

コーディングはその解決策をプログラム言語に置き換えてソースコードを記述することであると言える。

ただ、プログラミングやコーディングの言葉が同じような意味で用いられる場合もある。

コーディング作業を行う人は、コーダーと呼ばれる。

コーダーはプログラマが設計した仕様を具体的に記述していくもので、

その作業の違いからプログラマとコーダーを明確に分けて呼ぶ場合も多い。

 

スタイルシート(CSS)のバージョン、各ウェブブラウザの対応状況に関して

スタイルシート(CSS)のバージョンについて

CSS1

1996年12月にW3Cから勧告されたCSSの最初のバージョン。

フォント・色・背景・マージン・パディング・ボーダーなどの

主に見栄えを制御するプロパティが定義されている。

CSS2

1998年5月に勧告されたCSSのセカンドバージョン。

CSS2では、パソコンのモニタで閲覧する一般的なウェブブラウザだけでなく、

携帯機器・テレビ・音声・印刷・点字などのメディアも視野に入れた幅広い規格となっている。

また、動的な内容の生成・配置・表のレイアウト・カウンタなども新たに加わっている。

CSS 2.1

2011年6月に勧告されたCSS2の改定版。

CSS2のエラー修正、一部プロパティの削除、説明変更、CSS3を視野に入れた仕様変更など、

CSS2を整理・修正したものとなっている。

CSS 2.1では、音声スタイルなどのCSS2には存在していた機能の一部が廃止されている。

これらの機能のなかには、次世代バージョンのCSS3で改良されて採用される可能性もある。

CSS3

CSS3は、CSSの次世代バージョンとして策定作業が進められている。

角丸・画像ボーダー・ドロップシャドウ・グラデーション・透明度・アニメーションなどの

新しい機能が追加される予定で、 かなり期待できる内容となりそう。

勧告までにはまだ時間が掛かることが予想されるが、新しいブラウザでは、

すでに機能の一部が先行採用されており、

ブラウザ限定であればCSS3の機能を利用できるようになっている。

CSS3では、機能グループごとにモジュールという単位に分けられている。

このモジュール化により、ブラウザベンダーがどの機能をサポートするかを

モジュール単位で選択することができるようになる。

CSS4

CSS4はモジュール化されたため、単一の統合された仕様は存在せず、

「Level 4」モジュールの総称となる。

Level 4モジュールで追加される機能は、Level 3モジュールで未定義だった新しい機能のほか、

草案に一度含まれながら、相互運用性を十分に確保出来ず仕様から省かれた機能からなる。

未だに勧告候補に至っていないLevel 3モジュールが存在する中、

既にLevel 4モジュールの公開草案がいくつか公開されている。

 

どのバージョンのCSSを利用する?

CSS3以降ではCSS 2.1を中核とし、

新たな機能の追加や改良をモジュールとすることで実現するものとする。

ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、

縦方向の書字や、HTML以外の規格にまで関与した内容となっている。

2013年5月現在で勧告されているモジュールは以下の通り。

CSS Color Module Level 3, 勧告 2011年6月
CSS Namespaces Module, 勧告 2011年6月
Selectors Level 3, 勧告 2011年9月
Media Queries, 勧告 2012年6月

 

各ウェブブラウザの対応状況について

一般的なブラウザでもCSS 2.1の機能が標準的にサポートされているため、

現在のところ、ウェブサイトを制作する際にはCSS 2.1の仕様を標準として準拠するが一般的である。

ただし、Firefox・Google Chrome・Safari・Opera・IE9などの新しいブラウザでは、

仕様策定が進められているCSS3についても、その機能の一部が先行してサポートされている。

そのため、ウェブサイトの性格によっては

CSS3の新しい機能を利用する動きも徐々に広がっている。

 

記述方法

CSSの文法は異なるレベル間でも後方互換性を持つように設計されており、

例えばCSS Level 1で書かれたスタイルシートを CSS Level 2として扱う事も

可能である(但し一部に解釈の相違などに伴う非互換部分も存在する)。

CSSでは要素にスタイルを与えるため、次のような仕様が定められている。

以下のCSS断片を例にとる。

 

p#id { color : #ff3300 }

 

{” から “}” までの部分を宣言ブロックという

p#id” をセレクタ(選択子)といい、スタイルが適用される対象をしめす

宣言ブロックとセレクタを合わせて規則集合という

color : #ff3300” 部分を宣言という

宣言の内、“:” より前(上例では “color”)プロパティ(特性)という

宣言の内、“:” より後(上例では “#ff3300″)という

上例の CSS 断片を適用すると宣言している文書のうち、

セレクタが指定しているものと一致する部位(HTML 文書においては要素、要素の親子関係、

特定のクラス、ID など)に、宣言ブロック内の宣言が適用される。

宣言は、「プロパティ:値」か、「空(何も記述しない)」のどちらかで構成され、

プロパティ、”:”、値の前後には空白文字(スペース、タブ、改行など)を自由に入れられ、

また”;”で区切ることにより宣言を並べて書くことができる。

上例は HTML 文書に適用する場合、

「id という ID を持った p 要素の文字色を赤FF(=255)、緑33(=51)、青0にせよ」という指定を意味する。

color : #ff3300;
width : 35%

color : “#0033ff”;
width : ‘53%’

このような宣言があったとき、後者二つは””や”を付したために不正である。

なぜなら、””や”で囲ったものは文字列として扱われ、

colorプロパティが取りうる色の値(#rrggbb、rgb([0-255],[0-255],[0-255])、

または、blackやredなどのキーワードなど)ではないからである。

p#id { color: #ff3300 }
p#id { font-size: 24px }

は、

p#id { color: #ff3300; font-size: 24px }

と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、

ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。

そのため、必ずしも宣言に;をつけるのを強制するものではない。

セレクタは、実装レベルの高いブラウザならばどの属性であってもCSSを適用することが可能であり、

この場合IDに関する属性セレクタであるので、#idは[id=”id”]と等価である。

セレクタの簡単なマッチングが可能である。

そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、

更にはリンクや動的な表現・言語に関する疑似クラス(:link、:hover、:lang)などがある。

 

優先順位

CSSは必ずしも一つのところで一意に指定できず、

そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。

その結果は、以下のような条件により算出される。

・作成者スタイルシートはユーザースタイルシートより優先される

・デフォルトスタイルシートは他のスタイルシートを優先する

・最重要指定されている宣言はユーザースタイルシートが

作成者スタイルシートより優先される(CSS1では逆)

・外部から読み込んだものは読み込んだ先とまとめて扱う

・詳細度によって整理する

・そのセレクタ内で指定先を一意に決められるもの(IDの類)が多い方を優先する

・IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する

・それでも優先順位が決まらない場合は、要素の数が多い方を優先する

・これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する

1.インラインのもの

2.外部からのもの

・HTMLのalign属性など、CSS以外によるスタイルの指定は、

それと等価なCSSによるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。

ただし、これらの詳細度は最も低いものとする

(CSS1においては要素名による指定を一つだけ含むセレクタと同じ詳細度)

 

記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている

(CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4)。

1.ユーザスタイルシート中で最重要指定された宣言 –

ユーザーエージェントの設定のスタイルの中で!importantを宣言に付加する

2.作成者スタイルシート中で最重要指定された宣言 –

作成者が内容に付随させたスタイル中で!importantを宣言に付加する。

3.作成者スタイルシート中の通常の宣言

4.ユーザースタイルシート中の通常の宣言

5.デフォルトスタイルシートの宣言

作成者スタイルシートの記述方法による優先順位は以下の通り。

1.特定の要素にスタイルを記述する

2.HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する

3.CSSのみを記述した外部ファイルを用意し、

HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる

 

まとめ

CSSについての記述に関しては、実技対策の方で説明するため、ここでは

各パーツの名称や、言葉の意味を理解して欲しい。

ウェブデザイン技能検定3級学科のために覚えておきたいのは、

CSS2.1がW3C勧告されている最新バージョンであるということだ。

現時点ではCSS3.0以降はモジュールとして追加されているので、

W3C勧告されていない、ということだけ覚えておこう。

ウェブデザイン技能検定3級学科の内容もCSS2.1が基準となっている。

 


このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です