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
↧