1. <div id="wrapper">
  2. <input type="radio" name="switch" id="normalList" checked>
  3. <input type="radio" name="switch" id="imageList">
  4. <input type="radio" name="switch" id="textList">
  5. <ul class="tabBtn">
  6. <li><label for="normalList"></label></li>
  7. <li><label for="imageList"></label></li>
  8. <li><label for="textList"></label></li>
  9. </ul>
  10. <ul class="menu">
  11. <li><a href="#"><dl>
  12. <dt class="date"><span class="year">2014</span><span class="day">1.30</span><span class="week">Thu</span></dt>
  13. <dd class="img"><img src="http://lopan.jp/wp/wp-content/uploads/2014/01/icon_lovefont-300x300.png"></dd>
  14. <dd class="ttl">なつかしくってあったかい、きりぎりす。 #LOVEFONT</dd>
  15. <dd class="excerpt">フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。</dd>
  16. </dl></a></li>
  17. <li><a href="#"><dl>
  18. <dt class="date"><span class="year">2013</span><span class="day">9.15</span><span class="week">Sun</span></dt>
  19. <dd class="img"><span><img src="http://lopan.jp/wp/wp-content/uploads/2013/09/icon_texture.jpg"></span></dd>
  20. <dd class="ttl">透明ノイズと紙テクスチャ。</dd>
  21. <dd class="excerpt">ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。</dd>
  22. </dl></a></li>
  23. <li><a href="#"><dl>
  24. <dt class="date"><span class="year">2013</span><span class="day">6.17</span><span class="week">Mon</span></dt>
  25. <dd class="img"><span><img src="http://lopan.jp/wp/wp-content/uploads/2013/09/icon_webdesign4.jpg"></span></dd>
  26. <dd class="ttl">Webサイトの作り方のまとめ!ブラウザチェック。</dd>
  27. <dd class="excerpt">トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。</dd>
  28. </dl></a></li>
  29. <li><a href="#"><dl>
  30. <dt class="date"><span class="year">2013</span><span class="day">3.19</span><span class="week">Tue</span></dt>
  31. <dd class="img"><span><img src="http://lopan.jp/wp/wp-content/uploads/2013/03/icon_photoshop_shape.jpg"></span></dd>
  32. <dd class="ttl">Photoshopのシェイプでできること。</dd>
  33. <dd class="excerpt">拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。</dd>
  34. </dl></a></li>
  35. </ul>
  36. </div>
  1. /* 略 */
  2. /* :::::: button :::::: */
  3. .tabBtn {
  4. display: table;
  5. width: 100%;
  6. margin: 0 0 5px;
  7. padding: 0;
  8. background-color: #20b2aa;
  9. text-align: right;
  10. }
  11. .tabBtn li {
  12. display: inline-block;
  13. width: 50px;
  14. border-left: 1px solid #fff;
  15. background-color: #20b2aa;
  16. text-align: center;
  17. vertical-align: middle;
  18. }
  19. .tabBtn li label {
  20. display: block;
  21. cursor: pointer;
  22. height: 18px;
  23. padding: 9px 0;
  24. color: #fff;
  25. transition: background-color .3s;
  26. }
  27. .tabBtn li label::before {
  28. content: "";
  29. display: inline-block;
  30. overflow: hidden;
  31. width: 18px;
  32. height: 18px;
  33. background: url(../img/ico_tabs.svg) no-repeat;
  34. }
  35. .tabBtn li label[for="normalList"]::before {
  36. background-position: 0 0;
  37. }
  38. .tabBtn li label[for="imageList"]::before {
  39. background-position: -30px 0;
  40. }
  41. .tabBtn li label[for="textList"]::before {
  42. background-position: -60px 0;
  43. }
  44. .tabBtn li label:hover {
  45. background-color: rgba(205,92,92,.5);
  46. }
  47. /* :::::: contents :::::: */
  48. .menu li,
  49. .menu dl,
  50. .menu dt,
  51. .menu dd {
  52. box-sizing: border-box;
  53. }
  54. .menu::after {
  55. content: "";
  56. display: block;
  57. clear: both;
  58. }
  59. .menu li {
  60. float: left;
  61. width: 25%;
  62. padding: 2px;
  63. }
  64. .menu li a {
  65. display: block;
  66. text-decoration: none;
  67. background-color: #fff;
  68. transition: color 0.6s, background-color 0.6s, opacity 0.6s;
  69. }
  70. .menu dl {
  71. position: relative;
  72. overflow: hidden;
  73. padding: 10px;
  74. }
  75. .menu dt,
  76. .menu dd {
  77. font-size: 0.8em;
  78. line-height: 1.6;
  79. }
  80. .menu img {
  81. width: 100%;
  82. vertical-align: middle;
  83. }
  84. .menu .date,
  85. .menu .excerpt {
  86. color: #373039;
  87. }
  88. .menu .ttl {
  89. margin-bottom: 0.3em;
  90. font-size: 1em;
  91. line-height: 1.4;
  92. }
  93. .menu .excerpt {
  94. font-size: 0.7em;
  95. }
  96. /* :::::: normal :::::: */
  97. #normalList:checked ~ .menu li {
  98. width: 50%;
  99. }
  100. #normalList:checked ~ .menu dl {
  101. height: 140px;
  102. }
  103. #normalList:checked ~ .menu a:hover {
  104. opacity: 0.6;
  105. }
  106. #normalList:checked ~ .menu .date {
  107. height: 20px;
  108. }
  109. #normalList:checked ~ .menu .img {
  110. position: relative;
  111. float: left;
  112. overflow: hidden;
  113. width: 40%;
  114. height: 100px;
  115. margin-right: 20px;
  116. margin-bottom: 0.6em;
  117. }
  118. #normalList:checked ~ .menu .img img {
  119. position: absolute;
  120. top: 50%;
  121. -webkit-transform: translateY(-50%);
  122. transform: translateY(-50%);
  123. }
  124. #normalList:checked ~ .menu .img {
  125. z-index: 1;
  126. }
  127. #normalList:checked ~ .menu dl::after {
  128. content: "";
  129. display: block;
  130. position: absolute;
  131. bottom: 0;
  132. left: 0;
  133. width: 100%;
  134. height: 3em;
  135. background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  136. background-image: linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  137. }
  138. /* :::::: image :::::: */
  139. #imageList:checked ~ .menu .date,
  140. #imageList:checked ~ .menu .ttl {
  141. z-index: 1;
  142. position: absolute;
  143. left: 0;
  144. line-height: 1;
  145. background-color: rgba(255,255,255,0.9);
  146. }
  147. #imageList:checked ~ .menu .date {
  148. top: 15px;
  149. padding: 0.3em 5px 0.15em 15px;
  150. }
  151. #imageList:checked ~ .menu .ttl {
  152. bottom: 0;
  153. width: 100%;
  154. margin: 0;
  155. padding: 0.5em 15px 15px;
  156. font-size: 0.8em;
  157. }
  158. #imageList:checked ~ .menu .excerpt {
  159. display: none;
  160. }
  161. #imageList:checked ~ .menu .date,
  162. #imageList:checked ~ .menu .ttl {
  163. opacity: 0;
  164. -webkit-transition: opacity 0.3s, -webkit-transform 0.6s;
  165. transition: opacity 0.3s, transform 0.6s;
  166. }
  167. #imageList:checked ~ .menu .date {
  168. -webkit-transform: translateY(-100%);
  169. transform: translateY(-100%);
  170. }
  171. #imageList:checked ~ .menu .ttl {
  172. -webkit-transform: translateY(100%);
  173. transform: translateY(100%);
  174. }
  175. #imageList:checked ~ .menu a:hover {
  176. background-color: rgba(255,255,255,0.3);
  177. }
  178. #imageList:checked ~ .menu a:hover .date,
  179. #imageList:checked ~ .menu a:hover .ttl {
  180. opacity: 1;
  181. -webkit-transform: translateY(0);
  182. transform: translateY(0);
  183. transition-duration: 1s, 0.6s;
  184. }
  185. #imageList:checked ~ .menu .img {
  186. overflow: hidden;
  187. background-color: #593869;
  188. transition: background-color 0.6s 1s;
  189. }
  190. #imageList:checked ~ .menu dl .img img {
  191. -webkit-transition: opacity 1s, -webkit-transform 0.3s;
  192. transition: opacity 1s, transform 0.3s;
  193. }
  194. #imageList:checked ~ .menu:hover dl .img img {
  195. transition-duration: 1s;
  196. }
  197. #imageList:checked ~ .menu a:hover .img img {
  198. opacity: .6;
  199. -webkit-transform: scale(1.2);
  200. transform: scale(1.2);
  201. }
  202. /* :::::: text :::::: */
  203. #textList:checked ~ .menu li {
  204. float: none;
  205. width: 100%;
  206. }
  207. #textList:checked ~ .menu li a {
  208. background-color: rgba(255,255,255,0.3);
  209. }
  210. #textList:checked ~ .menu li a:hover {
  211. background-color: #fff;
  212. }
  213. #textList:checked ~ .menu dl {
  214. padding: 0;
  215. }
  216. #textList:checked ~ .menu dl::after {
  217. content: "";
  218. display: block;
  219. clear: both;
  220. }
  221. #textList:checked ~ .menu dt,
  222. #textList:checked ~ .menu dd {
  223. -moz-box-sizing: border-box;
  224. box-sizing: border-box;
  225. margin: 0;
  226. padding: 10px;
  227. }
  228. #textList:checked ~ .menu .date {
  229. float: left;
  230. width: 12%;
  231. margin-right: 2px;
  232. background-color: #fff;
  233. }
  234. #textList:checked ~ .menu .date span {
  235. display: block;
  236. font-size: 0.8em;
  237. line-height: 1.2;
  238. text-align: center;
  239. }
  240. #textList:checked ~ .menu .date .day {
  241. font-size: 1.2em;
  242. }
  243. #textList:checked ~ .menu .date .week {
  244. background-color: #f4f4f4;
  245. }
  246. #textList:checked ~ .menu .img {
  247. display: none;
  248. }
  249. #textList:checked ~ .menu .ttl,
  250. #textList:checked ~ .menu .excerpt {
  251. float: right;
  252. width: calc(88% - 2px);
  253. overflow: hidden;
  254. text-overflow: ellipsis;
  255. white-space: nowrap;
  256. }
  257. #textList:checked ~ .menu .ttl {
  258. padding-bottom: 0.3em;
  259. }
  260. #textList:checked ~ .menu .excerpt {
  261. padding: 0 10px;
  262. }
  263. /* :::::: media queries :::::: */
  264. @media screen and (max-width: 480px) {
  265. .menu li {
  266. width: 50%;
  267. }
  268. #normalList:checked ~ .menu li {
  269. float: none;
  270. width: 100%;
  271. }
  272. #textList:checked ~ .menu .date {
  273. width: 20%;
  274. }
  275. #textList:checked ~ .menu .ttl,
  276. #textList:checked ~ .menu .excerpt {
  277. width: calc(80% - 2px);
  278. }
  279. }
  280. /* :::::: mechanism :::::: */
  281. #normalList:checked ~ .tabBtn li [for="normalList"],
  282. #imageList:checked ~ .tabBtn li [for="imageList"],
  283. #textList:checked ~ .tabBtn li [for="textList"] {
  284. background-color: #cd5c5c;
  285. }
  286. #normalList:checked ~ .menu .date .year::after,
  287. #imageList:checked ~ .menu .date .year::after,
  288. #normalList:checked ~ .menu .date .day::after,
  289. #imageList:checked ~ .menu .date .day::after {
  290. content: ".";
  291. }
  292. #normalList:checked ~ .menu .date .day::after,
  293. #imageList:checked ~ .menu .date .day::after {
  294. margin-right: 0.5em;
  295. }