DECORATION HTML

はじめに

ここではシンプルな素材を利用した際のカウンタを飾り付けるちょっとした技を紹介します。但し、ある程度 HTML を理解していることが条件になります。また、メール等による個別の質問はご遠慮下さい。

また、ちょっとした技は HTML でも可能ですが、主にスタイルシートを活用しますので、スタイルシートとは何？…という方は下記サイト様で勉強してきて下さいね。

さて、まずは背景色がある素材を使用した場合に、カウンタの領域をつくってみましょう。勿論、透過処理された画像でも同様です。

一番簡単な方法は <TABLE> を利用する方法です。只単に領域をつくるだけであれば、背景色を同色にし、cellpadding の値で領域の広さを調整すれば出来上がりです。

本来は上記のサイズであった場合、cellpadding の値を 5 にする事によって広めの領域を確保することが出来るわけです。

また、一般的に GIF ファイルを利用したカウンタは CGI スクリプトによって画像を連結して表示しますので、タグ <IMG> を記述する事が殆どです。ですからタグ <IMG> にスタイルシートの定義をする事により領域を確保することもできます。

上記はカウンタ画像そのものに背景色と同じ黒色の罫線を 5px で設定しています。また、下記のように <DIV> 等のブロック要素に定義して反映させる方法もあります。

但し、ブロック要素での定義ではカウンタ部分だけでなく表示画面の幅に反映されてしまいますので、width: の定義も加えておきましょう。また、その際にはブラウザによって padding:5px の解釈に差がありますから、センタリングしておけば見栄えも良くなると思います。