上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 マウスオーバー時(マウスがリンクの上に乗っかったとき)のリンクタグ、色々工夫すると楽しいのですが、今回代表的な面白リンクタグがどういう構造に鳴っているのか研究します。

この、ボタンを押す感じ、どうやっているの?

押しボタン風

 エレベーターとか核兵器(笑)のボタンみたいに、「ポチッ」と押すタイプのボタン、ウェブ上でもよくありますよね。
 あれはどうやっているのか。
 ぱっと思いつくのは、「a : link { ~ }」(通常のリンク)時にボーダーのアウトセット、「a : hover { ~ }」(マウスオーバー時のリンク)時にボーダーのインセットにしてしまえば…となります。
 実際に動作を調べてみます。

 例えば、仮のボックス「cute」内でのリンクを「ボタン風にする」設定でHTML、CSSを組んだとしますと…


HTMLCSS
<div class="cute">
  :
  :
<a href="http://text.jp/">
実験中
</a>
  :
  :
</div>
.cute a {
   border : 2px outset #66f ;
   padding : 10px ;
   }
.cute a : hover {
   border : 2px inset #66f ;
   padding : 10px ;
   }

実験中


 なんだか、「ペコペコ」なりますが「ポチっ」と言う感じではありません。

 ポチっとなるボタン、これ、実はちょっと工夫されているんです。
 ボタンがポチッとなる時、文字の位置を微妙に変えているんです。
「padding」という、文字の周りの空白を指定する命令文がミソで、通常のリンク時とマウスオーバー時とで、少し空間の上下左右の幅を変えているという。

通常のリンク時

上空白 10px

左空白 10px 文字 右空白 10px

下空白 10px


マウスオーバーのリンク時

上空白 9px

左空白 9px 文字 右空白 11px

下空白 11px

 文字周りの空間の空き方を、上・右で1px減らし、下・左で1px増やすことで、全体の箱の大きさを変えることなく、文字だけ右上に1pxずらすと言うわけです。

 実際にHTML、CSSを組んでみると…


HTMLCSS
<div class="cute">
  :
  :
<a href="http://text.jp/">
実験中
</a>
  :
  :
</div>
.cute a {
   border : 2px outset #66f ;
   padding : 10px ;
   }
.cute a : hover {
   border : 2px inset #66f ;
   padding : 9px 11px 11px 9px ;
   }

実験中



 ポチポチなりました☆
 目の錯覚っぽい…実際は文字は右上にずれているのですが、押し込まれた感じになってます…

 これで成功です☆


■基本編はコチラから
マウスオーバーリンクタグで遊ぶ!

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Wed.03.31.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。