このページではリンクボタンを作ってみましょう。
リンクするにもただ文字(テキスト)にリンクタグを指定するのではなく ボタンのような感じにしてみましょう。
ボタン内文字↓<head>〜</head>又は外部CSSに↓
↓<body>〜</body>に↓
↓HTMLタグに直接付加する場合は(インライン)↓
◎スタイルシートのポイント◎
(サンプルスタイルシートと照らし合わせながら変更して下さい)
- sample3[waku1やkakoi1など半角英数字ならＯＫ]
- font-size:数字px;[文字の大きさ(数字の大小)]
- color:カラー;[文字の色(カラーコード参照)]
- text-align:位置;[枠内文字の位置center(中央) - left(左側) - right(右側)]
- border:数字px 形式 カラー;
[数字px(枠の太さ)]
[枠の形式none(枠なし) - solid(実線) - double(二重線) - dotted(点線) - dashed(破線) - groove(へこみ線) - ridge(立体線)]
[枠の色(カラーコード参照)] - background-color:カラー;[背景の色(カラーコード参照)]
- padding:数字px;[枠と文字の間隔]
- width:数字;[枠の横幅]
- URLにはリンクしたいページへのアドレスを記入
- text-decoration:none;[リンク文字の下線を消す]
- display:block;[四角い範囲全体に効果(変更不可)]
また↓<head>〜</head>又は外部CSSに↓以下のスタイルシートを加えることで リンクにちょっとした効果をつけることも出来ます。
●リンクにマウスをのせたときに文字が少し移動する。
- top:数字px;[マウスをのせたときにリンク文字が〜px上にずれる]
- bottom:数字px;[マウスをのせたときにリンク文字が〜px下ににずれる]
- left:数字px;[マウスをのせたときにリンク文字が〜px左ににずれる]
- right:数字px;[マウスをのせたときにリンク文字が〜px右ににずれる]
上記スタイルシートはこのホームページにも利用している効果で
←メニューのリンク文字にマウスをのせてもらえれば分かるように
マウスをのせるとリンク文字が若干動きます。
