CSS3だけでつくる付箋紙(Post it)風Box

2016/05/17 ホームページ制作・運営制作ノート

付箋紙デザインはcss３だけで表現

昔話をすれば、インターネット黎明期のころ私は角丸の枠を作りたくて、一生懸命にTableタグと角丸の小さなGif画像を駆使してそれを実現していました。「角が丸いボックスが作れる」それだけでちょっとしたものを作った気分でした・・・

しかしHTMLが5まで進化し、CSSが登場したと思ったらもうバージョン3の今、角丸はborder-radiusの一行で終わりです。いやぁ、世の中便利になった！

それでは本題、CSS3だけでつくる付箋紙の作り方を紹介していきます。この付箋紙デザインは当サイトの「RECENT POSTS」でも利用しています（2016年5月現在）。

まずはサンプル

付箋紙っぽいデザインの1
付箋紙っぽいデザインの2
付箋紙っぽいデザインの3
高さは伸縮自在
です。

HTML

今回はリストタグに応用しています。

<div class="fusen" style="padding-left: 60px;">
<ul>
  <li>付箋紙っぽいデザインの1</li>
  <li>付箋紙っぽいデザインの2</li>
  <li>付箋紙っぽいデザインの3
高さは伸縮自在
です。</li>
</ul>
</div>

基本のCSS

.fusen{
    width:300px;/*幅はお好きなサイズに*/
    position:relative;
    z-index:0;
}
.fusen ul li {
    font-size: 0.9em;
    margin: 1.6em 0;
    padding: 1em;
    position: relative;
    /* グラデーションで折り目がついた感じに */
    background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%);
}
.fusen ul li::after{　/* ドロップシャドウを少し斜めに配置して、立体感を出す */
    content:"";
    display:block;
    position: absolute;
    z-index: -1;
    bottom: 5px;
    right: 0;
    height: 15px;
    width: 99%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    transform: rotate(2deg);
}

追加のCSS

奇数のリストタグと偶数のリストタグで背景色とマージンを変えると、よりバラつきのある雰囲気になります。

.fusen ul li:nth-child(odd) { /* 奇数番のli */
    background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%);
}
.fusen ul li:nth-child(even) { /* 偶数番のli */
    background: linear-gradient(to right, #FDF8E6 0%, #F5ECDA 0.5%, #F5ECDA 13%, #FDF8E6 16%);
    margin: 1.6em 0em !important;
}

まとめ

一昔前なら画像でしか表現できなかったものが、background: linear-gradient()　や　transform: rotate()　、box-shadow などを上手く組み合わせてコードだけで表現できるようになりました。スマートフォンサイトなどでは極力画像の利用を避けたいので、CSS3で表現の幅が広がったことは本当に素敵ですね。