jagrid

A CSS framework for Japanese-styled grid sheet.

日本向けのグリッドスタイル

Excel方眼紙業務のWeb移行においては、Bootstrapのような12カラムグリッドスタイルでは、グリッドが足りません。そこでExcel方眼紙と同じようにレイアウティングできるCSSフレームワークがjagridです。

使い方

<link href="css/jagrid.css" rel="stylesheet"/>
<script src="js/jagrid.js"></script>

jagridのスタイルシートとJavascriptファイルをを読みこんでください。

動作環境

Chrome
Firefox
IE9+

Overview

シートの作り方

任意の要素にjagridクラスを定義すると、その中を方眼紙として使えるようになります。

<div class="jagrid" style="width: 400px; height: 200px;">
</div>

狙った位置に要素を書き込む

シートの中では、絶対位置をdata-xおよびdata-y属性を使って指定できます。ここでは、ピクセル単位ではなく、方眼紙のマス目単位であることに喜びを感じてください。

<div class="jagrid" style="width: 400px; height: 150px;">
 <div data-x="1" data-y="1">
  <p>こんにちは、Excel方眼紙</p>
 </div>
</div>

表組み

シートの中に、まるでExcel方眼紙のように柔軟に表組みを書くことができます。

<div class="jagrid" style="width: 400px; height: 150px;">
 <div data-x="1" data-y="1">
  <table>
   <tbody>
    <tr>
     <th class="title" data-width="3">ID</th>
     <th class="title" data-width="5">NAME</th>
    </tr>
    <tr>
     <td>51</td>
     <td>イチロー</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

列幅はこれもマス目の単位であるため、data-width属性を使って指定します。rowspan属性はふつうのtdダグと同じように使用できます。

<div class="jagrid" style="width: 400px; height: 150px;">
 <div data-x="1" data-y="1">
  <ul>
   <li>りんご</li>
   <li>ばなな</li>
   <li>いちご</li>
  </ul>
 </div>
 <div data-x="8" data-y="1">
  <ol>
   <li>りんご</li>
   <li>ばなな</li>
   <li>いちご</li>
  </ol>
 </div>
</div>

ビルドの仕方

% lein run

で、cssの下にjagrid.cssが生成されます。

tkosuga / jagrid