2024年08月5日(月)
CSSのグリッドレイアウトを直感的な操作で作成できるジェネレーター「CSS Grid Generator」
レイアウト設計にとても便利になるCSS Grid（CSSグリッドレイアウト）。
モダンブラウザが対応して今後活用する機会が増えると思いますが、簡単な操作で希望するレイアウトのgridプロパティを作成してくれるCSSグリッドジェネレーター「CSS Grid Generator」がとても便利だったのでメモ書きとして紹介します。
CSS Grid Generator
CSS Grid Generatorまず画面上の「Columns」でカラム数（列数）、「Rows」で行数、「Gap（px）」でブロック間の余白を決めて、あとはブロック化する要素をクリックして、必要に応じてドラッグでブロックを結合しながらレイアウトを形成します。
サイト上に書かれている使い方を訳すと以下の通り。
- 1. 必要に応じて列数、行数、間隔をカスタマイズしてください。
- 2. +マークが付いた四角をクリックして、グリッドに新しい要素を追加してください。
- 3. 右下のハンドルを使って、DIVのサイズを変更...
0
0
0
0
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
日本の人口の2人に1人が50歳以上！若者化している「令和シニア」のインサイト
NEXT ›
CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『CSSのグリッドレイアウトを直感的な操作で作成できるジェネレーター「CSS Grid Generator」』についてまとめています。
Webサービス、Web制作総合のカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
