MB-Support

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

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


前回 の続きです。Float(フロート)でleft、rightを指定して、サンプルの文章を横2段表示してみました。今度は、どちらかの DIV の幅を固定したいと考えます。 例えば、横幅 100 % を維持しつつ、メニューが表示される DIV は横幅 160 px を維持して、ブラウザサイズを変更した時にコンテンツの DIV だけ広げたり縮めたりできれば便利です。 しかし、この方法は見つかりませんでした。Float を使った場合、外側の DIV を 100 % 、 メニューを格納する DIV を 160px(黄色)、コンテンツをフリーサイズにする事で、ブラウザサイズを変更してもコンテンツ DIV だけが自由に可変すると思われましたが、この指定方法が見つかりません。 外枠の width:100% に対して、メニューの width:160px を引いた残りのパーセントは、クライアントのブラウザサイズにより異なり、何 % といった柔軟な指定方法がみつかりませんでした。 試しに、コンテンツ DIV の横幅を指定しないサンプルを作ってみました。



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#content {
float:right;
}
div#menu {
float:left;
width:160px;
background-color:red;
}
-->
</style>
</head>
<body>
<div id="container">
 <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">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
</div>
</body>
</html>

結果は右です。横幅を指定しないコンテンツ DIV が横幅 100 % となり、メニュー DIV(赤)が回り込む事ができませんでした。

サンプル11



スタイルシート

<style type="text/css">
<!--
div#container {
width:100%;
}
div#content {
float:right;
width:80%;
}
div#menu {
float:left;
width:160px;
background-color:red;
}
-->
</style>

正しい指定方法ではありませんが、メニュー DIV を 160px に固定して、コンテンツ DI Vを 80 % に指定した場合。ブラウザサイズにより回り込みが成立するか解除されるか異なりました。 理屈としては、100 % - 80 % = 20 % のメニュー DIV 表示領域が 160px に満たしている場合に回り込みが成立して、それに満たない場合は回り込みが解除されてしまいます。 また、メニュー DIV は 160px に固定しているため、ブラウザの横幅を広げれば広げるほど、20 % の幅が広がり、誤差が大きくなります。 あくまでもコンテンツ DIV は 80 % を閉め、20 % の部分が 160 px を超えれば、それだけ空間が発生してしまいます。

サンプル12

結局、どちらかのサイズを固定する事はできませんでした。



スタイルシート

<style type="text/css">
<!--
div#container {
width:100%;
}
div#content {
width:70%;
float:left;
}
div#menu {
width:30%;
float:right;
background-color:red;
}
-->
</style>

もう一つの不便な点は、DIV の縮まる最低値を指定できない所です。 例えば、右はコンテンツ DIV に 504 × 378px の写真を埋め込んであります。 コンテンツ DIV が 70 % で、メニュー DIV が 30 % です。 ブラウザを伸縮させた時に、コンテンツ DIV の 70 % が画像サイズの 504px を割っても、回り込みが解除される事はありませんが、メニュー DIV が上に重なります。

サンプル13

この動作は正常で、ページを参照するのに満たないブラウザの横幅である事から、ページ制作者が意図したサイズに変更すれば問題無く参照できます。 できれば、コンテンツ DIV に格納された画像の横幅より 70 % が満たない少なくなった時、メニュー DIV が重なるのではなく、ブラウザに横スクロールバーが出現して、画像の横幅がコンテンツ DIV の最小値になってくると楽ではありますが、本来のfloatの意味は薄れます。



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">
<!--
table#container {
width:100%;
}
td#content {
}
td#menu {
width:150px;
background-color:red;
}
tr {vertical-align:top;}
-->
</style>
</head>
<body>
<table id="container">
<tr>
<td id="content">
<p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
</p>
<img src="sample1.jpg" width="504" height="378" />
<p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
</p>
</td>
<td id="menu">
<p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
</p>
</td>
</tr>
</table>
</body>
</html>

これらの事を考慮すると、テーブルでサイトを構成した場合が有利です。

サンプル14



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">
<!--
table#container {
width:100%;
}
td#content {
}
td#menu {
width:150px;
background-color:red;
}
tr {vertical-align:top;}
.content_small {
width:500px;
}
.menu_small {
width:150px;
}
-->
</style>
</head>
<body>
<table id="container">
<tr>
<td id="content">
<p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
</p>
<img src="sample1.jpg" width="504" height="378" />
<p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
</p>
<div class="content_small"></div>
</td>
<td id="menu">
<p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
</p>
<div class="menu_small"></div>
</td>
</tr>
</table>
</body>
</html>

例えば、画像をあえて挿入する必要もなく、横幅を px で定め、もう片方を可変させられます。 また、縮小時の最小値を定めるために、透明な DIV を作成して横幅を指定すれば意図した動作となります。 次のサンプルでは、テーブルの横幅を 100 % 、コンテンツの横幅を指定せず、透明な DIV を格納して、その横幅を 500px としています(最小値として設定)。 メニュー(赤)の TD を 150px に指定して、透明な DIV を格納して、その横幅を 150px としています(最小値として設定)。 これにより、ブラウザの横幅を広げても、メニューの 150px は維持され、横幅を指定していないコンテンツ TD は可変します。 また、ブラウザの横幅を縮めた場合は、透明な DIV が埋め込まれているため、そこで設定した値以下に縮まる事はなく、ブラウザの下段にスクロールバーが表示されます。

サンプル15



このような制御を、スタイルシートでは出来ないと思われます。また、テーブルも同じくページ構成を担うものではありません。 例えば、左にメニュー 150px のメニューを表示して、右に可変するコンテンツを表示する場合、テーブルで TD の順序を制御する事ができず、ソースは左に来る文章を先に書く必要があります。 これにより、表示は完璧でも文章構造は破壊されます。 また、テーブルは全てを読み込んでから描画されるので、コンテンツの量が多くなれば、それだけ表示されるまで時間を要します。

サンプル16

次は、マージンを使ってメニュー DIV の幅を固定して、コンテンツ DIV を可変させつつ Float を使って見たいと思います。




戻る 一覧表示 次へ


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

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