格安SIMのサイトをfloatからflexboxに切り替えてリニューアルしました

2016-05-16

格安SIMのサイトをリニューアルしました。その時にCSSのfloatレイアウトからflexレイアウトに変更したので、その経緯のメモです。

floatからflexboxへ

格安SIMに関するサイトを運営しています。

格安SIMでスマホお得道

「格安SIMを使えばスマホ代が毎月5,000円安くなりますよ」ということを紹介するサイトです。

サイトのリニューアル前は、主に次の2つでレイアウトの構成を作っていました。

Bootstrap
floatレイアウト

BootstrapはTwitter用のテンプレートで、主に段組やブロック配置に利用していました。Bootstrapならレスポンシブデザインに対応しているので、簡単にスマホのレイアウトにも対応できるのがメリットです。これを使ってヘッダー部やメイン、サイドバー、フッターなどのパーツをレイアウトしていました。

Bootstrapでは表現しにくい所もあるので(例えばナビゲーションの細かい配置)、それに関してはfloatレイアウトを使ったレイアウトにしていました。

flexboxの簡単な説明

当初サイト全体をリニューアルする予定はなかったのですが、Bootstrap4というBootstrapの新しい開発バージョンが出てきていたので、それを試してみました。

ほとんど現行のBootstrap3と同じ使い方ですが、Bootstrap4では主に次の点が変更されています。

単位がpxからremへ
lessからsassへ
cardレイアウト
flexboxに対応

注目なのが「flexboxに対応」です。Bootstrap4では、オプションでflexboxレイアウトを利用できます。Bootstrapの説明では

Why flexbox?

In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

* Easy vertical alignment of content within a parent element.
* Easy reordering of content across devices and screen resolutions with the help of media queries.
* Easy CSS-only equal height columns for your grid-based layouts.

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

上のようなメリットを挙げています。簡単に言うと「要素の配置が簡単になるよ」ということです。flexboxに関しては次の記事が詳しいです。

CSS3のFlexboxを基本から理解して、使い倒そう！

ただ、flexboxにもデメリットがあって、古いブラウザーがサポートしていないことと、iPhoneなら『-webkit-』が必要なことです。

Can I Use

上のCan I Useで『flex』の対応状況を見ると、現時点(2016年5月)ではプレフィックス付で95%程度のシェアに対応できそうです。IE10以前は非対応かバグがありますので、導入できないケースもあると思います。

CSSを記述するときに毎回プレフィックスを付けるのは大変なので、ぼくの場合はgulpのgulp-autoprefixerというツールで自動的にプレフィックスを付けてくれるようにしています。gulp関連はこちらが詳しいです。

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

導入まではいろいろと大変ですが、sass記述で変更すると勝手にcssへ展開して自動的にベンダープレフィックスを付けてくれるので楽々です。

Bootstrap4ではなく自作CSS

当初は先ほど紹介したBootstrap4で作業していました。ところが、作業を続けるうちに

htmlにBootstrap記述を強制されてしまう
独自CSS部がかなりの量となり、Bootstrapの恩恵が少ない

上のようなデメリットも出てきました。

そこで、思い切ってBootstrap自体をやめてしまって、自分でCSSを全部書くことにしました。そして出来上がったのが、先ほどの格安SIMのサイトです。

コンセプトとしてfloatを一切使わないようにしています。(これはちょっと失敗かも。画像に文章を回り込ませる表現がfloatを使いたいです。例：WordPressの”alignleft”,”alignright”)

Bootstrapのメディアクエリをそのまま流用して、次のように画面サイズによってレイアウトを定義しています。

@media (min-width: 34em){ ... }
@media (min-width: 48em){ ... }
@media (min-width: 62em){ ... }
@media (min-width: 75em){ ... }

画面幅が34emより小さいものを先に記述してスマホ用とし、48em以上をiPad(シングルレイアウト)、75em以上からサイドバー付きの段組にしています。

flexboxのいい点、悪い点

まずはflexboxのいい点です。

要素の高さを揃えやすい
段組が容易

要素の高さを揃えやすい

まず1つ目が、『要素の高さ』を揃えやすいことです。ぼくの場合は次のパターンでよく困っていました。

