アクセシビリティ
デベロッパーリソース

目次

  1. はじめに
  2. 前回の記事の最後からスタート
  3. ３列目の追加
  4. 列のコンテンツの追加
  5. だまし列の作成とフッターの調整
  6. フロートとクリアリングについての注意事項
  7. その他のだまし絵テクニックと注釈付けのススメ

Creating a simple three-column design with CSS and Dreamweaver 8

３列目の追加

まず３列目を追加します。 ３列目も最初の列と同じようにフロートします。ただし、今回は右側に配置します。 この記事の最初にリンクを用意したサンプルファイルの、starter_filesフォルダに含まれているindex.htmファイルを開きます。 Dreamweaverの画面表示を分割ビューにし、デザインビューのナビゲーション部分のdiv内に、カーソルを配置します。ウィンドウの下にあるタグセレクタには、このdivへのパスが表示されます： <body> <div#holder> <div#nav> <p>。タグセレクタの <div#nav> をクリックしてから、キーボードの右矢印キーを押します。 コードビューの表示に注意すると、ハイライト表示されている部分が #nav div全体から、 #nav と #contentの間のスペースに移動したことが確認できます。 挿入バーのレイアウトオプションを表示し、「Divタグを挿入」アイコンをクリックします。Divタグを挿入ダイアログボックス（図２参照）が表示されたら、IDフィールドにカーソルを配置し、newsと入力します。

Divタグを挿入ダイアログボックス

図２．Divタグを挿入ダイアログボックス

「新規CSSスタイル」ボタンをクリックします。 新規CSSルールダイアログボックスでは、セレクタタイプを詳細設定、セレクタを#news;、定義場所をdemo.cssにそれぞれ設定します。 「OK」をクリックします。次に、右側の列に対して、基本的なプロパティとその値を設定します。 筆者は次の項目を設定しました。

背景

Background color: #877D6C

ボックス

Width: 144px
Float: right
Padding: top:15px right:8px bottom:8px left:8px
Margin: (Same for all) 0px

「OK」をクリックします。Divタグを挿入ダイアログボックスが開いたままの状態なので、 ここでも「OK」をクリックします。 これで新しい右側の列に対するルールが作成できました。（この作業は、前回のチュートリアルで紹介した要領でコードビュー上でも行えます。Dreamweaverでは、１つの作業に対して複数の操作法が提供されていることがよくあります。）

デザインビューを表示すると、新しく作成したdivが #content divの右上部に配置されていることが確認できます（図３参照）。

新規作成したdivが#content divの右上部に配置された状態

図３．新規作成したdivが #content divの右上部に配置された状態

もちろん、このdivに、より多くのコンテンツを配置することでdivの領域がページの下方向に拡張されますが、図３をみれば分かるように、 #content divのテキストは #news divにテキストが含まれている部分だけを回り込んでいるに過ぎません。つまり、フロートのテキストがある部分に限り、重複が回避されているのです。このことは、フロートしている #news divに背景色、 #content divに白がそれぞれ設定されているので、一見明らかではないかも知れません。試しに、表示／ビジュアルエイド／CSSレイアウトの背景を選択して（各divの背景にランダムに選択された色が付きます）、CSSレイアウトの各要素に背景色を付けてみてください。図４が示すように、実際には #content divが、 #nav divから #holder divの右端にまで達していることが確認できます。つまり、 #news divは、 #content divのテキストだけを回避しているに過ぎないということです。

CSSレイアウトの背景機能をオンにして、#news divが#content divのテキストを回避しているに過ぎないことを示した状態

図４．CSSレイアウトの背景機能をオンにして、 #news divが #content divのテキストを回避しているに過ぎないことを示した状態

ここでは、明らかに、前回の記事で紹介した左の列と同じように、新しく作成した右の列を調整する必要があります。では、 #content divに右マージンを設定して、 #news div領域がその長さにかかわらず、常に単独の列を形成するようにします。

demo.cssドキュメントを開き、 #content ルールを見つけます。この中のマージンの設定部分を現在の

margin: 0 0 0 165px;

から、次の値に変更します。

margin: 0 165px 0 165px;

ヒント：指定を簡素化したい場合は、 margin: 0 165px; と簡易表記しても上の記述と同じ結果が得られます。CSSの簡易表記では、時計回りで位置が設定でき、仮に margin: 0 0 0 165px; と記述した場合、それぞれが上、右、下、左の値になります。表記をさらに簡素化することも可能です。３つの値だけを margin: 0 165px 5px;というように指定すると、これらは上、右、下の値として設定され、左の値には右の値が自動的に適用されます。また、２つの値だけを margin: 0 165px;というように指定すると、１つ目の値が上下に、２つ目の値が左右にそれぞれ適用されます。 この簡易表記は上下または左右の値が完全に一致する場合に限り有効です。

ルールの設定変更が完了すると、これで新しく作成した列が #content から独立するようになったことが確認できます（図５参照）。表示／ビジュアルエイド／CSSレイアウトのアウトラインを有効にしておけば、この状態が明らかに確認できます。

新しい列と#content divのテキストが明確に分離された状態

図５．新しい列と #content divのテキストが明確に分離された状態

中央の列が完全に独立し、意図せず #news divの背後に流れ込んでいないことを確認するために、CSSレイアウトの背景を有効にしてみることにします（図６参照）。

ビジュアルエイドのCSSレイアウトの背景を有効にした状態

図６．ビジュアルエイドのCSSレイアウトの背景を有効にした状態

メモ：ドキュメントのXHTMLソースには #nav と #news のどちらのdivを先に配置しても問題ありません。いずれの場合も問題なく動作します。筆者は通常ナビゲーションを先に配置して、スクリーンリーダが容易にこの部分を認識できるようにしています。（また、同じ理由から"skip nav"リンクもこの位置に配置するようにしています。）

もちろん、現状では #news divが画面の右隅に追いやられているいるので、まだ列と呼ぶに値しません。ただし、正しい位置にスペースが確保できたので、次に、この列に、コンテンツを追加してみることにします。

ページ 3 / 7
前のページ
次のページ