制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさみみを着けたオリジナルキャラクタ。次ぎ アイドル女優・堀北真希ちゃんにうさぎの耳を着けた制作者のオリジナルキャラクタ
主な作品

制作者に依るイラストと動画作品のサンプル

ボタン風のアンカー。

CSSの小技として、リンクのアンカーをボタン風にする方法です。

ボタン風のアンカー・目次。

ボタン風アンカーの概要。

borderプロパティと擬似クラスを活用する事で、アンカーをボタン風に表示させる事が出来ます。

具体的には、<a>要素に対してボーダを表示させ、更に"クリック"されている間は枠線の太さを変えてやれば良いのです。

例えば、以下のようになるでしょう。

a.sample1:link,
a.sample1:hover {
    text-decoration: none;
    padding: 4px;
    border: #0c0 3px solid;
    }

a.sample1:visited {
    text-decoration: none;
    padding: 4px;
    border: #090 3px solid;
    }

a.sample1:active {
    text-decoration: none;
    padding: 4px;
    border-width: 5px 1px 1px 5px;
    }

この例では、"クリック"された際に、左辺と上辺を太くし、代りに下辺と右辺を細くする事でボタンが押下されているような感じを演出しております。

また、ボーダの色を訪問済と未訪問で異なる色にする事で区別し易くなるようにしました。

捕捉。

<a>要素はインライン要素のため、要素の横幅は不定です。

メニュー画面などで横幅を統一したい場合は「display: block;」プロパティを当ててブロックレヴェル式の表示にした上で、widthプロパティを当てるようにして下さい。

旧式ブラウザの場合。

ネットスケープ 4.x

<a>要素にボーダを設定するとアンカーが効かなくなってしまいます。

このため、ネットスケープ 4.xではこのような効果を出す事は出来ません。

インターネットエクスプローラ

ウィンドウズ版では5.0xまでインライン要素にはボーダを付けても表示されません。

特に、インターネットエクスプローラ4.xに至っては「display: block;」プロパティさえ認識しません。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com