リンクをボタン化する

ボタンのようなものを作る場合、ボタンの画像を用意してその画像にリンクを張るというのがよく行われていることだと思いますが、ここではリンクそのものをボタンらしくする方法を見ていきます。

(2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新)

<a>タグはデフォルトではインライン要素ですので、これをブロック要素に変換します。要素のタイプを変更するにはスタイルシートのdisplayプロパティを使います("display"については表示形式の変更(display)を参照して下さい)。

a{
display:block;
}

ブロック要素に変換したら、ボタンの幅や高さを設定します。幅を設定には"width"プロパティで、高さについては"padding-top"と"padding-bottom"で設定します。またボタンに表示させるテキストは中央に表示したいので"text-align"プロパティに"center"を指定します。

a{
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}

実際に試したものが下記となります。

HOME

枠線が無いとボタンなのかどうか分かりませんので、"border"プロパティで枠線を付けます。枠線は上左と右下で色を変えてボタンらしくしてみました。

a.sample2{
font-size:0.75em;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
}

実際に試したものが下記となります。

HOME

かなりボタンらしくなりましたので、最後に背景色を設定しましょう。背景色は"hover"を使ってマウスがボタンの上に載っている時は色が変わるようにし、ロールオーバー風にしてみます。

a.sample3{
font-size:0.75em;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
background:#cccccc;
}

a.sample3:hover{
background:#777777;
}

実際に試したものが下記となります。マウスをボタンの上に乗せると色が変化することを確認してみて下さい。

HOME

以上のように、スタイルシートを利用することで単なるリンクをボタン風に変更することが可能になります。

下記に縦型のリンクメニューのサンプルを記載しておきます。

sample4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample4.css" type="text/css">

</head>
<body>

<a class="sample3">Menu1</a>
<a class="sample3">Menu2</a>
<a class="sample3">Menu3</a>
<a class="sample3">Menu4</a>
<a class="sample3">Menu5</a>


</body>
</html>

sample4.css

@charset "Shift_Jis";

a.sample1{
font-size:0.75em;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}

a.sample2{
font-size:0.75em;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
}

a.sample3{
font-size:0.75em;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
background:#cccccc;
}

a.sample3:hover{
background:#777777;
}

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。