WSJ21[GHP] - テーブルデザイン講座で彩ろう

■Section 5-1■良いホームページ作成講座■

▼GHP講座5.1 − 効果的なテーブルタグの使い方


◎ 今までに蓄えたホームページタグの知識を元に様々な実践的使用方法を学んでいきます。
◎ いつものようにサンプル付きなので手軽に簡単に効率よく使い方を身につけられます。
◎ Javascriptなども使用するので、ちょっぴり便利な小技集としてもお使いできます。

★テーブルタグの復習は大丈夫?


 テーブルタグの使い方を覚えていますか?
 覚えたいない方は「講座2.7」を参照して下さい。
 今後「CSS:スタイルシート」を多用していきますので「講座3」も覚えておいて下さいね。
 覚えるまでは見ながらやって下さればよろしいですよ。
 また、各講座ページを印刷なさると効果的に学習できます。

★今回作って見るもの=要はサンプルです


 サンプル1は今回の講義で作成・解説するサンプルです。
 
  ● 完成サンプル(600x120)
 
  今回は上記のサンプルを作っていきます。
 このサンプルはリンク集などで使用可能です。 ※2003年3月現在当サイトで使用 「バナー」「サイト名、管理人、更新状況」「サイト解説」の3範囲に色分けして表示しています。
 
 色分けすることによって、各項目に統一感を持たせることができます。 サンプルだと「青:バナー画像」「赤:サイト名、管理人、更新状況」「緑:サイト解説」とハッキリと分かれます。 人の目は色に敏感にできているので、下手に区切りを入れたり太字などにするよりもかなり効果的な方法です。
 
 リンクは「文字によるリンク」と「バナー画像によるリンク」の2通りがあり、 視覚的に目立ち、訪問者が直感的にクリックする「画像リンク」を主体に、 何らかの影響で画像が表示されない場合に備え文字による「テキストリンク」を使っています。 同じリンク先が複数あるのは、一見すると労力やファイルサイズの無駄にも思えますが、 アクセス性がグンと上がるので効果的です。
 
 画像リンクを張る場合の注意は、バナーサイズが非常に大きくなるという点です。 つまり読み込みに要する時間がテキストリンク時に比べ格段に遅くなるということです。 画像リンクのみでは延滞はかなりのダメージになります。 また、バナー画像を直接リンク先のサイトから張るのではなく自分のサーバにアップロードして張って下さい。 相手のサーバに負荷を掛けるだけではなく、レスポンス(反応時間)の違いにより遅延表示にも関わります。
 
 自分のサーバに置くメリットとしては遅延を防ぐほか、過剰なバナーサイズを抑えることもできます。 ホームページの知識が乏しい管理人が何も考えずに作ったバナーでは無駄にサイズが大きいことがあります。 画像サイズに関しては別の場所で説明しますが、 自分のサーバに置くことで「減色」「高圧縮」の処理が可能になるのです。
 
 分かりやすく言うと、画像にもよりますが、50KBの高画質画像が20KB程度まで抑えることができます。 言うまでもありませんが、十分に見られる画質内での話です。 バナーを作る時はサイズ面も考慮して作って欲しいと思います。
 
 次にサイトの解説・説明文についてです。ダラダラと横に長く書くのは良くありません。 なるべく短い文章にし、分かり易く要約しましょう。 そうすれば見る立場の方も長文読解を必要とせず、短文という分かり易い形状で頭に入り、 早い段階で「どうのようなサイトか」を理解することができます。 2〜3行程度が良いでしょう。長くても5行以内に納めるのがベストです。
 
 よく見ると、解説の文章をインデントしていますね。 これも見やすさの要因の1つになっています。 インデントは些細なことですが重要な位置付けにあることを覚えておいて下さい。
 
 一通りの説明は終わりました。 では皆さん、自力で頑張って作ってみて下さい。 今までの知識を持ってすればきっと作れますよ! ヒントを出しながら説明もするので分からなければ読み進めていって下さいね。
 

