Grid Overlay: The Lasy Way

before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも拘らず普通に文字列を選択したりリンクをクリックしたりできるようになります。

詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。

追記

ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。

<style>
  body.hide-grid::before {
    background-image: none;
  }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  $(function () {
    $("body").dblclick(function () {
      $("body").toggleClass("hide-grid");
    });
  });
</script>

jQueryでは擬似要素を扱うことはできないのでbody要素でクラスをトグルしてやってグリッドの表示を切り替えてます。スタイル追加するところまでまとめてJavaScriptにしようかと思いましたが、それだともう960 Gridder使えばいいじゃないかという話になっちゃうのでやめました……。