CSS Gridを使ってみたい人にぴったり！さまざまなレイアウトをシンプルなHTMLで実装できる -iota
Post on:2017年12月12日
sponsors
CSS Gridを使ったレスポンシブ対応のレイアウトを簡単に実装できる超軽量フレームワークを紹介します。
シンプルなレイアウトから、複雑なレイアウトまで、ブレイクポイントごとにレイアウトを定義することができます。ブレイクポイントはもちろん、カスタマイズできます。
iotaの特徴
-
- 必要なclassは一つだけ
- このフレームワークで使用するclassは一つだけです。CSS Gridを使ったさまざまなレイアウトを実装するために、いくつかの修飾子が用意されています。
-
- 584 bytes
- このフレームワークは超軽量のスタイルシートです。使用しないものを取り除くと、更にファイルサイズは減少します。
-
- 無限の柔軟性
- スタイルシートのコードはCSS Gridとそのすべての機能をカスタムプロパティで結合することによってもたらされ、使用されていないclassを無駄にすることなくレイアウトの自由度を確保します。
サポートブラウザ
CSS Gridをサポートする以下のブラウザに対応しています。
- Edge 16+
- Firefox 52+
- Chrome 57+
- Safari 10.1+
- Opera 44+
IEをサポートする必要がある場合は、フォールバックを用意する必要があります。
iotaの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link href="iota.css" rel="stylesheet" type="text/css"> </head> |
Step 2: 実装
基本となるHTMLです。コンテナに.gridを指定します。
|
1 2 3 4 5 6 |
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> |
どのようなレイアウトにするかは、CSS変数を使用します。
|
1 2 3 |
<div class="grid" style="--cols-lg: 3; --cols-xl: 3;"> <!-- grid items --> </div> |
CSS変数はまとめて、classにして利用することも可能です。
|
1 2 3 4 5 6 7 8 9 10 |
<style> .custom { --cols-lg: 3; --cols-xl: 3; } </style> <div class="grid custom"> <!-- grid items --> </div> |
iotaのデモ
iotaを使用して、CSS Gridでどのようにレイアウトを実装するか見てみましょう。
デモ: 1/9
まずは、コンテナに「.grid」を指定します。
デモ: 2/9
コンテナに「--cols-lg: 2;」を与えると、lg（1080px）用に2カラムのレイアウトが完成です。iotaではCSS変数を使用して、異なるブレークポイントごとにレイアウトを定義することができます。
デモ: 3/9
アイテムには独自のカスタムプロパティが用意されており、X軸とY軸の両方向のレイアウトを制御できます。
デモ: 4/9
各アイテムにスタイルを定義することで、それぞれ独自のスタイルを適用できます。
デモ: 5/9
「minmax()」を一緒に、「auto-fit」や「auto-fill」を使用すると、ブレークポイントではなくサイズに基づいてアイテムがレイアウトされます。
デモ: 6/9
アイテム間にスペースを与えて配置するには、「justify-content」と「align-content」を使用します。
デモ: 7/9
さらに「justify-items」と「align-items」は、グリッド全体のアイテムコンテンツを方向付けできます。
デモ: 8/9
アイテムのポジションを調整するには、「justify-self」と「align-self」を使用します。
デモ: 9/9
このように複雑なレイアウトも簡単に指定することができます。
sponsors
