Mac mini ミニ大作戦！
最終回　目指せ、不完全CSSレイアウト
　　　　　　（時代はハイブリッド編）

時代は？と言われたら「パーシャル」と答えてしまうのが僕らの世代。しかし今はハイブリッドと答えるのが正解らしい。でも実際は決して先端を意味しているわけではなく、過渡期を乗り切る手段を意味している場合が多い。いよいよ最終回。

ハイブリッドという考え方

　日本人なら誰しも、いや世界の誰でも知っている自動車メーカー、トヨタ。そのトヨタが今掲げているキーワードの中で最も重要だと個人的に思っているのが「ハイブリッド」。ご存じ、電気＆ガソリン駆動による現時点で最も効率の良い組み合わせを採用した自動車に使われている言葉。別にトヨタだけが使っている言葉じゃないけれど、ハイブリッド・カーと聞いて真っ先に思いつくのはトヨタだろう。それくらいトヨタはハイブリッドで他社の数歩先をリードしている。

　もしトヨタがガソリンに依存せず環境に優しい最先端の技術だけに注力していたとしたら、つまり電気によるモーター駆動"のみ"で走行する自動車の開発・市販を目標としていたら、その達成は50年後だったかもしれない。確かにそれは理想が高くて崇高だけれど、現実にならないのなら意味が無い。そこでまずは、既に成熟した技術であるガソリン・エンジンのパワーと、低燃費で排気ガスの排出も抑えることの出来るモーター駆動を組み合わせたハイブリッド・カーを実現させ、見事一般化させてしまった。

　ハイブリッド。カタカナだし、音の響きが何かしら時代の最先端な感じを匂わせるけれど、実はその意味することろは「混血・雑種」。あまり洗練されたイメージじゃない。しかしこれからの21世紀、自動車業界のみならず、このハイブリッドという考え方は、混沌とした状況（過渡期）を乗り切る手段として非常に有効なのだ。もちろん生物界では、太古からずっと活用され続けている。

だから、ハイブリッド

　な～んて長々と前置きしたにはワケがある。CSSでの段組レイアウトの煩雑さに萎えてしまった僕はあっさりと、レガシーなテーブルレイアウト＆CSSのハイブリッドで行くことに決めた。なんだそれは、と言われてもしゃーない。その方が制作時のストレスが少なく、気分がいいから。あ～快適快適自分優先。CSS2のコンセプトは素晴らしいけれど、段組に利用するには少し詰めが甘い感じもするし、またそれを正しくレンダリングしてくれる受け手の環境もまだまだしっかり整っていないのだ。言っちゃえば今は「チグハグ」なのだ。次期CSS3待ちなのだ。そんな混沌とした状況にあるなら、こちらとしてはハイブリッドで生き抜くしかない（もちろん自分の能力のいたらなさを棚に上げているのは百も承知、あいすんません）。

　しかしハイブリッドは生存競争の中で並々ならぬ強さを発揮する。見た目もテクニック的にもダサイかもしれない。でも適応能力高くてメチャしぶとい。時代はハイブリッドだ。それじゃごだごだ言ってないで即作業開始、テーブル用意。

　とは言ってもオリジナルHTMLの時のような、コテコテのテーブル組みにはせず、中段のコンテンツ部分のみシンプルな3段組で使うだけ。ヘッダとフッタは、今回のシリーズで作成したものをそのまま使うことにする。つまり表示はCSSで行うんだけど、それは何故か？まあ普通なら、互換性を考慮してヘッダもフッタもテーブルで括るのだけれど、自分の中ではやはり今回の「目指せ不完全CSSレイアウト」では、不完全ながらもなんとなくCSSのプライオリティを高くしておきたいのです。う～ん、なんかこれを偶然読んだwebデザイナーの方々がいたら怒られそうだなあ‥。で、修正した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" xml:lang="ja" lang="ja" >

<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS" />
<title>フリフリの「Mac mini ミニ大作戦！」</title>
<link href="TEST39.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>

</div>

