管理人の k さんとご友人方の小説などが公開されているウェブサイトです。
最近サイトをリニューアルしたのですが、IE以外のブラウザで見た場合はデザインが微妙にずれてしまうんです。ない知恵絞って色々と調べたりはしたのですが、やればやるほど泥沼になってしまいました。全てのブラウザとは言いませんが、せめて使用頻度の高いブラウザくらいには対応したいものですので、宜しければアドバイスお願いします。
ご希望の件、対処不能です。
簡単に申し上げますと、HTML という規格、そして CSS という規格も、いささかの曖昧さを残しているのでありまして、結局のところ、微妙にずれてしまう
ことは避けられないといわざるをえません。Yahoo! も Google も、みんなブラウザごとに微妙にずれて
表示されているのが実情であります。IE のバージョンが違うだけでも、見た目が変化してしまうのです。
ただし、テーブルを真ん中に表示させたいだけなら、簡単です。
自動挿入される広告にインラインフレームが使われているので、文書型は Transitional を選択せざるをえないわけですから、単純に align 属性を用いればよいわけです。必然性に欠けるテーブルレイアウトを採用していることでもあり、「align 属性だけに潔癖になる必要はない」と私は判断します。
<table style="width: 736px; height: 368px; text-align:left;" summary="all" border="1" cellpadding="2" cellspacing="2" align="center">
align 属性は Transitional な文書型にきちんと定義された正規の属性ですし、歴史ある存在なので、Opera や Firefox もちゃんと対応しています。というわけで、用済みの div 要素は削除。
<div style="text-align: center;">←削除
中略
</div>←削除
簡単に補足解説しておきますと、text-align:center; とはブロックレベル要素の中にあるインラインの内容を中寄せで表示させるスタイル設定です。table 要素はブロックレベルの要素ですから、text-align で中寄せすることはできないのです。Windows 版 IE は text-align で table 要素も中寄せ表示しますが、これは実装ミスです。
k さんが table 要素にいちいち text-align:left; を指定していますが、それは table 要素を囲む div 要素に text-align:center; と指定したため、そのままでは table 要素の内容が全て中寄せ表示されてしまうからでしょう。align 属性の導入により問題が解消され、各 table 要素から当該の指定を排除できます。
スタイルシートを勉強すると、ウェブデザインが楽になるよ、という話を読んだことがあるかと思います。でも、現在の k さんのやり方では、全然、楽になっていないはずです。かえって面倒が増えているというのが実感ではないでしょうか。table 要素を中寄せするなら align 属性を使った方がよっぽど楽だったというのも、そのひとつですよね。けれども「CSS なんてつまらない!」と決め付けてしまうのは早計です。
スタイルシートは、正しく使うことで最高のパフォーマンスを発揮します。そして残念なことに、正しく使うためには勉強が必要で、そのお勉強には1週間くらいかかります、多分。非常にわかりやすい解説サイトをご紹介しますので、お勉強するかどうかはご自分で判断なさってください。
align 属性を知ったことにより、当面の悩みは既に解消されているわけです。それで満足するのも、ひとつの選択なんです。
少なくとも簡単で、より適切なウェブサイト作成講座の1章と2章を読み終えた、という前提でアドバイスを続けます。改善案を、もっと改善していこう、という試みです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>終着駅</title>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="robots" content="none">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
</head>
<body style="color: rgb(0, 0, 0); background-color: white;" link="#330099" vlink="#330099" alink="#ff0000">
以下略
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>終着駅</title>
<link rel="stylesheet" type="text/css" href="k.css" media="screen,tv">
</head>
<body>
以下略
*
{margin:0; padding:0; font:normal normal normal 100%/1.4 "ＭＳ Ｐゴシック",Osaka,sans-serif;}
body
{padding:5em; font-size:small; color:#000; background:#fff;}
まずブラウザのデフォルトスタイルを殺し、続いて body 要素に全体のバランスを調整する指定を放り込んでいます。body 要素に font-size:small; を設定することにより、たくさん設定されている font 要素を一掃。
ちょっと一息つきましょう。
では後半。
前略
<div style="text-align: center;">
<table style="width: 736px; height: 368px; text-align: left;" summary="all" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 300px;">
<table summary="all" style="text-align: left; width: 382px; height: 82px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">終着駅<br>
<br>
<font size="-1">Site
since：2004/01/01<br>
<span style="color: rgb(255, 0, 0);">Last update：2005/07/16</span></font>
</td>
</tr>
</tbody>
</table>
<table style="width: 382px; height: 100px; text-align: left;" summary="all" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">
<table summary="all" style="text-align: left; width: 370px; height: 26px;" cellpadding="1" cellspacing="2">
<tbody>
<tr>
<td style="text-align: left; vertical-align: top;"><font size="-1">□ <a href="http://gdioepmkof.shrine-maiden.org/infomation.html">Infomation</a></font>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 370px; height: 42px;" summary="all" cellpadding="1" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><font size="-1">□ <a href="http://8726.teacup.com/a12neo/bbs">BBS</a><br>
□ <a href="http://mst.cook.cgiboy.com/" target="_blank">チャット</a></font>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 370px; height: 35px;" summary="all" cellpadding="1" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><font size="-1">□
Contents<br>
├ <a href="http://gdioepmkof.shrine-maiden.org/ss.html">小説</a><br>
</font><font size="-1">└ 雑記</font><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 382px; height: 197px;" summary="all" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><font size="-1">管理人：ｋ<br>
協力：明人、E-KEI （敬称略）<br>
URL：<span style="color: rgb(0, 0, 102);">http://gdioepmkof.shrine-maiden.org/</span><br>
<br>
当サイトはリンクフリーです。<br>
相互リンクについては掲示板にお願いします。<br>
<br>
<img title="" style="width: 200px; height: 40px;" alt="" src="banner.jpg"><br>
バナーURL：<span style="color: rgb(0, 0, 102);">http://gdioepmkof.shrine-maiden.org/k.banner.jpg</span><br>
<br>
リンクの際はTOPページにお願いします。</font> </td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: top;">
<table style="text-align: left; width: 383px; height: 291px;" summary="all" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr style="color: rgb(0, 0, 102);">
<td style="vertical-align: top; height: 10px;"><font size="-1">更新履歴</font> </td>
</tr>
<tr>
<td style="vertical-align: top;"><font size="-1">□
2005/07/16<br>
小説を地味に更新したり改訂したり。<br>
<br>
</font><font size="-1">□
2005/07/08<br>
小説を仮更新。</font><br>
<font size="-1"><br>
</font><font size="-1"></font><br>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; height: 82px; text-align: left;" summary="all" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">
<table style="text-align: left; width: 371px; height: 51px;" summary="all" cellpadding="1" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><font size="-1">□ メール<br>
├ <a href="mailto:genesikku@hotmail.co.jp">PC</a><br>
└ <a href="mailto:hide.tto@ezweb.ne.jp">携帯</a><br>
</font></td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 371px; height: 53px;" summary="all" cellpadding="1" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><font size="-1">□
LINK<br>
├ <a href="http://gdioepmkof.shrine-maiden.org/s.html">相互 </a><br>
└ <a href="http://gdioepmkof.shrine-maiden.org/o.html">お気に入り</a><br>
</font> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table summary="all" cellpadding="2" cellspacing="2" style="text-align: left; width: 785px; height: 1px;">
<tbody>
<tr>
<td style="vertical-align: top;">
<div style="text-align: center;"><small><a href="http://www.bunseki.net/index.html" target="_blank">アクセス解析</a>&<a href="http://www.sem-seminar.com/index.html" target="_blank">SEM/SEO講座</a>
for <a href="http://www.cubit.co.jp/index.html" target="_blank">オンライン
ショップ開業</a>/<a href="http://www.onlineshop-seminar.com/index.html" target="_blank">運営</a> </small>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
前略
<table summary="レイアウトテーブル">
<tr><td>
<h1>終着駅</h1>
<ul>
<li>Site since：2004/01/01</li>
<li><strong>Last update：2005/07/16</strong></li>
</ul>
<h2>MENU</h2>
<p>□ <a href="http://gdioepmkof.shrine-maiden.org/infomation.html">Infomation</a></p>
<p>□ <a href="http://8726.teacup.com/a12neo/bbs">BBS</a></p>
<p>□ <a href="http://mst.cook.cgiboy.com/" target="_blank">チャット</a></p>
<p>□ Contents<br>
├ <a href="http://gdioepmkof.shrine-maiden.org/ss.html">小説</a><br>
└ 雑記</p>
<p>□ メール<br>
├ <a href="mailto:genesikku@hotmail.co.jp">PC</a><br>
└ <a href="mailto:hide.tto@ezweb.ne.jp">携帯</a></p>
<p>□ LINK<br>
├ <a href="http://gdioepmkof.shrine-maiden.org/s.html">相互 </a><br>
└ <a href="http://gdioepmkof.shrine-maiden.org/o.html">お気に入り</a></p>
</td>
<td>
<h2>更新履歴 </h2>
<p>□ 2005/07/16<br>
小説を地味に更新したり改訂したり。<br>
□ 2005/07/08<br>
小説を仮更新。</p>
<h2>ご案内</h2>
<ul>
<li>管理人：ｋ</li>
<li>協力：明人、E-KEI （敬称略）</li>
<li>URL：<em>http://gdioepmkof.shrine-maiden.org/</em></li>
<li>当サイトはリンクフリーです。</li>
<li>相互リンクについては掲示板にお願いします。</li>
</ul>
<dl>
<dt><img title="バナー画像" width="200" height="40" alt="バナー画像" src="banner.jpg"></dt>
<dd>バナーURL：<em>http://gdioepmkof.shrine-maiden.org/k.banner.jpg</em></dd>
</dl>
<p>リンクの際はTOPページにお願いします。 </p>
</td></tr>
</table>
<p align="center"><a href="http://www.bunseki.net/index.html" target="_blank">アクセス解析</a>＆<a href="http://www.sem-seminar.com/index.html" target="_blank">SEM/SEO講座</a> for <a href="http://www.cubit.co.jp/index.html" target="_blank">オンラインショップ開業</a>/<a href="http://www.onlineshop-seminar.com/index.html" target="_blank">運営</a></p>
</body>
</html>
原本とは全く別物となっているので、順を追って解説しましょう。
原本の HTML ソースを複雑にしているのは、テーブルの入れ子です。私の見る限り、一番外側のテーブルには段組の実現という積極的な意味がありますが、入れ子のテーブルには、要素のグループ化の他に役割がないようでした。であれば、なにもテーブルのような重厚長大な要素を持ち出す必要はないわけです。見出しを活用して情報を整理すれば十分なのではないでしょうか。というわけで、テーブルの記述は次のように簡略化しました。
<table summary="レイアウトテーブル">
<tr><td>中略</td><td>中略</td></tr>
</table>
入れ子を全部排除して、1行2列のシンプルなテーブルとしています。width, height, cellpadding, cellspacing 属性など、面倒くさいデザイン指定を全て排除していることに注意してください。align 属性まで消えていますね。じつは CSS でブロックレベル要素を中寄せする方法があるので、それを用いているのです（今回は詳述しません／k さんは当面 align 属性で中寄せすればよいと思います）。
続いてテーブルの中に入れる要素を整理します。原本の構成は少々錯綜していますので、以下の通り、再構築しました。
<h1>終着駅</h1>
Site since：2004/01/01
Last update：2005/07/16
<h2>MENU</h2>
□ Infomation
□ BBS
□ チャット
□ Contents
□ メール
□ LINK
<h2>更新履歴</h2>
□ 2005/07/16
□ 2005/07/08
<h2>ご案内</h2>
管理人：ｋ
協力：明人、E-KEI （敬称略）
URL：http://gdioepmkof.shrine-maiden.org/
当サイトはリンクフリーです。
相互リンクについては掲示板にお願いします。
バナー画像
バナーURL：http://gdioepmkof.shrine-maiden.org/k.banner.jpg
リンクの際はTOPページにお願いします。
見出しレベルの設定などに注目。全体を4つのグループに分けています。これを2つずつ、「サイト名」と「メニュー」を左、「更新履歴」と「ご案内」を右に配置。明快ですね。上記の段階では要素の割り振りが未設定となっている見出し以外の部分は、最終的に p 要素、ul 要素、dl 要素などで処理しています。
前略
table
{width:700px; margin:auto; padding:1px; border:1px solid #ccc;}
td
{width:50%; vertical-align:top; border:1px solid #ccc;}
h1,h2
{padding:0.2em 0.8em; font-size:120%; background:#ccc;}
ul,p,dl
{margin:0.8em 1em;}
li
{list-style:none outside;}
p#footer
{text-align:center;}
em
{color:#006;}
strong
{color:#f00;}
a
{color:#309;}
a:visited
{color:#309;}
a:hover,a:active
{color:#f00;}
たったこれだけ? そう、これだけなんです。難しいことは何もしていません。HTML 文書の記述を大幅に簡略化したのに、外部スタイルシートもこんなに簡単で足りるのです。ファイル容量の合計で4割以上のカット。しかも、この外部スタイルシートはサイト内の全文書で使い回すことができるのですから、今後のサイト作成は非常に楽になるわけです。
おそらく Another HTML-lint の減点を避けるためなんでしょうけれども、何でもかんでも style 属性で処理しようとするのは感心しません。table 要素にいちいち summary="all" なんて書かれているのもおかしいです。これは非常によくないパターンです。場当たり的に減点を避けようとしている。ソフトウェアのせいなら k さんに罪はありませんが、もし手書きでマークアップされているなら、ウェブサイトの製作手法を見直すべきです。
急がば回れ、と申します。HTML と CSS について、きちんと1から勉強しなおすべきです。
とりあえず、style 属性を使うのはやめましょう。画像の幅や高さを style 属性で処理したって間違いではありませんが、W3C の HTML や CSS の勧告書だって img 要素の width 属性と height 属性を素直に用いています。HTML で設定していい領域というのもあるのです。
もちろんたいていのスタイル設定は、できる限り CSS で行うべきです。ただし style 属性ではなく、外部スタイルシートでやってください。外部スタイルシートとは何か、という話は、途中でご紹介した解説サイトを最初から順に読んでいって、お勉強すれば理解できます。私はあまり「勉強しろ」ってうるさくいわないことにしているのですけれども、外部スタイルシートだけは勉強した方がいいです。悪いことはいいませんから。
でも、どうしてもお勉強が面倒なのであれば、今回はとりあえず align 属性を覚えていただくだけでもかまいません。
ところで、最後の改善案でも、テーブルレイアウトは残っています。それはなぜか、という話を最後にします。
そもそもサイト内で table 要素が使われているのは、レンタル CGI のページを除けば表紙だけ。つまり表紙がサイト内の特殊ページとなっているわけで、こういった場合、必ずしも表紙のデザインを完全 CSS 化する意味はほとんどないんです。
スタイル切替を狙っているわけじゃなし、table 要素で段組をしたっていい。中寄せで段組して全体を枠線で囲んで……というデザイン意図をスタイルシートで実現しようとすると、たいへん多くの知識が必要となります。スタイルシートの恩恵を受けるだけなら、そのずっと手前の段階で十分です。表紙のテーブルレイアウトをスタイルシートで置き換えるためだけに、勉強時間を3倍、5倍に増やす価値があるでしょうか?
サイトの規模をどんどん大きくしていって、表紙だけでなく全てのページでリッチなレイアウトを採用したいんだ、ということであれば、それはもうスタイルシートを勉強した方がいいのです。それだけの価値がある。けれども、現在のように、表紙だけリッチなレイアウト、他は非常にシンプルなレイアウトでいいよ、ということなのであれば、話は違ってくるはずなんです。
アドバイスは以上です。