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. </header>
  19. <article>
  20. <h1>Sample</h1>
  21. <section id="article1">
  22. <h2>なつかしくってあったかい、きりぎりす。</h2>
  23. <figure>
  24. <img src="http://lopan.jp/wp/wp-content/uploads/2014/01/title.png">
  25. <figcaption>フォント好きな人がフォントについて熱く語る「LOVEFONT」という企画にあと乗りで、僕の好きなフォント「きりぎりす」について、語るってほどは語れませんが、記事にさせていただきます。<a href="#">この記事を読む</a></figcaption>
  26. </figure>
  27. </section>
  28. <section id="article2">
  29. <h2>透明ノイズと紙テクスチャ。</h2>
  30. <figure>
  31. <img src="http://lopan.jp/wp/wp-content/uploads/2013/09/title.jpg">
  32. <figcaption>ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみました。<a href="#">この記事を読む</a></figcaption>
  33. </figure>
  34. </section>
  35. <section id="article3">
  36. <h2>Webサイトの作り方のまとめ!ブラウザチェック。</h2>
  37. <figure>
  38. <img src="http://lopan.jp/wp/wp-content/uploads/2013/06/title.jpg">
  39. <figcaption>トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。ブラウザチェックからIEでの表示崩れを整えるまでのまとめです。<a href="#">この記事を読む</a></figcaption>
  40. </figure>
  41. </section>
  42. <section id="article4">
  43. <h2>Photoshopのシェイプでできること。</h2>
  44. <figure>
  45. <img src="http://lopan.jp/wp/wp-content/uploads/2013/03/title.jpg">
  46. <figcaption>拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せる、そんなPhotoshopの万能シェイプの機能や特長について、個人的なまとめです。<a href="#">この記事を読む</a></figcaption>
  47. </figure>
  48. </section>
  49. <section id="article5">
  50. <h2>CSSだけでスライドショーはつくれるよ。</h2>
  51. <figure>
  52. <img src="http://lopan.jp/wp/wp-content/uploads/2012/12/title.jpg">
  53. <figcaption>CSS Programming Advent Calendar 2012、22日目のための記事です。前回の記事で作った、グローバルナビの下の大きめの画像のところを、CSSだけで実装してみました。<a href="#">この記事を読む</a></figcaption>
  54. </figure>
  55. </section>
  56. </article>
  57. <footer>
  58. <p class="copyright"><small>© Lopan.jp</small></p>
  59. </footer>
  60. </div>
  61. </div>
  1. @font-face {
  2. font-family: "Ubuntu Condensed";
  3. font-style: normal;
  4. font-weight: 400;
  5. src: local("Ubuntu Condensed"),
  6. local("UbuntuCondensed-Regular"),
  7. url(UbuntuCondensed-Regular.woff) format("woff");
  8. }
  9. header .logo,
  10. footer .copyright {
  11. margin: 0;
  12. color: #593869;
  13. font-family: "Ubuntu Condensed";
  14. font-weight: normal;
  15. text-align: center;
  16. letter-spacing: .1em;
  17. }
  18. /* :::::: contents :::::: */
  19. #wrapper {
  20. overflow: hidden;
  21. min-width: 320px;
  22. height: auto;
  23. padding: 0;
  24. }
  25. .contents {
  26. -webkit-transition: -webkit-transform .6s;
  27. transition: transform .6s;
  28. }
  29. #navTgl:checked ~ .contents {
  30. -webkit-transform: translateX(250px);
  31. transform: translateX(250px);
  32. }
  33. /* :::::: toggle button :::::: */
  34. #navTgl {
  35. display: none;
  36. overflow: hidden;
  37. }
  38. label {
  39. cursor: pointer;
  40. position: fixed;
  41. top: 0;
  42. left: 0;
  43. }
  44. .open {
  45. z-index: 2;
  46. width: 50px;
  47. height: 50px;
  48. color: white;
  49. background-color: lightSeaGreen;
  50. font-size: 2em;
  51. line-height: 50px;
  52. text-align: center;
  53. -webkit-transition: background-color .6s, -webkit-transform .6s;
  54. transition: background-color .6s, transform .6s;
  55. }
  56. #navTgl:checked + .open {
  57. background-color: indianRed;
  58. -webkit-transform: translateX(250px);
  59. transform: translateX(250px);
  60. }
  61. .close {
  62. pointer-events: none;
  63. z-index: 1;
  64. width: 100%;
  65. height: 100%;
  66. transition: background-color .6s;
  67. }
  68. #navTgl:checked ~ .close {
  69. pointer-events: auto;
  70. background-color: rgba(0,0,0,.3);
  71. }
  72. /* :::::: drawer menu :::::: */
  73. .menu {
  74. z-index: 1;
  75. position: fixed;
  76. overflow: auto;
  77. top: 0;
  78. left: 0;
  79. width: 250px;
  80. height: 100%;
  81. padding: 10px;
  82. background-color: rgba(0,0,0,.6);
  83. -webkit-transform: translateX(-100%);
  84. transform: translateX(-100%);
  85. -webkit-transition: -webkit-transform .6s;
  86. transition: transform .6s;
  87. }
  88. #navTgl:checked ~ .menu {
  89. -webkit-transform: translateX(0);
  90. transform: translateX(0);
  91. }
  92. .menu h2,
  93. .menu li a {
  94. color: white;
  95. }
  96. .menu h2 {
  97. text-align: center;
  98. }
  99. .menu ul,
  100. header nav ul {
  101. padding: 0;
  102. }
  103. .menu li {
  104. border-bottom: 1px solid rgba(255,255,255,.6);
  105. font-size: .8em;
  106. line-height: 1.4;
  107. }
  108. .menu li:first-child {
  109. border-top: 1px solid rgba(255,255,255,.6);
  110. }
  111. .menu li a,
  112. header nav li a {
  113. display: block;
  114. padding: 1em 2em;
  115. text-decoration: none;
  116. transition: background-color .6s;
  117. }
  118. .menu li a:hover {
  119. background-color: black;
  120. }
  121. /* :::::: header, footer :::::: */
  122. header,
  123. footer,
  124. .menu {
  125. box-sizing: border-box;
  126. }
  127. header,
  128. footer {
  129. height: 100px;
  130. }
  131. header .logo,
  132. footer .copyright {
  133. line-height: 100px;
  134. }
  135. header {
  136. position: relative;
  137. margin-bottom: 30px;
  138. }
  139. footer {
  140. background-color: rgba(255,255,255,.6);
  141. }
  142. footer small {
  143. font-size: 1em;
  144. }
  145. /* :::::: article :::::: */
  146. article {
  147. width: 100%;
  148. max-width: 647px;
  149. margin: 0 auto 100px;
  150. padding: 0 10px;
  151. box-sizing: border-box;
  152. }
  153. article h1 {
  154. width: 7em;
  155. height: 7em;
  156. margin: 0 auto;
  157. font-size: 1em;
  158. line-height: 7em;
  159. font-weight: normal;
  160. text-align: center;
  161. background-color: rgba(0,0,0,.05);
  162. border-radius: 50%;
  163. }
  164. section {
  165. margin: 50px 0;
  166. }
  167. section h2,
  168. figure img,
  169. figcaption {
  170. margin-bottom: 1em;
  171. }
  172. section h2 {
  173. margin: 0 0 20px;
  174. text-align: center;
  175. }
  176. figure {
  177. position: relative;
  178. padding-bottom: 50px;
  179. }
  180. #wrapper figure img {
  181. max-width: calc(100% - 10px);
  182. }
  183. figure img {
  184. height: auto;
  185. padding: 5px;
  186. background-color: rgba(255,255,255,.6);
  187. }
  188. figcaption {
  189. font-size: .8em;
  190. line-height: 1.6;
  191. }
  192. figcaption a {
  193. display: block;
  194. position: absolute;
  195. right: 0;
  196. bottom: 0;
  197. padding: 1em 2em;
  198. color: white;
  199. background: lightSeaGreen;
  200. text-align: center;
  201. text-decoration: none;
  202. transition: background-color .3s;
  203. }
  204. figcaption a:hover {
  205. background: indianRed;
  206. }

Lopan.jp

Sample

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

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

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

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

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

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

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

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

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

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