Inc.コラムパターンで覚えるflexbox(1)─ナビゲーションメニューの作成─2016-04-07cssCSS3で追加された新機能の中に“flexbox”があります。名前を聞いたことがある人もいるかもしれません。使ったことがある人はそんなに多くないかもしれません。このflexbox、CSS3の新機能の中でも大物中の大物、普及すればいままでのCSSを使ったレイアウトの手法が大きく変わります。現在、flexboxは、IE11以降の主要なブラウザーでサポートされていて、「もうそろそろ使っていい」舞台は整っています。実はW3Cが提唱している仕様がほかのCSS3の機能と比べてもユルく、ブラウザによって若干の表示上の誤差があります。flexbox自体が高機能でいろいろなことができるおかげで、どんなことができるのかわかりづらいところがあり、マスターしづらいのも事実。そこでこのシリーズでは、flexboxの機能自体をマスターすることよりも、典型的なデザイン・レイアウトをいくつか見ながら、「この場合はこう書いたらよい」というパターンを紹介していきます。flexboxってなに?いままで、HTML/CSSのレイアウトモードには、次の4つがありました。ブロック・レイアウトモード──<div>など、display:block;が指定されたボックスのレイアウトモード(レイアウトの規則)です。標準的なHTML/CSSのレイアウトモードです。インライン・レイアウトモード──テキストや、<strong>などdisplay:inline;が指定された要素のレイアウトモードです。テーブル・レイアウトモード──テーブルのレイアウトモードです。ポジション・レイアウトモード──CSSのpositionを使用したレイアウトモードです。座標を指定して、絶対的な位置でボックスを配置します。flexboxレイアウトモード──新しいボックスの配置方法です。大雑把にいえば、次のようなことができるようになります。ボックスを配置するための新しいレイアウトモードボックスを横・縦に並べることができる(floatの代わりに使える)子要素の幅や高さを自動的に伸縮させて、子要素を親要素のスペースにぴったり収めることができるflexboxは、いままでの4つのレイアウトモードに比べても高機能で、ここに挙げた以外にも自在なボックスのレイアウトができますが、はじめから全体像を把握しようとするとかなり複雑です。そこで、今回の記事は、ちょっとずつflexboxに慣れることができるように、複数回に分けて典型的な使い方の例を紹介します。flexboxでナビゲーションを作成するflexboxでまず最初に取り組めるのは、Webページのナビゲーションの作成でしょう。ナビゲーションは、flexboxの基本的な機能のみを使って実現することができます。flexboxの基本機能:ボックスを横に並べるボックスを横に並べるのはflexboxのもっとも基本的な機能のひとつです。この基本機能を使って、<li>を横に並べてナビゲーションを作成します。floatを使うよりもずっと簡単だと感じることでしょう。ナビゲーションは、これまでは<ul><li>とfloatを使って実現していました。floatの代わりにflexboxを使うとより少ないCSSの行数で書くことができて、しかも柔軟なレイアウトが可能です。基本的なナビゲーションを作ってみましょう。HTMLはこのとおり。href="column.html">Column</a></li></ul></nav>CSSはこのようにします。flexboxの部分にはマーカーを付けてあります。#8cae47;}このように、CSSに2行書くだけで、各<li>が自動的に、左揃えで横に並んでくれます。floatと違って<li>の幅を指定する必要もないし、親要素(<ul>)でフロート解除をする必要もありません。CodePen.ナビゲーションを右揃えにする次に、左揃えだったナビゲーションを右揃えにしてみます。<ul>のCSS(display:flex;を書いているのと同じところ)に1行追加するだけです。HTMLに変わりはありません。none;}...結果はこちら。CodePen.ナビゲーションを中央揃えにするナビゲーションの各リンクを中央揃えにするには、justify-contentの値をcenterにするだけです。none;}...はい。中央揃えになりました。CodePen.ナビゲーションのリンクを均等配置にするここまで、ナビゲーションの各リンクを左揃え、右揃え、中央揃えにしてきました。flexboxではさらに、これらリンクの<li>を、親要素の<ul>のスペースをいっぱいに使って均等に配置することもできます。none;}...結果はこちら。CodePen.ここまでのまとめここまで、flexboxレイアウトモードを使うために、3つのCSSを使ってきました。ここで簡単に、いままで使ってきたCSSの機能と役割を紹介しておきます。display:flex;flex-flowjustify-contentdisplay:flex;display自体は前からあるCSSです。flexboxレイアウトモードで要素を配置するには、まず、親要素に「display:flex;」を指定します。これが「子要素はflexboxレイアウトモードでボックスを配置するよ」という宣言になります。ナビゲーションの場合、flexboxレイアウトモードを使って各リンク項目の<li>を横に並べたいので、その親要素──<ul>──に「display:flex;」を指定している、というわけです。display:flex;flex-flowまた、display:flex;を指定した親要素には「その子要素をどうやって配置するか」を指定する各種CSSプロパティを追加することができます。flex-flowはそうした子要素の配置方法を指定するCSSのひとつで、「flex-flow:row;」とすると、ボックスが横一列に並ぶようになります。flex-flowには、子要素を横に並べるrowのほかに、縦に並べるcolumnなどがありますが、row以外のものについてはまた後で紹介します。ちなみに、flexboxレイアウトモードで配置される子要素のことを「flexアイテム」と呼びます。row;justify-contentさらに、flex-flow:rowで横に並んだ子要素(flexアイテム)を、左揃えや右揃えなどに配置するには、justify-contentを使います。justify-contentも、display:flex;を指定した要素に指定します。*/左右に分けて配置するflexboxでは、flexアイテムを左右に分けて配置することもできます。in」という項目が1つ増えたとします。in」だけナビゲーションの右側に配置し、ほかの各リンク項目は左揃えにすることもできます。HTMLには1つ<li>を追加します。追加した<li>にはclass="login"と、class属性をつけておきます。--></ul></nav>CSSはこのとおり。基本的な、ナビゲーションを左揃えに配置するCSSをベースにしています。追加した部分にはマーカーをつけてあります。in」と、そのほかのリンクが左右に分かれて配置されているのがわかります。CodePen.ボックスを縦に並べるここまで、flexアイテムを横に並べるテクニックをいろいろ紹介してきましたが、縦に並べることも簡単です。そこで、ナビゲーションを左揃えに配置するHTML/CSSをベースにして、スマートフォンのハンバーガーメニューのように、各リンクを縦に並べてみます。HTMLには<li>をひとつ追加して、そのリンクテキストとしてを追加します(FontAwesomeを使用)。追加した<li>にはclass="hamburger"と、class属性をつけておきます。</ul></nav>CSSは、ナビゲーションを横に並べていた「flex-flow:row;」の「row」を「column」にするだけ。することで、横に並んでいたflexアイテムが縦に並ぶようになります。変更箇所にはマーカーをつけてあります。none;}...表示結果はこちら。class="hamburger">に、align-selfという、flexbox関連のCSSを適用します。align-selfは、flexアイテムの行揃えを個別に指定するためのCSSで、ここではその値をflex-end、右揃えにしています。CodePen.ここまできたら...レスポンシブ!ここまで来たら、当然レスポンシブデザインにしたいですよね。基本的には、画面サイズが小さいときはflex-flowを「column」に、大きければ「row」に切り替えるだけでOKです(もちろんハンバーガーは隠します)。例ではわかりやすいようにブレイクポイントを550pxに設定してあります。ブラウザウィンドウを広げたり狭めたりして試してみてください。CodePen.Flexboxを取り上げている関連書籍わたしが書いた本の中では、『HTML5&CSS3デザインレシピ集』『いちばんよくわかるHTML5&CSS3きちんと入門』で、Flexboxを詳しく取り上げています。このサイトの書籍紹介ページでは、これらの本に掲載されているサンプルも確認することができます。祐東Web/アプリケーションUIデザイナー、エンジニア。アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。執筆を数多く手がける。株式会社Studio947代表。実例サンプル60Amazon.co.jpアソシエイト。