こんにちは あなたの町のパソコン先生です。
ホームページを作るのに メニューボタンを 画像で作成させている人は 多いのではないでしょうか？
ホームページに スマホ化 が 求められる今、画像のままでいいのでしょうか？
そんなお悩みを抱えている人に 今日は ＣＳＳと HTMLコードで作るボタンを ほんの少し紹介します。
＜例＞
【HTML】
<div class="menu">
<ol>
<li><a href="./">ボタン１</a>
<li><a href="./page2.html/">ボタン２</a>
</ol>
</div>
HTMLでは、div と ol、li で 構築します。
そして、ｃｓｓでは、
【CSS】
div.menu{
width: 100%;
font-size: 100%;
overflow: hidden;
}
.menu ol li {
display: outline;
list-style-type: none;
width: 180px;
height: 40px;
padding: 0px;
margin: 4px;
}
.menu ol li a:before {
list-style-type: none;
text-decoration: none;
clear: both;
}
.menu ol li a {
display: block;
text-align: center;
background-image: url(./img/bt_img_a.gif);
background-repeat: no-repeat;
text-decoration: none;
padding: 4px;
margin: 0 auto;
}
.menu ol li a:hover {
background-image: url(./img/bt_img_b.gif);
background-repeat: no-repeat;
}
マウスポインタを オンする前と後ろで ボタンイメージを変化させてみます
通常は bt_img_a.gif のイメージをボタンイメージとして表示させ
マウスがオンになると bt_img_b.gif のイメージを表示させます
と、そんな感じで CSSを使って 作成できるんですね。