たった１行で威力抜群！FlexboxとCSSの基礎～実践までを網羅できるサイト8選+おまけ

FlexboxとCSSは最強タッグ

htmlとcssに慣れてくるとページのレイアウトや装飾が楽しくなってきますよね。ただ画像がそろわなかったり、思うように文字が並ばなかったりといった現象も比例して多くなってきます。

floatを使って左に寄せたいのに、floatが効かない!というようなこともありますよね。そんな風に私たちがmm単位で画像の表示位置やフォントサイズと格闘している間に、実に画期的なFlexboxという機能が誕生していました。

画像や記事を文字通りフレキシブルにboxとして配置することができる機能なのですが、「今までの苦労は何だったの？」と思えるほど便利です。身に着けておいて損はない知識なのでぜひご一読あれ。

• Flexboxの基本構造を学ぶ
• Flexboxでどんなことができるかを知る
• 【動画で学ぶ】Flexboxで作れるレスポンシブなギャラリーページ3選
• Flexboxを使ってみよう！おススメWebサイト2選+おまけ
• おわりに

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Flexboxの基本構造を学ぶ

Flexbox Tutorial (CSS): Real Layout Examples

こちらの動画は非常に丁寧にFlexboxの使い方を解説してくれています。全編英語なのが不安な人もいるかもしれません。

が、視覚情報が豊富+普段htmlやcssをコーディングする際に聴きなれている単語も多いので「チンプンカンプン」にはならないと思います。

どうしても「何言ってるのかわかりません！」という時は速度を0.75倍くらいにして、英語字幕をだした上で翻訳サイトなどもうまく利用すると良いでしょう。

まずはこんな単純な入力フォームの幅や高さの調節から、

次はこのような真ん中にメインの記事、両端に補足記事やメニューといったレイアウトの作り方…など基礎から順を追って説明してくれています。

もう迷わない！CSS Flexboxの使い方を徹底解説

安心してください、日本語ですよ。先ほどの動画では、Flexboxを使ってどのようなレイアウトが実現できるか…を動きを伴って確認することができましたね。

今回は”そもそもFlexboxってどんな機能なの？”という基礎の基礎から、各boxの配置を割り振る際にどのようなプロパティを使用すれば良いか…まで画像とコード付きで解説してくれている非常に親切なサイトです。

Flexboxでどんなことができるかを知る

Properties for the flex container

ここまででFlexboxとはなんぞや、またCSSで利用することでレイアウトがどのように変化するのかを確認してきました。しかしFlexboxのすごいところはまだまだこんなものではありません。

コチラのサイトでは画像の上のプロパティのボタンを押すとリアルタイムでレイアウトが変わるようになっています。

もし『どんなレイアウトにしようかな～、やり方はどうしたらいいのかな～』と思っている方は色々と試してみると良いでしょう。

【動画で学ぶ】Flexboxで作れるレスポンシブなギャラリーページ3選

次からはECサイトや、自社サービスを紹介するサイトなどでよく見るギャラリーページの解説動画を3つご紹介します。

残念ながら3つとも英語なのですが、ここまでの知識があれば問題なく理解できるでしょう。また、このような解説動画は全てコードを書く→レイアウトの確認という流れで進めてくれているため、実例を見ながら必要なプロパティを知ることができます。

1.Responsive Image Gallery Using Flexbox | CSS3 Flexbox

画像を並べる、カラムを指定する、画像サイズを整える…などの行程を順番に行っていき、1つ変更する度にCSSコードとブラウザ表示を見せてくれるというシンプルな作りの動画の為コードとレイアウトに集中して見ることができます。

2.Create Responsive Image Grid Gallery using HTML5 and CSS3 | Flexbox | Example 1

コチラの動画は約20分と長尺なのですが、コードの解説や、ボックスの幅などの解説も挟んでくれています。

またCSSの解説時に、ボックスの解説画像やhtmlのコードを追加で表示してくれるところも何度も動画を行ったり来たりせずに済むのでありがたい作りになっています。

3.Responsive Image Gallery Using Flexbox | Simple Image gallery | Beginners Tutorial

コチラもとてもシンプルで解説の音声なし。htmlのコード→ブラウザでの表示→CSSのコード→ブラウザでの表示という順番で進んでいきます。動画自体も約4分と見やすい長さになっているのも嬉しいですね。

1点難点があるとすれば1と３の動画に関してはBGMが非常にリラックス効果のありそうなものなので、眠い時にはおススメできないという点でしょうか。

Flexboxを使ってみよう！おススメWebサイト2選+おまけ

1.日本語対応！CSS Flexboxのチートシート作ったので配布します

ここまででかなりFlexboxの使い勝手の良さをご理解いただけたのではないかと思います。しかし、使い慣れるまでは各プロパティがどんなレイアウトになるのか調べるのって大変ですよね。

そこでコチラのサイトでは、Flexboxチートシートと称してプロパティとレイアウトを一覧にしてくれています。ありがたい！

2.現場で使えるFlexboxレイアウト12選

最後にご紹介するコチラのサイトでは”実践的なレイアウトを”とうたっているだけあって、メニューでFlexboxを使用する方法や、画像と記事を交互に配置する方法などを紹介してくれています。線を使った見出しデザイ、などワンポイントで試してみたくなってしまう方法もありますよ。

おまけ：FLEXBOX FROGGY

例えば、自分のWebサイトではFlexboxでレイアウトを作ることができたけども、時間を置くと忘れてしまいそうで不安…。そんな人のためにピッタリのサイトです。

画面左側のCSSへプロパティを書き込んで、カエルをうまく葉っぱの上に届けてあげる…というゲーム感覚でFlexboxを使いこむことができるサイトです。

ただ、あくまでもゲームです。実践にはかないませんので、作るべきサイト・ページがあるときはそちらを優先してくださいね。

おわりに

Flexboxを使えば、これまで苦労してきたレイアウトの問題が一瞬で解決する可能性があります。

また今回紹介したサイトはほとんどが、解説の際にhtmlとcssのコードも掲載してくれているため、簡潔にまとまったコードを学ぶ機会にもなるはずです。
何が原因かわからないが、画像がずれる・デバイスを変えるとレイアウトが崩れる…などで悩んでいる人は一度試してみてはいかがでしょうか。