CSSのブレンドモードとフィルターを組み合わせて動作テストできる・「FilterBlend」
FilterBlend FilterBlendはCSSのbackground-blend-modeとfilterプロパティを組み合わせて動作テスト出来るツールです。任意の画像をアップロードしてblend-modeを設定し、filter...
Resource - CSS
Dropbox製のオープンソースSCSSフレームワーク・「Scooter」
Scooter ScooterはDropboxが提供するOSSのSCSSフレームワークです。Dropbox向けに開発した基本スタイルのSCSS及びUIフレームワークをオープンソースとしてもユーザーに公開しているようです。スタイルに関し...
任意の画像をアップロードするとCSSに変換してくれる・「img2css」
img2css img2cssは任意の画像をアップロードするだけでCSSに変換するツールです。アップロードされた画像をパースして色や形状をCSSのみで実装、コードを提出してくれます。用途は正直な所、思い浮かびませんが、技術としては凄い...
Webサイトのナビゲーション、メニュー等のチュートリアルやコードをTumblrで収集する・「navnav」
navnav navnavはCSSやjQuery等で作られたナビゲーション、メニュー等のチュートリアルやコードが書かれたWebページを集めているTumblrのサイトです。ちょっと目を引くようなナビゲーションが揃っている印象でした。コン...
CSSのみで棒グラフを作るためのチャートシステム・「chart.css」
chart.css chart.cssはCSSのみで棒グラフを作成する為のCSSチャートシステムです。上図のようなシンプルな棒グラフのみ作成可能となっています。用意されたclassやカスタムデータ属性によってパーセンテージの表示、太さ...
軽さを意識したシンプルなCSSフレームワーク・「Kickstart」
Kickstart Kickstartは軽さを重視したCSSフレームワークです。元々はKickstrapという名でBootstrapの拡張ツールだったそうですが、Ver.3で完全に独立したCSSフレームワークになったとの事です。Boo...
JavaScriptやPython、コマンドラインの使い方等を無料で学べる学習サイト・「Codecademy」
Codecademy Codecademyは対話形式でコードを学べる学習サイトです。無料で利用可能で、学習項目はHTMLやCSS、JavaScriptからPHPやRuby、Pythonの他、コマンドラインの使い方まで揃えられています。...
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の変更で簡...
レスポンシブ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対応でグリッドシステム、エレメントのポジションサポート、背景への動画導入などが主...