・テキストを横並びにしたいけどどうしたらいいか。
・floatとかflexboxとかgridとかどれでも横並びできそうだけど聞くけどけっきょくどれ使えばいいの？
・CSSレイアウトの方法の種類と使い方の違いを知りたい。
- CSSレイアウトの手段が分かり、使いやすい方法はどれなのかとコーディング方法についてそれぞれ理解できる
実際に僕が学習して実務で使っている経験から記事を作成していますので参考になれば幸いです。
CSSレイアウトとは
コーディングの学習を始めると
要素を横並びにしたり縦並びにしたりする
ということが頻発します。下のようなWebサイトよくありますけど「ヘッダーナビゲーション」とか「About Us」の4つの要素とか横並びですよね。他にも横並びさせるポイントはいくつもあります。
またスマホ対応（レスポンシブ対応）にするときは横並びにした要素を縦に並び替えないといけません。
また「グリッドレイアウト」というレイアウトがあります。
グリッドレイアウトは、それぞれの要素をグリッド(格子)のように並べることで、きれいに整えられた印象のデザインを作るデザイン手法。こんなレイアウト。
コーディングする時Webサイトの要素を縦横と並べる方法として
- Float（フロート）
- FlexBox（フレックスボックス）
- Grid Layout（グリッドレイアウト）
- Bootstrap（ブートストラップ）
などやり方が色々あります。
僕は、
テックアカデミー「WordPressコース」を受講して「float」を使った横並び方法を学習しました。
「デジハリ×LIG」に通ったときは「Flexbox」を学習しました。
そのあとで「Grid Layout」「Bootstrap」を独学で習得しました。
時代とともにコーディングも流行り廃りがあるのね、と思ったのでまとめてみようと思いこの記事を書いています。
コーディング方法はググれば分かるのでこの記事では違いと使い分けに焦点を当てて書いていきます。
CSSレイアウト方法を比較
ざっくり比較すると
| 方法 | 特徴 | メリット |
| Float | 昔の要素横並び手法。
記述方法にクセがある |
要素を回りこませることができる |
| FlexBox | 縦、横の１次元レイアウト | 要素横並びが得意
幅が決まっていない要素を均等整列させるのが得意 |
| Grid Layout | 縦横方向２次元レイアウト
全体レイアウト ※IE11未対応 |
テーブルのように行列（縦横）を揃えることができる
サイト全体の大きな領域のレイアウト分割に向いている |
| Bootstrap |
CSSフレームワーク |
CSS記述工数が削減できる
「グリッドシステム」を覚えるとレスポンシブデザイン対応が簡単 |
となります。基本FlexBoxが使えたら大丈夫。Floatは昔作られたWebサイトで使われていたりするので記述方法を知っておけばOK。Grid Layoutは使ってみたい、と思ったらチャレンジしてみる。Bootstrap使ってコーディング進めているようであれば「グリッドシステム」利用してみる。
ではそれぞれ解説します。
「Float」を使って要素横並び
floatで横並びにした要素にclass="clearfix"をつけて
.clearfix::after {
content: '';
display: block;
clear: both;
}
を使うやり方。※overflowを使う場合もある。（この記事では概要だけお伝えします。float横並び方法はなんかややこしい、と理解してください）
- 昔の「要素横並び」方法なので古いWebサイトではよく使われている
- 新しいサイトを作るときはFloatは使わずFlexBoxなどを使う。
- Floatで要素回り込みさせることができる
ポイントは上記。自分から新しくサイトを作るときこの方法で要素横並びをすることはありません。（Web制作会社に勤めたらもしかしたらこのやり方でやってくれ、と言われるかもしれませんが）こんなやり方がある、ということを知っておくということ。古いWebサイト（FlexBoxが出てくる前に作られたサイト）で使われているから。
このサイトで概要理解可能です。
もう悩まない！CSSのfloatで起きる問題を解決する5つの方法
「FlexBox」を使って要素横並び
display:flex
のこと。
- 要素を横並びにするのに簡単
- 横並びだけでなく中央寄せや片方の端に寄せたりを２行程度の記述でできる
とにかく便利。これを知っておけば横並びレイアウト問題無し。Webデザインスクールの講師もこれだけ知っておけば横並びについては問題ない、と言っていました。とにかく習得しましょう。
まとめた記事内容としてはこの下の記事で理解可能。分かりやすいしレイアウト方法が一目で分かるシート付き。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
またゲーム形式で楽しみながらFlexBoxが習得できるサイトもありましたので紹介します。カエルを蓮の葉の上に持っていってあげる、というゲーム。
「Grid Layout」を使って行列レイアウトを作る
display: grid
のこと。
要素横並びだけでなくサイト全体のレイアウトをタイル状に配置していく、という高度なレイアウト手法。使えるとこれまた便利。
ただしIE11未対応なので要注意。まだ現時点（2020年3月時点）ではIE11でWebサイトを見てもらっている会社や個人の方も多いはずので使うときは依頼主に要確認です。
またまたこのサイトで概要理解できます。
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
習得方法としてこれまたゲーム形式でGrid Layoutが習得できる。ニンジンを育てるゲーム。
「Bootstrap」のグリッドシステムを使ってみる
これはCSS記述方法ではなくてCSSフレームワーク。CSSを記述しなくても簡単にボタンとか作れたりある程度のデザインが作れてしまうフレームワーク。
この「グリッドシステム」が便利。レスポンシブコーディングをわざわざしなくても簡単に要素を配置できてしまいます。
これを使ってコーディングする場合、横並びはブートストラップ でやっちゃいましょう、ということ。
Webデザインスクール講師もブートストラップ は「グリッドシステム」だけ覚えておけばとりあえずOK、と言ってました。
ドットインストールを一通りやれば全体理解可能。Bootstrapはそれほど難しくないです。
この記事でグリッドシステムについては理解可能。
まとめ：「FlexBox」が使えればとりあえずWebサイトは効率よく作れる
Webデザインスクール講師も
と言ってました。バリバリにかっこいいWebサイトを作っていたフリーランスの講師だったのでグリッドレイアウトは使えなくてもいいんだ、と思った記憶があります。
ただ、特徴を知って適材適所でそれぞれ使えるようになればコーディング効率も上がると思いレイアウト手法を比較してみました。FlexBoxは便利です。ただ他の方法も知っておくといいです。
とりあえずFlexBoxを習得して他の方法は「使うと効率よさそうだ」と思えるかどうか、使えると思ったら使ってみる、でいいのではないでしょうか。
僕がこの記事を簡単にでも書いた理由はテックアカデミーで「Float」を学習したから。他にも便利なレイアウト手法があるということを後から知ったので、もし知らない人がいれば知っておくとお得なので参考になるかも、と思って書いてみました。
この記事はここまでです。