Blog

ブログ

CSS Gridとatomic Designで1年間サイトを作ってみたよ その3

CSS Gridとatomic Designで1年間サイトを作ってみたよ その3

CSS GridとAtomic Designで1年間サイトを作ってみたので、感想や経験をまとめてみました。第3弾は、CSS Gridの話です。

目次

CSS Gridをどんな案件に使ったの?

WordPressのCMS案件や、コーポレートサイトの案件、店舗サイトの案件やWebアプリ案件などに使っています。
クライアントは出せませんが、Atomicモジュールを作って納品した案件もありました。

1年間、Atomicモジュールを使ってWebサイトを作ると、モジュールの問題点も出てきますね。

汎用的なものを作りたい

複数のサイトでできるだけモジュールの再生産を行わないようにして作りました。

なぜかというと、同時進行で複数のサイトを作っていたからです。
うまく設計すれば、色や余白を工夫すれば再利用が簡単です。今後は、再利用をしやすいことをメインに設計していくことが重要になると思います。

当面は、CSS Gridはあえてキーワード指定は使わない

古いブラウザ、古いプロパティを使ってるIE/ Edgeへの配慮です。

印刷用スタイルへの考慮

印刷用スタイルは、SafariとChromeでブレイクポイントの解釈が違います。本格的な印刷用CSSも書きましたけど、この部分は、Atomicモジュールを完全に印刷用に限定するのがいいと思います。

まとめ

CSS Gridとatomic Designでサイトを作るとき、やはりコードは共通化できますが、管理が煩雑になります。クラスを増やすか、スタイルを増やすか、タスク処理方法の違いで口数が全然違うので最初の設計を十分考慮しましょう。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. nth-child/nth-of-typeで最初の行の項目のみ1行で書く方法

    nth-child/nth-of-typeで最初の行の項目のみ1行で書く方法

  2. iPhone X向けに対応するポイントをまとめてみたよ

    iPhone X向けに対応するポイントをまとめてみたよ

  3. Safari 8でCSS transformを指定した時にちらつくときの解消法

    Safari 8でCSS transformを指定した時にちらつくときの解消法