★ヒント=解法・・・


  ●作り方のヒント1
 
 問題(?)のヒントです。
 テーブルタグに枠を付けてみました。 バナー表示部分の「td」要素に「rowspan」属性を付けて2行分占有しています。 つまり、合計3つのセルで構成されているというわけです。 色分けを見たら一目瞭然ですけどね。
 
 次に気になる点は画像の周りの枠です。 通常、画像にリンクを張るとこのように枠が表示されるのですが完成サンプルには枠がありません。 「img」要素に「border」属性を使用してもいけますが、 スタイルシートを使うようにしましょう。 その方が色々融通が効いてくれるんです。
 
 今回はリンク集に使うという事なので数十個のバナー画像があることが想定されます。 なので、直接「img」要素タグに指定のではなく、ヘッダか別ファイルで指定してやりましょう。
   「img{border:0px;}」
とでもしてやって下さいね。
 
 次に気付いて頂きたい点は「横幅」です。 テーブルのデザインテクニックとして必須の用語です。 これを指定していなければガタガタのテーブルになってしまいます。 今回は「Japanese Standard (ジャパニーズスタンダード):日本標準」の「200x40」のバナーなので width属性値を「200px」にしています。 それではキツキツなので「padding」属性の属性値として上下左右に「5px」の余白をとりました。 テーブル全体としては「550px」のサイズでとっています。 ついで背景色もしてしてやりましょう。 例では「#eef」「#fee」「#efe」の3色を使っています。
 
 最後に文字サイズです。 これは見栄えに大きく左右します。 大きければ老人方に高評になると思います。 でも、デザイン的にはあまり優れたものはできません。 大きな文字を扱えるならプロとして十分にやっていけるのではないでしょうか。 今回は「12px」の大きさを使用しています。 「font-size:12px;」ですね。 どこに入れるかが鍵になってきますよ。
 
 さて、後は「背景色」「文字色」「インデント」「リンク色」の5つが 問題になってくるわけですが、優秀な読者なら既にもうお分かりのことだと思います。
 
  ●作り方のヒント2
 
 上記の内容を適応しましたが、まだ全然印象が違いますね♪ では「背景色」「文字色」「インデント」「リンク色」を適応してみましょう。 文字色は「#c44」「#262」の2色を使っています。背景と同系色で主に明度を変えています。 「背景は薄い」に対して「文字は濃い」という関係になっています。
 
  ●作り方のヒント3
 
 あれ?おかしいぞ! と気付いた方は流石です。セルとセルの間が空いていますね。 あと、文字が詰まっていて読みにくいですね。ではこれが最後にして、最も役に立つデザイン方法です。
 
 「border-collapse:collapse;」というスタイルシートを利用します。 これは「セルのボーダー枠を破壊する」という意味で「table」要素に「cellspacing='0'」という属性名・値と同じ役割をします。 スタイルシートで指定した方が圧倒的に楽ですね。
 
 次に文字間を広げる「letter-spacing:1px;」というスタイルシートです。 こちらはCSS講座で紹介したと思いますが実はかなり使える効果なのです! 「1px」か「2px」辺りが丁度良いと思います。
 
  ● 完成サンプル
 
 これで作れたことだと思います。 完成品のソースをご覧下さい。 整然としたソースですね。 複数並べて表示してもテーブルの始まりが分かるようにタブでインデントされているのが味噌です。
 
 真面目に見比べると恐らく「empty-cells:show;」は何?と思うかも知れません。 これは、空白セルを見せるという設定です。 空欄セルは文字の入ったセルと違う表示になってしまいますが、それを防ぐためにあるんですよ。 それだけですが、表などを作る時に大変便利になってきます。
 
 ★これにて当講座を終わらせて頂きます。長々とありがとうございました♪ 分からない箇所などがありましたら遠慮無くご質問下さいね。

←講座4へ  ●もどる●  講座5-2→