CSS Flexboxの勉強に最適!コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ

CSS Flexboxで何ができるのか、どういうことができるのか、基礎知識をはじめ、グリッドやレイアウトに使える実装コードやコンポーネントの実装コードなど、Flexboxの実装に役立つコンテンツをまとめて紹介します。

CSS Flexboxの勉強に最適!レイアウトやコンポーネントを実装するコードのまとめ

イラスト: Girls Design Materials

まずは、Flexboxの基本を身につけることができるものから。
Flexboxの各プロパティについての解説は、下記ページを参考にどうぞ。

サイトのキャプチャ

flexbox in 5 minutes

右上のボックス「tour」を辿ることで、5分でFlexboxについて学ぶことができます。英語が苦手な人でも、コードに関することなので、なんとなく分かると思います。
また、「control panel」でレイアウトを自由に変更することも可能で、その下にコードが生成されます。

サイトのキャプチャ

Flexbox Froggy

英語じゃなくて、日本語で! という人にはこちら。Flexboxの使い方をゲームで楽しみながら、身につけることができます。
Flexboxでカエルをうまいこと導いてみてください。

サイトのキャプチャ

Flexbox Grid

Flexboxを使ったさまざまなグリッドのコードを利用できます。バリエーションが豊富なので、ほとんどのレイアウトに対応できます。

サイトのキャプチャ

flexplorer

Flexboxでどういうレイアウトができるのか、それはどういう記述なのかが分かります。生成したコードは、ページの下部に表示されます。

サイトのキャプチャ

Flexy Boxes

Flexboxのプロパティベースで、それがどのようになるのかが分かります。

サイトのキャプチャ

Fibonacci

Flexboxを使ったページレイアウト用のコードを生成できます。
使い方は各パネルをホバーすると操作できるアイコンが表示させるので、それを選択し、レイアウトを構築します。

サイトのキャプチャ

Flexbox Patterns

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するコードが利用できます。
日本語紹介記事: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装

サイトのキャプチャ

Solved by Flexbox

Flexbox無しでは出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックのまとめ。
日本語紹介記事: Flexboxのこれが知りたかった!今まで出来なかったことがシンプルで簡単に実装できる

top of page

©2017 coliss