テーブルを使わないレイアウト試作

テーブルを使わないレイアウト試作

テーブルを使わないレイアウト試作

ほとんどが<URL:http://adp.daa.jp/>を参考にしています。それを、馬鹿な私でもあとでわかるように詳しくメモします。

まずはざっくりレイアウトのみのcss

上記のようなレイアウトを作るとして、

title(header)部分は

#header {
      width: 760px;
      max-width: 100%;
      height: 135px;
      background-color: blue;
}

menuとNewsとmainを入れる部分

#container {
      width: 760px;
      max-width: 100%;
}

menuとNews部分は

#navigation {
      float: left;
      width: 210px;
      max-width: 100%;
      background-color: white;
}

main部分は

#content {
      float: left;
      width: 550px;
      max-width: 100%;
      background-color: pink;
}

初期化用に

#初期化用
* {
     margin: 0;
     padding: 0;
  }

フッター用に

#footer {
      clear: both;
      position: relative;
      z-index: 2;
      padding-top: 25px;
      width: 760px;
      max-width: 100%;
      background-color: green;
}

これらを使って、以下のようなhtmlファイルを作成

<?xml version="1.0"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift?JIS" />
<title>Design without table</title>
<style type="text/css">
<!--
* {
      margin: 0;
      padding: 0;
}

#header {
      width: 760px;
      max-width: 100%;
      height: 135px;
      background-color: blue;
}
#container {
      width: 760px;
      max-width: 100%;
}
#navigation {
      float: left;
      width: 210px;
      max-width: 100%;
      background-color: white;
}
#content {
      float: left;
      width: 550px;
      max-width: 100%;
      background-color: pink;
}
#footer {
      clear: both;
      position: relative;
      z-index: 2;
      padding-top: 25px;
      width: 760px;
      max-width: 100%;
      background-color: green;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>CSS Float Layouts</h1>
</div>

<div id="container">
<dl id="navigation">
<dt>MENU</dt>
<dd>
<ol>
<li><a href="http://www.chikkun.com/">Chikkun's ホーム</a></li>
<li><a href="http://www.chikkun.com/blog/">Blog</a></li>
<li><a href="http://www.chikkun.com/tomoko/">友子の部屋</a></li>
</ol>
</dd>
<dt>NEWS</dt>

<dd>
<p>何はともあれ、勉強勉強。</p>
<p>テーブルなしのレイアウト実験。</p>
</dd>
</dl>

<div id="content">
<h2>mainのタイトル</h2>
<p>ああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ</p>

<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>

<p>うううううううううううううううううううううううううううううううううう
うううううううううううううううううううううううううううううううううううう
うううううううううううううううううううううううううううううう</p>
</div>
<div id="footer">
<p>&copy; Chikkun Digital</p>
</div>
</div>
</body>
</html>

その結果(僕のFirefoxでは)以下のようなものになった。初期化用の

          * {
          margin: 0;
          padding: 0;
          }

があるので、indentなども全くされていないので(こうしておかないと、ブラウザごとにデフォルトが微妙に違うので、困るらしい)、少々手を入れていこう。

まずはヘッダー

header部分にgifファイルを入れ込み
header部分のh1の文字の色をredにし
header部分のpaddingを380pに

header部分のfont-weithtを900にする。

#header {
      width: 760px;
      max-width: 100%;
      height: 135px;
      background-color: blue;
      background-image: url(zukkoke.gif);
      background-repeat: no-repeat;
}
#header h1 {
      padding: 7% 0px 0px 380px;
      color: red;
      line-height: 1;
      font-weight: 900;
}

zukkoke.gifを用意して、ブラウザで見ると

Menuと背景

bodyに背景と文字色を指定
aタグの色

MenuやNewsに枠をつける、少々トリッキーな方法。再度、ソースとそれに対応するcssを見ると

<dl id="navigation">
<dt>MENU</dt>
<dd>
<ol>
<li><a href="http://www.chikkun.com/">Chikkun's ホーム</a></li>
<li><a href="http://www.chikkun.com/blog/">Blog</a></li>
<li><a href="http://www.chikkun.com/tomoko/">友子の部屋</a></li>
</ol>
</dd>
<dt>NEWS</dt>

