Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ebisucom/grid-layout
『作って学ぶ HTML + CSS グリッドレイアウト』のダウンロードデータです
https://github.com/ebisucom/grid-layout
css-grid css-grid-layout html-css layout ui-components
Last synced: 19 days ago
JSON representation
『作って学ぶ HTML + CSS グリッドレイアウト』のダウンロードデータです
- Host: GitHub
- URL: https://github.com/ebisucom/grid-layout
- Owner: ebisucom
- Created: 2024-01-25T22:58:16.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-18T00:38:47.000Z (11 months ago)
- Last Synced: 2024-11-08T14:11:17.102Z (2 months ago)
- Topics: css-grid, css-grid-layout, html-css, layout, ui-components
- Language: CSS
- Homepage: https://ebisu.com/grid-layout/
- Size: 11.3 MB
- Stars: 9
- Watchers: 0
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 作って学ぶ HTML + CSS グリッドレイアウト
![作って学ぶ HTML + CSS グリッドレイアウト](https://repository-images.githubusercontent.com/748412170/62e2229a-1d68-4360-8720-1bf37ddf487f)
**ダウンロードデータ**
サンプルの完成データや、P.108のセットに関するPDFなどを収録しています。詳しくは、本書を参照してください。* [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839984960.html)
* [書籍情報](https://ebisu.com/grid-layout/)## CSSグリッドのチートシート(CSS Grid Cheat Sheet)
### ■ css-grid-cheat-sheet.pdf
CSSグリッドのプロパティや機能をまとめたチートシートです
## サンプルの構築に使用するセット(書籍 P.108)
### ■ set/
サンプルの構築に使用するセットは `set/` フォルダに用意してあります。
### ■ set.pdf
セットについてのPDFです。セット内に含まれるCSSについてまとめています。
## サンプルのコード
### ■ samples/
本書に掲載したサンプルのコードは `samples/` フォルダに収録しています。
各サンプルのフォルダ名は `sample章番号-項目番号-ページ番号-補足情報` という形式になっています。たとえば、Chapter 5 の「5.14 聖杯レイアウト」(P.282)の完成コードを収録したフォルダは `sample05-14-p282-holy/` となっています。
収録コードは以下のとおりです。
- Chapter 1 ~ 4 の本文中で取り上げたコード
- Chapter 5 の実践サンプルの完成コード
- Tipsや「よくあるトラブル」で取り上げたコード## SVGアイコン
サンプルでは下記サイトのSVGアイコンをコード内に直接記述して使用しています。
### Font Awesome
- https://fontawesome.com/icons
- https://fontawesome.com/license/free### ionicons
- https://ionic.io/ionicons
- https://github.com/ionic-team/ionicons/blob/main/LICENSE### Material Symbols
- https://fonts.google.com/icons
- https://developers.google.com/fonts/docs/material_icons?hl=ja#licensing### Heroicons (v1)
- https://v1.heroicons.com/
- https://github.com/tailwindlabs/heroicons/blob/v1/LICENSE## 画像
サンプルでは下記サイトの画像を使用しています。
### Unsplash
- https://unsplash.com/
- https://unsplash.com/license### Pixabay
- https://pixabay.com/
- https://pixabay.com/ja/service/license-summary/画像ファイルは `/set/assets/` 内に次のように収録しています。
- Chapter 1~4 で使用する画像
- /set/assets/img/
- [boots.jpg](https://unsplash.com/photos/a-close-up-of-a-pair-of-brown-boots-3OZr-hLbsq0)
- [shirts.jpg](https://unsplash.com/photos/black-and-orange-nike-polo-shirt-N0ke5zChVBU)
- [shop.jpg](https://unsplash.com/photos/person-leaning-on-wall-while-holding-gray-hat-qnKhZJPKFD8)
- [bag.jpg](https://unsplash.com/photos/brown-leather-handbag-on-white-table-XwjrPFW7xw0)
- [socks.jpg](https://unsplash.com/photos/a-pair-of-socks-laying-on-top-of-a-yellow-surface-Xd_YG4iJLUo)
- [watch.jpg](https://unsplash.com/photos/a-watch-sitting-next-to-a-wallet-on-a-table-D2-MheYFX7o)
- [shelf.jpg](https://unsplash.com/photos/white-and-yellow-textiles-on-brown-wooden-shelf-uzw4MvfG5ps)
- [document.jpg](https://unsplash.com/photos/text-eELCRf8nwsI)
- boots.svg
- Chapter 5 で使用する画像
- /set/assets/rome/
- [1.jpg](https://unsplash.com/photos/brown-mosque-near-bridge-under-blue-sky-t1Cm0nrCjDY)
- [2.jpg](https://unsplash.com/photos/horse-and-carriage-beside-the-colosseum-x1X3O0HIYtQ)
- [3.jpg](https://unsplash.com/photos/yellow-3-door-hatchback-parked-outside-a-building-5CLy2XBCAjA)
- [4.jpg](https://unsplash.com/es/fotos/flores-purpuras-que-crecen-en-el-costado-de-un-edificio-ZqqMCOYGzhk)
- [5.jpg](https://unsplash.com/photos/blue-wooden-door-on-brown-concrete-wall-dda9JImxHuA)
- [6.jpg](https://unsplash.com/photos/close-shot-of-pizza-_0JpjeqtSyg)
- [7.jpg](https://unsplash.com/photos/white-ceramic-mug-with-coffee-on-brown-wooden-table-BewKTZMv7V0)
- [8.jpg](https://unsplash.com/photos/black-and-white-motor-scooter-parked-beside-brown-concrete-building-during-daytime-pG9UVrkv1b4)
- /set/assets/chart/
- [popularity.svg](https://pixabay.com/images/id-6127643)
- /set/assets/contents/
- 1.png
- 2.png
- [3.png](https://unsplash.com/photos/macbook-pro-beside-plant-in-vase-QeVmJxZOv3k)
- [eyecatch.png](https://unsplash.com/photos/green-leafed-plant-on-clear-glass-vase-filled-with-water-x2Tmfd1-SgA)
- decoration.svg
- logo.svg
- /set/assets/avatar/
- [1.jpg](https://unsplash.com/photos/russian-blue-cat-wearing-yellow-sunglasses-yMSecCHsIBc)
- [2.jpg](https://unsplash.com/photos/orange-and-white-tabby-cat-sitting-on-brown-wooden-table-in-kitchen-room-w2DsS-ZAP4U)
- [3.jpg](https://unsplash.com/photos/orange-and-white-cat-on-yellow-surface-sR0cTmQHPug)
- [4.jpg](https://unsplash.com/photos/white-cat-on-white-textile-BLW_KQ0Rkn0)
- [5.jpg](https://unsplash.com/photos/black-and-white-cat-lying-on-brown-bamboo-chair-inside-room-gKXKBY-C-Dk)
- [6.jpg](https://unsplash.com/photos/orange-and-white-cat-on-pink-surface-bg9jOHUtmBs)
- [7.jpg](https://unsplash.com/photos/orange-tabby-cat-on-brown-parquet-floor-LEpfefQf4rU)
- [8.jpg](https://unsplash.com/photos/silver-tabby-cat-IuJc2qh2TcA)※リンク先がないものはエビスコムが作成した画像です
-----------------------------------------------
## ■ ご利用にあたって
本書に記載されている内容や本ダウンロードデータの運用によって、いかなる損害が生じても、株式会社マイナビ出版および著者は責任を負いかねますので、あらかじめご了承ください。
(c)2024 EBISUCOM / マイナビ出版