CSS Flexboxの勉強に最適！コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ
Post on:2016年10月12日
sponsors
CSS Flexboxで何ができるのか、どういうことができるのか、基礎知識をはじめ、グリッドやレイアウトに使える実装コードやコンポーネントの実装コードなど、Flexboxの実装に役立つコンテンツをまとめて紹介します。
イラスト: Girls Design Materials
まずは、Flexboxの基本を身につけることができるものから。
Flexboxの各プロパティについての解説は、下記ページを参考にどうぞ。
右上のボックス「tour」を辿ることで、5分でFlexboxについて学ぶことができます。英語が苦手な人でも、コードに関することなので、なんとなく分かると思います。
また、「control panel」でレイアウトを自由に変更することも可能で、その下にコードが生成されます。
英語じゃなくて、日本語で！ という人にはこちら。Flexboxの使い方をゲームで楽しみながら、身につけることができます。
Flexboxでカエルをうまいこと導いてみてください。
Flexboxを使ったさまざまなグリッドのコードを利用できます。バリエーションが豊富なので、ほとんどのレイアウトに対応できます。
Flexboxでどういうレイアウトができるのか、それはどういう記述なのかが分かります。生成したコードは、ページの下部に表示されます。
Flexboxのプロパティベースで、それがどのようになるのかが分かります。
Flexboxを使ったページレイアウト用のコードを生成できます。
使い方は各パネルをホバーすると操作できるアイコンが表示させるので、それを選択し、レイアウトを構築します。
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するコードが利用できます。
日本語紹介記事: よく使うUI要素をFlexboxを使ってシンプルに簡単に実装
Flexbox無しでは出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックのまとめ。
日本語紹介記事: Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できる
sponsors
