HTMLとCSSで罫線入りメモ帳をつくる(保存不可)

保存機能はないのでブラウザを更新すると消えます。

実際に動作確認したい人向け
https://jsfiddle.net/junya_5102/u44w46te/1/

html

<div contenteditable="plaintext-only" spellcheck="false"></div>

CSS

body{
  margin: 0;
  overflow-x: hidden;
}

div{
  display: block;
  width: 100vw;
  min-height: 95vh;

  font-size: 1.5em;
  font-family: normal;

  padding: 0 .6em;

  /* 行の高さ + 罫線の太さ */
  background-image: linear-gradient(to bottom,transparent 1.3em,dodgerblue 1px);

  /* 上記のgradientを繰り返し表示 */
  background-repeat: repeat;

  /* calc(行の高さ + 罫線の太さ) */
  background-size: 100% calc(1.3em + 1px);

  /* calc(行の高さ + 罫線の太さ) */
  line-height: calc(1.3em + 1px);

  /* 連続する空白 タブ文字は詰める, 改行文字はそのまま表示 自動改行有り */
  white-space: pre-line;

  outline: none;
  box-sizing: border-box;
}

div:after{
  content: "----クリックすると編集モードに入ります----";
}

div:focus:after{
  content: "";
  display: none;
}

解説

contenteditable を使えば 要素を直接(ブラウザ上で)編集できるようになります。
plaintext-onlyは 名前の通りです

対応ブラウザ

Chrome , Safari