[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital

レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。

レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。

Ocssipital
Ocssipital -GitHub

補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。

• CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

• Ocssipitalの特徴と使い方
• 基本のグリッド
• ビューポートごとにカラムのサイズを変更
• カラム間の溝のサイズ、左右どちらにつけるかも可能
• デスクトップでは表示、スマホでは非表示の設定も簡単

Ocssipitalの特徴と使い方

MITライセンスで、商用利用、修正、配布、サブライセンスも許可されています。

Ocssipitalの特徴

• Sassベース
• Flexxboxの柔軟なグリッドをサポート
• レスポンシブ対応（3種類のディスプレイサイズ、Retinaディスプレイ）
• ブレイクポイントの変更可能（デフォルトは520px, 1000px 1001px）
• class名のカスタマイズが可能
• 溝や空白も含みます

Ocssipitalの使い方

使い方は簡単で、外部スタイルシート「ocssipital_flexbox.css」を記述するだけです。

スタイルシートはクライアントのプロジェクトにそのまま利用してもよし、ブレイクポイントやclass名をプロジェクト用にカスタマイズしてもよしです。

Ocssipitalで基本のグリッドを作成

Ocssipitalは、使いやすい12カラムのグリッドがベースです。

デモページ

12カラムを組み合わせることで、下記のようにいろいろなカラムを作成できます。

• 9, 3
• 6, 6
• 2, 2, 8
• 3, 3, 3, 3
• 5, 5, 2
• 4, 4, 4

グリッドの実装は、カラム分の数字を使ったclass名を使用します。
「9, 3」のグリッドは、下記のようになります。

ビューポートごとにカラムのサイズを変更

ビューポートの設定は3種類、それぞれclass名に加えて利用できます。

• -s: 520px以下
• -m: 1,000px以下
• -l: 1,001px以上

通常は「4, 4, 4」のカラムで、小さいスクリーンは「12, 6, 3」のカラムにするといったことも簡単にできます。

カラム間の溝のサイズ、左右どちらにつけるかも可能

カラム間の溝もclass名で簡単に設定できます。

デスクトップでは表示、スマホでは非表示の設定も簡単

ビューポートのサイズごとに、表示する・表示しないもclass名で設定できます。