任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」
CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...
Resource - 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グリッドシステムやドラッグ&ドロップで出来るアップローダー、モーダルウィンドウ、カルーセルなど様々なコン...
Webサイトでよく用いられるパーツやコンポーネントのデザインフレームワーク・「Refills」
Refills RefillsはWebサイトでよく用いられるUIのソースをパッケージ化したフレームワークです。Bourbonを開発したthoughtbotが公開したフレームワークのようですね。ドロップダウンやリスト、フッター、アイキャ...
CSSで書かれたフラットデザインなiPhoneやiPad・「devices.css」
devices.css devices.cssはフラットデザインなiPhoneやiPadをCSSで書くためのコードです。シンプルで見やすいので、モニタ部分に画像をはめ込んでモックアップにしたりもできそうですね。利用シーンは多くはないで...
JSONやHTML、CSSなど様々なコードの整形ツールをまとめた・「Code Beautify」
Code Beautify Code Beautifyは様々なコードの整形を行えるツールをまとめたWebサイトです。コードごとに整形ツールは分けられています。対応コードはHTML、CSS、JSON、XML、JavaScript、RSS...
Twitter Bootstrapで作られた様々なテンプレートを配布する・「Start Bootstrap」
Start Bootstrap Start BootstrapはTwitter Bootstrapで使える様々なテンプレートを配布するWebサイトです。ギャラリーサイト用、フルスクリーンなレイアウト、ブログ風など多岐に渡ります。スター...
シンプルで軽量なレスポンシブWebデザイン対応CSSフレームワーク・「KNACSS」
KNACSS KNACSSはシンプルで軽量なCSSフレームワーク。レスポンシブWebデザインにも対応しています。チュートリアルページを確認する限りでは素敵な性能のフレームワークなのですが、CC-BYなので使いどころはある程度限られるか...
入力したHTMLのclassやidを元にCSSの雛形を作る・「extractCSS」
extractCSS extractCSSは入力されたHTMLのclassやidを元にCSSを作るWebツール。Githubにてソースも公開されています。Bear CSSと同じようなツールですが、extractCSSは作成時にclas...
デバイス別にレイアウトを作れるレスポンシブWebデザイン用CSS作成ツール・「Responsive Web Css」
Responsive Web Css Responsive Web Cssは、iPhoneやiPad、PCなどのデバイスの画面サイズ毎にレイアウトを作れるレスポンシブWebデザイン向けのCSS作成ツール。ボックスはカラムを追加して幅を...
フラットなWebサイトを構築する為のフロントエンドフレームワーク・「Furatto」
Furatto FurattoはフラットなWebデザインのサイトを迅速に構築する為のフロントエンドフレームワークです。Sassを使ってるみたい。ボタンやフォーム、テーブルからページネーションやツールチップなどのコンポーネント、カルーセ...
CSSのセレクターの知識を再確認できるクイズ・「Tricky CSS Selectors Quiz」
Tricky CSS Selectors Quiz Tricky CSS Selectors QuizはCSSのセレクタに関するクイズサイトです。表示されえたセレクタの影響を受ける列をクリックするだけの簡易的なものですがこういう形で見...
HTML5やCSS、jQueryなどのAPIのドキュメントサイト・「DevDocs」
DevDocs DevDocsはHTML5やCSS、jQueryなどのAPIに関する情報をまとめたサイトです。かなりの情報量で綺麗に纏められているのでとても探しやすい印象でした。キーワードを入力するだけで即時に候補を抽出するインスタン...
モバイルファーストなCSSフレームワーク・「Cardinal」
Cardinal CardinalはモバイルファーストなCSSフレームワークです。必要最低限の設計で残りはユーザーがカスタマイズする、という事を念頭に置いて作られたようです。この手のフレームワークは数多に存在しますが、選択肢が大いに越...
SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」
Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...
CSSのみで書かれたアイコンのセット・「CIKONSS」
CIKONSS CIKONSSはCSSのみで書かれたアイコンのソースを配布するWebサイトです。IE8までなら同じ表示が可能のようです。アイコンの種類もそれなりにあるみたい。実用性は置いておいて、どこかでコードが役に立つかもしれないと...
CSSライブラリをコレクションしている・「CSSDB.co」
CSSDB.co CSSDB.coはCSSライブラリをコレクションしているWebサイトです。似たようなサイトを紹介した気もしますが・・割と評価の高めなライブラリに絞ってるっぽいですね。Githubへのリンクもあります。 CSSD...
Webサイトのサイトマップを作る為のCSS・「SlickMap CSS」
SlickMap CSS SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.xmlではなく、人用のサイトマップ）。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...