CSS3のflexboxを使ってフッターを固定

3180 ワード
flexbox HTML CSS CSS3 HTML5 HTML テキストリンク

Webサイトのレイアウトを作成するにはmargin: 0 auto;したりとややこしかったのですが、flexboxであればbootstrapなどのCSSフレームワークしか使った事がない自分が簡単に画面下にフッターを固定出来ました。

caniuse.comによると現在のflexboxの対応状況は最新バージョンのすべてのブラウザが対応しています

画面下にフッターを固定

最終的にこのようにフッターを画面下に固定します

Htmlはこのようになります、シンプルです

<body>
    <div id="container">
        テキスト
    </div>
    <footer>
            <a href="">Contact Form</a>
            <a href="">その他</a>
    </footer>
</body>

次はcssです。flexboxを使用する事をブラウザに伝えるためにbody部分にdisplay: flex;と記述します。縦軸方向にflex-direction: colum;センター寄せalign-items: center;します。そしてビュポートの高さの最小サイズを100%min-height: 100vh; にしてcontainerを膨らませてflex-grow: 1;フッターを画面下に押しやります

body{
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}
#container{
    flex-grow: 1;
}

フッターの中身のリンクを均等に配置したいのでflexboxを宣言display: flex;してからjustify-content: space-around;で均等に配置します。width:100%;で横幅いっぱいに広げて完成です。

footer{
    display: flex;
    justify-content: space-around;
    width: 100%;
}

これでレイアウトは完成です。後は見栄えを良くして最終的に以下のソースコードになりました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
<!--
body{
    margin: 0;
    background-color: #f5f8fa;
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}
#container{
    background-color: #fff;
    min-width:320px;
    flex-grow: 1;
}
footer{
    background-color: #000;
    display: flex;
    justify-content: space-around;
    width: 100%;

}
footer a{
    color: #fff;
    padding: 10px;
    text-align: center;
}
-->
</style>

</head>
<body>
    <div id="container">
        テキスト
    </div>
    <footer>
            <a href="">Contact Form</a>
            <a href="">その他</a>
    </footer>
</body>
</html>

最後に

flexboxを使ってサイトを作成したのでもしよろしれば見てください
似ているタレントを画像検索するサイトです
http://talent.oldjpg.com/