クールなページ

「クール」とは、イカしてる、格好いいというような意味です。インターネットで素晴らしいことを表現するのによく使われます。西海岸風の表現ですね。

クールなページというのは、必ずしも豪華で派手なものである必要はありません。ポイントを押さえて、必要な要素がスマートに配置されていれば、テキスト主体でも十分クールなページになります。

クールと統一性

作品を電子テキストとして発表するときに、ひとつ考えておくとよいのが、「全体の統一性」ということです。単一のページはシンプルであっても、ページをめくるごとに統一されたレイアウトや表現が示されると、結構いい感じの作品になるのではないかと思います。テンプレートを使う利点は、この統一性が自然に保てるというところにもあります。

バナーを作る

作品に統一感を与える手法として有効なのが、バナー(banner)の利用です。バナーとはもともと紋章をあしらった旗のことで、新聞のトップ見出しを指して使われることもあります。WWWでいうバナーは、一般的にページのトップに示される統一的なイメージのことを指しています。旗印ということですね。

作品をいくつかのファイルに分割して電子テキストにする場合、全てのページに一貫したロゴのようなものを置いておくと、作品全体の統一感を保つことができます。たとえばこのサイトでもページの頭にバナーを置いています。特に凝ったものでもなく、手元のグラフィックソフトで簡単に作成したものです。

グラフィックソフトなんてとてもとても、とおっしゃるなら、簡単なスタイルシートを使って、ちょっとしたバナーを作ってしまう方法もあります。例えば、head要素内に

(例)

<style type="text/css">
  div.bn {
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    background: blue;
    border:none;
    padding: 0.4em 1em;
  }
</style>

というスタイルを記述し、次のようなHTMLを、<body>タグのすぐ後に置くと、

(例)

<div class="bn">
<p>The Orignal Works by M. KANZAKI</p>
</div>

以下のように一種の「バナー」をページの頭に表示させることができます。これが全てのページの頭にあるだけでも、作品の印象が統一されるのではないでしょうか。

(スタイルシートによるバナーの例)

The Orignal Works by M. KANZAKI

さらに、フッタを加える

フッタとは、ページの一番下の部分に常に出てくる部分を言います。ここも各ページに共通したものにしておくと、いっそう統一感が増します。書物のレイアウトを考えても、上下のスペースの使い方で、全体のイメージが左右されますね。

この部分には、作者に関する情報や連絡先を記述するとより有益です。たとえば会社のレターヘッドには、よくこの部分に住所や電話番号が記載されていますね。これと同じように、更新年月日、連絡先、自己紹介ページへのリンクなどを用意するというわけです(スタイルガイドサインしよう!も参照)。このために一般的に用いられるのが<address>要素です。例えば、

(例)

<hr>
<address>
(c)1998, M.Kanzaki. E-mail: <a href="mailto:me@mydomain.com">me@mydomain.com</a>
</address>

という具合です。

これらを合わせて使ったページのサンプルを用意しましたので、これだけの要素でページがどのように見えるか、確認してみて下さい。