Flexboxを使う際に役立つ便利なサイト4選

2017/05/04

こんにちは。
今回はFlexboxを使う際に役立つ便利なサイト4選です。

Flexboxを使うと複雑なレイアウトもシンプルなコードで実装できるようになりましたよね。
そこで、今回はFlexboxを使う際に役立つ便利なサイトをまとめました。

Flexboxを使う際に役立つ便利なサイト4選!

Test CSS Flexbox Rules Live

test-css-flexbox-rules-live

http://flexbox.help/

ラジオボタンでFlexboxのプロパティを変更してどうレイアウトが変わるかをテストできるサイトです。
リアルタイムでレイアウトが変更されるので、あれこれ試す事ができますよ。

 

 

Flexbox Defense

flexbox-defense

http://www.flexboxdefense.com/

Flexboxのプロパティを使って、塔を配置して進路を防ぐゲームです。
画面左上のヒントを見ながら、CSSのぬけた箇所を埋めていきますよ。

 

 

Flexbox Patterns

flexbox-patterns

http://www.flexboxpatterns.com/home

タブ、メニュー、リストなどのよく利用するUIのFlexboxを使った実装例をまとめたサイトです。
詳細画面では、コードとその解説が紹介されていますよ。

 

 

Flexbox Froggy

flexbox-froggy

http://flexboxfroggy.com/

Flexboxをゲーム感覚で学べるサイトです。
Flexboxプロパティを使って、カエルを葉の上に乗せるゲームですよ。

 

 

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~
6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~

 

いかがでしたか。Flexboxを使う際に使ってみてはどうでしょうか。
以上でFlexboxを使う際に役立つ便利なサイト4選でした。

Related Post

topへ戻る