[CSS]floatからFlexboxへ、新世代ブラウザへの対応を始めよう！vol.1

現在のWebデザインはスマートデバイスの普及によって小さなモニタにも柔軟に対応するレスポンシブデザインが必須となりました。他の方々も書いているように、floatやclearハックを駆使してレイアウトを組んでいたWebコーディングもこれからはCSSに書き足すだけで柔軟なレイアウトが組めるFlexboxが主流になってくるのではと考えています。

Flexboxとは

Flexboxとはボックスのレイアウト方法を決めるCSS3の機能の一つです。正確には CSS Flexible Box Layout Module といい、柔軟なボックスレイアウトを可能にする新しいCSSのレイアウトモードのことです。
例を挙げるとすれば、今まで横並びのレイアウトを組む際にはfloat、inline-block、table-cellを駆使してきましたが、Flexboxを使えば少量のコードで横並びだけでなく、中央揃え・左右揃え・均等割付など様々なレイアウトが可能です。

ちなみに、ここでいうボックスとはcontent、padding、border、marginから成り立つ要素の事を指しています。教材や他の人が作ったサイトのソースでよく見かける<div></div>がまさにボックスですね。

Flexbox対応ブラウザ

これから使う新しい機能が対象のブラウザで使用可能かをCan I use…で見てみます。

すでに2017年2月の時点で、すべてのモダンブラウザで Flexbox は使用可能です。緑色は使用可能なのですが、少し違う色合いの緑に気づきましたでしょうか？
IEの項目、IEはInternet Explorerですが、IE11で Flexbox は使用できるものの、いくつかバグがあり少し工夫が必要なようです。

Flexboxの利点

私は横並びのレイアウトに限らず、いろいろなプロパティーや学習途中のJavascriptを調べながら使っていて訳が分からなくなっていたのですが、Flexbox を使えると知った時には開放感すらありました。その利点とは…

CSS に一行スタイルを足すだけで簡単に横並び
上下左右の位置揃えが簡単
CSS だけで横並びしている要素の高さを自動で揃えれる
要素の並び順を HTML の変更無しで CSS で変えられる
カラムの横幅の指定が簡単＆柔軟

これだけでも使わなくては！と思いました。 float は上にも書きましたが、コードが煩雑になりがちで、動きについて不勉強だった頃は「あれ？他の要素が意図しない動きをしている」というような事になっていました。
また、Flexbox レイアウトは float レイアウトに比べてパフォーマンスが良いと言われています。勉強不足で完全に把握できていないのですが、関連記事を紹介します。
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 – ICS MEDIA

実際に書いて動かしてみよう！

どのくらい便利かは、言葉よりもコードで確認してみましょう。横並びと言ったら代表的なのはナビかなと…ナビゲーションメニューを作ってみましょうか。
まず以下を用意します。

See the Pen flex-nav_default by necomacustom (@tamayura) on CodePen.27739

今回はコードエディタの方でmargin: 0;とpadding: 0;、list-style: none;などのリセットをかけてあります。
HTMLのリセットについてはこちらが初心者向けにまとまっていて参考になります。

おや？HTMLの隣のボタンがSCSSになっている…これはSassというCSSのメタ（上位？）言語で Syntactically Awesome Stylesheets の略です。訳すと「構文的にすごーいスタイルシート」ですが、その内のSCSS記法というものを使っています。
話が逸れました…Sassについては別の記事にします。本当にすごいのですが、基礎を固めてから使うとその威力を実感できます（ものぐさな私は、基礎も固まってない時に使いはじめ、反対に大変な思いをしました）。

SCSSの部分をCSSで書くと以下のとおりです。

.main-nav a {	
	display: block;
	color: #fff;
	background-color: #f4a742;
	margin: 10px;
	padding: 15px;
	border-radius: 5px;
	text-decoration: none;
}

.main-nav .logo {
	background-color: #e02323;
}

.main-nav a {

display: block;

color: #fff;

background-color: #f4a742;

margin: 10px;

padding: 15px;

border-radius: 5px;

text-decoration: none;

}

.main-nav .logo {

background-color: #e02323;

}

今回は短いので、あまり代わり映えはしません。ちなみにSCSSでもCSSが書けます。これは覚えておくといいかもしれないポイントです。以後はCSSに戻しますね。

今のところ何の変哲もない縦並びのメニューが完成しました。それでは横並びにしていきます。
親要素であるulのクラス、.main-nav に display: flex; の魔法をかけると…

.main-nav {
	display: flex;
}

.main-nav {

display: flex;

}

See the Pen flex-nav1 by necomacustom (@tamayura) on CodePen.27739

横並びになりました。簡単です。

