Lesson７スタイル・シートを使ったページ・レイアウト

新しいレイアウトの基本

HTMLの<Table>タグの代わりに<Div>を使う

従来のウェブ・ページ作成手順では、殆どの人がコンテンツをグループ分けし、整然としたページ・レイアウトを達成するのにHTMLの<Table>タグを使っていました。　所が、HTML5の新しい流れでは<Table>タグの代わりにレイアウト・オブジェクトである<Div>タグを使うようになりました。<Div>タグはCSS作成のBoxModelでのBoxとしてより豊かなスタイルを定義づけることが出来るようになりました。

<Div>タグの挿入

<Div>タグの挿入は、白紙のページに新たにレイアウトを付ける場合はページ左端のトップにポインターを置き、既にコンテンツが入力されている場合は囲むべき範囲を選択してから行います。

その上で、「挿入パネル」の「一般」の中の「Divタグを挿入」を選んでクリックすると「Divタグを挿入」ダイアログ・ボックスが表示されます。

「挿入パネル」が表示されていない時は、「ウィンドウ」メニュでー「挿入」をクリックすると画面右側に表示されます。

Divタグの定義

Divタグの位置と名前の指定

「Divタグを挿入」ダイアログ・ボックスが表示されたら、▼アイコンをクリックして挿入ポイントの選択を指定します。予め挿入ポイントを指定している場合は、「挿入ポイント」の指定のままでよいが、その他に「開始タグの後（<body>の後）」や「終了タグの前（</body>の前）」や「タグの前」や「タグの後」の指定もあります。「タグの前」や「タグの後」の指定は入れ子Boxの折に使われます。その場合、右側の窓の▼アイコンをクリックすることによってどのタグの前か後かを指定します。この指定を間違えるとレイアウトの大変な乱れを生じるので細心の注意が必要です。

「ID名」はcontainerとかsideとか mainとか footのようにCSSルールの名前を入力します。DivBoxの場合はページに一つしかないBoxとして定義しますので、ID名を普通は付しますが、クラス名がどのような場合にはDivに付けるのか筆者はまだ判りませんので、判った時点でここに記述します。入力したID名にDreamweaverが自動的に「#」印を付して「#container」のように生成します。

新規にDivのCSS定義をする場合は、「新規CSSルール」のボタンをクリックすると、前節で紹介した「新規CSSルール」ダイアログ・ボックスが表示されるので、そこでDivの定義付を行います。

DivBoxの定義で注意すること

DivBoxの定義は殆どが背景、ボックス、ボーダーのカテゴリーに限られます。

背景カテゴリーではBox内の背景色や背景画を指定する位でしょう。背景画を素材集から取った壁紙を使う場合は、繰り返しに「repeat」を指定します。自分で撮った写真などをBox一杯に背景画として使うときは、その写真をBoxのサイズに合わせてトリミングしておき、繰り返しは「no-repeat」を指定します。

ボックスカテゴリーは枠を決めるBoxの定義で重要なものです。横幅のサイズはウェブ・サイトのデザインの計画時点ではっきり決めておいて指定しましう。ボーダを表示する場合は、その両側のボーダーのサイズを差し引いて指定します。高さのサイズはコンテンツの量で変わりますので指定しないでおいて最終的に規定してもよいでしょう。Paddingを指定するとその枠の中でのコンテンツとの間の空白を指定しますが、枠BoxでPaddingを指定するよりコンテンツのMarginで指定した方がキメの細かいデザインになると思います。枠BoxのMarginは枠Boxが入れ子になる場合のBox同士の隙間になり、そのサイズは隣あったBox両方のMarginの合計になりますので注意してください。但し、枠Boxと隣合った枠BoxでないもののMarginは大きいほうのMarginになります。
上の例で、Right‐MarginとLeft-Marginが「auto」に指定されているのはこの枠Boxを中央揃えにするためですが、これは非公式の慣例であってBrowserによっては中央揃えにならないとも言われています。
回り込み（Float）の指定は枠Boxが入れ子になる場合は重要です。横幅の設定が正しく計算されていれば、一般的にFloat=leftにしておくのが一般ですが、親枠が変わって別の親枠になる時には新しい親枠の回り込みを「両方向解除」しておく必要があります。これは親枠のルールの継承があるためです。

ボーダーカテゴリーも枠を決めるBoxの定義で重要なものです。枠線を入れることによってレイアウトが引き締まることがあります。枠Boxが入れ子になっている場合は、一般的に大枠Boxには枠線を入れずに小枠Boxにそれぞれの枠線を入れた方がすっきりしたレイアウトになると思います。親枠と小枠の両方に枠線をしていすると境界がすっきりしなくなる可能性があります。

入れ子枠Boxのレイアウトの乱れ

入れ子枠Boxのレイアウトをした後プレビューやBrowserで表示してみると小枠が意図した通りに親枠の中に納まっていないことがあります。この原因には２通りが考えられます。

原因その１：　枠Boxの横幅の計算が間違っていて小枠の幅が親枠の幅に入らないような状態の時は、その小枠は下にずれてしまいます。実際の枠幅は横幅サイズと枠線（ボーダー）サイズの合計です。

原因その２：　小枠が新しい親枠に変わった時には前の親枠の回り込みを新しい親枠の指定で解除しておかなければなりません。これを怠るとレイアウトが乱れます。

外部CSSファイルの利用

ウェブ・ページの<head>～<head>部分に生成されたCSSはそのページの外部に書き出すことによって他のページのスタイルにも共用することが出来ます。　　　

内部CSSの外部スタイル・シートへの書き出し

「CSSスタイル」パネルの「すべて」タグを選んで表示されるすべてのルールを選んでハイライトさせてから、「CSSスタイル」タイトルの最右端にあるアイコンをクリックし、プルダウン・メニューから「CSSルールを移動」を選びます。　　
表示される「外部スタイルシートへの移動」ダイアログで「新規スタイルシート」を選びます。

表示された「スタイル・シート・ファイルの別名で保存」ダイアログ・ボックスにCSSのフォルダを作成して、その中に新しいスタイルシートの名前を付けて保存すれば、内部CSSは外部CSSに書き出されます。

そのことは「ファイル」パネルに「CSS」フォルダーが作成され、その中にスタイル・シートのファイルが作成されたことで確認できます。

外部CSSファイルへのリンク設定

新しく作られたウェブ・ページに既存の外部CSSファイルへのリンクを設定することによって、その外部CSSを共用することが出来ます。

新しいウェブ・ページを開いた状態で、「CSSスタイル」パネルのタイトルの最右端にあるアイコンをクリックしてプルダウンされるメニューの中から「外部スタイルシートの添付」を選びます。

「外部スタイルシートの添付」ダイアログ・ボックスの「参照」ボタンで利用しようとする外部CSSファイルを選べば、その外部CSSファイルへのLinkが設定されます。　そのページの<head>～<head>部分に共用する外部CSSファイルへの<link>タグが生成されていることでリンクが設定されたことを確認できます。