HOME サイトマップ 営業日カレンダー お問い合わせ

マメ知識:3x4 Grid Builder


株式会社コニファ・ロゴ




使える無料のwebサービス23:3x4 Grid Builder



株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

  • マメ知識・TOPページへ

3x4 Grid Builder(グリッドシステムジェネレータ)

3x4 Grid Builder:http://www.3x4grid.com/
現在このサービスは停止しているようです。

右側からマス目を左側ドラッグしてレイアウトを構成すると、そのグリッドシステムのcssを含んだhtmlを作成してくれます。 grid-builder

グリッドシステムとは

グリッドレイアウトと呼ぶこともあります。htmlをレイアウトする際に幅を固定し、均等に分けたマス目を並べて、マス目の数でカラムなどを作成する方法です。例えば12等分したマス目で、横幅2:1:1の比率の3カラムを作成する場合は、グリッド(最小単位のマス目)を6個、3個、3個と並べればでき上がります。基本的にcssのみで構成されますが、javascriptを利用して、幅可変のレスポンシブルなグリッドレイアウトもあります。

Grid Builderの使い方

Grid Builderの場合は、全体の横幅が960pxで、マス目は縦横240pxで縦3個、横4個で構成されます(サイトの名称 3x4 Gridはこれを指します)。やや簡易なグリッドシステムです。

  • 1×1、2×2、3×3などのユニットを左側のスペースにドラッグして、縦3個、横4個になるように並べてレイアウトを作ります。
  • アンドゥはできないようなので、間違えたら「Reset」ボタンをクリックしてやり直します。
  • でき上がったら、「Show me the code」ボタンをクリックします。
  • xhtmlが作成され、前面にコード表示されるので、全体をコピーし、エディタなどにペーストして、名前を付けてxhtmlとして保存します。

◆作成例

横3、縦1でヘッダー、その下に1:2:1の3カラムです。

作成例

body内のコードは次のようになります。

<div id="wrapper">
	<div id="grid">
		<div class="block s4x1 p0x0"></div>
		<div class="block s1x2 p0x1"></div>
		<div class="block s2x2 p1x1"></div>
		<div class="block s1x2 p3x1"></div>
	</div>
</div>

あまり細かいレイアウトには向いていませんが、簡単なたたき台という位置づけなら使えます。
なお、バグなのか、でき上がったコードのtitleの閉じタグの後ろの「>」が不足しています。これを足しておきます。

 


 

 



株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

Copyright© 2019 Conifer,Inc. All rights reserved.