<td width="170" background="left_back.gif">
<div id="nav">
<ul>
<li id="macmini"><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li id="movie"><a href="../../../Movie/index.html">映画百本</a></li>
<li id="radio"><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li id="bbs"><a href="../../../BBS/index.html">BBS放送局</a></li>
<li id="book"><a href="../../../Book/index.html">読後の一言</a></li>
<li id="mail"><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>
</div>
</td>

<td bgcolor="#ffffff" width="415">
<div id="main">
<h6>Mac mini ミニ大作戦！</h6>
<h2><a href="777">第1回　目指せ、完全CSSレイアウト</a></h2>
<h4>先日、ちょっと新しいサイトデザインに更新してみようかなと思い立ったのだけれど、その作業が非常～に面倒臭くなることが判明。原因はレイアウトを従来通りテーブルタグで構成していたからだった‥。そこでCSSレイアウトに移行を試みる新シリーズ。【06/2/4】</h4>

<div id="announce">
<p>【次回予告】</p>
<h6><img src="sayonara.jpg" alt="" width="80" height="113" align="left" border="0" hspace="5"/>映画百本「みなさん、さようなら。」</h6>
<h2>人生の終わらせ方</h2>
<h4>本作はビッグ・フィッシュや、グッバイ・レーニン！、ライフ・アクアティックと同じく、親と子の最後の数日を描いた物語。ただ、ちょっと（いや、かなり？）捻くれているのが持ち味。<br clear="all"/>
</h4>
</div>

<dl>
<dt>Mac mini ミニ大作戦！</dt>
<dd><a href="777">祝！阪神優勝記念クロックアップ<br/>
☆1.25GHz→1.67GHz！☆</a>【05/10/1】</dd>
<dt>映画百本</dt>
<dd><a href="777"><em>「ライフアクアティック」</em>果てしなきロール・プレイ</a>【06/1/14】</dd>
<dt>放談ラジオ音響系</dt>
<dd><a href="777">2005年の重大ニュース</a>【05/12/31】</dd>
<dt>読後の一言</dt>
<dd><a href="777">『COSMOS　コスモス（上下）』カール・セーガン著</a>【05/7/9】</dd>
</dl>
</div>
</td>

<td width="165" background="right_back.gif">
<div id="sub">
<p>
<img src="../../02/css_gogo/MENU.gif" alt="当サイトのキラーコンテンツ" />
</p>
</div>
</td>

</tr>
</table>

<div id="footer">
<p>
copyright (c) 2001-2006 FLIP! FLIP! FLIP! all rights reserved.
</p>
</div>

</body>
</html>

　例えば<table>タグにidを振って、"pagebody"という名前を付け、そのid名に対し、CSSの方でセンタリング指定してある。普通ならHTMLの方で<center>タグ等で括るんだけど‥。それと以前、意味的プライオリティの低さから文章後半に回した左メニューのリスト項目を、テーブルに組み込むために再度上へ持ってきた。これはCSSの観点からみるとスマートじゃないが、仕方ない。

　さて、CSSの方は以前作成した「float」による段組の部分をざっくり削除（青）。テーブルタグのセンタリングを追加（赤）。その他、微調整した部分も追加（緑）。

@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0 }

