デザインの開始 | CSS電光石火

• 全体図

•  

今回よりCSSを使ったデザインを開始します。デザインは主に「スライス」という機能を使って行いますが、当サイトはあくまでCSSテクニックを学ぶ場所ですので、あらかじめデザインされたパーツを使ってデザインの学習を進めてゆきます。まず、以下より各パーツのダウンロードを行ってください。
ダミーサイト画像一式
次に、ルートフォルダ直下にimagesフォルダを作成します。
準備は出来ましたでしょうか。それでは早速始めます。

• コーディング開始

•  

サイト作成の際、前回までの流れを把握している方は、WEBサイトがヘッダ・サイドメニュー・メイン（記事領域）・フッタに分かれている、という流れをご理解いただけたことと思います。今回は前回の応用ですので、前回のソースコードに改変を加えながら進めてゆきたいと思います。ひとまず、変化が派手で分かりやすいと思いますので、ヘッダの画像から適用してゆきましょう。

•  

• 										
  (3-1-A)
  
  CSS-Side
  #wrapper{
   width:800px;
   margin:auto;
   background:#cccccc;
  }
  
  /* -------------------- header -------------------- */
  
  #header a,
  #header div{
   float:left;
   height:200px;
   display:block;
   text-decoration:none;
  }
  #header a{
   width:420px;
   background:url(images/header-left.gif) no-repeat;
  }
  #header div{
   width:380px;
   background:url(images/header-right.gif) no-repeat;
  }
  
  
  html-Side
  <div id="header">
   <a href="#" title="W.O.S.D.">&nbsp;</a>
   <div>&nbsp;</div>
  </div>
  
  										
  									

•  

まず、#wrapperからbackgroundプロパティを消してください。これは、画像部分を違和感なく表現するためで、このプロパティが残っていると背景に灰色が重なって見え、非常に不格好です。透過しない画像を重ねてみたことのある人ならよくご存じだと思いますが、基本的にPNG以外は画像が透過せず、画像と色、あるいは画像と画像同士が重なると「枠」が見えてしまいます。この処置はそのためのものです。

• セレクタの詳細

•  

新しいステップへと進みたいところですが、ここで一息おいて、セレクタの種類について解説します。上記のコード(3-1-A)において、#header a等というセレクタが登場します。これは文脈セレクタといい、#headerが適用された要素以下、全てのa要素にマッチする、という意味合いとなります。例の場合、#header内部のa全てにマッチする、という扱いです。つまり、#header div aであっても、#header span aであってもマッチすると言うことです。
また、普段何気なく登場している#headerですが、これは一意セレクタといい、そのページの中で一回しか登場させてはいけないセレクタです。これは上記で言うならば、#headerの登場は同一ページ内において一度しか登場させてはいけない、という意味となります。一意セレクタ自体を複数登場させること自体は何ら問題はありませんが、繰り返し使うセレクタには使用できません（厳密には使用できますが、W3Cのバリデータでは文法違反となります）。
となると、今度は何度も流用できるセレクタが欲しくなります。それが、クラスセレクタです。一意セレクタが<div id="セレクタ">と表記するのに対し、クラスセレクタは<div class="">と表記します。そして、CSS側での記述は一意セレクタが「#」から始まるのに対し、クラスセレクタは「.」から始まります。例えば、#headerがクラスセレクタだった場合、html側では<div class="header">となり、CSS側では .headerという表記となります。
一見して一意セレクタとクラスセレクタには違いがないように思われますが、これは正解です。実のところこの両者の指定には、流用可能か、そうでないかの違いしかありません。
では、全ての要素はクラスセレクタで定義すれば良いのではないか、といった考えも浮かびますが、実はそうでもありません。毎回そのページで決まり切った位置にあるものや、全体を囲むラッパなどには一意セレクタを用いるのが一般的です。たまに一部のブログシステムなどで全てがクラスセレクタであったりすることもありますが（はてなダイアリーなど）、それも珍しいケースだといえるでしょう。

• 変更部分解説

•  

まず、スタイルの読み込みで解説した、カンマによる複数指定が行われています。#header a , #header divの部分です。先ほども解説したとおり、これらは#header以下の要素に対して指定を行っています（※注：全称セレクタと子セレクタ）。
プロパティを見てゆきましょう。
まず、指定部分をdisplay:block;とし、二つの要素を同時にブロック要素化します。これで二つの要素が「ボックス」へと変化します（※divは元々ブロック要素ですが、プロパティをまとめるために一緒に指定しています）。そして、ボックス化した二つの要素に同じ高さ、すなわちheightを指定しています。今回は画像の大きさが200pxですので、その大きさまで確保します。このとき、親要素である#headerも高さが拡張されることを留意してください。#headerの高さは決め打ちされていないため、内容物の高さに合わせて変化するのです。次に、float:left;で両要素を横並びに詰めてゆきます。これは前回学んだことですので、詳細は省きます。
このままでは高さだけで横幅がありませんから、表示される要素は横へとつぶれたような状態で表示されます。そこで、横幅を指定するために、#header aと#header divにそれぞれの横幅を入力します。あえてセレクタを分けた理由は、両者のwidthプロパティの値が違うためです。
この様に全く同一の値の場合は指定を一括し、違う場合は指定を分けるのが、効率的な指定方法といえます。
最後に、両者の要素内にbackgroundプロパティで画像を読み込み、それぞれ確保した広さと高さの中へと流し込みます。
text-decorationですが、こちらは主にリンクの下線を消去するためのプロパティで、大抵の場合noneで指定されます。

