方眼紙を出力してみる

こんにちは、Excel方眼紙

Source code

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

表

IDNAME
51イチロー

Source code

<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>

リスト

  • りんご
  • ばなな
  • いちご
  1. りんご
  2. ばなな
  3. いちご

Source code

<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>

グリッド

一行目

二行目

長い文字列は自動的に改行されるのです。

続きはそのまま下に入ります

Source code

<div class="jagrid" style="width: 400px; height: 300px;">
 <div data-x="1" data-y="1">
  <p>一行目</p>
  <p>二行目</p>
 </div>
 <div data-width="8" data-x="2" data-y="6">
  <p>長い文字列は自動的に改行されるのです。</p>
  <p>続きはそのまま下に入ります</p>
 </div>
</div>

ボタン

Source code

<div class="jagrid" style="width: 400px; height: 300px;">
 <div data-x="1" data-y="1">
  <button data-width="4">Button</button>
 </div>
 <div data-x="6" data-y="1">
  <button class="primary" data-width="4">Button</button>
 </div>
 <div data-width="10" data-x="1" data-y="3">
  <input name="hoge" placeholder="Name" type="text">
 </div>
</div>