CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css
Post on:2017年8月9日
sponsors
レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。
そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。
Shoelace.css
Shoelace.css -GitHub
Shoelace.cssの特徴
グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。
- Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセットです。
- CSSの変数を使用しているので、カスタマイズが非常に簡単です。
- Less、Sass、または何らかの前処理は必要ありません。
- グリッドはCSS Gridを推奨します。
古いブラウザをサポートする場合は、flexboxやBootstrap-Grid-Onlyを推奨します。
サポートブラウザ
- IEや古いブラウザ（Edgeは問題ありません）を気にしない場合は、Shoelaceをそのまま使用できます。
- 古いブラウザをサポートする場合は、Mythを使用してください。
Shoelace.cssの使い方
使い方は簡単です。通常のCSSリセットのように外部ファイルとして記述するだけです。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="shoelace.css"> </head> |
イベントやアニメーションを利用する際は、JSファイルも記述します。
|
1 2 3 4 5 6 7 8 |
<head> ... <link rel="stylesheet" href="shoelace.css"> </head> <body> ... <script src="shoelace.js"></script> </body> |
CSSファイルとJSファイルは、CDNでも利用できます。
Shoelace.cssのデモ
Shoelace.cssには、Webページやアプリでよく使用されるコンポーネントを最適化するスタイルシートが揃っています。
sponsors
