ネットショップ立ち上げ備忘録

初心者がネットショップを立ち上げるまでに関連する技術や考察の備忘録です。ネットショップでのSEO対策や、アクセス・集客方法、広告手法、デザインなどについても記事を公開しています。

PREV | PAGE-SELECT | NEXT



≫ EDIT

スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| スポンサー広告 | --:-- | TOP↑

≫ EDIT

縦メニューを画像1枚、ロールオーバー実装するCSS



menu.jpg

上記のような画像を作成してCSSのみで縦メニューを一枚画像で作成する場合のメモ。
横メニューが一般化している昨今ですが、左メニューレイアウトを採用する場合もまだあると思います。

今回の利点は
・text-indentを使用しない
・htmlのソース上で<img>タグを使用しない
・画像一枚で実装するため、複数画像で実装するより読み込みが早くなる

という感じかなと思います。
実験していないので勝手な予想ですがSEOで考えるとtext-indent:-9999px多用はあまりよろしくないかもと思っているのでもしかしたらSEOにも良いかもしれないのかな!?


・実際のサンプル(1枚画像のサイズは横200px 縦150pxでメニュー1項目のサイズはw100px h50pxです)

・html

<div id="navitest">
      <ul>
        <li id="top"><a href="#">Top</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="service"><a href="#">Service</a></li>
      </ul>
    </div>

・CSS

#navitest {
    width:100px;
    height:150px;
    background-image: url(http://blog-imgs-32.fc2.com/s/t/a/startnetshop/menu.jpg);
    background-repeat: no-repeat;
}
#navitest ul {
    margin:0;
    padding: 0;
}
#navitest li {
    list-style-type: none;
    margin:0;
    padding: 0;
}
#navitest li a {
    width: 100px;
    height:0pt;
    background-image: url(http://blog-imgs-32.fc2.com/s/t/a/startnetshop/menu.jpg);
    background-repeat: no-repeat;
    display:block;
    padding-top:50px;
    overflow:hidden;
}
#navitest li#top a {
    background-position: 0px 0px;
}
#navitest li#about a {
    background-position: 100px 0px;
}
#navitest li#service a {
    background-position: 200px 0px;
}
#navitest li#top a:hover {
    background-position: -100px 0px;
}
#navitest li#about a:hover {
    background-position: -100px -50px;
}
#navitest li#service a:hover {
    background-position: -100px -100px;
}

htmlでもアップしてみました。(cssの画像URLは必ず変更してご使用下さい)
縦メニューを画像1枚、ロールオーバー実装するCSSのindex.html


ブラウザ表示の確認として
ie6 / firefox3(win,mac) / Safari3 で確認しました。

利点ばかりのせましたが欠点としてはcssの記述が多くなるというところかもしれません。
今回の例では三項目しかありませんが、これが7項目とかになるとずらーっと長くなります。


関連スクラップ記事

関連エントリ抽出中...
このエントリーをはてなブックマークに追加 Clip to Evernote

| コーディング | 22:29 | TOP↑

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。