お問い合わせはコチラから

シンプルなflex boxのCSSで構築されたグリッドシステムが便利

サイト運営

HTMLサイトや自作テンプレートなどでCSSのグリッドシステムを導入しようかな?と思ったときに最初に思いつくのはBootstrapです。

ただし、Bootstrapはかなり重いです。

全ての機能は必要ないし、単純にグリッドシステムだけ欲しいのよ、という場合にはほかの選択肢があります。

色々ありますが、使ってみてよかったのはflexboxgridです。

Flex boxを実際に使った事例を学びたい

flexbox自体はIEガーという話を無視すればモダンブラウザで問題が起きることはありません。

従来、floatで構築していたほとんどの部分はflex boxで置き換える方が簡単だし、流用しやすいと思います。

Grid for layout, Flexbox for components
Learn when to use flexbox and CSS grid with examples and use cases.

グリッドシステムだけ欲しい

flexboxgrid

これが一番使いやすいと思います。

まず、grid以外の記述がないので他への影響がほとんどないです。

また、書き方などはBootstrapでお馴染みの記法なので簡単に使えます。

自分でflexboxでレスポンシブデザインのCSSを書くより全然効率が良いです。

ファイルサイズも小さい(12KB)ので読み込みのインパクトも少ないです。

使い方

CDNから読み込むだけで使えます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" integrity="sha512-YHuwZabI2zi0k7c9vtg8dK/63QB0hLvD4thw44dFo/TfBFVVQOqEG9WpviaEpbyvgOIYLXF1n7xDUfU3GDs0sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
flexboxgrid - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Grid based off of CSS3 flexbox specification - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free a...

box間のスペースを調整するのが面倒

paddingとそれを打ち消す逆marginでboxのスペースを調整しています。

どこをいじればいいのか、理解するのに時間がかかりました。

各colの左右にpaddingがされていますが、両端のcolのケアをしない代わりに、rowを親要素から左右0.5remづつはみ出させています。

こうすることで、レスポンシブでどのcolが折り返してもrowからはみ出ないようにしています。

colのスペースを調整したい場合は、この0.5remを変更すればいいです。

.row {
:
:
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
:
:
:
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

simplegrid

CSSのgridを使ったシステムのように説明されていますが、中身を見るとfloatで構成されていて、flexboxですらありません。

実際使ってみると結構癖があってなんか使いにくかった印象があります。

グリッドシステムも使えるCSSフレームワーク

グリッドシステムだけでなく、その他のパーツのCSSも欲しいよ、という場合はグリッドシステムを含んだCSSフレームワークを使うといいと思います。

milligram

Milligram - A minimalist CSS framework
Milligram - A minimalist CSS framework

bulma

Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, an...

minicss

https://minicss.org/

materialize

Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.

まとめ

自分が使いやすいグリッドシステムを一つ持っているかどうかで、急な案件への対応速度に違いが出ます。

グリッドだけ使いたいという場合は、今回ご紹介したflexboxgridを使うといいかもしれません。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました