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

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ではなく、人用のサイトマップ)。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成す...

Andoroidアプリ用プロトタイプを作成する為のHTML/CSSフレームワーク・「Fries」

Fries Frieshは、HTML/CSS/JavaScriptベースで作る、Androidアプリ用プロトタイプ作成フレームワーク。RATCHETに刺激されてAndorid向けも作成したくなった、との事らしいです。ライセンスはMIT...

Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」

Topcoat TopcoatはAdobe社が提供するOSSのCSSフレームワークです。シンプルで使いやすいUIでレスポンシブWebデザインにも対応しています。モバイル版はタップしやすいようにエレメントの高さをやや高くしてくれてるのも...

フラットなデザインでよく使われてる色をまとめている・「Flat UI Colors」

Flat UI Colors Flat UI Colorsはフラットなデザインで良く用いられている色をまとめたWebサイトです。確かに見かける色合いはこんな感じですね。コンテンツに合うようなら導入も考えたいですけどその機会は今の所無さ...

SassのコードをCSSに即時変換・「SassMeister」

SassMeister SassMeisterはSass記法で書いたコードを即時CSSに変換するツールです。左に書き込めばCSSが右側に表示されます。OSSとしてGithubでも公開されています。Rubyで書かれているようですね。 ...

JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」

Editr Editrは、ブラウザでJavaScriptやHTML、CSSを動作確認出来るオープンソースのソフトウェアです。jsfiddleライクな環境を作成出来ますが、ユーザー登録、保存、Gist等に送るなどの機能の無い、シンプルな...

ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」

Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...

CSSのショートハンドを解除してから整形する・「FESS」

FESS FESSはCSSのショートハンドを解除して整形するWebツール。解除する機会は一般的にはあまり無いかも知れない&まだベータ版なので優れた精度では無いけど、珍しいので。精度に関しては、例えば background:red u...
Ads