Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 グリッドレイアウト』のダウンロードデータです

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 / マイナビ出版