{"id":18961050,"url":"https://github.com/ebisucom/grid-layout","last_synced_at":"2025-10-16T09:24:03.523Z","repository":{"id":223060319,"uuid":"748412170","full_name":"ebisucom/grid-layout","owner":"ebisucom","description":"『作って学ぶ　HTML + CSS グリッドレイアウト』のダウンロードデータです","archived":false,"fork":false,"pushed_at":"2024-02-18T00:38:47.000Z","size":11811,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-25T20:44:22.869Z","etag":null,"topics":["css-grid","css-grid-layout","html-css","layout","ui-components"],"latest_commit_sha":null,"homepage":"https://ebisu.com/grid-layout/","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ebisucom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-25T22:58:16.000Z","updated_at":"2025-02-16T19:39:59.000Z","dependencies_parsed_at":"2024-02-18T01:39:59.843Z","dependency_job_id":null,"html_url":"https://github.com/ebisucom/grid-layout","commit_stats":null,"previous_names":["ebisucom/grid-layout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ebisucom/grid-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebisucom%2Fgrid-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebisucom%2Fgrid-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebisucom%2Fgrid-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebisucom%2Fgrid-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ebisucom","download_url":"https://codeload.github.com/ebisucom/grid-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ebisucom%2Fgrid-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279172630,"owners_count":26118957,"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","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css-grid","css-grid-layout","html-css","layout","ui-components"],"created_at":"2024-11-08T14:11:22.026Z","updated_at":"2025-10-16T09:24:03.479Z","avatar_url":"https://github.com/ebisucom.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 作って学ぶ　HTML + CSS グリッドレイアウト\n\n![作って学ぶ　HTML + CSS グリッドレイアウト](https://repository-images.githubusercontent.com/748412170/62e2229a-1d68-4360-8720-1bf37ddf487f)\n\n**ダウンロードデータ**\nサンプルの完成データや、P.108のセットに関するPDFなどを収録しています。詳しくは、本書を参照してください。\n\n* [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839984960.html) \n* [書籍情報](https://ebisu.com/grid-layout/)\n\n\n## CSSグリッドのチートシート（CSS Grid Cheat Sheet）\n\n### ■ css-grid-cheat-sheet.pdf\n\nCSSグリッドのプロパティや機能をまとめたチートシートです\n\n\n## サンプルの構築に使用するセット（書籍 P.108）\n\n### ■ set/\n\nサンプルの構築に使用するセットは `set/` フォルダに用意してあります。\n\n### ■ set.pdf\n\nセットについてのPDFです。セット内に含まれるCSSについてまとめています。\n\n\n## サンプルのコード\n\n### ■ samples/\n\n本書に掲載したサンプルのコードは `samples/` フォルダに収録しています。\n\n各サンプルのフォルダ名は `sample章番号-項目番号-ページ番号-補足情報` という形式になっています。たとえば、Chapter 5 の「5.14 聖杯レイアウト」（P.282）の完成コードを収録したフォルダは `sample05-14-p282-holy/` となっています。\n\n収録コードは以下のとおりです。\n\n- Chapter 1 ～ 4 の本文中で取り上げたコード\n- Chapter 5 の実践サンプルの完成コード\n- Tipsや「よくあるトラブル」で取り上げたコード\n\n\n## SVGアイコン\n\nサンプルでは下記サイトのSVGアイコンをコード内に直接記述して使用しています。\n\n### Font Awesome\n- https://fontawesome.com/icons\n- https://fontawesome.com/license/free\n\n### ionicons\n- https://ionic.io/ionicons\n- https://github.com/ionic-team/ionicons/blob/main/LICENSE\n\n### Material Symbols\n- https://fonts.google.com/icons\n- https://developers.google.com/fonts/docs/material_icons?hl=ja#licensing\n\n### Heroicons (v1)\n- https://v1.heroicons.com/\n- https://github.com/tailwindlabs/heroicons/blob/v1/LICENSE\n\n\n## 画像\n\nサンプルでは下記サイトの画像を使用しています。\n\n### Unsplash\n- https://unsplash.com/\n- https://unsplash.com/license\n\n### Pixabay\n- https://pixabay.com/\n- https://pixabay.com/ja/service/license-summary/\n\n画像ファイルは `/set/assets/` 内に次のように収録しています。\n\n- Chapter 1～4 で使用する画像\n\t- /set/assets/img/\n\t\t- [boots.jpg](https://unsplash.com/photos/a-close-up-of-a-pair-of-brown-boots-3OZr-hLbsq0)\n\t\t- [shirts.jpg](https://unsplash.com/photos/black-and-orange-nike-polo-shirt-N0ke5zChVBU)\n\t\t- [shop.jpg](https://unsplash.com/photos/person-leaning-on-wall-while-holding-gray-hat-qnKhZJPKFD8)\n\t\t- [bag.jpg](https://unsplash.com/photos/brown-leather-handbag-on-white-table-XwjrPFW7xw0)\n\t\t- [socks.jpg](https://unsplash.com/photos/a-pair-of-socks-laying-on-top-of-a-yellow-surface-Xd_YG4iJLUo)\n\t\t- [watch.jpg](https://unsplash.com/photos/a-watch-sitting-next-to-a-wallet-on-a-table-D2-MheYFX7o)\n\t\t- [shelf.jpg](https://unsplash.com/photos/white-and-yellow-textiles-on-brown-wooden-shelf-uzw4MvfG5ps)\n\t\t- [document.jpg](https://unsplash.com/photos/text-eELCRf8nwsI)\n\t\t- boots.svg\n- Chapter 5 で使用する画像\n\t- /set/assets/rome/\n\t\t- [1.jpg](https://unsplash.com/photos/brown-mosque-near-bridge-under-blue-sky-t1Cm0nrCjDY)\n\t\t- [2.jpg](https://unsplash.com/photos/horse-and-carriage-beside-the-colosseum-x1X3O0HIYtQ)\n\t\t- [3.jpg](https://unsplash.com/photos/yellow-3-door-hatchback-parked-outside-a-building-5CLy2XBCAjA)\n\t\t- [4.jpg](https://unsplash.com/es/fotos/flores-purpuras-que-crecen-en-el-costado-de-un-edificio-ZqqMCOYGzhk)\n\t\t- [5.jpg](https://unsplash.com/photos/blue-wooden-door-on-brown-concrete-wall-dda9JImxHuA)\n\t\t- [6.jpg](https://unsplash.com/photos/close-shot-of-pizza-_0JpjeqtSyg)\n\t\t- [7.jpg](https://unsplash.com/photos/white-ceramic-mug-with-coffee-on-brown-wooden-table-BewKTZMv7V0)\n\t\t- [8.jpg](https://unsplash.com/photos/black-and-white-motor-scooter-parked-beside-brown-concrete-building-during-daytime-pG9UVrkv1b4)\n\t- /set/assets/chart/\n\t\t- [popularity.svg](https://pixabay.com/images/id-6127643)\n\t- /set/assets/contents/\n\t\t- 1.png\n\t\t- 2.png\n\t\t- [3.png](https://unsplash.com/photos/macbook-pro-beside-plant-in-vase-QeVmJxZOv3k)\n\t\t- [eyecatch.png](https://unsplash.com/photos/green-leafed-plant-on-clear-glass-vase-filled-with-water-x2Tmfd1-SgA)\n\t\t- decoration.svg\n\t\t- logo.svg\n\t- /set/assets/avatar/\n\t\t- [1.jpg](https://unsplash.com/photos/russian-blue-cat-wearing-yellow-sunglasses-yMSecCHsIBc)\n\t\t- [2.jpg](https://unsplash.com/photos/orange-and-white-tabby-cat-sitting-on-brown-wooden-table-in-kitchen-room-w2DsS-ZAP4U)\n\t\t- [3.jpg](https://unsplash.com/photos/orange-and-white-cat-on-yellow-surface-sR0cTmQHPug)\n\t\t- [4.jpg](https://unsplash.com/photos/white-cat-on-white-textile-BLW_KQ0Rkn0)\n\t\t- [5.jpg](https://unsplash.com/photos/black-and-white-cat-lying-on-brown-bamboo-chair-inside-room-gKXKBY-C-Dk)\n\t\t- [6.jpg](https://unsplash.com/photos/orange-and-white-cat-on-pink-surface-bg9jOHUtmBs)\n\t\t- [7.jpg](https://unsplash.com/photos/orange-tabby-cat-on-brown-parquet-floor-LEpfefQf4rU)\n\t\t- [8.jpg](https://unsplash.com/photos/silver-tabby-cat-IuJc2qh2TcA)\n\n※リンク先がないものはエビスコムが作成した画像です\n\n\n-----------------------------------------------\n\n## ■ ご利用にあたって\n\n本書に記載されている内容や本ダウンロードデータの運用によって、いかなる損害が生じても、株式会社マイナビ出版および著者は責任を負いかねますので、あらかじめご了承ください。\n\n（c）2024 EBISUCOM / マイナビ出版\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febisucom%2Fgrid-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febisucom%2Fgrid-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febisucom%2Fgrid-layout/lists"}