{"id":24652338,"url":"https://github.com/kawasima/jagrid","last_synced_at":"2025-10-07T11:31:38.209Z","repository":{"id":16089847,"uuid":"18834571","full_name":"kawasima/jagrid","owner":"kawasima","description":"Japanese-styled grid framework.","archived":false,"fork":false,"pushed_at":"2018-05-09T07:13:15.000Z","size":401,"stargazers_count":277,"open_issues_count":0,"forks_count":6,"subscribers_count":10,"default_branch":"master","last_synced_at":"2023-11-07T15:19:03.886Z","etag":null,"topics":["clojure","css","excel","javascript"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"flexiant/chef-client","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kawasima.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-16T09:42:15.000Z","updated_at":"2023-09-29T20:31:56.000Z","dependencies_parsed_at":"2022-09-11T18:03:37.254Z","dependency_job_id":null,"html_url":"https://github.com/kawasima/jagrid","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kawasima%2Fjagrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kawasima%2Fjagrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kawasima%2Fjagrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kawasima%2Fjagrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kawasima","download_url":"https://codeload.github.com/kawasima/jagrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235621521,"owners_count":19019522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojure","css","excel","javascript"],"created_at":"2025-01-25T19:15:08.701Z","updated_at":"2025-10-07T11:31:32.947Z","avatar_url":"https://github.com/kawasima.png","language":"Clojure","funding_links":[],"categories":["Clojure"],"sub_categories":[],"readme":"jagrid\n=======\n\nA CSS framework for Japanese-styled grid sheet.\n\n## 日本向けのグリッドスタイル\n\nExcel方眼紙業務のWeb移行においては、Bootstrapのような12カラムグリッドスタイルでは、\nグリッドが足りません。\nそこでExcel方眼紙と同じようにレイアウティングできるCSSフレームワークがjagridです。\n\n![sales-report](https://farm8.staticflickr.com/7215/13942407502_b513163fcf.jpg)\n\n## 使い方\n\n```html\n\u003clink href=\"css/jagrid.css\" rel=\"stylesheet\"/\u003e\n\u003cscript src=\"js/jagrid.js\"\u003e\u003c/script\u003e\n```\n\njagridのスタイルシートとJavascriptファイルを読みこんでください。\n\n## 動作環境\n\n* Chrome\n* Firefox\n* IE9+\n\n## Overview\n\n### シートの作り方\n\n任意の要素に`jagrid`クラスを定義すると、その中を方眼紙として使えるようになります。\n\n```html\n\u003cdiv class=\"jagrid\" style=\"width: 400px; height: 200px;\"\u003e\n\u003c/div\u003e\n```\n\n### 狙った位置に要素を書き込む\n\nシートの中では、絶対位置を`data-x`および`data-y`属性を使って指定できます。\nここでは、ピクセル単位ではなく、方眼紙のマス目単位であることに喜びを感じてください。\n\n![hello](https://farm8.staticflickr.com/7207/13965476593_0f84a05a00.jpg)\n\n```html\n\u003cdiv class=\"jagrid\" style=\"width: 400px; height: 150px;\"\u003e\n \u003cdiv data-x=\"1\" data-y=\"1\"\u003e\n  \u003cp\u003eこんにちは、Excel方眼紙\u003c/p\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### 表組み\n\nシートの中に、まるでExcel方眼紙のように柔軟に表組みを書くことができます。\n\n![table](https://farm3.staticflickr.com/2902/13942308062_ebc5aa18ef.jpg)\n\n```html\n\u003cdiv class=\"jagrid\" style=\"width: 400px; height: 150px;\"\u003e\n \u003cdiv data-x=\"1\" data-y=\"1\"\u003e\n  \u003ctable\u003e\n   \u003ctbody\u003e\n    \u003ctr\u003e\n     \u003cth class=\"title\" data-width=\"3\"\u003eID\u003c/th\u003e\n     \u003cth class=\"title\" data-width=\"5\"\u003eNAME\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n     \u003ctd\u003e51\u003c/td\u003e\n     \u003ctd\u003eイチロー\u003c/td\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n  \u003c/table\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n列幅はこれもマス目の単位であるため、data-width属性を使って指定します。rowspan属性はふつうのtdダグと同じように使用できます。\n\n### リスト\n\nマス目インデントを使った、箇条書きもHTMLのリストでふつうに表現できます。\n\n![list](https://farm8.staticflickr.com/7025/13965476453_a30eddce47.jpg)\n\n```html\n\u003cdiv class=\"jagrid\" style=\"width: 400px; height: 150px;\"\u003e\n \u003cdiv data-x=\"1\" data-y=\"1\"\u003e\n  \u003cul\u003e\n   \u003cli\u003eりんご\u003c/li\u003e\n   \u003cli\u003eばなな\u003c/li\u003e\n   \u003cli\u003eいちご\u003c/li\u003e\n  \u003c/ul\u003e\n \u003c/div\u003e\n \u003cdiv data-x=\"8\" data-y=\"1\"\u003e\n  \u003col\u003e\n   \u003cli\u003eりんご\u003c/li\u003e\n   \u003cli\u003eばなな\u003c/li\u003e\n   \u003cli\u003eいちご\u003c/li\u003e\n  \u003c/ol\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## ビルドの仕方\n\n```\n% lein run\n```\n\nで、cssの下に`jagrid.css`が生成されます。\n\n## ライセンス\n\nSource Copyright © 2014-2016 kawasima.\nDistributed under the Eclipse Public License, the same as Clojure uses.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkawasima%2Fjagrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkawasima%2Fjagrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkawasima%2Fjagrid/lists"}