<dd>
<p>何はともあれ、勉強勉強。</p>
<p>テーブルなしのレイアウト実験。</p>
</dd>
</dl>


#navigation dt {
      padding: 25px 0 0 25px;
      background-image: url(back-nav-t.png);
      background-repeat: no-repeat;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      color: #aaaa89;
}
#navigation {
      float: left;
      width: 210px;
      max-width: 100%;
      background-image: url(back-nav.png);
      background-repeat: repeat-y;
}
#navigation dd {
      padding: 0 22px 35px 26px;
      background-image: url(back-nav-b.png);
      background-position: bottom left;
      background-repeat: no-repeat;
}

つまり、dtでback-nav-t.pngで枠の上を、navigationの間は枠の両脇を表示(repeat-yで連続表示)。ddで枠の下を表示。この方法だと、Menuの枠とNewsの枠の真ん中に何か別のものを入れることは出来ない。

<!--
* {
      margin: 0;
      padding: 0;
}

body {
      background-color: #f0edeb;
      color: #ddddda;
}

a:link {
      color: #9999ff;
}
a:visited {
      color: #ccaacc;
}
a:hover {
      color: #ff2f56;
}

#header {
      width: 760px;
      max-width: 100%;
      height: 135px;
      background-color: blue;
      background-image: url(zukkoke.gif);
      background-repeat: no-repeat;
}
#header h1 {
      padding: 50px 4% 0px 380px;
         color: red;
      line-height: 1;
      font-weight: normal;
}

#container {
      width: 760px;
      max-width: 100%;
}
#navigation {
      float: left;
      width: 210px;
      max-width: 100%;
      background-image: url(back-nav.png);
      background-repeat: repeat-y;
}
#content {
      float: left;
      width: 550px;
      max-width: 100%;
      background-color: dark-blue;
}
#footer {
      clear: both;
      position: relative;
      z-index: 2;
      padding-top: 25px;
      width: 760px;
      max-width: 100%;
      background-color: green;
}
#navigation dt {
      padding: 25px 0 0 25px;
      background-image: url(back-nav-t.png);
      background-repeat: no-repeat;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      color: #aaaa89;
}
#navigation dd {
      padding: 0 22px 35px 26px;
      background-image: url(back-nav-b.png);
      background-position: bottom left;
      background-repeat: no-repeat;
}
#navigation dd li {
      list-style-type: none;
}
#navigation dd * * {
      margin: 0;
}

最後にmainとfooter

背景色により、字の色と重なって見えにくくなっていたり、インデントがないので、その辺をちょこちょこ修正して、

<?xml version="1.0"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift?JIS" />
<title>Design without table</title>
<style type="text/css">
<!--
* {
margin: 0;padding: 0;
}

body {
background-color: #f0edeb;color: #ddddda;
}

a:link {
color: #9999ff;
}
a:visited {
color: #ccaacc;
}
a:hover {
color: #ff2f56;
}

#header {
width: 760px;max-width: 100%;
	height: 135px;
	background-color: blue;
  	background-image: url(zukkoke.gif);
  	background-repeat: no-repeat;
}
#header h1 {
padding: 50px 4% 0px 380px;
         color: red;
line-height: 1;font-weight: normal;
}

#container {
width: 760px;max-width: 100%;
}
#navigation {
	float: left;
	width: 210px;
	max-width: 100%;
	background-image: url(back-nav.png);
	background-repeat: repeat-y;
}
#content {
float: left;width: 550px;max-width: 100%;background-color: dark-blue;
}
#footer {
clear: both;position: relative;z-index: 2;padding-top: 25px;width: \
    760px;max-width: 100%;background-color: green;
}
#navigation dt {
	padding: 25px 0 0 25px;
	background-image: url(back-nav-t.png);
	background-repeat: no-repeat;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #aaaa89;
}
#navigation dd {
	padding: 0 22px 35px 26px;
	background-image: url(back-nav-b.png);
	background-position: bottom left;
	background-repeat: no-repeat;
}
#navigation dd li {
list-style-type: none;
}
#navigation dd * * {
margin: 0;
}

