MB-Support

パソコン初心者のサポートページ

スタイルシート:横3段表示


前回 の続きです。 前回は横 2 段表示をFloa t、margin 、Table を使って構成しましたが、今回は横3段表示です。 ホームページを横3段で表示した場合の設計図は右。 HTML ソースの書き方は、上から一番重要なコンテンツ、左メニュー、右メニューと書いていき、CSS の float で左右に表示します。 横 2 段より複雑になるのは、最初の float で左 DIV(黄色と赤)、右 DIV(青)に振り分けて、さらに左 DIV 内で float により左 DIV(赤)、右 DIV(黄色)に振り分けます。 複雑になるものの、HTML ソースでは最も重要な内容を上部に記述できるため、ホームページの構成は正しいものになります。


基本となるHTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート適用前</title>
</head>
<body>
<div id="content">
 <p>
  sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
 </p>
</div>
<div id="menu_left">
 <p>
  left menu textleft menu textleft menu textleft menu textleft menu text
  left menu textleft menu textleft menu textleft menu textleft menu text
  left menu textleft menu textleft menu textleft menu textleft menu text
 </p>
</div>
<div id="menu_right">
 <p>
  right menu textright menu textright menu textright menu textright menu text
  right menu textright menu textright menu textright menu textright menu text
  right menu textright menu textright menu textright menu textright menu text
 </p>
</div>
</body>
</html>

真ん中に表示されるコンテンツ DIV の ID が [content] 、左に表示される DIV の ID が [menu_left] 、右に表示される DIV の ID が [menu_right] として、上から順番に HTML ソースに記述しました。 これをブラウザで表示すると、sample text 1 、left menu text 、right menu text の順に表示されます。

サンプル24



まずは、3 つの DIV を DIV ID [container] に格納します。 Container の幅はブラウザの横幅により異なり、100 % 表示とします。 さらに DIV ID [container_left] に DIV [menu_left](赤)、DIV ID [content](黄色)を格納します。 DIV ID [menu_right](青)の横幅を 20 % とした場合、DIV ID [container_left] の横幅は 100 % - 20 % = 80 % となります。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<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">
<!--
div#container {
width:100%;
}
div#container_left {
float:left;
width:80%;
}
div#menu_right {
float:right;
width:20%;
background-color:blue;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="container_left">
  <div id="content">
   <p>
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
   </p>
  </div>
  <div id="menu_left">
   <p>
    left menu textleft menu textleft menu textleft menu textleft menu text
    left menu textleft menu textleft menu textleft menu textleft menu text
    left menu textleft menu textleft menu textleft menu textleft menu text
   </p>
  </div>
 </div>
 <div id="menu_right">
  <p>
   right menu textright menu textright menu textright menu textright menu text
   right menu textright menu textright menu textright menu textright menu text
   right menu textright menu textright menu textright menu textright menu text
  </p>
 </div>
</div>
</body>
</html>


これで、DIV ID [container_left] と DIV ID [menu_right](青)に振り分ける事ができました。 このやり方は、前回の横 2 段表示で説明したのと同じです。

サンプル25



次に、DIV ID [container_left] 内の二つの DIV を float で振り分けます。 左メニュー(赤)の DIV ID [menu_left] の横幅を 20 % 、コンテンツ DIV の横幅を 80 % にすると、右の図になります。 DIV ID [container_left] の横幅が 80 % で、この 80 % は [container] から見た横幅であり、menu_left と content から見ると 100 % に相当します。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<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">
<!--
div#container {
width:100%;
}
div#container_left {
float:left;
width:80%;
}
div#menu_right {
float:right;
width:20%;
background-color:blue;
}
div#content {
float:right;
width:80%;
background-color:yellow;
}
div#menu_left {
float:left;
width:20%;
background-color:red;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="container_left">
  <div id="content">
   <p>
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
    sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
   </p>
  </div>
  <div id="menu_left">
   <p>
    left menu textleft menu textleft menu textleft menu textleft menu text
    left menu textleft menu textleft menu textleft menu textleft menu text
    left menu textleft menu textleft menu textleft menu textleft menu text
   </p>
  </div>
 </div>
 <div id="menu_right">
  <p>
   right menu textright menu textright menu textright menu textright menu text
   right menu textright menu textright menu textright menu textright menu text
   right menu textright menu textright menu textright menu textright menu text
  </p>
 </div>
</div>
</body>
</html>

以上で 3 つの DIV を横 3 段で表示する事ができました。今回は横幅をパーセントで指定しましたが、px で指定する事も可能です。

サンプル26



次のサンプルは全体の横幅を 800px にして、左 DIV に 600px、右 DIV(青)に 200px を指定しました。 さらに左 DIV の 600px の内、150px を左 DIV(赤)、残りの 450px を右 DIV(黄色)に指定した状態です。


HTMLソース(メモ帳)

<style type="text/css">
<!--
div#container {
width:800px;
}
div#container_left {
float:left;
width:600px;
}
div#menu_right {
float:right;
width:200px;
background-color:blue;
}
div#content {
float:right;
width:450px;
background-color:yellow;
}
div#menu_left {
float:left;
width:150px;
background-color:red;
}
-->
</style>

サイズをpx単位で指定したのであれば、背景に画像を使う事で統一できます。 この内容は、横 2 段表示のページで検証しました。 ブラウザの横サイズにより可変しないページ、すなわち、全ての DIV の横幅がピクセル単位で指定した場合、それに対応する背景画像を作成して縦にリピートする事で可能です。

サンプル27



Body の背景画像を指定した結果が右です。 3 つの DIV 内に記述された内容量に関係なく、背景を統一する事ができますが、パーセントで指定した場合は、閲覧者のブラウザサイズにより可変するので、背景画像を作成する事ができません(変化する背景画像を想定する事ができないため)。

サンプル28



Body の背景画像では無く、container の背景画像として指定できれば良いのですが、IE 7 以降のブラウザでは解釈されません(正しい)。 右のスクリーンショットは、左が IE 6 、右が IE 8 です。IE 6 では container に背景画像を指定すると、DIV 内の内容量が多い DIV に下段が統一されます。 一方、IE 8 では背景画像が表示されません。

サンプル29




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項