1. <div id="wrapper">
  2. <header>
  3. <div class="inner">
  4. <ul class="links">
  5. <li class="link1"><a href="#"><img src="img/links1.png" alt="トップページ" width="99" height="111"></a></li>
  6. <li class="link2"><a href="#"><img src="img/links2.png" alt="はじめての方へ" width="114" height="111"></a></li>
  7. <li class="link3"><a href="#"><img src="img/links3.png" alt="ご利用ガイド" width="107" height="111"></a></li>
  8. <li class="link4"><a href="#"><img src="img/links4.png" alt="お問い合わせ" width="109" height="111"></a></li>
  9. <li class="link5"><a href="#"><img src="img/links5.png" alt="Boys&Girlsについて" width="150" height="111"></a></li>
  10. </ul>
  11. <nav>
  12. <ul>
  13. <li class="boy"><a href="#"><img src="img/nav1.png" alt="男の子" width="137" height="232"></a></li>
  14. <li class="girl"><a href="#"><img src="img/nav2.png" alt="女の子" width="137" height="232"></a></li>
  15. <li class="pickup"><a href="#"><img src="img/nav3.png" alt="限定商品" width="137" height="232"></a></li>
  16. <li class="shop"><a href="#"><img src="img/nav4.png" alt="店舗検索" width="137" height="232"></a></li>
  17. <li class="login"><a href="#"><img src="img/nav5.png" alt="ログイン" width="132" height="232"></a></li>
  18. </ul>
  19. </nav>
  20. </div>
  21. </header>
  22. </div>
  1. @charset "UTF-8";
  2. header ul {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  7. header ul li {
  8. float: left;
  9. }
  10. header ul li a {
  11. display: block;
  12. overflow: hidden;
  13. }
  14. header ul li a img {
  15. border: 0;
  16. }
  17. ul.links {
  18. float: right;
  19. margin-bottom: 10px;
  20. }
  21. ul.links li {
  22. background-position: 0 -60px;
  23. }
  24. ul.links li.link1 { background-image: url(../img/links1.png); }
  25. ul.links li.link2 { background-image: url(../img/links2.png); }
  26. ul.links li.link3 { background-image: url(../img/links3.png); }
  27. ul.links li.link4 { background-image: url(../img/links4.png); }
  28. ul.links li.link5 { background-image: url(../img/links5.png); }
  29. ul.links li.link1,
  30. ul.links li.link1 a { width: 99px; }
  31. ul.links li.link2,
  32. ul.links li.link2 a { width: 114px; }
  33. ul.links li.link3,
  34. ul.links li.link3 a { width: 107px; }
  35. ul.links li.link4,
  36. ul.links li.link4 a { width: 109px; }
  37. ul.links li.link5,
  38. ul.links li.link5 a { width: 150px; }
  39. ul.links li a {
  40. height: 21px;
  41. }
  42. ul.links li a img {
  43. transition: margin 0.3s ease 0s;
  44. -moz-transition-property: margin;
  45. -webkit-transition-property: margin;
  46. -o-transition-property: margin;
  47. -ms-transition-property: margin;
  48. -moz-transition-duration: 0.3s;
  49. -webkit-transition-duration: 0.3s;
  50. -o-transition-duration: 0.3s;
  51. -ms-transition-duration: 0.3s;
  52. }
  53. ul.links li a:hover img {
  54. margin-top: -30px;
  55. }
  56. ul.links li a:active img {
  57. opacity: 0;
  58. }
  59. #home nav ul li.link1 a img,
  60. #guidance nav ul li.link2 a img,
  61. #guide nav ul li.link3 a img,
  62. #contact nav ul li.link4 a img,
  63. #about nav ul li.link5 a img {
  64. margin-top: -180px;
  65. }
  66. nav {
  67. clear: both;
  68. }
  69. nav ul {
  70. background: #b2d63e;
  71. }
  72. nav ul li {
  73. background-position: 0 -60px;
  74. }
  75. nav ul li.boy { background-image: url(../img/nav1.png); }
  76. nav ul li.girl { background-image: url(../img/nav2.png); }
  77. nav ul li.pickup { background-image: url(../img/nav3.png); }
  78. nav ul li.shop { background-image: url(../img/nav4.png); }
  79. nav ul li.login { background-image: url(../img/nav5.png); }
  80. nav ul li,
  81. nav ul li a { width: 137px; }
  82. nav ul li.login,
  83. nav ul li.login a { width: 132px; }
  84. nav ul li a {
  85. height: 47px;
  86. transition: opacity 0.3s ease 0s, height 0.3s ease 0s;
  87. -moz-transition-property: opacity, height;
  88. -webkit-transition-property: opacity, height;
  89. -o-transition-property: opacity, height;
  90. -ms-transition-property: opacity, height;
  91. -moz-transition-duration: 0.3s;
  92. -webkit-transition-duration: 0.3s;
  93. -o-transition-duration: 0.3s;
  94. -ms-transition-duration: 0.3s;
  95. }
  96. nav ul li a:hover,
  97. #boy nav ul li.boy a,
  98. #girl nav ul li.girl a,
  99. #about nav ul li.about a,
  100. #shop nav ul li.shop a,
  101. #login nav ul li.login a {
  102. height: 52px;
  103. }
  104. nav ul li a:hover {
  105. opacity: 0;
  106. }
  107. nav ul li:active {
  108. background-position: 0 -120px;
  109. }
  110. #boy nav ul li.boy a,
  111. #girl nav ul li.girl a,
  112. #about nav ul li.about a,
  113. #shop nav ul li.shop a,
  114. #login nav ul li.login a {
  115. opacity: 1;
  116. }
  117. #boy nav ul li.boy a img,
  118. #girl nav ul li.girl a img,
  119. #about nav ul li.about a img,
  120. #shop nav ul li.shop a img,
  121. #login nav ul li.login a img {
  122. margin-top: -180px;
  123. }
  124. nav ul {
  125. zoom: 1;
  126. }
  127. nav ul:after {
  128. content: "";
  129. display: block;
  130. clear: both;
  131. }