ネットショップ陳列に便利なタブ表示(CSS,HTML)

公開日:  最終更新日:2018/04/29

ネットショップ陳列に便利なタブ表示(CSS,HTML)
ネットショップ等で、限られた範囲に表示する時に便利なタブ表示

↓↓↓がサンプル

スポンサードリンク

陳列に便利なタブ表示をCSSのみで実装するサンプルソース

Javascript等は使わずにcssのみで可能
HTMLの記述

  • タブ1に表示する内容
  • タブ2に表示する内容
  • タブ3に表示する内容

CSSの記述

#tabmenu_outline{
    position: absolute;
    top:30px;
    left:0px;
}
#tabmenu{
    padding:0px;
    margin:0px;
    color:#333;
    font-size: 11px;
    width:300px;
    position:relative;
}
  
#tabmenu div#tab{
    position: absolute;
    top:0px;
    left:0px;
}
  
#tabmenu div#tab a{
    float: left;
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 100px;
    display: block;
    text-decoration:none;
    color:#333;
    padding:5px 0 0 0;
    background:#eee;
}
  
#tabmenu div#tab a:hover{
    background:#000;
    color:#fff;
}
  
div#tab_contents{
    width:300px;
    overflow:
    hidden;clear:both;
    text-align:center;
}
div#tab_contents ul{
    width:2500px;
    padding:0px;
    margin:0px;
    text-align:center;
}
div#tab_contents ul li{
    float: left;
    width:260px;
    list-style-type:none;
    padding:44px  20px  20px 70px;
    background:#e2e2e2;
}





Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