1. <div id="wrapper">
  2. <input type="radio" name="switch" id="tab-1" checked>
  3. <input type="radio" name="switch" id="tab-2">
  4. <input type="radio" name="switch" id="tab-3">
  5. <input type="radio" name="switch" id="tab-4">
  6. <input type="radio" name="switch" id="tab-5">
  7. <ul class="tabBtn">
  8. <li><label for="tab-1">タブ1</label></li>
  9. <li><label for="tab-2">タブ2</label></li>
  10. <li><label for="tab-3">タブ3</label></li>
  11. <li><label for="tab-4">タブ4</label></li>
  12. <li><label for="tab-5">タブ5</label></li>
  13. </ul>
  14. <div class="tabContents">
  15. <section>
  16. <figure>
  17. <img src="http://lopan.jp/wp/wp-content/uploads/2014/01/title.png">
  18. <figcaption>フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。<a href="#">この記事を読む</a></figcaption>
  19. </figure>
  20. </section>
  21. <section>
  22. <figure>
  23. <img src="http://lopan.jp/wp/wp-content/uploads/2013/09/title.jpg">
  24. <figcaption>ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。<a href="#">この記事を読む</a></figcaption>
  25. </figure>
  26. </section>
  27. <section>
  28. <figure>
  29. <img src="http://lopan.jp/wp/wp-content/uploads/2013/06/title.jpg">
  30. <figcaption>トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。<a href="#">この記事を読む</a></figcaption>
  31. </figure>
  32. </section>
  33. <section>
  34. <figure>
  35. <img src="http://lopan.jp/wp/wp-content/uploads/2013/03/title.jpg">
  36. <figcaption>拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。<a href="#">この記事を読む</a></figcaption>
  37. </figure>
  38. </section>
  39. <section>
  40. <figure>
  41. <img src="http://lopan.jp/wp/wp-content/uploads/2012/12/title.jpg">
  42. <figcaption>CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。<a href="#">この記事を読む</a></figcaption>
  43. </figure>
  44. </section>
  45. </div>
  46. </div>
  1. [name="switch"] {
  2. display: none;
  3. }
  4. /* 略 */
  5. /* :::::: contents :::::: */
  6. .tabContents {
  7. position: relative;
  8. }
  9. .tabContents section {
  10. box-sizing: border-box;
  11. width: 100%;
  12. padding: 20px;
  13. background-color: #fff;
  14. }
  15. .tabContents figure {
  16. overflow: hidden;
  17. }
  18. .tabContents figure img {
  19. float: left;
  20. max-width: 50%;
  21. margin-right: 20px;
  22. }
  23. .tabContents figcaption {
  24. font-size: 12px;
  25. line-height: 1.8;
  26. }
  27. /* :::::: mechanism :::::: */
  28. .tabContents section {
  29. opacity: 0.1;
  30. transition: opacity 0.3s;
  31. }
  32. #tab-1:checked ~ .tabBtn li [for="tab-1"],
  33. #tab-2:checked ~ .tabBtn li [for="tab-2"],
  34. #tab-3:checked ~ .tabBtn li [for="tab-3"],
  35. #tab-4:checked ~ .tabBtn li [for="tab-4"],
  36. #tab-5:checked ~ .tabBtn li [for="tab-5"] {
  37. background-color: #cd5c5c;
  38. }
  39. #tab-1:checked ~ .tabContents section:nth-child(1),
  40. #tab-2:checked ~ .tabContents section:nth-child(2),
  41. #tab-3:checked ~ .tabContents section:nth-child(3),
  42. #tab-4:checked ~ .tabContents section:nth-child(4),
  43. #tab-5:checked ~ .tabContents section:nth-child(5) {
  44. opacity: 1;
  45. background-color: #fff;
  46. }
フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。この記事を読む
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。この記事を読む
トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。この記事を読む
拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。この記事を読む
CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。この記事を読む