a:link { color: #006; text-decoration: none }
a:visited { color: #036; text-decoration: none }
a:hover { color: #c03; text-decoration: underline }
a:active { color: #ffcc00; text-decoration: none }

/*ヘッダ
________________________*/
#header { margin-right: auto; margin-left: auto ; width: 750px; height: 160px}

/*テーブル3段組
________________________*/
#pagebody { margin: 0 ; margin-right: auto; margin-left: auto; }

/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {background: url(left_back.gif) ; float: left ; width: 170px; }
#content {float: right; width: 580px; }
#main {float: left; width: 415px;}
#sub {background: url(right_back.gif) ; float: right; width: 165px;}

#pagebody:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; margin-right: auto; margin-left: auto; width: 750px; height: 95px; }
#footer p { margin-left: 170px ; padding-top: 55px}

/*左メニュー
________________________*/
#nav ul {margin-top: 10px ; margin-left: 45px; padding: 0 ; list-style: none; }
#nav li, #nav a {display: block; width: 60px; height: 60px ; }

#nav li {text-indent: -9999px;/*←画面の外へ文字を飛ばしている*/ }
#nav a {background: url(nav.gif) no-repeat; text-decoration: none; }

#macmini a {background-position: 0 0px}
#movie a {background-position: 0 -60px}
#radio a {background-position: 0 -120px}
#bbs a {background-position: 0 -180px}
#book a {background-position: 0 -240px}
#mail a {background-position: 0 -300px}

#macmini a:hover {background-position: 60px -0px}
#movie a:hover {background-position: 60px -60px}
#radio a:hover {background-position: 60px -120px}
#bbs a:hover {background-position: 60px -180px}
#book a:hover {background-position: 60px -240px}
#mail a:hover {background-position: 60px -300px}

/*メイン部分の文字装飾
________________________*/
#main {margin-top: 10px}
#main h6 { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 ; margin-top: 0px ;padding: 0px}
#main h2 { font-size: 14pt; font-weight: bold; font-stretch: condensed; margin: 0em 0 }
#main h4 { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0.1em }

/*次回予告編
________________________*/
#announce { font-size: 14px; font-weight: bold; margin: 10px 0; padding: 6px ; border: solid 1px #34626d }
#announce h2{ color: #900; font-size: 14px; font-weight: bold; }

/*定義部分の装飾
________________________*/
#main dt, #main dd { margin: 0; padding: 0;}
#main dd a { font-size: 13px; font-weight: bold; letter-spacing: 0; }
#main dt { color: #fff; font-size: 13px; font-weight: bold; font-stretch: condensed; background-color: #999; margin: 0.67em 0; padding: 3px 63px 3px 6px; border-style: none none none solid; border-width: medium medium medium 12px; border-color: #9cc }
#main dd { color: #2d2d2d; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0; margin: 1em 0; padding: 0 0 0 6px; border-style: none none none solid; border-width: 1px medium medium 10px; border-color: #666 }
#main dd em { color: #c30; font-size: 11px; font-style: normal; font-weight: normal; letter-spacing: 0 }

/*右メニューの整理
________________________*/
#sub {text-align: right; margin: 0; padding: 0 }

サンプルHTMLその39

　こんな感じですかねえ～。未設定のままだったリンク箇所の挙動も指定しておいた。見た目は変わらないんだけれど、これを元にしたページの作成はかなり簡単になると思うし、将来CSS3がとても使いやすいものになったら、テーブル関連のタグをバッチ処理で削除したりして、その時こそ完全CSSレイアウトを実現できるかもしれない。

今回の企画を振り返って

　結果的に「完全」からはほど遠い不完全レイアウトに落ち着いてしまったのだけれど、個人的には企画前半のCSSでページを構成していくところで、文章構造を見直したり、各要素の意味を見直したりした体験が非常に有益だった。レイアウトに関しては、CSSもまだまだスマートとは言えないけれど、テキストの配置やら装飾に関してはとても便利。知っていて損はしない、というか積極的に使う方がいい。おかげでこれまで作成してきたページの作りが非常にダメダメだったことに気付くことも出来たし、なおかつHTMLをシンプルに記述し直したことによって、これからの更新も楽チンになる（ハズ）。とりあえず、途中でもう止めようかと思った当企画。無事終えることができました‥無理矢理ですが。

　そういえばアップルのサイトもTCエレクトロニックのサイトもテーブル組みなんだよね。だからこれでいいのだ。ハイブリッドだ。

　今月の更新はこれで終了し、2週間ほど仕事に集中します。やはり区切りをつけないと気持ちが落ち着かないですね。来月からまたカスタマイズ・ネタを記事にしたいな‥と思ってます。

【06/3/21更新】

トップへもどる↑

Mac mini ミニ大作戦！ 最終回 目指せ、不完全CSSレイアウト （時代はハイブリッド編）

ハイブリッドという考え方

だから、ハイブリッド

今回の企画を振り返って

Mac mini ミニ大作戦！
最終回　目指せ、不完全CSSレイアウト
　　　　　　（時代はハイブリッド編）