二段組レイアウトを作ってみた

html勉強


メニューブロックとメインブロックの二つが水平に並んだレイアウトをCSSで設定する。ブラウザの動作モードは標準準拠としCSSも標準に準拠するよう心がける。なおこのレイアウトはWEBアプリケーションで使用する事を主な目的としているので動作モードの仕様上、JavaScriptが必要な場合はそれを可とする。

２段組のhtmlソースは下記の通り

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>二段組レイアウト-右メニュー</title>
<style type="text/css" media="screen">@import "./css/2column-layout.css";</style>
</head>

<body>

<div id="menublock">

/* ここにメニューコンテンツを記述する */

</div>

<div id="mainblock">

/* ここにメニューコンテンツを記述する */

</div>

</body>

</html>
  • 出来るだけ直感的、メンテナンスの容易なソースを書く。
  • メニューブロック、メインブロックの高さはブラウザ表示領域全体と等しいものとする。
  • メニューブロックの幅は固定幅とする。
  • メインブロックの幅はウィンドウサイズにより変化する。
  • 各ブロックはコンテンツ内容に応じてスクロールバーを表示する。

CSSの手順を下記の通りとする。

  • ブラウザ標準のスクロールバー表示を消す
  • ブロックの表示位置を設定する
  • ブロックの大きさを設定する
  • ブロックの属性を設定する

ブラウザ標準のスクロールバー表示を消す

/* ブラウザ標準のスクロールバー表示を消す */
html
{
 overflow : hidden;
}

コンテンツが表示領域よりはみ出る場合、見栄えをどうするかを設定するのがoverflowである。ブラウザ標準のスクロールバー表示を消すにはタグhtmlのoverflowをhiddenに設定すればよい。つまり通常表示されるスクロールバーはタグhtmlのスクロールバーである。

ブロックの表示位置を設定する

/* メニューブロックの表示位置 */
#menublock
{
 position : absolute;

 top      : 0px;
 left     : 0px;
}
/* メインブロックの表示位置 */
#mainblock
{
 position : absolute;

 top      : 0px;
 left     : 320px;
}

ブロックの大きさを設定する

/* メニューブロックの大きさ */
#menublock
{
 width    : 320px;
 height   : 100%;
}
/* メインブロックの大きさ */
#mainblock
{
 right    : 0px;
 height   : 100%;
}

一般的なブラウザのCSS標準準拠動作モードではブロックレベル要素の100%指定の高さを表示する場合は注意が必要である。詳しくは「height: n%;の正しい仕様」を参照の事。

前提条件
/* メニューブロック、メインブロック高さの前提条件 */
body
{
 height : 100%;
}
IE6におけるrightの仕様

IE6のCSS標準準拠動作モードではrightを0pxと指定したにも関わらず僅かな余白が出現する。これは隠したスクロールバーの表示領域である。この余白をなくす為には

  • body幅を100%とする
  • expressionを使ってブロックレベル要素の表示領域幅を計算する

またIE6だけに有効な属性の指定はcssハックを利用し_widthとすれば良い。

/* IE6用のブロックレベル要素表示領域の幅計算 前提条件 */
body
{
 width : 100%;
}
/* IE6用のブロックレベル要素表示領域の幅計算 */
#mainblock
{
 _width : expression((document.body.clientWidth-320)+'px')
}

ブロックのスクロールバー動作

コンテンツがブロックの表示領域をはみ出した場合はブロックレベル要素にスクロールバーを表示するように指定する。

/* コンテンツが表示領域をはみ出した場合の処理 */
#menublock,
#mainblock
{
 overflow : auto;
}

まとめ

以上をまとめると下記のようなソースとなる。

/* ======= ベース ==================================================*/

/* ブラウザ標準のスクロールバー表示を消す */
html
{
 overflow : hidden;
}

/* ======= 表示位置 ================================================*/

/* メニューブロックの表示位置 */
#menublock
{
 position : absolute;
 top      : 0px;
 left     : 0px;
}

/* メインブロックの表示位置 */
#mainblock
{
 position : absolute;
 top      : 0px;
 left     : 320px;
}

/* ======= 大きさ ==================================================*/

/* メニューブロック、メインブロック高さの前提条件 */
body
{
 height : 100%;
}

/* メニューブロックの大きさ */
#menublock
{
 width    : 320px;
 height   : 100%;
}

/* メインブロックの大きさ */
#mainblock
{
 right    : 0px;
 height   : 100%;
}

/* IE6用のブロックレベル要素表示領域の幅計算 前提条件 */
body
{
 width : 100%;
}

/* IE6用のブロックレベル要素表示領域の幅計算 */
#mainblock
{
 _width : expression((document.body.clientWidth-320)+'px')
}

/* ======= ブロックの属性 ==========================================*/

/* コンテンツが表示領域をはみ出した場合の処理 */
#menublock,
#mainblock
{
 overflow : auto;
}