FlexコンテナとFlexアイテム

display: flex; を指定した要素は「Flexコンテナ」、Flexコンテナの直下の子要素は「Flexアイテム」と呼びます。Flexコンテナの直下の子要素であれば自動的にFlexアイテムとなり、横並びになります。横並びだけでしたら、Flexアイテムには特別な指定は不要です。

図にするとこんな感じですね。先ほどのサンプルはdisplay: flex;をつけるだけで横並びになった、というわけです。ここがFlexboxの基本となります。

上下左右を揃えてみよう！

左右の位置揃え

左右の位置揃えにはjustify-contentプロパティです。display: flex;を指定した親要素（Flexコンテナ）に追加指定します。
justify-contentは子要素であるFlexアイテムの水平方向の配置を設定するプロパティです。

右寄せ

justify-contentの値を flex-end にすると、要素が右端に並びます。

.nav　{
	display: flex;
	justify-content: flex-end;
}

.nav　{

display: flex;

justify-content: flex-end;

}

See the Pen flex-nav_flex-end by necomacustom (@tamayura) on CodePen.27739

左寄せ

今度は左寄せにします。justify-contentの値を flex-start にすると、要素が左端に並びます。

.nav　{
	display: flex;
	justify-content: flex-start;
}

.nav　{

display: flex;

justify-content: flex-start;

}

See the Pen flex-nav_flex-start by necomacustom (@tamayura) on CodePen.27739

中央寄せ

左右寄せとくれば、次は中央寄せです。justify-contentの値を center にすると、要素が中央に配置されます。

.nav　{
	display: flex;
	justify-content: center;
}

.nav　{

display: flex;

justify-content: center;

}

See the Pen flex-nav_center by necomacustom (@tamayura) on CodePen.27739

均等割付

均等割付は2つの値があります。space-between と space-around です。両方とも子要素であるFlexアイテムを等間隔に配置しますが、space-between はFlexコンテナの両端に両端のFlexアイテムがくっつくのに対し、space-around はFlexコンテナの両端にもそれぞれ間隔が空きます。これから見てみましょう。

space-between

.nav　{
	display: flex;
	justify-content: space-between;
}

.nav　{

display: flex;

justify-content: space-between;

}

See the Pen flex-nav_space-between by necomacustom (@tamayura) on CodePen.27739

space-around

.nav　{
	display: flex;
	justify-content: space-around;
}

.nav　{

display: flex;

justify-content: space-around;

}

See the Pen flex-nav_space-around by necomacustom (@tamayura) on CodePen.27739

違いがわかりましたでしょうか？

上下の位置揃え

左右の位置揃えにはalign-itemsプロパティです。これもdisplay: flex;を指定した親要素であるFlexコンテナに追加指定します。
align-itemsは子要素であるFlexアイテムの垂直方向の配置を設定するプロパティです。
サンプルとして、以下を作ってみました。

See the Pen align-items_default by necomacustom (@tamayura) on CodePen.27739

上下中央揃え

このサンプルの親要素にalign-items： center;を設定します。

.pbox{
	display: flex;
	align-items: center;
	padding: 20px;
	border: 1px solid #999;
}

.pbox{

display: flex;

align-items: center;

padding: 20px;

border: 1px solid #999;

}

See the Pen align-items: center by necomacustom (@tamayura) on CodePen.27739

文字が上下中央の位置に配置されましたね。高さの異なる要素でも垂直に中央に揃えることができます。Flexboxがなかった頃はdisplay: table-cell;で揃えていました。親要素にdisplay: table;、直下の子要素にdisplay: table-cell;とvartical-align: middle;を設定します…もちろんFlexboxと比べてコードが多くなります。
align-itemsプロパティの値は center 以外にもありますが、今日はここまでです。
お疲れさまでした。align-itemsのプロパティは次回も説明します。

まだ私がHTMLを勉強し直し始めた2年前は、横並びはfloatやinline-blockでの制御をしている教材やオンライン学習がメインでした。ここ1年ほどで自分の必要な情報を集めているとよく見かけるようになってきた…ということは普及が進んでいるということだと考えてもいいのかもしれません。書く手間・プロパティを思い出す手間を減らし、ファイルはできるだけ軽くして読み込みを早くするメリットは大きいと思います。ねこま（@necomacustom）でした。

Flexboxとは

Flexbox対応ブラウザ

Flexboxの利点

実際に書いて動かしてみよう！

FlexコンテナとFlexアイテム

上下左右を揃えてみよう！

左右の位置揃え

右寄せ

左寄せ

中央寄せ

均等割付

space-between

space-around

上下の位置揃え

上下中央揃え

Share

Leave a comment