1. <div id="wrapper">
  2. <input type="checkbox" id="navTgl">
  3. <label for="navTgl" class="open">≡</label>
  4. <label for="navTgl" class="close"></label>
  5. <nav class="menu">
  6. <h2>menu</h2>
  7. <ul>
  8. <li><a href="#article1">なつかしくってあったかい、きりぎりす。</a></li>
  9. <li><a href="#article2">透明ノイズと紙テクスチャ。</a></li>
  10. <li><a href="#article3">Webサイトの作り方のまとめ!ブラウザチェック。</a></li>
  11. <li><a href="#article4">Photoshopのシェイプでできること。</a></li>
  12. <li><a href="#article5">CSSだけでスライドショーはつくれるよ。</a></li>
  13. </ul>
  14. </nav>
  15. <div class="contents">
  16. <header>
  17. <h1 class="logo">Lopan.jp</h1>
  18. <nav>
  19. <ul>
  20. <li><a href="#article1">LOVE FONT</a></li>
  21. <li><a href="#article2">透明ノイズ</a></li>
  22. <li><a href="#article3">ブラウザチェック</a></li>
  23. <li><a href="#article4">シェイプ</a></li>
  24. <li><a href="#article5">スライドショー</a></li>
  25. </ul>
  26. </nav>
  27. </header>
  28. <article>
  29. <h1>Sample</h1>
  30. <section id="article1">
  31. <h2>なつかしくってあったかい、きりぎりす。</h2>
  32. <figure>
  33. <img src="http://lopan.jp/wp/wp-content/uploads/2014/01/title.png">
  34. <figcaption>フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。<a href="#">この記事を読む</a></figcaption>
  35. </figure>
  36. </section>
  37. <section id="article2">
  38. <h2>透明ノイズと紙テクスチャ。</h2>
  39. <figure>
  40. <img src="http://lopan.jp/wp/wp-content/uploads/2013/09/title.jpg">
  41. <figcaption>ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。<a href="#">この記事を読む</a></figcaption>
  42. </figure>
  43. </section>
  44. <section id="article3">
  45. <h2>Webサイトの作り方のまとめ!ブラウザチェック。</h2>
  46. <figure>
  47. <img src="http://lopan.jp/wp/wp-content/uploads/2013/06/title.jpg">
  48. <figcaption>トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。<a href="#">この記事を読む</a></figcaption>
  49. </figure>
  50. </section>
  51. <section id="article4">
  52. <h2>Photoshopのシェイプでできること。</h2>
  53. <figure>
  54. <img src="http://lopan.jp/wp/wp-content/uploads/2013/03/title.jpg">
  55. <figcaption>拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。<a href="#">この記事を読む</a></figcaption>
  56. </figure>
  57. </section>
  58. <section id="article5">
  59. <h2>CSSだけでスライドショーはつくれるよ。</h2>
  60. <figure>
  61. <img src="http://lopan.jp/wp/wp-content/uploads/2012/12/title.jpg">
  62. <figcaption>CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。<a href="#">この記事を読む</a></figcaption>
  63. </figure>
  64. </section>
  65. </article>
  66. <footer>
  67. <p class="copyright"><small>© Lopan.jp</small></p>
  68. </footer>
  69. </div>
  70. </div>
  1. /* 略 */
  2. /* :::::: nav :::::: */
  3. header {
  4. height: auto;
  5. }
  6. header nav {
  7. max-width: 647px;
  8. margin: 0 auto;
  9. }
  10. header nav ul {
  11. display: table;
  12. width: 100%;
  13. margin: 0;
  14. }
  15. header nav li {
  16. display: table-cell;
  17. width: 20%;
  18. font-size: .8em;
  19. text-align: center;
  20. white-space: nowrap;
  21. }
  22. header nav li:not(:last-child) {
  23. border-right: 1px solid rgba(0,0,0,.1);
  24. }
  25. header nav li a {
  26. padding: 10px;
  27. color: white;
  28. background: lightSeaGreen;
  29. transition: background-color .3s;
  30. }
  31. header nav li a:hover {
  32. background: indianRed;
  33. }
  34. /* :::::: article :::::: */
  35. /* 略 */
  36. /* :::::: responsive :::::: */
  37. .open {
  38. display: none;
  39. }
  40. /* smart phone */
  41. @media screen and (max-width: 480px) {
  42. .open {
  43. display: block;
  44. }
  45. header nav {
  46. display: none;
  47. }
  48. }

Lopan.jp

Sample

なつかしくってあったかい、きりぎりす。

フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。この記事を読む

透明ノイズと紙テクスチャ。

ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。この記事を読む

Webサイトの作り方のまとめ!ブラウザチェック。

トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。この記事を読む

Photoshopのシェイプでできること。

拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。この記事を読む

CSSだけでスライドショーはつくれるよ。

CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。この記事を読む