MB-Support

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

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


前回 の続きです。 二つの DIV を Float で左右に表示する方法で、横幅 100 % 表示で、どちらか片方だけの幅を固定する方法と、横幅の最低値を付けられないと書きましたが、日記を書いた後にその方法を見つけました。

[max-width] は、横幅の最大値を指定。[min-width] は横幅の最小値を指定できます。 ただし注意が必要なのは、Internet Explorer(インターネットエクスプローラ 以下 IE ) 7 以降に対応しており、IE 6 、それ以前の IE には対応していません。


max-width:160px;
min-width:160px;

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%;
min-width:500px;
float:left;
}
div#menu {
width:30%;
max-width:160px;
min-width:160px;
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
  </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>
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
</div>
</body>
</html>

左は IE 6 、右は IE 8( IE 7 でも同じ )。 横幅 100 % に対応するために、左の DIV に width:70% 、右の DIV に width:30% を指定するのは同じ。 追加したのは左の DIV に min-width:500px; 、右の DIV に max-width:160px; min-width:160px; 。 これにより、ブラウザの横幅を縮めたとしても、最低値の 500px より小さくなると、右の DIV が回り込みを解除します。 一方、右の DIV はブラウザの横幅を広げたとしても、最大値の 160px を維持できます。 ただし、30 % 内の 160px となり、30 % - 160 px の空白が空いてしまいます。



ブラウザの横幅を狭めた場合のスクリーンショットが右。どちらも float:right; の赤い部分が回り込み解除となりますが、 これは正常動作です。min-width:500px; で左 DIV の最小値を設定しているので、IE 7 以降では 500px より文章が折り返される事はありませんが、これが利用できない IE 6 では、全体を 100 % として 70 % の範囲で文章が折り返されています。 それと同時に、赤い部分の横幅 30 % 、最大値 160px 、最小値 160px も、IE 7 以降では横幅 160px を維持して、IE 6 以前では横幅 100 % に対して 30 % に伸縮します。

サンプル17



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

今度はマージンを指定して、赤い部分(DIV)を左右に回り込ませます。 外枠の DIV の横幅を 100% にして、コンテンツ DIV の横幅を指定せず、右にマージンを 160px とり、メニュー DIV(赤)の横幅を 160px とし、float:right で右に回り込ませます。 コンテンツの内容よりブラウザの横サイズが大きければ、IE6 、IE8 でも表示はさほど変わりません。 ブラウザの横サイズを大きくすると、コンテンツ DIV が広くなり、メニュー DIV は 160px 固定となります。



ブラウザの横サイズを縮めた場合、文章に関しては margin-right:160px; を忠実に表示しますが、コンテンツの大きな画像を設置した場合、IE7 以降では重なって表示されます。 これは正常動作と言えますが、IE6 以前では回り込ませたメニュー DIV(赤)が優先され、画像がメニューの終わるまで表示されません。 どちらもブラウザの横幅を広げれば良いと閲覧者に分かってもらえると思いますが、重なってもとりあえずコンテンツを表示できる IE7 以降が意図した表示になっています。

サンプル18



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 {
margin-right:160px;
}
div#menu {
width:160px;
float:right;
background-color:red;
}
.pic_right {
float:right;
margin:0px 10px 20px 20px;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
 <div id="content">
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <hr />
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <hr />
 </div>
</div>
</body>
</html>

コンテンツに設置する画像サイズだけ気にすれば良いのか、と言えばそうでもなく、例えば、サムネイルを右に回り込ませた文章を二つ書きました。ブラウザの横幅によっては、正常に表示されている様に思えます。



しかし、ブラウザの横幅を広げると、コンテンツの内容が崩れます。 これは、コンテンツ DIV とメニューDIV(赤)の float に問題は無く、メニュー DIV は 160px を維持したまま、コンテンツ DIV が広がっています。 問題はコンテンツ DIV 内の画像に設定した float:right; です。上から2番目の画像と文章が上に回り込んでしまいます。 これは、br clear=”all” を書いていないからです( hr に clear:both; を指定するのも良いでしょう )。

サンプル19



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 {
margin-right:160px;
}
div#menu {
width:160px;
float:right;
background-color:red;
}
.pic_right {
float:right;
margin:0px 10px 20px 20px;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
 <div id="content">
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
 </div>
</div>
</body>
</html>

ならば、コンテンツの hr の前に回り込みを解除する br clear=”all” を挿入したのが右。 一つ目の br で右に回り込ませた画像をクリアできましたが、それと同時に右に回り込ませたメニュー DIV(赤)も解除されてしまいました。

サンプル20



clear には、全てのfloatを解除する「both」と、右だけを解除する「right」、左だけを解除する「left」があります。 これをメニューの float と重複しない様にすれば、コンテンツの回り込み解除を正しく実行できます。

clear:both;
clear:left;
clear:right;

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 {
margin-right:160px;
}
div#menu {
width:160px;
float:right;
background-color:red;
}
.pic_left {
float:left;
margin:0px 20px 20px 0px;
}
br {
clear:left;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
 <div id="content">
  <p class="pic_left">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
  <p class="pic_left">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
 </div>
</div>
</body>
</html>

例えば、右にメニュー DIV を設置するのであれば、コンテンツ DIV 内では左に画像を設置して、br に clear:left; を設定したのが右。

サンプル21



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 {
margin-left:160px;
}
div#menu {
width:160px;
float:left;
background-color:red;
}
.pic_left {
float:left;
margin:0px 20px 20px 0px;
}
br {
clear:right;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
 <div id="content">
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
  <p class="pic_right">
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <br clear="all" />
  <hr />
 </div>
</div>
</body>
</html>

逆に、左にメニュー DIV を設置するのであれば、コンテンツDIV内では右に画像を設置して、br に clear:right; を設定したのが右。 コンテンツを作成する時に気を遣う必要がありますが、メニュー DIV の横幅を固定して、コンテンツの横幅を閲覧者のブラウザの横幅により可変させる事ができました。

サンプル22



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:160px;
background-color:red;
}
div#container_right {
float:right;
width:200px;
background-color:blue;
}
div#content {
margin:0px 200px 0px 160px; 
}
div#menu {
float:left;
width:200px;
}
.pic_right {
float:right;
margin:10px 10px 20px 20px;
}
.pic_left {
float:left;
margin:0px 20px 20px 10px;
}
br {
clear:none;
}
-->
</style>
</head>
<body>
<div id="container">
 <div id="container_right">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
  <div id="container_left">
  <p>
   sample text 3 sample text 3 sample text 3 sample text 3 sample text 3
  </p>
 </div>
 <div id="content">
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <p>
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <br clear="all" />
  <hr />
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
  <p>
   <img src="sample1_small.jpg" width="152" height="114" />
  </p>
  <br clear="all" />
  <hr />
 </div>
</div>
</body>
</html>

しかし、この方法だと横3段にした場合、コンテンツ内の画像を一切回り込ませる事ができなくなります。 もちろん、回り込みを解除しないのであれば、表示する事はできますが、文章量が多いか否かは、閲覧者のブラウザの横幅で決定されるため、予測するのは難しいでしょう。 また、マージンによる横幅指定は、回り込む DIV をコンテンツより先に書かく必要があります。

サンプル23




戻る 一覧表示 次へ


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

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