More than 3 years have passed since last update.

【CSSフレームワーク Zurb Foundation】"グリッドシステム"を使った超シンプルなサンプルを作りました。

Posted at 2021-07-11

CSSフレームワーク『Zurb Foundation』の"グリッドシステム"を使ったサンプルについてです。

普段から使っているCSSフレームワーク『BootStrap』ではWebページを作成する際にページの幅を12等分に分割にした"グリッドシステム"が採用されています。

"グリッドシステム"を採用する利点として"シンプルに開発・改修がしやすい"ことが挙げられます。

さらにエンジニアにとっても"グリッドシステム"は共通の概念ですので、Bootstrapに限ったことではなく他のCSSフレームワークでも活用できると考えたのがきっかけです。

めちゃくちゃシンプルですが、本題の"Zurb Foundation"で"グリッドシステム"でサンプルを作りました。

sample.html

<!DOCTYPE html>
<meta>
<head>
<!--Foundation 共通-->
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
<!--個別ファイル-->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
    <!--グリッドシステムを導入する--> 
    <div class="grid-container fluid">
        <!--/* grid-xプロパティを使って1行分のスペースを取得する*/ -->
        <div class="grid-x"><!-- grid-margin-x-->
            <!--/* small -*プロパティを使ってカラム幅を分割・取得する。*/-->
            <div class="cell small-4">
                <!--Label「名前（姓）」エリア-->
                <div class="firstNameLabelArea">
                    <label class="fistNameLabel">
                        名前（姓）
                    </label>
                </div>
                <!--input「名前（姓）」エリア-->
                <div class="firstNameInputArea">
                    <input type="text" class="firstNameInputClass" id="firstNameInput" />
                </div>
            </div>
            <!--/* small -*プロパティを使ってカラム幅を分割・取得する。*/-->
            <div class="cell small-4">
                <!--Label「名前（名）」エリア-->
                <div class="lastNameLabelArea">
                    <label class="lastNameLabel">
                        名前（名）
                    </label>
                </div>
                <!--input「名前（名）」エリア-->
                <div class="lastNameInputArea">
                    <input type="text" class="lastNameInputClass" id="lastNameInput" />
                </div>
            </div>
            <div class="cell small-4">
                small-4分のカラムスペース
            </div>
        </div>
    </div>
</body>

</html>

なじみのあるBootstrapだけでなく他のフレームワークも触ることで両者の違いやクセは、把握しておくことが重要だと感じました。

【参考サイト】
■公式 Zurb Foundation XY Grid
URL：https://get.foundation/sites/docs/xy-grid.html

■foundation6とSassでサイトをつくる XY Gridとは　V6.4から導入されたXYグリッドを使いこなす方法
URL：https://foundation-site.com/archives/535.html

■stack overflow Deciding when you need a new grid-x “row” in Foundation 6 XY grid
URL：https://stackoverflow.com/questions/50538650/deciding-when-you-need-a-new-grid-x-row-in-foundation-6-xy-grid

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up