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のプロパティを変更してどうレイアウトが変わるかをテストできるサイトです。
リアルタイムでレイアウトが変更されるので、あれこれ試す事ができますよ。

「Test CSS Flexbox Rules Live」の使い方はこちら

Flexboxのプロパティを切り替えて表示確認できるサイト「Test CSS Flexbox Rules Live」!
こんにちは。 今回はFlexboxのプロパティを切り替えて表示確認できるサイト「Test CSS Flexbox Rules Live」!です。 ラジオボタンでF...

 

 

Flexbox Defense

flexbox-defense

http://www.flexboxdefense.com/

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

「Flexbox Defense」の使い方はこちら

Flexboxで塔を移動させるタワーディフェンスゲーム「Flexbox Defense」!
こんにちは。 今回はFlexboxで塔を移動させるタワーディフェンスゲーム「Flexbox Defense」!です。 Flexboxのプロパティを使って、塔...

 

 

Flexbox Patterns

flexbox-patterns

http://www.flexboxpatterns.com/home

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

「Flexbox Patterns」の使い方はこちら

Flexboxの使用パターンを集めたサイト「Flexbox Patterns」!
こんにちは。 今回はFlexboxの使用パターンを集めたサイト「Flexbox Patterns」!です。 タブ、メニュー、リストなどのよく利用するUI...

 

 

Flexbox Froggy

flexbox-froggy

http://flexboxfroggy.com/

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

「Flexbox Froggy」の使い方はこちら

CSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!
こんにちは。 今回はCSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!です。 ゲームをしながらCSS3のFlexboxを身につけ...

 

 

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

 

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

この記事を読んだ人はこんな記事も読んでいます