#content {
float: left;width: 550px;max-width: 100%;
}
#content * {
margin-left: 26px;margin-right: 22px;
}
#content * * {
margin-left: 0;margin-right: 0;
}
#content #contenttitle {
margin-left: 0;margin-right: 0;padding: 28px 20px 0 26px;line-height: 1.2;
  color: darkgreen;
}
#content p {
margin-bottom: 1em;
  text-indent: 1em;
line-height: 1.5;
  color: navy;
}
#content #pagetop {
margin: 0;padding: 0.5em 4% 35px 0px;text-align: right;line-height: \
    1;font-family: Helvetica, Arial, sans-serif;font-weight: \
    bold;font-size: 80%;
}


-->
</style>
</head>
<body>
<div id="header">
<h1>CSS Float Layouts</h1>
</div>

<div id="container">
<dl id="navigation">
<dt>MENU</dt>
<dd>
<ol>
<li><a href="http://www.chikkun.com/">Chikkun's ホーム</a></li>
<li><a href="http://www.chikkun.com/blog/">Blog</a></li>
<li><a href="http://www.chikkun.com/tomoko/">友子の部屋</a></li>
</ol>
</dd>


<dt>NEWS</dt>

<dd>
<p>何はともあれ、勉強勉強。</p>
<p>テーブルなしのレイアウト実験。</p>
</dd>
</dl>

<div id="content">
<h2 id="contenttitle">mainのタイトル</h2>
<p>あああああああ<a \
    href="http://www.chikkun.com/blog">あああああああ</a>ああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああ</p>

<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>

<p>うううううううううううううううううううううううううううううううううう
うううううううううううううううううううううううううううううううううううう
うううううううううううううううううううううううううううううう</p>
<p id="pagetop"><a href="#header">&#9650; Top of Page</a></p>
</div>
<div id="footer">
<p>&copy; Chikkun Digital</p>
</div>
</div>
</body>
</html>

結論

結局、テーブルを使わずにcssでレイアウトする1つの方法として、#containerのボックスの中に、#navigationと#contentのボックスを入れ込み、そのどちらもfloat:left;とします。

 その場合、左フロートの下に、更に左フロートがある場合は、その左フロートを手前の左フロートの右に置きます。
 フロート同士は、インライン要素と違って、上外辺をそろえます。左フロートの右に置けない場合は、次はその下の行の一番左に寄せます。
 右フロートも同じです。ただし、左右逆ですが。

つまり、結局のところ、#contentボックスは#navigationの右に配置されるというわけです(狭い場合には、後述するように下に置かれます)。

そして、#footerではclear: both;でfloatを解除しています。

#header {
	width: 760px;
	max-width: 100%;
	height: 135px;
	background-color: blue;
  	background-image: url(zukkoke.gif);
  	background-repeat: no-repeat;
}
#container {
	width: 760px;
	max-width: 100%;
}
#navigation {
	float: left;
	width: 210px;
	max-width: 100%;
	background-image: url(back-nav.png);
	background-repeat: repeat-y;
}
#content {
float: left;width: 550px;max-width: 100%;background-color: dark-blue;
}
#footer {
clear: both;position: relative;z-index: 2;padding-top: 25px;width: 760px;
  text-align: right;
max-width: 100%;background-color: green;
}

さて出来た(ダサイレイアウト)ものをいくつかのブラウザで確認すると・・・・

Fire Fox

IE

Netscape 7.1

Opera

Fire Foxでの横幅が短い場合

横幅が短い場合、floatの設定だと、横に配置されていたものが、縦に並んでしまいます。これを「レイアウトが壊れた」と判断するのか、段々css対応になってきている携帯電話のブラウザーで、「そのまま携帯の狭い幅でも見やすい」と判断するかは難しいところです。