Resource - CSS

Web開発者やWebデザイナー向けのリソースのキュレーションサイト・「The Starter Kit 」

The Starter Kit The Starter KitはWeb開発者やWebデザイナーの為のリソースを収集しているキュレーションサイトです。CSSやJavaScript、Photoshopに関わるリソースなどが多く、収集され...

Google製のマテリアルデザインコンポーネントライブラリ・「Material Design Lite」

Material Design Lite Material Design Liteはマテリアルデザイン向けのGoogle謹製コンポーネントライブラリです。Webサイトのテンプレートも用意されていました。特定のライブラリにも依存しておら...

軽量でミニマルなCSSフレームワーク・「Thao Framework」

Thao Framework Thao Frameworkは軽量でミニマルなCSSフレームワークです。必要最低限のUIコンポーネントとスタイルが用意されており、すぐに開発を始めることが出来そうです。RWD対応ですがclassの変更で簡...
Ads

レスポンシブWebデザイン対応のミニマルなUIフレームワーク・「KATHAMO」

KATHAMO KATHAMOはRWD対応のミニマルなCSSフレームワークです。モバイルフレンドリーなフォームやテーブル、リストやアラートなどのコンポーネントが用意されていますが、本当に必要最低限しか用意されていない印象です。個人的に...

CSSのボックスモデルをインタラクティブに視覚化してくれる・「angular interactive box-model diagram」

angular interactive box-model diagram angular interactive box-model diagramはCSSにおけるボックスモデルをインタラクティブに視覚化してくれるツールです。サイズ...

CSSのA to Zを動画で学べる学習サイト・「A to Z CSS」

A to Z CSS A to Z CSSはデザイナーや開発者が動画でCSSの基本から応用までを学べる学習サイト。本サイトでフロントエンド開発スキルを磨いて欲しいとの事。当然全て英語になっていますが、英語がダメでも動画によっては映像だ...

SASSのように使えるJavaScript・「Stylus」

Stylus StylusはSASSのように簡易的な記述でCSSを生成してくれるJavaScriptです。シンプルなコードでコンパイルしてくれるので取っ付き易い印象です。とはいえ、これだけLESSやSASSが普及している中で敢えて本ス...

Foudationをマテリアルデザインに対応させた・「Material Foundation」

Material Foundation Material Foundationは人気のCSSフレームワーク・Foudationをマテリアルデザインに対応させたCSS/JSのセットです。日本ではBootstrapほど馴染んでいない印象で...

HTMLをmarkdown記法で書いたようなスタイルにするCSS・「i-love-markdown.css」

i-love-markdown.css i-love-markdown.cssはHTMLをmarkdown記法で書いたようなスタイルにするCSSです。上図はh1やtableタグで書いていますが、このようにmarkdown記法に見せるC...

フラットデザイン向けのボタンを手軽に作成出来るOSS・「2.5dBUTTON」

2.5dBUTTON 2.5dBUTTONはフラットデザイン向けのボタンを手軽に作成出来るツールです。国産で、OSSとしてもソースコードが公開されています。サイズやカラー、テキスト、アイコンなどを調整してHTMLとCSSをコピペすれば...

OSSで公開されたGitHub製のCSSフレームワークとガイドライン・「Primer」

Primer PrimerはGithubが公開したオープンソースのCSSフレームワークです。主要な各コンポーネントのスタイルに加えて、Githubにて使用されているスタイルガイドも同梱されています。ビルドにはSCSS、Jekyll、G...

BootstrapよりもミニマルなCSSフレームワークを目指した・「SkyBlue CSS Framework」

SkyBlue CSS Framework SkyBlue CSS Frameworkは当初より肥大化したBootstrapに疑問を感じ、もう少しライトに使える事を目指したミニマルなCSSフレームワークです。必要最低限なコンポーネント...

フレキシブルでパワフルなRWD対応のSCSS/CSSフレームワーク・「BLACKHOLE」

BLACKHOLE BLACKHOLEは柔軟性とカスタマイズ性を重視したレスポンシブWebデザイン対応のSCSS/CSSフレームワークです。モジュール型で基本的には軽量なサイズを保てるように設計しているそうです。コンポーネントもひと通...

emやpx、remなど、CSSで使う単位のサイズを比較出来る・「CSS Ruler」

CSS Ruler CSS Rulerはemやrem等のCSSで使う単位のサイズを比較出来るツールです。値を変えることでどの単位がどう変化するかを確認出来るようになっています。また、それぞれのエレメントにマウスホバーすれば簡単な説明も...

軽量でベーシックなCSSフレームワーク・「Open Style」

Open Style Open Styleは軽量でベーシックなタイプのCSSフレームワークです。normalize.cssを併用するみたいですね。SASS対応でグリッドシステム、エレメントのポジションサポート、背景への動画導入などが主...

任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」

CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...

マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」

Materialize Materializeはマテリアルデザインを取り入れたRWD対応のCSSをフレームワークです。Sass対応で、各種コンポーネントも揃っていました。ベーシックで良いんじゃないでしょうか。ライセンスはMITとの事。...

閲覧中のWebページに使われているCSSを解析してくれるChromeエクステンション・「CSS Dig」

CSS Dig CSS Digは閲覧しているWebページに使われているCSSを解析してくれるChromeエクステンションです。どのプロパティがどのように扱われているかを分析し、左カラムにリストにして返してくれます。クリックすれば右カラ...

CSSのみで作れるシンプルなチャート・「cssplot」

cssplot cssplotはシンプルなチャートを作る為のCSSです。指定されたカスタムデータ属性に値をいれると、その数値にあった長さでグラフを描けます。仕組みは単純に、1%毎にCSSを書いているだけなので小数点には非対応です。これ...

SASS向けのカラーライブラリ・「Color Me SASS」

Color Me SASS Color Me SASSはSASS用のカラーライブラリです。彩度や明度等の指定をする事でカラーコードを書ける、というもの。色の混合も出来るみたい。一部の方には便利かも。ライセンスは・・・ ☺ライセンス、と...

1KB以下でオールドブラウザにも対応した軽量CSSフレームワーク・「Min」

Min Minは1KB以下で構成された軽量なCSSフレームワークです。(※圧縮した状態のサイズとなります)IE5.5などのオールドブラウザにも対応しているとの事・・・ですが、確認する術が自分には無いので未検証です。Bootstrapの...

フロントエンド開発の為のコンポーネント集・「FORMSTONE」

FORMSTONE FORMSTONEはフロントエンド開発のためのコンポーネントを集約しているWebサイトです。RWD対応のCSSグリッドシステムやドラッグ&ドロップで出来るアップローダー、モーダルウィンドウ、カルーセルなど様々なコン...
Ads