どうも7noteです。文字が書けるルーズリーフをCSSだけで再現

学生さんがよく使う、ルーズリーフ。

これをCSSで再現して、文字も書けるようにします。

ソース

index.html

<div class="paper">
  <textarea></textarea>
</div>

style.css

body {
  background: #F9EBB8; /* 背景色に淡い黄色を指定 */
}

.paper {
  width: 300px;     /* 紙の幅を指定 */
  height: 450px;    /* 紙の高さを指定 */
  background: #fff; /* 紙の色を白に指定 */
  border-radius: 5px;  /* 角は若干丸くする */
  padding: 20px 20px 20px 50px; /* 左に多い目に余白を取る */
  position: relative;  /* 基準位置とする */
}

.paper::before {
  content: '';  /* 疑似要素に必須 */
  width: 10px;  /* 穴の幅を指定(穴の幅以上あればOK) */
  height: 90%;  /* 穴をあける距離を指定。紙の高さの90%に指定 */
  background-image: radial-gradient(circle, #F9EBB8 5px ,transparent 5px);  /* 円形のグラデーションを作成。色はbodyの背景色と同じ */
  background-repeat: repeat-y; /* Y軸方向に繰り返す */
  background-size: 10px 20px;  /* 「背景の穴のサイズ(10px)」「穴のサイズ(10px)＋穴から次の穴までの距離(10px)」を指定 */
  display: inline-block; /* インラインブロック要素にする */
  position: absolute;    /* 相対位置に指定 */
  left: 10px;            /* 左から10pxの位置に指定 */
  top: 0;                /* 上下中央に配置するため0に指定 */
  bottom: 0;             /* 上下中央に配置するため0に指定 */
  margin: auto;          /* 上下中央に配置するためautoを指定 */
}

.paper textarea {
  outline: none;  /* アウトラインを無効化。ビジュアル優先 */
  background-image: linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 95%, #aaa 95%); /* 罫線を引く */
  background-size: 100% 2em;  /* 1段分の罫線を引く為、背景のサイズを指定 */
  line-height: 2em; /* 行間を指定 */
  border: none;     /* デフォルトの枠線を無効化 */
  width: 100%;      /* 幅いっぱいに指定 */
  height: 100%;     /* 高さいっぱいに指定 */
  resize: none;     /* リサイズを無効化 */
}

解説

長方形を用意して、装飾をつけていきます。
重要になってくるのが、罫線、左の穴、四角の角丸です。
これらを再現することでそれらしさを表すことができます。

左の穴は擬似要素を使って再現していますが、div要素を二重にして再現することも可能です。

textareaと組み合わせる事で、実際にルーズリーフに文字を書いてるように見せかけています。

まとめ

社会人になるとなかなか筆記用具とかを使わなくなるので少し懐かしい感じがします。
特にit系の仕事だとほぼパソコンでメモしてしまうので、本当に使う機会が少ないですね。

だからこそWEBで再現することで面白さが出せます！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