画像と説明文の高さ方向が揃わない
カード型を並べると高さがバラバラ
Webフォントが文字の中心とずれる

例えば、1つ目の「画像と説明文の高さ方向が揃わない」というのは、次のようなときです。

20160516_2

画像の右側に説明文を配置すると、画像の高さ方向の中心と説明文の高さ方向の中心を揃えようとするといろいろと苦労します(Javascriptやtransformなど)。こういう時にflexboxなら次の2行で要素の中心が揃います。

.box{
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="box_img"><img src="foo.jpg"></div>
  <div class="box_txt"><p>...</p></div>
</div>

flexboxが要素の高さを自動的に計算して、cssのプロパティに従って配置をしてくれるからです。

カード型のレイアウトやWebフォントも同様で、高さを揃えたい要素をひとつの親要素で囲むだけで、要素の中心を揃えたり高さを揃えることが簡単にできます。

段組が容易

次にflexboxのメリットが段組です。例えば、スマホはシングルレイアウト、PCはメインコンテンツとサイドバーの2段組レイアウトなどです。

floatより辛くない「flexbox」でざっくりレイアウト

段組に関しては、上の記事がわかりやすいです。

簡単に言うと、次のように要素を指定するだけで、勝手に横幅を調整してくれます。

flex: 1

例えば、次のような一般的なレイアウトとします。

<header></header>
<div class="content">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>
<footer></footer>

これをスマホではシングルレイアウト、PCでは2段組(サイドバーは20rem(320px相当))とすると

/* スマホ部 */

/* PC部 */
@media (min-width: 75em){
  .content{
    display: flex:
  }
  .content .main{
    flex: 1;
  }
  .content .sidebar{
    width: 20rem;
  }
}

上のようにCSSを記述すると、flex:1;のところが勝手に幅を計算してくれます。sidebarは固定幅を指定しましたが、%でも問題ありません。さらに、sidebar自体にもflex:1;とすると子要素で数値に応じた比率で幅が決まります。

floatレイアウトでは、幅をwidthの%などで計算してもmarginなどの影響でカラム落ちしたりしていたのが、これで解決できます。

このように、floatレイアウトではやりにくかったレイアウトがflexboxを使うことで解決できるようになってきました。時代の変遷でtableレイアウトからfloatレイアウトになったように、今後はfloatレイアウトからflexboxレイアウトへと変わっていくと思います。

flexboxの悪い点

flexboxの悪い点と言えば、対応できないブラウザがあることです。IE10より以前は非対応であったり、バグがあります。また、iPhoneのSafariなどはベンダープレフィックスが必要です(iOS8以前)。

flexboxに非対応のブラウザも現時点で5%ほどありますし、プレフィックスが必要なブラウザも10%あります。

このflexboxに非対応のブラウザをどう考えるかが、flexboxを使う/使わないの分かれ道です。最新のスマホ(iOSやAndroid)はもちろん対応しますし、IEの最新IE11やEdgeも対応していますので、これからの新しいブラウザに関しては問題ありません。

「古いブラウザをどこまで視野に入れて開発するか」というのが1つのテーマになりそうです。

おわりに

flexboxの説明しているサイトは見かけますが、「『flexbox』でこのサイトをデザインしました」という記事はあまり見かけません。そこで、「格安SIMサイトをリニューアルしたときにflexboxを使いました」という記事を書けば、なにかしらの参考になるかもと思った次第です。

格安SIMでスマホお得道

実は上のサイト、内容を一新しようとしてコンテンツがスカスカです(^^;

今回のflexboxのお話は、サイトリニューアルの目的でいうとあまり重点事項ではありません。リニューアルの本命は「コンテンツの充実」で、ランキングや格安SIMの検索で「格安SIMを選びやすいサイト」が一番の目的です。

ただ、今回のレイアウトのお話をメモとして書けば、「いろんな人の目に触れるはず」→「じゃあコンテンツをきちんと作らねば」→「がんばる」という自分へのプレッシャーという意味で記事にしました。

いろいろと不備があると思いますので、その際はTwitterあたりでご意見いただけるとありがたいです。

あっかぎのページ