blog.鶯梭庵

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

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

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

新しい仕様の中でも使い勝手がよいものに、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;

}


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


html {

height: 100%;

}

body {

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}


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

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

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


html {

height: 100%;

}

body {

height: 100%;

display: flex;

}

#container {

margin: auto;

}


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

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

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

さんのコメント:

・HTMLタグは使えません。

・電子メールアドレスを含めないでください。

・コメントには全角文字を含めて下さい。

・長さの上限はおよそ800字です。

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

羽鳥 公士郎