◎　スタイルシートだけで作るエフェクト

　スタイルシートというのは、本来ＨＴＭＬで構造化された文書に、主として「見栄えの」要素を付加するといった使い方をするのですが、それはあくまで静的に定義するものであって、動的に変化させるのは JavaScript のようなスクリプトによるプログラムによって成されます。
　しかし、スタイルシートの中にも面白いプロパティがあって、アンカータグによるリンクに対して動的な変化を盛り込むことのできるものがあります。それが
★ A:hover   
・特定のアンカータグにマウスカーソルが乗った状況でのプロパティです。
・ブラウザが違っても、だいたい同じように動作します。
・マウスカーソルが乗っているかいないかの２種類の違いしか表現できません。
★ A:active  
・特定のアンカータグがクリックされた状況でのプロパティです。
・ＩＥでは、次にクリックされるまで効果を保持します。
・Ｏｐｅｒａではマウスダウンの間だけ効果を保持します。
・ＮＮではサポートされてはいますが効果が発揮されません。
★ A:visited 
・特定のアンカータグに記されたURLが既に以前に閲覧済みの状況でのプロパティです。
・クリックすることで確実に効果が現れますが、それっきり元には戻りません。
　元には戻すためには「履歴」を削除する必要があり、効果を付ける目的には実用的ではありません。
の３種です。
　実際に使ってみると、色々な効果をつけるために使えるのは A:hover だけと言ってもいいでしょう。
　しかし、これらの小技と言うのはあくまで裏技的なもので、スタイルシート本来の目的とは外れるものであることをお断りしておきます。

　以下が、本コーナーの各ページの紹介です。タイトル部分にもリンクが貼ってありますので、そこからでも各ページへ移れます。

◎　角が丸い枠

　テーブルを使わず、スタイルシートの「レイアウト枠」を使った角の丸い枠の作り方を説明しています。

◎　コメント表示付きボタン１

　ボタンの上にマウスカーソルが来ると、ボタン下部が開いてコメントが表示されます。左のメニューボタンがこれを利用しています。スタイルシートだけで作るエフェクトとしては、それほど難しくは無いと思います。

◎　コメント表示付きボタン２

　かなり広範囲に利用可能と思われますので、このページはスタイルシート初心者の方を対象に作りました。紹介しているボタンそのものはスタイルシートだけで作るものですが、ページ内でソースの説明や改造の手引きを表示するために、このページに限り JavaScript を使用しております。相当手間をかけて作ったページですので、一度ご覧になってくださいませ。

◎　コメント表示付きボタン３

　前ページで力を使い切ったので、このページはざっと説明しているだけです。機能的にも今ひとつというボタンですので、参考程度にご覧ください。

◎　コメント表示付きボタン他

　「コメント表示ボタン」のバリエーションを紹介と言うか展示しただけというか・・・ページの作りもここだけ変わってしまいました。スタイルシートってパズル好きの人には向いているかもしれません。

◎　スタイルシートによる擬似フレーム

　このページの構造がそうなのですが、フレームページと比較しても、それなりにメリットもありデメリットもありというところです。まあ、こういうレイアウトもできますよといった紹介です。
　フレームページはダメだなんて言われて久しいのですが、ではこの方法が使われているかと言えばそうでもないので、作り方を紹介しているＨＰもあまりないと思います。ここもご参考程度にご覧くださいといった内容です。

先頭へ戻る