Advertisement

css-grid-flexbox-cheatsheet-ultimate

 

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。

 

ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。

 

 

CSS Gridの使い方ガイド、チートシート、ゲームまとめ

 

Grid Garden

CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。

grid-garden

 

 

 

Bonus – CSS Diner

実際にコーディングを書きながら、次々に出されるレイアウトに関するお題を解決していくゲーム。CSS Gridだけでなく、Flexboxやその他よく活用するCSSレイアウトの組み方を学ぶことができます。

cssdinner
 

 

 

Grid by Example

CSS Gridプロパティの基本的な使い方から、サブグリッドなど実用レベルの高度なモノまで、実際にサンプル例とコードを確認できるコレクション。作りたいレイアウトが決まっているときに便利。

grid-by-example

 

 

 

Grid Visual Playground

あらかじめ用意されているカラフルなグリッドレイアウトを、さまざまなプロパティ値をリアルタイムで入力しながら、どのように変化するのか確認できるチートシート。

css-visual-ground

 

 

 

CSS Grid Generator

プロジェクトにあった自分だけのオリジナルグリッドシステムを作成できるオンライン・ジェネレーター。

css-grid-generator

 

 

 

CSS Grid Layout Generator

こちらもブラウザー上でグリッドテンプレートの作成を行うことができるオンラインツール。

css-grid-generator-2

 

 

 

CSS Tricks’ A Complete Guide to Grid

CSS Gridをこれからはじめるひとだけでなく、すべてのグリッドプロパティの使い方を一ヶ所で確認できるチートシート的な使い方もできます。

csstricks-grid

 

 

 

GRID: A simple visual cheatsheet for CSS Grid Layout

CSS Gridの各プロパティの使い方を、視覚的にまとめているだけでなく、クリックでコピー/ペーストできる点も◎。

css-cheatsheet-1

 

 

 

CSS Grid Floor Plan

家の見取り図、フロアプランをCSS Gridのみで表現したユニークなデモ作品。

See the Pen
CSS Grid: Floor Plan
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

CSS Flexboxの使い方、チートシート、ゲームまとめ

Flexbox Froggy Game

CSS Flexboxのさまざまなプロパティを実際に入力しながら、カエルを蓮の葉っぱの上に移動させるゲームで、レベル24までいくと、。

flexbox-froggy-game

 

 

 

Flexbox defense Game

Flexboxプロパティを入力することで、迫ってくる敵を阻止するゲームで、レベル12までいけばすべてのプロパティを体感的に学ぶことができます。

flexbox-defense-game

 

 

 

Visual Guide to CSS3 Flexbox

グリッドを増やしたり減らしたり、配置を変更してみたりと、Flexboxプロパティを利用してお好みのレイアウトを作成できるビジュアルガイド。

visual-guide-to-css3-flexbox

 

 

 

Flexbox playground

さまざまなflexboxのプロパティを実際に設定しながら、どのように配置が変化するのか確認できます。

See the Pen
Flexbox playground
by Gabi (@enxaneta)
on CodePen.

 

 

 

Flexplorer

Flexboxを使ったCSSモジュールを試しながらレイアウトを作成できるプレイグラウンド。ボタン操作のみで直感的にレイアウトを組むことができます。

flexplorer

 

 

 

Solved By Flexbox

Flexboxを利用して解決することができるレイアウトなどをまとめたライブラリ。天地中央揃えなど、flexboxを使うと手軽なスタイリングが中心です。

solved-by-flexbox

 

 

 

Flexbox Patterns

タブやカード型などより複雑なレイアウトパターンをまとめた、実用的なコードサンプルが揃います。

flexbox-patterns

 

 

 

CSS tricks Guide to Flexbox on CSS tricks

毎回flexboxのプロパティを忘れてしまうというひとは、チートシートで確認すると良いでしょう。すべての情報がひとまとめになっていて便利です。

css-tricks-guide-to-flexbox-on-css-tricks

 

 

 

Joni Bologna’s fruity Flexbox Cheatsheet

出題される質問にYES/NOで答えることで、どのようにスタイリングすれば良いのかすぐに確認できるflexboxのチートシート。

joni-bologna-fruity-flexbox-cheatsheet

 

 

 

Flexbox Cheatsheet By Yoksel

左彩度に用意された各プロパティをクリックすると、サンプル用コードとレイアウトを確認できるチートシート。自分が使いやすいモノをブックマークしておくと便利です。

flexbox-cheatsheet-by-yoksel

 

 

制作が捗る最新CSSツール、リソースを利用しよう!

 

CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。

 

これまでに紹介したCSSに関する便利ツールもワークフローに加えることで、より快適な制作環境を整えることができるでしょう。

 

best-of-css-tools-2019-1
海外サイト Speckyboy.com で公開された Our 100 Favorite CSS Libraries, Frameworks and Tool
40-css-utility-tools
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのち
50css-library-2018
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Frameworks, Libraries & Tools from 20
20-protips-for-writing-modern-css
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、
25-css-useful-tools (1)
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 P

 

参照元リンク : Fun places to learn CSS Layout – Part 1: Flexbox – Stephanie Walter

参照元リンク : Fun places to learn CSS Layout – Part 2: Grid Layout – Stephanie Walter