• backgroundプロパティ

•  

プレビューまでもう一息ですが、ここでbackgroundプロパティの全容を説明します。

background-attachment	背景画像固定/移動
background-color	背景色
background-image	背景画像
background-position	背景画像位置
background-repeat	背景画像リピート

上記のように、backgroundプロパティには5つの指定方法が存在し、個別にそれぞれを指定することが可能です。ただし、この手法は一般的ではなく、ただ単にbackgroundとして全ての値を一括指定するのが普通です。
例えば、色と画像を同時指定し、画像が途切れても色が敷き詰めたれた状態へと持ってゆくには、backgound:#aaaaaa url("hoge");等と指定し、かつさらに画像の繰り返しを止めるためにはbackgound:#aaaaaa url("hoge") no-repeat;とリピートを停止します。さらに画像位置まで指定したい場合はbackgound:#aaaaaa url("hoge") no-repeat 0 50px;等と指定します。この場合、最初の値がx軸（横軸）であり、後の値がy軸（縦軸）となります。
今回の学習では、画像を指定し、リピートを禁止した形となります。仮に何らかの作用でカラムが崩れても、背景が繰り返さないため見栄えの不整合を抑止することが出来ます。

• 疑似クラス

•  

通常、ヘッダ部分でマウスホバーによる派手なエフェクトや表示は行いません。ただし、今回は学習のためにあえてマウスホバーによるアニメーションを取り入れます。
既に添付の画像を確認し、お気づきの方もいらっしゃると思いますが、ヘッダ画像は下に別の画像が隠れています。この画像をマウスホバー時に出現させるよう、修正します。

•  

• 										
  #header a:hover{background-position:0 -210px;}
  										
  									

•  

実はたったこれだけです。内容は、background-positionをマウスがホバーしたときのみ移動するようにし、光っているように見せかける、というものです。この手法はJavascriptを一切使わないため、ピュアCSSなアニメーション手法として幅広く使用されています。
しかし、それよりも目に付くのが、a:hoverというセレクタの存在でしょう。これは疑似クラスと呼ばれるものであり、ある一定の条件を満たした場合、要素に変化をもたらすという動的な指定です。例えば上記のhoverは要素やセレクタに対してマウスが乗せられたときのみ反応する疑似クラスとなっています。ほかにも、active/要素をクリックしたときのみ反応、visited/訪れたリンクのみに適用、focus/フォーカスされている要素に適用、target/あるセレクタ（要素等も含む）に対し、クリックが行われたとき反応、等があり、状況に応じて使い分ける必要があります。
ただし、注意する点としては、IE6以下ではa要素以外のhoverは無反応となり、動作しません。従ってhover疑似クラスはリンクのみに適用させるのが安全策といえるでしょう。また、focusもIE6/7のみ解釈の仕方が違い、他モダンブラウザとは異なる挙動を示します。
さらにtarget属性ですが、策定段階であるCSS3のため、現時点でこの疑似クラスをサポートするブラウザは皆無に等しく、Javascriptなどで代替するのがもっとも現行としては適当だといえます。

• ブラウザプレビュー

•  

上記のようになれば成功です。次回はメイン部分の画像を適用させてみましょう。

もし可能であれば、WEBデザイン用のアプリケーションとして『Adove Fireworks CS3（2008/10時点）』の購入をお勧めします。ウェブデザインを自在に行いながら、各パーツを部品として取り出すことの出来るツールです。ほかにも、『Adobe Illustrator』や『Adobe Photoshop』などでも書き出しは可能ですが、切り出しや生産効率はFireworksには及びません。
逆に、品質において、Fireworksは上記両者の性能に比べて劣ります。文字詰めや線の表現においてはIllustratorに敵いませんし、ラスタ画像の表現力や、小回りの加減においてPhotoshopには遠く及びません。
プロを目指す方はどれか一つでも極めるつもりで、購入に踏み切った方が良いでしょう。
なお、Fireworksは巷で（※教えて！goo等にも書いてありますが）Photoshopの亜流、と捉えられている節があるようですが、上記特徴を述べるとおり、その解釈は大きな誤りです。どちらかと言えば「WEBに特化したIllustrator」という立場、それがFireworksの正体にもっとも近いといえるでしょう。

細かく言えば、一意セレクタはJavascript等、スクリプトとの親和性が高く、逆にclassセレクタは親和性が低い傾向にあります。ただしこれはECMAScriptの進歩状況により変化し、最新のECMAScriptを実装したブラウザではクラスセレクタも直接参照できるようになっています。

全称セレクタと子セレクタ 先ほど解説していませんでしたが、この指定を#header *と全称セレクタ化し、一括で指定してしまう方法もあります。この場合#header以下の全ての要素が対象となるため、使い勝手は落ちます。それを避けるため、#header > *と子セレクタ（または子供セレクタ）化し、#header直下の要素のみを対象とする方法もありますが、この手法の場合IE6が対応しておらず、残念ながら使用できません。
ただし、一部のJavascriptライブラリで、これらのセレクタをIE6以上で使用可能にしたものもあります。IE7.jsなどが代表でしょう。
主題と外れますが、本文で指摘したhover属性のIE未対応も、このJSライブラリでカバー可能です。