表の利用
ページのデザインでは表が重大な意味を持っています。これからの魅力あるページは表の使い方次第だろうとも言われています。目次や索引を表を使わないで作ろうとすると、位置揃えや配置が面倒になります。が反面、表を多用したり、大きな表を使ったりすると、読み込みに時間がかかるという欠点もありますね？そういった対策も含めて、表のあれこれを考えてみましょう。
表やセルの背景色は PageMill ではサポートしていませんが、HTMLを使っていくらでも指定できますし、ページ全体の背景色との組み合わせなどを考慮して決めると効果的です。背景色は <TD> の中にRGBや事前指定色で指定します。
ページ全体の指定よりも表の背景色が優先され、さらにセルの背景色が優先されます。背景画像についても同じですから、これを利用すれば思いがけない効果も期待できますね？一番下の表をご覧ください。ここでは、外側の方の背景画像が、内側の表の CELLSPACING="15" で生じた空間に現われるようにしたのがミソです。サンプルではそれほどの効果を上げていませんが、工夫次第でしょうね？サンプルの表の順に、下にソースを並べてあります。
なお背景の「背景を表の中に入れる」のサンプルも参考にしてください。
<TR> <TD WIDTH="100%" BACKGROUND="../images/bamboo.jpg"> <P>表の中に背景画像</TD> </TR> </TABLE> |
CELLPADDING="0"> <TR> <TD WIDTH="100%" BACKGROUND="../images/bamboo.jpg"> <TABLE WIDTH="450" HEIGHT="120" BORDER="0" CELLSPACING="15" CELLPADDING="0"> <TR> <TD WIDTH="100%" BGCOLOR="#cfe6e6" HEIGHT="80"> <P><CENTER>上の表の中に表</CENTER></TD> </TR> </TABLE></CENTER></TD> </TR> </TABLE> |
HEIGHT="120"> <TR> <TD WIDTH="100%" BACKGROUND="../images/bamboo.jpg"><BASEFONT SIZE=2> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="15" CELLPADDING="0" HEIGHT="126"> <TR> <TD WIDTH="50%" HEIGHT="41" BGCOLOR="#cfe6e6"><BASEFONT SIZE=2> <P><CENTER>真中の表のセルを</CENTER></TD> <TD WIDTH="50%" BGCOLOR="#cfe6e6"><BASEFONT SIZE=2> <P><CENTER>４つに分割</CENTER></TD> </TR> <TR> <TD WIDTH="50%" HEIGHT="39" BGCOLOR="#cfe6e6"><BASEFONT SIZE=2> <P><CENTER>いかがですか？</CENTER></TD> <TD WIDTH="50%" BGCOLOR="#cfe6e6"><BASEFONT SIZE=2> <P><CENTER>面白いでしょう？</CENTER></TD> </TR> </TABLE></TD> </TR> </TABLE> |
画像を使わずに表を使ってボタンを作ると可愛いのができます。ブラウザのイメージ表示オプションがオフになっているときには、特に有効なものです。例えば下のようになります。
ホーム ブラウザのソースで確認すると次のようになってます。
<TR> <TD BGCOLOR="#d9d9cc" WIDTH="100%"><BASEFONT SIZE=1> <P><CENTER><A HREF="index.html">ホーム</A></CENTER></TD> </TR> </TABLE></CENTER></P> |
<CENTER> と </CENTER> はセットで、表が中央に来ることを示しています。取れば左に行きます。
WIDTH="45" HEIGHT="30" は表の幅と高さです。必要があれば変えられます。
BORDER="1" CELLSPACING="2" CELLPADDING="2" は、それぞれ枠線の太さ、罫線の太さ、余白を意味します。全部0にすると、外見上表だということが分からなくなります。
BGCOLOR="#d9d9cc" を TD タグの中に入れるとセルの背景色をRGBや事前指定色で指定できます。指定しなければ、<BODY> で指定したページ全体の背景色と同じになり、枠線だけが浮き出ます。表やセルの背景色は PageMill ではサポートしていませんが、HTMLでいくらでも指定できますし、ページ全体の背景色との組み合わせなどを考慮して決められます。
<A HREF="index.html">ホーム</A> は、リンク先と名前を入れます。PageMill ではサポートされていませんが、枠線の色は BORDERCOLOR="990000" を <TABLE の後ろに入れて指定できます。サポートされていなければ、HTMLタグを使えばいいわけですね？なお BORDERCOLOR 特性は Internet Explorer だけで、Netscape Navigator ではサポートしていません。
試みに BORDER="1" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#f6d5c3" BORDERCOLOR="990000" にすると、下のようになります。これも面白いですね？
ホーム
リンクで見たように、リンクであることを表わすアンダーラインを消すには、リンク先を示す<A HREF="index.html"> の中の「"」の後ろ、「>」の前に STYLE="text-decoration:none" と入れます。
マウスを上に乗せるとコメントが出るようにするのは、メッセージで見ました。バルーンでコメントを出すには、同じ位置に TITLE="全部の目次ですよ" などと入れます。コメントが出るのにちょっと時間がかかるのが難点ですが...。この二つを入れると次のようにします。ステータスバーにメッセージを出すのは、メッセージを見てください。
<TR> <TD BGCOLOR="#d9ffd9" BORDERCOLOR="#009900" WIDTH="100%"> <P><CENTER><A HREF="index.html" STYLE="text-decoration:none" TITLE="全部の目次ですよ">ホーム</A></CENTER></TD> </TR> </TABLE></CENTER></P> |
ただし複数のボタンを並べようとすると、この方法では上手くいきません。もともとが表ですから、必要な数だけのセルを用意すればいいわけです。「人生125年」では次のものを使っていますが、ここではリンクしていません。なおページ全体のリンクのアンダーラインを消す方法は、「リンク」を参考にしてください。
<TR> <TD BGCOLOR="#d7d9d0" WIDTH="20%"><BASEFONT SIZE=2> <P><CENTER><FONT SIZE="-1"><A HREF="../index.html">ホーム</A></FONT></CENTER></TD> <TD BGCOLOR="#d7d9d0" WIDTH="20%"><BASEFONT SIZE=2> <P><CENTER><FONT SIZE="-1"><A HREF="../alma/00.html">目次</A></FONT></CENTER></TD> <TD BGCOLOR="#d7d9d0" WIDTH="20%"><BASEFONT SIZE=2> <P><CENTER><FONT SIZE="-1">心構え</FONT></CENTER></TD> <TD BGCOLOR="#d7d9d0" WIDTH="20%"><BASEFONT SIZE=2> <P><CENTER><FONT SIZE="-1"><A HREF="../alma/02.html">食事</A></FONT></CENTER></TD> <TD BGCOLOR="#d7d9d0" WIDTH="20%"><BASEFONT SIZE=2> <P><CENTER><FONT SIZE="-1><A HREF="../03.html">鍛練</A></FONT></CENTER></TD> </TR> </TABLE></CENTER></P> |
BORDER="0" CELLSPACING="5" CELLPADDING="0" で、経線の太さを8に、枠線と余白を０に設定しています。紫色の部分が増やしたセルのHTMLです。全部でセルが５個ですから、WIDTH="20%"とソフトが均等に割り振ってくれました。その他のところは、結局はセル一つの場合と同じですね？
このサイトの左フレームも表でボタンを作っています。もう一つ参考までにサンプルを。このサイトのフレーム無しの場合を想定したリンクボタンで、各ページの一番下にあります。フレームを使っているときに「フレーム無しの目次」や「フレームを解除」をクリックすると、フレームが無くなります。
表でページのデザインをしたとき、Interner Explorer では上手く表示したのに、Netscape Navigator では思うようにいかないということがあります。ウィンドウサイズによっては、セルの中で改行されて、見苦しくなることもあります。それを防ぐには、表やセルの縦横のピクセル数を指定するか、同時に文字列がセル内で改行しないように指定することが有効です。
セル内での改行を禁止するには、<TD NOWRAP> とするのが効果的です。あるいは PageMill ではサポートしていない <NOBR> </NOBR> のセットで文字列を括ることも可能だともされるようですが、これは見出しや詩など、改行をブラウザ任せにできない場合に有効な方法だと思います。<NOBR> を使った例としては、このサイトの現在のメインページや古いトップページがあります。
サンプルは NOWRAP をセルに適用したものとしないもの、および表の縦横をピクセルで指定したものを比較しました。Internet Explorer と Netscape Navigator でどう変わるかもチェックしてみてください。
古いトップページ サンプル
PageMill では、表は <TD> タグで自動生成されますから、表を構成するセルは <TD> タグの中で定義します。ところが表本来の目的で使うときには、例えば見出しなどを太字で中央に配置する必要もあります。そういう場合は、<TH> タグを使うと便利です。ここでは色の指定のページで <TH> タグを使っていますから、参考にしてください。
全体としては太字の中央揃えの場合でも、あるセルについて、そこだけは太字にしたくない場合は、<TD> タグで定義すればいいわけです。太字のままで位置を左揃えにしたい場合は <P ALIGN=LEFT> を入れ、右揃えにしたい場合は <P ALIGN=RIGHT> を入れることで調整できます。
HEIGHT="150"> <TR> <TH WIDTH="53%"><BASEFONT SIZE=2>表でリンクボタンを作ってみよう</TH> <TH WIDTH="47%"><BASEFONT SIZE=2> <P ALIGN=LEFT>このページの一番下のもそうですよ！</TH> </TR> <TR> <TH WIDTH="53%"><BASEFONT SIZE=2>イメージマップで画像にリンクを埋め込もう</TH> <TD WIDTH="47%"><BASEFONT SIZE=2>ちょっとＨな写真ですが...</TD> </TR> <TR> <TH WIDTH="53%"><BASEFONT SIZE=2>アンダーラインを隠したり色を変えたりしよう</TH> <TH WIDTH="47%"><BASEFONT SIZE=2> <P ALIGN=RIGHT>こんなふうにバルーンも出せます♪</TH> </TR> </TABLE></CENTER></P> |
サンプル
私は有線テレビ網で高速でアクセスしているんですが、雷でLANカードがクラッシュしてしまいました。やむを得ず内臓モデムを使って56Kで接続しなければならなかったとき、表や重い画像の読み込みに時間がかかってイライラしました。ブラウザが表を読み込むとき、一通り計算が済むまで待たなければなりませんから、大きな表は表示に時間がかかるんですね？
ブラウザが計算をしなくても済むように、表の幅、さらにはセル幅の絶対値をピクセル単位であらかじめ指定しておけば、かなり速くなります。この場合、セルの幅はパーセンテージでの指定でも十分だと考えられますが、<COL> タグの関係から、ピクセルで指定したほうがいいでしょう。なお <TABLE に続けて、STYLE="table-layout:fixed" としておくことも大切です。さらに表の高さをもピクセル単位で指定すると、ブラウザごとの誤差が少なくなるようです。
それと同時に、大きな表はいくつかの小さな表に分割することも薦められています。これって、できるときもありますが、場合によっては分割できないこともありますよね？そこで『HTML4クイックスターとガイド』では、表を列グループに分けるよう提案しています。が、私は試していないので、報告だけにとどめさせていただきます。
列グループと同じような発想で、同じように <COL> タグを使う方法がありますが、これは Internet Explorer でしか使えません。とは言え Netscape Navigator で不都合なことになったりはしませんので、入れておくのがいいでしょう。<COL> タグは列の数だけ作って、それぞれのピクセル数を指定しておきます。そうしておけばブラウザは最初に指示どおりの表を描くので、即座に表示されるというわけです。
下のソースは色の指定のものの一部を、フォントの指定を削除して載せたたものです。縦の列が５つありますから、<COL WIDTH="120">も５つ作っています。５つのピクセル数の合計が表のピクセル数と一致するようにしなければなりません。
HEIGHT="910"><COL WIDTH="120"><COL WIDTH="120"><COL WIDTH="120"><COL WIDTH="120"><COL WIDTH="120"> <TR> <TH WIDTH="120" BGCOLOR="#000000">#000000<BR> black</TH> <TH WIDTH="120" BGCOLOR="#48d1cc">#48d1cc<BR>mediumturquoise</TH> <TH WIDTH="120" BGCOLOR="#9400d3">#9400d3<BR>darkviolet</TH> <TH WIDTH="120" BGCOLOR="#dc143c">#dc143c<BR>crimson</TH> <TH WIDTH="120" BGCOLOR="#ff1493">#ff1493<BR>deeppink</TH> </TR> 以下略 |
| SEO | [PR] ����!�����u���O �����z�[���y�[�W�J�� �������C�u���� | ||
