linear-gradientで方眼紙（マス目）レイアウトを作る

掲載日
更新日

コード例

CSS

.grid-background {
    height: 100vh;
    background-color: #fff; /* 背景色 */

    background-image:
    	/* 縦線 #d7def2が線の色、1pxを変更で太い線に変更も可能 */
        linear-gradient(to right, #d7def2 1px, transparent 1px),
    	/* 横線 */
        linear-gradient(to bottom, #d7def2 1px, transparent 1px);

    background-size:
    	/* サイズ変更で長方形にしたり、マス目を大きくすることが可能 */
        32px 32px;

    background-repeat: repeat;
}

html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>方眼紙風ファーストビュー</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="grid-background">
    <main class="main">
      <h1>良い感じのタイトル</h1>
      <p>
        良い感じのDescription
      </p>
    </main>
  </div>
</body>

</html>

ブラウザで表示すると以下のスクリーンショットのように、背景がマス目模様になります。

（※ タイトルのh1タグと詳細のpタグには別にcssが入ってます。）

方眼紙レイアウトをブラウザで表示した時のスクリーンショット。

仕組み

cssをシンプルにして解説します。
まず以下のように指定することで、32px間隔で縦線を引くことが可能です。

.grid-background {
    background-image:
        linear-gradient(to right, #d7def2 1px, transparent 16px);

    background-size:
        32px;

    background-repeat: repeat;
}

linear-gradientは本来グラデーションレイアウトに使用するもので、()の中身を以下のように設定します。

linear-gradient: (グラデーションの方向, 始点の色とグラデーション開始位置, [ ...ここは任意で途中のグラデーション色や色が完全に指定の色に変わる位置... ], 終点の色と位置);
例 ) 
linear-gradient: (to right(左から右へグラデーション), #fff 5px(白で描画し、5pxからグラデーション開始), #000 10px(10pxで完全に黒に変わる)

この時、始点の位置と終点を同じpxとすることでグラデーションをさせずに線の描写が可能です。

そしてbackground-sizeを32pxにすることで背景の描画領域を32pxにしているので、グラデーション線の右側31pxが最後に指定した色と同じ(今回ならtransparent)背景色となります。これをbackground-repeatでrepeat(繰り返し)を指定することで縦線が32px毎に並びます。

グラデーションの方向をto bottom(上から下にグラデーションする)にすることで横線を引けるので、background-sizeの設定に縦の32pxを加えることでマス目模様が作れるという仕組みになっています。

※ to rightはto left, to bottomはto top でも線の位置が若干ズレるだけで同じように出来ると思います。

 

コード例だと、左と上側を始点としてマス目が始まってしまいますが、以下のような指定をすることで途中から始まっている風にすることも可能です。

/* 5pxまで透明で、5~7pxを#d7def2の線、 7px以降は透明として描画 */
linear-gradient(to right, transparent 5px, #d7def2 7px, transparent 7px), 
linear-gradient(to bottom, transparent 5px, #d7def2 7px, transparent 7px);

おわりに

このポートフォリオサイトは現代風レイアウトを目標に作成していますが、
自分のデザインスキルが未熟なこともありファーストビューが少々寂しいレイアウトになっておりました。
頑張って写真撮りに行ったり、Canvaあたりで画像で作ろうかとも思いましたが、エンジニアらしくcssで工夫しておいた方がポートフォリオとしてもいいよな～と思い立ち方眼紙にしてみました。

以下のような白背景のシンプルなファーストビューだったのを、今回の修正を加えて方眼紙レイアウトに変更しています。

レイアウト改善前の、白背景のシンプルなファーストビュースクリーンショット。

↓

レイアウト改善後の、方眼紙（マス目）背景のファーストビュースクリーンショット。

 

方眼紙模様はHTMLタグを複数組み合わせて作る方法なども紹介されてますが、個人的にHTMLに限らずネストが増えるのは好きじゃなく、タグ一個とcssだけで解決したかったのでliner-gradientでシンプルに記述できることが分かって満足です。

参考

記事の作成者のA.W.のアイコン

この記事を書いた人

A.W.
茨城県在住Webエンジニアです。 PHP、PostgreSQL、Linuxなどを業務で使用しています。 趣味ではGoやNuxt、Flutterをやってます。

Comment