TokyoFacebookTwitterHatenaPocketfloatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。テーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。Boxレイアウトモジュール)を、すべてのCSSグリッド非対応ブラウザーに提供します。Flexboxのブラウザーサポートは充実しているので、ほとんどの場合に有効です。Flexboxの利点Flexboxの強みをまとめました。ページにコンテンツを上下左右どの方向にでも揃えて配置できるページ内要素の並び順を変更できる使える領域の広さに合わせて各部品を(Flexboxの名の通り)伸縮して、コンテナ要素や要素同士の位置関係を基準にして整列できる複数カラム(列)の高さを、コンテンツの差に関わらず合わせるレイアウト(equal-height)が簡単にできる以下のレイアウトでFlexboxのプロパティと可能性を解説します。</footer></div>最初に、.mainクラスの中の要素、<nav>、<aside>、および<dev>を、横一列で配置します。Flexboxを使わない場合、3つの要素をfloatにしても、思った通りのレイアウトできないこともあります。カラムの高さがコンテンツに応じて変わるので、すべてのカラムに同じ高さを設定するか、技を駆使してそろえる必要があるのです。Flex要素にしてみようFlexboxの核は、コンテナ要素に対してdisplayプロパティ値をflexに指定して、コンテナの子要素がすべて「flex要素」にすることです。flex要素にはいくつかの便利なプロパティが備わっています。要素の幅は未指定でも自動でスペースを埋めて、横一列に並びます。flexを設定すると、子要素.contentは自動で<nav>と<aside>の間に収まるように収縮します。計算が不要で便利です。おまけに3つの要素は魔法のように揃って同じ高さになるのです。flex;}詳細は以下のデモを見てください。並び順の変更:FlexboxのorderプロパティFlexboxが持つもう一つのプロパティは、要素の並び順を簡単に操作する機能です。上記レイアウトを製作したところ、クライアントから「.contentは<nav>の前に配置してほしい」と言われたとします。通常ならHTMLを開いて要素の並びを変更しますが、flexboxならCSSだけで達成できます。.contentのorderプロパティを-1に設定したカラムが1番目になります。-1;}ほかのカラムの順番に指定を加える必要はありません。明示的にorderプロパティで各カラムの順番を明記したいなら、.contentのorderを1にして、<nav>を2に、<aside>を3に設定します。HTMLから独立したCSSによるレイアウト指定まだクライアントは満足しません。今度はページの最初に<footer>が来て、<header>よりも前に置いてほしいとの要望がありました。Flexboxの出番です。class="example">に設定します。Flex要素のコンテナを入れ子にできるのです。<header>、<main.main>、<footer>は上下に積み重なっているので、まず垂直方向を設定します。columnと指定するだけです。加えて<footer>にはorderの値に-1を設定すると、ページ上で先頭に表示されます。-1;}横方向に並んだ要素を縦方向に並べ直したり、あるいはその逆にしたい場合は、flex-directionプロパティを使い、columnかrowに設定します(初期値はrow)。キーボード操作(Tabキーなど)でWebサイトを閲覧するユーザーもいます。HTML内に書かれた要素の並び順と実際の画面表示の並び順が食い違うと、サイトの使い勝手が格段に悪化します。Orderを参照してください。Flexboxで要素の位置を揃える方法Flexboxは、子要素を簡単に水平や垂直方向に揃えられます。Flexコンテナ内の要素に、align-itemsを指定すると、同じ位置に一律で揃えられます。別々に位置を揃えたいときはalign-selfを使います。要素の位置揃えの方向はflex-directionプロパティの値により異なります。row(要素が水平方向に並ぶ)なら、位置揃えは縦方向に調節でき、column(要素が垂直方向に並ぶ)なら、位置揃えは水平方向に調節できます。各図形のalign-selfプロパティに適切な値を入れる。flex-end;}試しに下記デモで親コンテナ要素のflex-directionプロパティをrowからcolumn、あるいはその逆に切り替えると、前述の位置揃え方向が変わることが分かります。親コンテナ要素内のすべての要素を同じ基準で位置揃えするなら、親コンテナ要素に対してalign-itemsプロパティを使います。使える値は、center、flex-start、flex-end、stretch(初期値。複数要素の大きさがコンテナ要素に合わせて調整されて並ぶ)、baseline(コンテナ要素のベースラインに合わせて一直線に並ぶ)です。center;}親要素のflex-directionプロパティの値のrowとcolumnを変えて、align-itemsの値による結果の違いを確認してください。要素の左右寄せや均等割り付け位置揃えのプロパティはjustify-contentもあります。スペースの中で複数の要素を均等に配置したい場合に便利です。使える値は、center、flex-start、flex-end、space-between(両端をぴったり合わせて残りを均等割り付け)、space-around(等間隔に配置され、両端にも同じくスペースができる)です。単純なHTMLテンプレートの<main>要素には、<nav>、.content、<aside>の3要素がありました。これらはページの左側に押し付けられるように位置します。3つの要素の間には少し隙間を空けて、ページの左端と右端は空けない場合は、親コンテナクラス.mainのjustify-contentプロパティにspace-betweenを設定します。space-between;}値をspace-aroundにし、違いを確認してください。上記デモでは<header>要素内の文字も、justify-contentプロパティ(水平方向にセンタリングするため)とalign-items(垂直方向にセンタリングするため)の値をcenterにして、中央に寄せています。center;}Flexboxで要素の大きさの比率を操作するflexプロパティは、flexコンテナ内のほかの要素を基準に要素の長さを調節できます。flexプロパティは、下記の各プロパティのショートハンド(略記)にあたります。flex-grow:コンテナ内にあるほかのflex要素と比較して、コンテナ要素の大きさが変化した際にその要素が伸長する割合を係数で指定flex-shrink:コンテナ内にあるほかのflex要素と比較して、コンテナ要素の大きさが変化した際にその要素が縮小する割合を係数で指定flex-basis:要素の長さ。2を設定し、残り2つのカラムは1のままにします。flexプロパティの使い方に、上記flex-grow、flex-shrink、flex-basisを設定することも可能ですが、本記事の範疇を超えるため割愛します。参考資料さらにFlexboxを学びたいなら、以下の資料を参考にしてください。フォームのレイアウトはFlexboxで超簡単に実装できる最後にWebサイトの要素の位置を操作したいならFlexboxを使えば仕事はずっと楽になります。Flexboxは鉄壁です。これまでの妥協策や、折り畳みコンテナ、そのほか奇妙な方法をすべて過去のものにしてくれます。本記事は2013年2月4日の記事を更新したものです。Krammer10年以上の経験を持つWebデザイナーで、現在は小さな広告代理店を営んでいます。CSS3の詳細ガイドcss3files.comの所有者です。既婚者で、6歳の息子の父親であり、映画愛好家。彼の作品はchriskrammer.comで見られます。