Resource - CSS/HTML

軽さを意識したシンプルなCSSフレームワーク・「Kickstart」

Kickstart Kickstartは軽さを重視したCSSフレームワークです。元々はKickstrapという名でBootstrapの拡張ツールだったそうですが、Ver.3で完全に独立したCSSフレームワークになったとの事です。Boo...

CSSで作られた様々なボタンをTumblrで紹介する・「CSS Buttons」

CSS Buttons CSS ButtonsはCSSで作られたボタンを紹介するTumblrです。アニメーションエフェクトのあるボタンはGifアニメで紹介されています。基本的にはCodePenへのリンクも貼られていますのでコードの確認...

flexboxを使ったシンプルでフレキシブルなCSSフレームワーク・「cssPlus」

cssPlus cssPlusはflexboxをベースにして構築されたフレキシブルでシンプルなCSSフレームワークです。各主要ブラウザにも対応しています。迅速で手軽な開発をサポートしたい、との事。ライセンスはMIT。 cssPl...
Ads

レスポンシブWedデザイン対応のスタイルガイドを作成出来るOSS・「Styleguide」

Styleguide StyleguideはWebサイトのスタイルガイドを作成出来るツール。OSSとして公開されています。RWDにも対応できるように、リサイズ機能も付与。動作デモを見たほうが早そうですね。ライセンスはMIT。 S...

Markdown向けのレスポンシブWebデザイン対応UIフレームワーク・「Markdown UI」

Markdown UI Markdown UIはMarkdown記法で構築出来るRWD対応のUIフレームワークです。UIのスタイルはフレームワークらしく、極めてシンプルなものになっていますので自分好みにカスタマイズする形で使用する感じ...

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フレームワークです。モバイルフレンドリーなフォームやテーブル、リストやアラートなどのコンポーネントが用意されていますが、本当に必要最低限しか用意されていない印象です。個人的に...

Twitter Bootstrapの有料/無料テンプレートを配布する・「ShapeBootstrap」

ShapeBootstrap ShapeBootstrapはBootstrapのテンプレート配布サイトです。有料と無料のものが用意されていますが、無料版も結構な数があるようです。ダウンロード出来るだけでなく、開発者による販売も可能なの...

Bootstrapの為のカード型UIフレームワーク・「Bootcards」

Bootcards BootcardsはBootstrapの為のカード型UIフレームワークです。カード型UIとは最近TwitterやGoogle等が提唱し始めたスタイル(?)です(参照:Twitterカード、Google Now カー...

ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」

Gentallela GentallelaはベーシックなBootstrap Adminテンプレートです。ゴチャゴチャしておらず、使いやすそうな印象でした。チャートやカレンダー、フォーム等だけでなく、請求書やデータグリッドなどのスタイル...

シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」

Outline OutlineはシンプルでクリーンなCSSフレームワークです。モバイルファースト設計のレスポンシブWebデザイン対応で、tableやタブ、ボタンなどの各UIコンポーネントもひと通り揃えられています。もちろんこれらもRW...

RWD対応のシンプルなUIキット・「Poly」

Poly See the Pen Poly – A simple, modular UI kit built with Sass by Guil H (@Guilh) on CodePen. PolyはレスポンシブWebデザイン対応...

SASSで構築された軽量なフロントエンド開発フレームワーク・「Penguin」

Penguin PenguinはSASSで構築されたフロントエンド開発の為の軽量スターターキットです。OSSとして公開されています。必要最低限のコンポーネントも揃えられており、RequireJS併用でモジュールの管理も可能との事。個人...

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...

HTML5ベースのノベルゲームを実装出来る国産ゲームエンジン・「O₂ Engine」

O₂ Engine O₂ EngineはHTML5ベースのノベルゲームエンジンです。HTML5なのでブラウザはまだ選ぶものの、デバイスを気にせず作れるのは素敵ですね。本ゲームエンジン開発者が提供するノベルゲームサービスのノベルスフィア...

CSSのみで作られたローディングアニメーションのセット・「Loaders.css」

Loaders.css Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになり...

セマンティックなフロントエンドフレームワーク・「mice」

mice miceはセマンティックなフロントエンド開発の為のRails製フレームワークです。設計も複雑な箇所はなく、主要なUIコンポーネントもひと通り揃えられている印象でした。アイコンはお馴染みのFont Awesomeが使われていま...

アニメーションエフェクトのパターンと、その実装コードをコレクションしている・「AniCollection」

AniCollection AniCollectionはよく見かけるアニメーションエフェクトと、そのエフェクトを実装する為のコードをコレクションしているWebサイトです。各エレメントにマウスホバーするとエフェクトを見ることが出来ます。...

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

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

SVG製の国旗を手軽に表示出来る・「SassyFlags」

SassyFlags SassyFlagsはSVGで作られた各国の国旗を手軽に表示出来るライブラリです。空要素に指定されたclassを振るだけで国旗を表示する事が出来ます。SVGが使われていますので調整もしやすいですね。国旗はAmaz...
Ads