blog.鶯梭庵

二〇一七年弥生卅一日金曜日

■ Flexbox でウィンドウに中央配置する２つの方法の比較 [/links]

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

ここ２年ほど、ブログを細々と更新するだけで、私のウェブサイトをほったらかしにしていたら、新しい仕様がどんどん使えるようになっていて、すっかり浦島太郎になってしまった。自分のウェブサイトをいつまでも古いまま置いておくわけにもゆかないので、勉強を始めた。

新しい仕様の中でも使い勝手がよいものに、CSS の Flexible box（Flexbox）がある。要素を横に並べて高さを揃えたり上下左右の位置を揃えたりが簡単にできる。

Flexbox は、コンテンツ全体をブラウザウィンドウの中央に表示するのにも使える。従来はいろいろ面倒なことをしなければならなかったが、Flexbox を使うと簡単にできる。

次のような HTML があるとする。

<body>

<div id="container">

... コンテンツ

</div>

</body>

ここで、コンテンツをウィンドウの中央に表示するには、まず body 要素の高さをウィンドウいっぱいにする（幅は自動的にウィンドウの幅になる）。そのためには、html 要素と body 要素の両方に height:100%; と指定する。次に、body 要素を Flexbox の親要素にする。

html {

height: 100%;

}

body {

height: 100%;

display: flex;

}

この後は２つの方法がある。１つは、body 要素に justify-content:center; と align-items:center; を指定する。つまり、こうなる。

html {

height: 100%;

}

body {

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

Flexbox を解説しているウェブページを見ると、この方法を紹介しているところが多い。たいていの場合はこれでうまくいくのだけれど、実はうまくない場合がある。子要素（この場合 #container）の幅または高さが親要素よりも大きい場合だ。

上記の指定では、親要素と子要素の中心がそろえられる。子要素の方が大きいと、収まらない部分は上下または左右に均等にはみ出る。下や右にはみ出た部分はスクロールすれば見えるが、上や左にはみ出た部分はどうしても表示されない。これでは困る。MDN のページに詳しい説明がある。

もう１つの方法は、子要素に margin:auto; を指定する。つまり、こうする。

html {

height: 100%;

}

body {

height: 100%;

display: flex;

}

#container {

margin: auto;

}

子要素の幅または高さが親要素より大きい場合は、左右または上下のマージンの値は 0 になる。一方、子要素の幅または高さが親要素より小さければ、左右または上下のマージンが等しくなり、中央に配置される。これなら、子要素が小さくても大きくても問題なく表示される。

ところが、例によって IE にバグがある。子要素の高さを明示的に指定しない場合、上下のマージンが常に 0 になり、上下方向に中央配置されない。子要素で height を指定してやればよい話だが、要素の幅や高さを指定しなくてもよいのが Flexbox の肝だ。

というわけで、どちらの方法にも問題がある。しかし、第１の方法の問題はユーザーがコンテンツを見れないことであるのに対し、第２の方法の問題は、いまや少数派となった IE で見た目がよろしくないということだから、前者の方が深刻だ。私は、自分のウェブサイトで IE をサポートする気がさらさらないので、第２の方法を使おうと思う。

[このカテゴリをまとめて読む。] [最新の記事を読む。]

羽鳥公士郎

blog.鶯梭庵

二〇一七年 弥生 卅一日 金曜日

■ Flexbox でウィンドウに中央配置する２つの方法の比較 [/links]

カテゴリ

最新記事

二〇一七年弥生卅一日金曜日