今までに蓄えたホームページタグの知識を元に様々な実践的使用方法を学んでいきます。いつものようにサンプル付きなので手軽に簡単に効率よく使い方を身につけられます。Javascriptなども使用するので、ちょっぴり便利な小技集としてもお使いできます。★テーブルタグの復習は大丈夫?テーブルタグの使い方を覚えていますか?覚えたいない方は「講座2.7」を参照して下さい。今後「CSS:スタイルシート」を多用していきますので「講座3」も覚えておいて下さいね。覚えるまでは見ながらやって下さればよろしいですよ。各講座ページを印刷なさると効果的に学習できます。★今回作って見るもの=要はサンプルですサンプル1は今回の講義で作成・解説するサンプルです。完成サンプル(600x120)今回は上記のサンプルを作っていきます。このサンプルはリンク集などで使用可能です。サイト解説」の3範囲に色分けして表示しています。色分けすることによって、各項目に統一感を持たせることができます。:サイト解説」とハッキリと分かれます。人の目は色に敏感にできているので、下手に区切りを入れたり太字などにするよりもかなり効果的な方法です。何らかの影響で画像が表示されない場合に備え文字による「テキストリンク」を使っています。アクセス性がグンと上がるので効果的です。画像リンクを張る場合の注意は、バナーサイズが非常に大きくなるという点です。読み込みに要する時間がテキストリンク時に比べ格段に遅くなるということです。画像リンクのみでは延滞はかなりのダメージになります。バナー画像を直接リンク先のサイトから張るのではなく自分のサーバにアップロードして張って下さい。相手のサーバに負荷を掛けるだけではなく、レスポンス(反応時間)の違いにより遅延表示にも関わります。自分のサーバに置くメリットとしては遅延を防ぐほか、過剰なバナーサイズを抑えることもできます。ホームページの知識が乏しい管理人が何も考えずに作ったバナーでは無駄にサイズが大きいことがあります。処理が可能になるのです。分かりやすく言うと、画像にもよりますが、50KBの高画質画像が20KB程度まで抑えることができます。言うまでもありませんが、十分に見られる画質内での話です。バナーを作る時はサイズ面も考慮して作って欲しいと思います。次にサイトの解説・説明文についてです。横に長く書くのは良くありません。短い文章にし、分かり易く要約しましょう。早い段階で「どうのようなサイトか」を理解することができます。2〜3行程度が良いでしょう。長くても5行以内に納めるのがベストです。見ると、解説の文章をインデントしていますね。これも見やすさの要因の1つになっています。インデントは些細なことですが重要な位置付けにあることを覚えておいて下さい。一通りの説明は終わりました。皆さん、自力で頑張って作ってみて下さい。ヒントを出しながら説明もするので分からなければ読み進めていって下さいね。●作り方のヒント1問題(?)のヒントです。テーブルタグに枠を付けてみました。バナー表示部分の「td」要素に「rowspan」属性を付けて2行分占有しています。合計3つのセルで構成されているというわけです。色分けを見たら一目瞭然ですけどね。次に気になる点は画像の周りの枠です。通常、画像にリンクを張るとこのように枠が表示されるのですが完成サンプルには枠がありません。スタイルシートを使うようにしましょう。その方が色々融通が効いてくれるんです。今回はリンク集に使うという事なので数十個のバナー画像があることが想定されます。「img」要素タグに指定のではなく、ヘッダか別ファイルで指定してやりましょう。「img{border:0px;}」とでもしてやって下さいね。次に気付いて頂きたい点は「横幅」です。テーブルのデザインテクニックとして必須の用語です。これを指定していなければガタガタのテーブルになってしまいます。width属性値を「200px」にしています。それではキツキツなので「padding」属性の属性値として上下左右に「5px」の余白をとりました。テーブル全体としては「550px」のサイズでとっています。背景色もしてしてやりましょう。例では「#eef」「#fee」「#efe」の3色を使っています。最後に文字サイズです。これは見栄えに大きく左右します。大きければ老人方に高評になると思います。デザイン的にはあまり優れたものはできません。大きな文字を扱えるならプロとして十分にやっていけるのではないでしょうか。今回は「12px」の大きさを使用しています。「font-size:12px;」ですね。どこに入れるかが鍵になってきますよ。問題になってくるわけですが、優秀な読者なら既にもうお分かりのことだと思います。インデント」「リンク色」を適応してみましょう。文字色は「#c44」「#262」の2色を使っています。背景と同系色で主に明度を変えています。「背景は薄い」に対して「文字は濃い」という関係になっています。気付いた方は流石です。セルとセルの間が空いていますね。あと、文字が詰まっていて読みにくいですね。これが最後にして、最も役に立つデザイン方法です。「border-collapse:collapse;」というスタイルシートを利用します。これは「セルのボーダー枠を破壊する」という意味で「table」要素に「cellspacing='0'」という属性名・値と同じ役割をします。スタイルシートで指定した方が圧倒的に楽ですね。次に文字間を広げる「letter-spacing:1px;」というスタイルシートです。「1px」か「2px」辺りが丁度良いと思います。完成サンプルこれで作れたことだと思います。完成品のソースをご覧下さい。整然としたソースですね。複数並べて表示してもテーブルの始まりが分かるようにタブでインデントされているのが味噌です。真面目に見比べると恐らく「empty-cells:show;」は何?と思うかも知れません。これは、空白セルを見せるという設定です。空欄セルは文字の入ったセルと違う表示になってしまいますが、それを防ぐためにあるんですよ。それだけですが、表などを作る時に大変便利になってきます。★これにて当講座を終わらせて頂きます。分からない箇所などがありましたら遠慮無くご質問下さいね。