Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ

  • Posted on
  • Category : Tips
Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ

Flexboxについて理解を深めたいという時に参考になるエントリーやサイトをまとめてみました。最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなってきたりと今後はより使う機会が増えてくると思うので、いまいち理解できていないという人はここで紹介しているものを参考にしてみてください。

2015年12月19日 追記
「Test CSS Flexbox Rules Live」を追記しました。
2016年2月11日 追記
「Flexbox Patterns」を追記しました。

自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。
ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。
全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。

CSS Flexible Box Layout Module Level 1

CSS Flexible Box Layout Module Level 1

とりあえずということで、まずは「W3C」のFlexible Box Layout Moduleについてのページです。

flexbox - Can I use... Support tables for HTML5, CSS3, etc

flexbox – Can I use… Support tables for HTML5, CSS3, etc

プロパティの各種ブラウザ対応状況を確認できる「Can I use」で、Flexboxについて検索した結果ページです。

CSS flexible box の利用 - CSS | MDN

CSS flexible box の利用 – CSS | MDN

こちらは「MDN」内のFlexboxについての解説ページで、各用語や基本的な例などが図やコード付きでまとめられています。
また、ページ左のナビに各種プロパティへの詳細ページへのリンクがあります。

これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス

これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス

こちらは「Webクリエイターボックス」さんで公開されているFlexboxについての基礎的な部分について書かれたエントリーで、サンプルソースや実際の表示付きで解説しています。
デモではCodePenを使用しているので、動きの確認はもちろん自身で少し記述を変更してみたりもできます。

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

同じく「Webクリエイターボックス」さんで公開されているFlexboxについてのエントリーで、こちらもサンプルソースやデモが用意されています。
タイトルにあるようにこちらは応用編といった感じのものになっており、実際に案件等で使用するようなレイアウトを用いて解説されています。

2015年10月度のflexboxの書き方 - Web Design Note

2015年10月度のflexboxの書き方 – Web Design Note

タイトルにもあるように2015年10月現在ということで割と最近書かれたFlexboxのエントリーで、各種ブラウザのサポート状況や実際の表示について書かれています。

5分でわかるflexbox

5分でわかるflexbox

こちらはFlexboxについてを解説しているスライドです。

Solved by Flexbox — Cleaner, hack-free CSS

Solved by Flexbox — Cleaner, hack-free CSS

グリッド・上下センター・スティッキーフッターなど実際にサイト制作時でもよく作るようなものを、Flexboxを使って実装したサンプルがまとめられています。
上記リンク先は英語になりますが、下記で和訳されているものを確認できます。

A Visual Guide to CSS3 Flexbox Properties | Scotch

A Visual Guide to CSS3 Flexbox Properties | Scotch

それぞれどのような記述をすることでどのような動きになるのかを視覚的に解説したビジュアルガイドで、非常に分かりやすいので文章やコードじゃいまいちピンとこないという人向けです。
上記リンク先は英語になりますが、下記でコリスさんが和訳されているものを確認できます。

A Complete Guide to Flexbox | CSS-Tricks

A Complete Guide to Flexbox | CSS-Tricks

こちらは「CSS-Tricks」で公開されているFlexboxについてのガイドエントリーです。
どのような記述をすることでどのような配置になるのかの図も一緒に掲載されています。

また「CSS-Tricks」だけでなく、ご存知の方も多いと思う「Codrops」や「Smashing Magazine」といったその他の海外のデザインブログでもFlexboxについて以下のようなエントリーが公開されています。
全て英語ではありますがデモ付き、ビジュアル付きなものも多く、Google翻訳等を使えば内容は大体わかると思います。

What The FlexBox?! - A free 20 video course to learn CSS Flexbox

What The FlexBox?! – A free 20 video course to learn CSS Flexbox

こちらはこれまでのものと違ったタイプで、動画を使ってFlexboxを説明しているサイトです。
英語ですし視聴する際もメールアドレスが必要になるのですが、気になる人がいるかもしれないので一応ご紹介。

Flexbox Grid

Flexbox Grid

Flexboxを使ったグリッドレイアウトを実装できるスタイルシートです。
こういうものはそのまま使うだけでなく、勉強などにも使えますね。

Gridlex - Just a Flexbox Grid System

Gridlex – Just a Flexbox Grid System

こちらも同じくFlexboxを使ったグリッドレイアウトを実装できるスタイルシートになります。

CSS Flexbox :: Article Collection

CSS Flexbox :: Article Collection

フロントエンドに関するような情報が沢山まとまっている「HeyDesigner」内にあるFlexboxに関するページです。
やはり英語になりますがちょっとしたツールが紹介されていたり、ここでは紹介していないエントリーなども多数あります。

Flexbox Tester · MadebyMike

Flexbox Tester · MadebyMike

Flexboxを使用した際にそれぞれどのように幅が計算されているのかを、任意で値を変更したりしながら確認することができます。

Flexbox Froggy - A game for learning CSS flexbox

Flexbox Froggy – A game for learning CSS flexbox

こちらはゲームをしながらFlexboxを学べるというサイトで、それぞれプロパティを記述してカエル達を葉っぱの上に乗せてあげればクリアとなります。

Test CSS Flexbox Rules Live

Test CSS Flexbox Rules Live

プロパティをラジオボタンで切り替えていくことで、どのような表示になるのかを確認することができます。
ドメインも良いですね :)

Flexbox Patterns

Flexbox Patterns

タブ・フッター・リスト・カードなど、サイトでよく使われるレイアウトやパーツをCSSのFlexboxを使った実装例としてまとめているサイトです。

以上、Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトのまとめでした。
沢山紹介してきましたがもちろん基本的な部分は同じようなことが書かれているので、これから勉強するという人は幾つか流し読みするなどして自分で理解しやすそうなものを見つけるのが良いと思います。

ただ、どうしても古めのエントリーは必要以上に記述がされていたり、逆に直近のものだと少し前のバージョンに対応していないなんてこともあるとは思うので、それは対応ブラウザの確認や「Can I use」などを利用するなどして注意してください。

Back to Top

Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ

Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトまとめ

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。