title logo   1st editions3rd editions

この文章は文字詰めを調整できる letter-spacing タグを挿入しています


このページはCSSをソースヘッドに記述したテンプレート
おまけ ... 動的リンクボタンをあれこれ考察したサンプル付き

画像を二つ準備するのが面倒くさいけど、マウスの位置によって画像が変わる仕掛けはダイナミックぽい。左側は this.src を使った簡易型。右側は name で仕分けしているので複数になっても同時に使える、ハズ。

gldarwl 何も起こりません 何か起こるかも gldarwr

CSSを外部シートに記述したテンプレートも。結構 cool!

最初に作った外部スタイルサンプルはとっても面白いんだけどmusicファイルを使ったので著作権がらみが心配? という訳で頑張って新しいのを作りました。リンクアンカーはボタン画像風に見えるけど、実は背景画像をリピート貼りしています。。。比較用ダミーの方はふつうのボタン画像がマウスのオンオフで切り替わるダミーアンカーです。

basic type space outside type space java*java type

比較用ダミー

透過させることで見え方が変わる背景用 gif 画像サンプル

透明下地に white で描いた画像のボリュームを増減させることで screen 上で見える色調を変えてみたサンプルです。どんな背景画像や背景色でもそれなりに見え方が変わるメリットがあります。

bgsamp1<透過少 bgsamp2<透過中 bgsamp3<透過大 bgsamp100<透過100%

どんなシチュエーションでも使える「ポップアップ/自動閉」のサンプル

アンカー画像はマウスオーバーすると陥没して見えるようあらかじめCSS内でデザイン指定しているのでちょっとおしゃれ。ポップアップウィンドゥにはちょっと大き目に手作りした「閉じる」画像も載せました。

window pop up

もいっちょおまけ! 使える HGep フォントナンバー!

タイトルロゴを描き起こすときにはデザインフォントが欲しくなりますよね。Windows OS にオプションインストールで付いて来る HGepフォントのうちNo.7,13,14,29,30,43,52,58は使えますです。このページのタイトルではNo.058を加工して使いました。
フォントサンプルです

Valid HTML 4.01 Transitional
いま現在 個のヒストリーを保持しています。