Blog

HOME > Web > css > 【CSS】画像１枚でメニューボタンを作る

【CSS】画像１枚でメニューボタンを作る

2015/07/14

css

備忘録です。

参考サイト
[CSS]画像１枚でメニューボタンを作る

メニューボタンの画像を１枚にまとめてしまう方法です。

HTML

<ul id="navigation">
    <li><a href="#" title="トピックス" class="topics">トピックス</a></li>
    <li><a href="#" title="経営方針" class="policy">経営方針</a></li>
    <li><a href="#" title="会社概要" class="outline">会社概要</a></li>
    <li><a href="#" title="事業内容" class="activities">事業内容</a></li>
    <li><a href="#" title="営業拠点" class="base">営業拠点</a></li>
</ul>

aタグかliタグに各ボタンを判別するためのclassが必要です。
セレクタが少ないaタグにつけるのが妥当と思うがお好みで。

CSS 共通部分

ul#navigation {
    width:920px;
    margin:0;
    overflow:hidden;　/*float解除*/
    zoom:100%;　/*float解除*/
}
ul#navigation li {
    float:left; /*次の要素を右側へ回り込ませる*/
    list-style:none; /*リストの●を消す*/
}
ul#navigation li a {
    display:block; /*インラインからブロック要素へ変更*/
    height:37px; /*高さ*/
    width:180px; /*横幅*/
    text-align:center; /*テキストの位置*/
    font-weight:bold; /*テキストの太さ*/
    letter-spacing:1px; /*文字間隔*/
    text-indent:-9898px; /*テキストを横に飛ばして見えなくする*/
    background-image:url(../images/menu.png); /*メニュー画像*/
    background-repeat:no-repeat; /*画像の繰り返しをオフに*/
}

CSS ボタンのソース

ul#navigation a.topics {background-position:0px 0px;width:190px;}
ul#navigation li a.topics:hover {background-position:0 -37px;}
 
ul#navigation a.policy {background-position:-190px 0px;}
ul#navigation li a.policy:hover {background-position:-190px -37px;}
 
ul#navigation li a.outline {background-position:-370px 0px;}
ul#navigation li a.outline:hover {background-position:-370px -37px;}
 
ul#navigation li a.activities {background-position:-550px 0px;}
ul#navigation li a.activities:hover {background-position:-550px -37px;}
 
ul#navigation li a.base {background-position:-730px 0px;}
ul#navigation li a.base:hover {background-position:-730px -37px;}

数値や表示位置は画像のサイズにより変更してください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