レスポンシブなサイトを作るためにNo.2

本項ではグリッドレイアウトの使用方法をご説明します。

まず2列を均等割する方法ですが、ハイライト行のように「class=”pure-g”」を使用します。
そして間隔は「”pure-u-1-2″」で指定しています。
上記ですと、全体を2とし、1を左セルに割り当てています。

均等割付しない方法は77行目です。
こちらは全体を4とし、左セルに1を右セルに3を割あてています。

<!DOCTYPE html>
<html>
    <head>
        <!-- メタ情報 START -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width">
        <meta name="robots" content="index,follow,noarchive" />
        <meta http-equiv="content-language" content="ja" />
        <!-- メタ情報 END -->

        <title>サンプル1</title>

        <!-- CSS インポート START -->
        <link rel="stylesheet" href="./build/pure-min.css">
        <link rel="stylesheet" href="./build/baby-blue.css">
        <link rel="stylesheet" href="./build/main.css">
        <!-- CSS インポート END -->
        </head>
    <body>
    <!-- グローバル START -->
        <!-- メイン START -->
        <!-- メニュ -->
        <div class="pure-menu pure-menu-open pure-menu-horizontal">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="pure-menu-selected"><a href="#">aaaaa</a></li>
                <li><a href="#">bbbbb</a></li>
                <li><a href="#">ccccc</a></li>
                <li><a href="#">ddddd</a></li>
            </ul>
        </div>
        <!-- ヘッダー -->
        <div class="header">
                <h1>グリッドレイアウト</h1>
        </div>
        <!-- 本文 -->
        <div class="content">
            <h2 id="horizontal-menu" class="content-subhead">1) 2列-均等割付</2>
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <p>1/2</p>
                </div>
                 <div class="pure-u-1-2">
                     <p>2/2</p>
                </div>
            </div>
            <br>
            <h2 id="horizontal-menu" class="content-subhead">2) 3列-均等割付</2>
            <div class="pure-g">
                <div class="pure-u-1-3">
                    <p>1/3</p>
                </div>
                 <div class="pure-u-1-3">
                     <p>2/3</p>
                </div>
                <div class="pure-u-1-3">
                    <p>3/3</p>
                </div>
            </div>
            <h2 id="horizontal-menu" class="content-subhead">3) 4列-均等割付</2>
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <p>1/4</p>
                </div>
                 <div class="pure-u-1-4">
                     <p>2/4</p>
                </div>
                <div class="pure-u-1-4">
                    <p>3/4</p>
                </div>
                <div class="pure-u-1-4">
                    <p>4/4</p>
                </div>
            </div>
            <h2 id="horizontal-menu" class="content-subhead"4) >2列</2>
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <p>1/4</p>
                </div>
                 <div class="pure-u-3-4">
                     <p>3/4</p>
                </div>
            </div>
        </div>
        <!-- メイン END -->
    <!-- グローバル END -->
    <script src="./build/1.6.1"></script>
    </body>
</html>

【上記コードのデモはこちら】