2017年02月23日(木)
【カスタムプロパティを有効活用する】モジュラーCSSで柔軟なグリッドを作る方法
CSSにはカスタムプロパティという便利な機能があり、コードのモジュラー性を高めたり再利用をしやすくすることができます。
この記事ではそうしたカスタムプロパティの利用法と利点について解説します。
・モジュラーCSSで柔軟なグリッドを作る
CSS Gridを使えないプロジェクトなどを手がける場合、Flexboxベースのグリッドの構築はCSS活用のいい練習になります。カスタマイズ性と再利用性が非常に高いモジュールを作ることができるのです。ここではシンプルに実装してみましょう。
ここからどうモジュラー性を高めればいいでしょう？まずは全てを注意深く名前空間化しましょう。BEMやSMACSSなど手法は様々ですが、ここではシンプルさを保つためクラスとカスタムプロパティの名前に接頭辞myをつけることにしましょう。またいくつかのデフォルトとコンポーネントも追加していきます。
my-gridがカプセル化され、他に依存しない独立したモジュールとなりました。実際に使う場合はどうすればいいでしょうか？
これだけ...
0
1
0
3author:
SeleQt（セレキュト）
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。
‹ PREV
シンプルでベーシックなレスポンシブWebデザインのグリッドレイアウト・「Spacegrid CSS」
NEXT ›
【カスタムプロパティを有効活用する Part2】JavascriptとCSSをつなげる方法
Ads
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。SeleQt（セレキュト）の記事『【カスタムプロパティを有効活用する】モジュラーCSSで柔軟なグリッドを作る方法』についてまとめています。
この記事は特にMac・サーバ・LINEについて書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のSeleQt（セレキュト）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとSeleQt（セレキュト）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
