引き出すようなリンクボタンを設定する-CSS-タグの絵本


	タグの絵本＞ CSS ＞引き出すようなリンクを設定する

■引き出すようなリンクボタンを設定する

・使用するCSS

【<style>～</style>間に挿入するタグ】
BODY{
margin: 0px;
}
A.menu {
float: left;
width: 130px;
background-color: ☆;
border: solid ◇px ☆;
margin: -13px 0px 0px -1px;
padding: 15px 0px 1px;
font-size: 12px;
text-align: center;
text-decoration: none;
}
A.menu:hover {
margin: -1px 0px 0px -1px;
}

【<body>～</body>間に挿入するタグ】
<A href="○" class="menu">タグの絵本</A>
<A href="○" class="menu">Yahoo!</A>
<A href="○" class="menu">ロリポップ</A>

【用語解説】

margin（ページの余白を設定するタグです）

float:left;(この場合は左揃えです。右にしたい場合はleftをrightに直して下さい）

width（引き出し部分の横幅を設定します。）

background-color（背景色です）

border: solid（枠の設定です。今回は実線設定になっています。点線などに変更したい方は"solid"を変更ください。線の種類に関してはこちら）

text-align（文字の位置を指定しています。この場合は中央）

text-decoration（このタグは文字に下線をつけたりできるタグですが今回は初期の何も装飾が着かない状態です。）


補足≫	☆＝カラーコード　（カラーコード生成はこちら
	◇＝枠の線の太さ ○＝リンク先URL

・説明

CSSを使用して引き出すようなリンクを作成する事ができます。
今回はクラスを使用しているのでリンクタグにも変更箇所があります。
なぜ引き出しのようになるのかというともともと大きなリンクを上にずらして隠している状態になっていてマウスを上に置くと下にずれるようになっているからです。
今回は「margin: -13px 0px 0px -1px;」ここのタグで13px上にずらして設定してあります。

・使用例

ソース　（テスト書き込み可）

あなたのホームページ　Internet Explorer

ファイル(F)　編集(E)　表示(V)　お気に入り(A)　ツール(T)　ヘルプ(H)

→index