スタイルシートで角の丸いリンクボタンを作って見よう。
画像でリンクボタンを作るよりいろいろとメリットがある。
スタイルシートでリンクボタンを作るメリット
・画像のリンクボタンを利用するよりサイトの表示スピードが速くなる。
・画像を作る必要が無い。
スタイルシートでリンクボタンを作るデメリット
・ブラウザによってはきちんと表示されないことがある。
スタイルシートでリンクボタンを丸くする
#button{
width:100px;
height:80px;
font-size:40px;
line-height:80px;
text-align:center;
background:#f63;
border:solid 2px #000;
border-radius:15px;
text-decoration: none;
padding: 10px;margin: 10px;
}
・width:100px;⇒リンクボタンの幅。
・height:80px;
⇒リンクボタンの高さ。
・font-size:40px;
⇒文字のサイズ。
・color:#fff;
⇒文字の色
・line-height:80px;
⇒行間。
・text-align:center
;⇒文字の横位置を中央にする。
・background:#f63;
⇒背景色
・border:solid 2px #000;
⇒ボタンの周囲（ボーダー）の太さと色。
・border-radius:15px;
⇒各角で水平と垂直にに指定したpxの地点を中心に円を描いた時にできる外周をなぞって角が丸くなる。
IEの旧バージョンでは表示されない。
・text-decoration: none;
⇒リンクの下線を消す。
・padding: 10px;
⇒内側の空間を指定する。
1個指定した場合は、上下左右すべての空間に適応される。
・margin: 10px;
⇒外側の隙間を指定する。
1個指定した場合は、上下左右すべての空間に適応される。
HTMLの記載
HTMLの基本形
<div id="button"><a href="リンク先のURL">ここにリンクテキスト</a></div>
マウスを乗せたときに説明文が出るようにする
<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL">ここに表示するテキスト</a></div>
リンク先を別窓で開く
<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL" target="_blank">ここに表示するテキスト</a></div>
テキスト部分の文字の色を変えたい場合
<div id="button"><a href="リンク先のURL"><span style="color: カラーコード;">ここに表示するテキスト</span></a></div>
<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL" target="_blank"><span style="color: カラーコード;">ここに表示するテキスト</a></span></div>
id(#)の使い方にご注意
同じ名前の#(id)は1ページ1個しか使えない。
すでにbuttonという#(id)が使われていないかをソースやphp、HTMLファイルの中を必ず確認しよう。
同じ#(id)が使われていた場合は、#(id)の名前を書き換えて使うこと。
idではなくclassで指定しても同じようにできる。
classの場合、スタイルシートは#でなくて【.】を使う。
コメント