【今すぐ実装】ノートの方眼風デザインCSS

背景などで方眼のようなマス目のデザインをCSSで実装するCSSのご紹介です。

実装サンプル

ノートの方眼風CSSのbackground-image

先にコードを書いてしまうと、下記のようになります。

.bg-note {
    background-image: linear-gradient(rgba(210, 210, 210, 0.4) 1px, transparent 1px), linear-gradient(to right, rgba(210, 210, 210, 0.4) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #fff;
    background-position: -14px 14px;
}

それぞれのプロパティについて、ここでは実装に必要な部分だけピックアップして解説していきます。

background-image

linear-gradientで横線のグラデーション、縦線のグラデーションの2つを作成し、それぞれを重ねることでマス目模様を表現しています。

rgba()の部分はお好きな色、透明度に変更してください。

background-size

方眼のひとマスの大きさを指定します。

background-color

これは方眼の背景の色（枠線以外の部分）を指定します。

和紙風というか、古書のような雰囲気を出したいときは、ベージュや黄色を帯びた色を指定するといいですね。

background-position

背景としたい部分全体を見て、方眼を途中から始まっている感じ（見切れた感じ）に自然に配置するにはbackground-positionの値を調整すればOKです。