flexbox-responsive ソースコード全文

📖 解説記事を読む⬇ 一式を ZIP でダウンロード

responsive-test.html

responsive-test.html
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
        }


        header,
        footer {
            background: lightblue;
        }


        main {
            background: lightcyan;
        }


        aside {
            background: lightpink;
        }


        /* メインコンテンツ */
        .flexbox {
            display: flex;
            flex-direction: column;
            background: lightpink;
        }


        .flexbox-main {
            flex-grow: 3;
        }


        .flexbox-aside {
            flex-grow: 1;
        }


        /* 768px より広いディスプレイ(PC)に適用 */
        @media screen and (min-width: 768px) {
            .flexbox {
                display: flex;
                flex-direction: row;
            }


            main {
                order: 2;
                border-left: 1px solid white;
            }
        }
    </style>
</head>


<body>
    <header>header</header>
    <div class="flexbox">
        <main class="flexbox-main">main
            <div>main start</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>xxx</div>
            <div>main end</div>
        </main>
        <aside class="flexbox-aside">
            <ui>menus
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
                <li>menu 4</li>
                <li>menu 5</li>
                <li>menu 6</li>
            </ui>
        </aside>
    </div>
    <footer>footer</footer>
</body>


</html>