MB-Support

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

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


前回 の続きです。Float(フロート)でleft、rightを指定して、サンプルの文章を横2段表示してみました。図解にすると少し異なってしまうのですが、外枠の DIV の横幅を 100 % にして、その中の二つの DIV を 30 % + 70 % = 100 % にして、Float で left と right に回り込ませています。



この表示方法のメリットは、閲覧者の画面解像度を意識する事なく、どんな液晶サイズを使っていたとしても横幅が最大に利用できるため、ブラウザを最大表示すれば、より多くの文章を一度に表示でき、ブラウザを小さくすれば一度に表示される文章が少なくなります。つまり、閲覧者が自由に変更するブラウザサイズに柔軟に対応できるところです。ホームページはデスクトップパソコンで必ず閲覧している理由はなく、そうであっても液晶サイズは人それぞれ異なる訳で、その時代の主流は絞り込めるものの、ノートブックの場合はまた異なります。そんな現状で最適なホームページの横幅を決定するのは難しく、だったら可変するタイプが便利なのかも知れないと考えた場合にメリットがあるでしょう。



もう一つのメリットは、文章構造を最適化した状態で表示を変更できるところです。 ホームページのソースは上から下へと読み込まれるため、そのページで一番表現したい内容を上に書くのが基本となります。 例えば、定型文やメニューなどは下段で、そのページの内容文が上にある方が望ましい。 もし、テーブルを使って横2段表示を形成した場合、左に表示されるメニューがソース上で先頭になります。 これを回避するには、メニューを右に表示するしかありません。 Float を使った場合、内容となるソースを右に表示させる場合も、左に表示せる場合も、内容文を先頭に書く事ができます。



さて、ここからは使い難いと思う部分です。そもそも Float はテーブルと同じく、サイト全体の表示を構成するものでは無いと思われます。 例えば、コンテンツとメニューに分ける場合でこれを使った場合、メニューの背景色を変更したいとします。 メニューの背景色は、スタイルシートの background-color;色;で指定します。 右は、メニューと想定した右側に回り込ませた DIV に、背景色「赤」を指定した結果です。

サンプル3



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 {
width:70%;
float:left;
}
div#menu {
width:30%;
float:right;
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>

一見すると意図した表示ができていると思われますが、メニューの情報量よりコンテンツの情報量が増えた場合、右の表示となります。 これを意図した場合は問題ありませんが、メニューとして利用する右側の背景色を、左のコンテンツが終了するラインで揃える事ができません。 これを回避する方法は、管理人には見あたらず、メニューよりコンテンツの情報量を抑えるのは至難の業であり、そもそも横幅 100 % を指定した場合、表示するサイズにより可変する事で情報量を考慮する事ができません。

サンプル4



スタイルシート

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

打開策として、右メニューの DIV に height を指定したのが右。 背景色を指定する場合は、コンテンツの情報量を常に意識して、ページ毎に高さを想定して変更する必要があります。 テンプレートとしては利用できません。

サンプル5



スタイルシート

<style type="text/css">
<!--
div#container {
width:100%;
}
div#content {
width:70%;
float:left;
border:solid 1px;
}
div#menu {
width:30%;
float:right;
border:solid 1px;
height:100%;
}
-->
</style>

このままの表示では、どうなっているのか把握し難いので、左右に分かれた二つの DIV に 1px のボーダーを表示してみたのが右。 が、テーブルと異なり、外枠 100 % 内の二つ DIV の上下左右に 1px 幅のボーダーが挿入されたため(上下は無視して横だけで 1px × 左右 × 2 = 4px )、4px 分が邪魔になり回り込みが成立しませんでした。

サンプル6



スタイルシート

<style type="text/css">
<!--
div#container {
width:100%;
}
div#content {
width:69%;
float:left;
border:solid 1px;
}
div#menu {
width:30%;
float:right;
border:solid 1px;
height:100%;
}
-->
</style>

そこで、不本意となりますが、70 % を 69 % に変更したのが右。 こちらもブラウザのサイズ次第で回り込みが解除されてしまいますが、単純に DIV の範囲を知りたいだけなのでこれで良しとしましょう。 左の「Sample text1」が格納された DIV と、右の「Sample text2」が格納された DIV は異なるため、二つの DIV の終わり(高さ)を統一する事ができません。上で背景色「赤」を指定したのが「Sample text2」が格納された DIV 。

サンプル7



スタイルシート

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

そもそも、この二つの DIV は、外側に横幅 100 % を指定した DIV 内にあります。 ならば、この外側の DIV の背景色を「赤」に指定して、「Sample text2」に格納された DIV の背景色を指定無し、「Sample text1」が格納された DIV の背景色を「白」にすれば、「Sample text2」の DIV を超えた範囲にも、背景色が適用されるのでは? と考えました。その結果が右です。ことごとくバックグランドカラーが無視されてしまいました。



しかし、Internet Explorer では意図した表示となっています。 Firefox 、Chrome 、Safari4 、Opera では背景色が無視されたので、このやり方で解決とはいかない様です。

サンプル8



スタイルシート

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

同じやり方でパーセント指定ではなく、外側の DIV(サンプルでは ID container )を 700px 、左のコンテンツ(サンプルでは ID content )を550px、右のメニュー(サンプルでは ID content )を 150px と指定した場合なら、回避方法はあります。

サンプル9



ページの横幅と二つの DIV の横幅を決定してしまうならば、背景に使う画像を作成する事ができます。 例えば、ページの横幅が 700px で左コンテンツの 550px の部分を白、右メニューの 150px を赤にしたいならば、それと同じサイズの横幅(微調整として + 5px は欲しいかも)の画像を作成して保存します。 背景画像は縦に繰り返し表示させるので、高さは 10px くらいで問題ありません。 サンプルでは Windows に付属するペイントで作成して、white_red.jpg と名前を付けました。



スタイルシート

<style type="text/css">
<!--
body{
background:#fff url('white_red.jpg') repeat-y;
}
div#container {
width:700px;
}
div#content {
float:left;
width:550px;
}
div#menu {
float:right;
width:150px;
}
-->
</style>

この画像を BODY の背景画像に指定すれば、右の様になります。 右メニュー(赤)の文章量に関係無く、メニューの背景を赤に設定する事ができますが、サイズを固定してしまうので、ブラウザサイズの横幅に柔軟に対応するメリットが消滅します。

サンプル10



次のページでは、さらにデメリットのサンプルを上げ、回避するためにマージンやテーブルを使って、いろいろ試してみたいと思います。




戻る 一覧表示 次へ


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

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