CSSで原稿用紙を作成

CSSで原稿用紙のパターンは「linear-gradient」を縦横に組み合わせて繰り返し機能を利用することで簡単に作成することが出来ます。
当ページでは、現行用紙の色や大きさなどを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box">
</div>

<style type="text/css">
/* --- 原稿用紙背景のBOX定義 -------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                         /* 原稿用紙模様のCSS */
  border     : 2px solid #b35900;   /* ←枠線が不要な場合は削除 */
  background-color   : #ffffff;
  background-image   : 
      linear-gradient(to right,
                         #ffffff,
                         #ffffff     10%,
                         #b35900     11%,
                         #b35900     12%,
                         transparent 13%,
                         transparent 87%,
                         #b35900     88%,
                         #b35900     89%,
                         #ffffff     90%,
                         #ffffff),
      linear-gradient(to bottom,
                         transparent,
                         transparent 97%,
                         #b35900     98%,
                         #b35900);
  background-position: right 2px top;
  background-size    : 52px 41px;
}
</style>