Lesson６ CSSを使ってのページ要素のデザイン

CSSの基本事項

コンテンツ入力時に書式を設定しない

従来のウェブ・ページ作成手順では、かなりの多くの人がコンテンツ入力時に「中央揃え」とか「文字サイズ」とかの書式を設定していたと思われます。Dreamweave rCS5は最近の新しい流れである「文章構造とスタイル（書式）の分離」を強力にバックアップするように設計されていますので、その仕組みを十分利用して、入力時にはコンテンツを頭からどんどん書き入れてゆきユメユメその場で書式の設定をしないようにしましょう。書式の設定は後からページ全体を見渡してじっくりスタイル・シート機能を使って行うことが得策です。このことは後々のデザイン変更も非常にやり易くなります。

ページ要素はボッックスとして入力

CSSによるスタイルの設定はBOX Modelと呼ばれるように、各要素をBOXと捉え、そのBoxの色々なカテゴリー（タイプ、背景、ブロック、ボックス、ボーダー、リスト、位置）を規定していく仕組みなので、先ず要素の入力に際して大事なことは各要素がBoxという塊で入力されなければいけないということです。更にそのことを具体的に言うならば、新しい要素の入力の前には最低限「Enter」キーを押して新しい段落（<p>～</p>）を作っておかなければいけないのです。その上で後にその段落というBoxを画面下段に用意されているプロパーティ・インスペクターのフォーマット欄で必要に応じてその他の種類のBox、例えばH1、Ol、Table、Divなどに変換しておきます。要はCSSではBox以外の単なる裸の文字列にはスタイルを規定出来ないのです。

デザインしたい要素（Box）の選択

タグ・セレクターによる要素の選択

ドキュメント・ウィンドウの最下段にあるステータス・バーの左側にマウスで選択された要素が何であるかを示すタグセレクターがある。左の図の例では（２）主観的な・・・という<h4>が選択されていることが判ります。逆に、タグセレクターの中のタグをクリックすることによって、ページの中のその要素をハイライトさせることが出来ます。

このようにCSSでデザインしようとする要素はスタイルを設定する前にピンポイントに選択されておかなければいけません。　微妙な場合は、「分割」モードでソース・コードともども目的の要素がちゃんと選ばれていることを確認する必要があります。

インスペクト・モードでの選択

画面上段にある「インスペクト」モード・ボタンをクリックした後に選択する要素をポイントすると、モードが「ライブビュー」モードに変わり選択した要素が下の例のように色付で正確に表示されます。

ステータス・バーのタグセレクターと相まって選択された要素の範囲が正確に確認できます。

スタイル・シートで選択した要素のデザインを規定する

CSSスタイル・パネル

スタイルを設定する要素（Box）を選択した後、画面右側にある「CSSスタイル」パネルを使って新規にスタイルを設定したり、既存のスタイルには編集で変更することが出来ます。

「CSSスタイル」パネルが表示されていないときは、画面上段の「ウィンドウ」メニューから「パネル」にチェックを入れると表示されます。

先ず、「CSSスタイル」パネルの「現在」タブを選ぶと、目的の要素にまだスタイルが設定されていない場合は、「ルール」窓に”選択したタグにはCSSルールは適用されていません”とメッセージが出ますので、最下段にある新規スタイルボタンをクリックして、「新規CSSルール」ダイアログ・ボックスを表示して、ルールの設定を始めます。

若し、選択した要素に既にCSSルールが設定されていた場合は、「ルール」窓に設定済みのルール名の一覧が表示されます。左のパネルの例で#container #contennts <h3>というのは#containerの中で #contennts の中に入っている<h3>という複合的表示を表しています。

該当するルール名を選択すると、そのルールの設定済みのプロパティーが下に列挙されます。各プロパーティー欄の右端をクリックすると▼印が現れ、既存とプロパティを変更したり、新しいプロパティーを追加したりできます。

CSSパネル

新規CSSルール　ダイアログ・ボックス

「CSSスタイル」パネルの「新規スタイル」ボタンをクリックすると、上のような「新規CSSルール」ダイアログ・ボックスが表示されます。

このダイアログでは、「セレクタータイプ」、「セレクター名」、及び「ルール定義」の3項目に就いて記述しますが、それら各々には▼印が付いていて、クリックして現れる選択肢の中から選べばよいことになっています。
セレクタータイプ：はHTMLのタグの再定義、タグにクラス名を付して定義するものか、タグにIDを付けて定義するものか、或いはそれらの複合に定義するものかを指定します。クラスタイプはそのページで何度も定義出来ますが、IDタイプは一度しか定義出来ないものです。
セレクター名：セレクター或いはルールの名前を指定します。複合タイプを指定した場合は下の窓にどのタグとタグの複合か説明がでます。
ルール定義：このルールの定義が現在作業中のページだけか或いはファイルとして保存されたどのスタイスシート・ファイルに適用されるかを指定します。

以上の3項目の指定が終わってから、OKボタンをクリックすると、CSSの定義ダイアログ・ボックスが現れて具体的にスタイルの規定を行います。

CSS ルールの定義

CSSルールの定義はダイアログの左側に列挙されている「タイプ」「背景」「ブロック」「ボックス」「ボーダー」「リスト」「位置」「拡張」の8つのカテゴリー毎に定義される。　定義の画面はカテゴリー毎に変わります。

タイプ・カテゴリー：　主として文字列のフォント・ファミリー、フォント・サイズ、字の太さ、行高など規定します。文字列の見栄は行高（文字の何倍とか何％にするとか）などによって変わってくることに注目する価値があります。
背景：　Boxの背景色や背景画もウェブ・ページのデザインに大いに関係してきます。
ブロック：　文字列の配置やインデントも重要です。
ボックス：　要素をBoxと見立てて、その４周のマージンやパッディングもページの見栄をよくする重要な要素です。
ボーダー：　要素をBoxとみたてて、その４周の枠線の太さや種類でページの変化が高まります。
その他のカテゴリー：　筆者はまだあまり利用していませんのでよく説明が出来ません。

ボックス・カテゴリーを選んだ時のCSSルール設定例

上のCSSルール定義はリスト（LI）のボックス・カテゴリー設定の例です。
幅９５X高さ３０pxのボックスとしてメニュー・ボタンを定義し、マージンとパディングでその配置を定めています。左のマージン-30というのはリストの箇条印「・」を左側の外に追い出して表示させないためです。
このようにCSS3によるスタイルは従来のHTMLの書式より遥かにキメの細かい設定が可能なのです。

文章の中の一部のデザインを強調する

従来の書式設定では「B」や「I」は太字やイタリック体として使われて来ましたが、HTML５としてはこれらの書式タグは使われなくなります。Dreamweaver CS5ではそれらは太字とかイタリック体としてでなく、文章の一部を他と区別したり強調するためのCSS定義のタグとして使っています。
即ち、文章の一部を範囲指定して「B」や「I」のボタンをクリックすると、ソース・コードには<strong>　～　</strong>や<span>　～　</span>が挿入され、その部分に対してCSSスタイルが定義付されるような仕組みになっています。