暫無描述
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

slideme.css 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. @charset "utf-8";
  2. /*
  3. * 2014/02/28
  4. * slideme 設定
  5. *
  6. */
  7. article#imgae {
  8. position: absolute;
  9. display: block;
  10. top: 0px;
  11. left: 0px;
  12. width: 690px;
  13. height: 230px;
  14. margin: 10px 10px 10px 10px;
  15. }
  16. /* スライド画像 レスポンシブ */
  17. @media screen and (max-width: 768px) {
  18. article#imgae {
  19. position: static;
  20. width: auto;
  21. }
  22. }
  23. div#slide {
  24. position: absolute;
  25. display: block;
  26. top: 0px;
  27. left: 0px;
  28. width: 690px;
  29. height: 210px;
  30. overflow: hidden;
  31. }
  32. div.item {
  33. position: absolute;
  34. display: block;
  35. top: 0px;
  36. left: 0px;
  37. width: 690px;
  38. height: 210px;
  39. }
  40. div#item_slide {
  41. position: absolute;
  42. display: block;
  43. top: 210px;
  44. left: 0px;
  45. width: 690px;
  46. height: 20px;
  47. }
  48. /* スライド削除 レスポンシブ */
  49. @media screen and (max-width: 768px) {
  50. div#item_slide {
  51. display: none;
  52. }
  53. }
  54. div#item_slide_center {
  55. width: 105px;
  56. margin: 0 auto;
  57. }
  58. div.itemnum {
  59. position: relative;
  60. top: 7px;
  61. display: inline;
  62. margin: 0 auto;
  63. }
  64. li {
  65. width: 2em;
  66. cursor: pointer;
  67. display: block;
  68. line-height: 20px;
  69. position: absolute;
  70. top: 50%;
  71. z-index: 10;
  72. margin: -1em 0;
  73. border-radius: 6px;
  74. color: #fff;
  75. text-align: center;
  76. background: #393;
  77. }
  78. li.next {
  79. right: -5px;
  80. }
  81. li.prev {
  82. left: -5px;
  83. }
  84. div.positionabsolute {
  85. font-size: xx-large;
  86. line-height: 120%;
  87. text-align: center;
  88. color: white;
  89. font-weight: bold;
  90. }
  91. div.positionabsolute a :hover {
  92. color: white;
  93. }
  94. .item__coronaTitle {
  95. position: relative;
  96. width: 690px;
  97. height: 50px;
  98. background-color: blue;
  99. }
  100. .second__coronavirusTitle {
  101. position: relative;
  102. width: 345px;
  103. height: 80px;
  104. float: left;
  105. background-color: cornflowerblue;
  106. }
  107. .second__coronavirusText {
  108. position: absolute;
  109. top: -3px;
  110. left: 12px;
  111. color: black;
  112. font-size: xx-large;
  113. text-align: center;
  114. font-weight: bold;
  115. }
  116. .second__vaccinationTitle {
  117. position: relative;
  118. width: 345px;
  119. height: 160px;
  120. float: left;
  121. background-color: yellow;
  122. }
  123. /* レスポンシブ */
  124. @media screen and (max-width: 768px) {
  125. div.item {
  126. width: 335px;
  127. }
  128. .item__coronaTitle {
  129. position: relative;
  130. width: 315px;
  131. height: 25px;
  132. background-color: #436AD6;
  133. }
  134. .second__coronavirusTitle {
  135. position: relative;
  136. width: 155px;
  137. height: 36px;
  138. float: left;
  139. background-color: cornflowerblue;
  140. }
  141. .second__vaccinationTitle {
  142. position: relative;
  143. width: 155px;
  144. height: 160px;
  145. float: left;
  146. background-color: yellow;
  147. }
  148. }