レスポンシブ デザイン タイル表示のサンプル

puresccでタイル表示のサンプルを作成してみました。
該当部をコピペし、画像を差し替え頂ければ簡単に使用できます。
ご自由にお使いください。

<!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>サンプル5</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">
        <style>
            .l-box {
                padding: 1em;
            }
            .index-box {
                padding: 0 1em;
            }
        </style>
        <!-- CSS インポート END -->
        </head>
    <body>
    <!-- グローバル START -->
    <div class="content">
         <!-- 会社情報 およびメニュー background-colorのところで背景色を変更-->
        <h2 id="horizontal-menu" class="content-subhead">サンプル会社<a href="#horizontal-menu" class="content-link"></a></h2>
        <div class="pure-menu pure-menu-open pure-menu-horizontal" style="background-color: #FFD464;">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">会社概要</a></li>
                <li class="pure-menu-selected"><a href="#">技術紹介</a></li>
                <li  style="background-color: #FFD464;"><a href="#">お問い合わせ</a></li>
            </ul>
        </div>
        <br>
        <!-- ヘッダー -->
        <header>
            <h2>タイル</h2>
        </header>
        <!-- メイン -->
        <p>画像でタイル</p>
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <div class="index-box">
                    <div class="pure-u-1 l-centered">
                        <img src="./build/image.jpg">
                    </div>
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="index-box">
                    <div class="pure-u-1 l-centered">
                        <img src="./build/image.jpg">
                    </div>
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="index-box">
                    <div class="pure-u-1 l-centered">
                        <img src="./build/image.jpg">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <p>CSSでタイル-1</p>
        <div class="pure-g-r">
            <div class="pure-u-1-2">
                <div class="index-box" style="height:250px;width:250px;background-color: #B7B7B7;color:#ffffff;">
                aaaaaa
                </div>
            </div>
            <div class="pure-u-1-2">
                <div class="index-box" style="height:250px;width:250px;background-color: #B7B7B7;color:#ffffff;">
                bbbbb
                </div>
            </div>
        </div>
        <br>
        <p>CSSでタイル-2</p>
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
                aaaaaa
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
                bbbbb
                </div>
            </div>
            <div class="pure-u-1-3">
                <div class="index-box" style="height:150px;width:150px;background-color: #2FCDB4;color:#ffffff;">
                bbbbb
                </div>
            </div>
        </div>
        <br>
        <!-- フッター background-colorのところで背景色を変更-->
        <div class="footer">
            <div class="pure-g-r" style="background-color: #FFD464;">
                <div class="pure-u-1-3">
                    AAAAA
                </div>
                <div class="pure-u-1-3">
                    BBBBB
                </div>
                <div class="pure-u-1-3">
                    CCCCC
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

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


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket