かちびと.net

CSSのみで絵を描き、アニメーションさせる、というプロジェクトのご紹介です。アルファベットの数だけ投稿するみたいですね。

CSSのテストを行うためのリソースを収集、公開しているWebサイトがあったのでメモ。どのようにテストを行うか、なぜ行うか、ツールの紹介などなど。

レスポンシブなナビゲーションのパターンをまとめているResponsive Navigationのご紹介です。選択肢が複数あるとコンテンツにも合わせやすくなるので覚えておきたいところです。

Twitter Bootstrapベースに作られたシンプルでフラットなデザインのUIキット・Flat UIのご紹介。今年はこの手のスタイルよく見かけますけど、確かに見やすいですね。

各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・

有用なCSSフレームワークだけをコレクションしているサイト・FRONT-END CSS FRAMEWORKSがあったのでご紹介です。有用かどうかは個人差がありそうですけど、これかから探す方は覗いてみるといいかも。

一式揃ったCSS/HTMLフレームワーク・Worklessのご紹介です。テーブルやボタン、フォームなどなど、Webサイトでよく使われるエレメントのスタイルも用意されています。シンプルで良さそうです。

ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。

軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。

フォームやボタン、タブやテーブルなどなど、複数のエレメントに対応したCSSフレームワークのご紹介です。見た目も分かりやすくシンプルで、個人的にとっても好みだったのでメモも兼ねてご紹介します。

レスポンシブなグリッドレイアウトの
CSSフレームワークのご紹介。SCSSを
使って構築されています。入れ子や
フルワイドにも対応。列の計算には
ネガティブマージンを使用している
そうです。

無料で使えるアイコンフォントの
ホスティングサービスのご紹介。
Google Web Fontsのような形を
目指しているとの事なので応援も
兼ねてご紹介します。

予め決められた特定のテキ
ストを絵文字に変換する、
というスクリプトのご紹介。
WordPressなどのCMSでも一部
で導入されていますね。需要
は高いほうじゃないかと。

SASSとMedia Queriesを使用して
構築されているCSSフレームワー
ク・Centurionのご紹介。綺麗目
で使いやすそうじゃないかなと。
僕はLESS使ってるので使う事は
無さそうですけど・・

BootstrapやHTML5 Boilerplateの
影響を受けているCSSフレームワ
ークで、軽量でミニマルな設計を
目指したSubstrataのご紹介です。
余計なものを省きつつ、HTML5に
対応していないブラウザへも配慮
されています。

シンプルなCSSフレームワーク・
Reuze.meのご紹介です。無駄な
記述を省いた軽量なフレーム
ワークみたいですね。同じよう
なものはいくらでもあります
ので選択肢の一つとして。

CSSスプライト用の画像とCSSを
自動で生成してくれる、という
Webツールのご紹介。作るのは
結構面倒なのでこうして自動化
してくれると楽で助かりますね。

CSSによるタイポグラフィ例を収集しているギャラリーサイトのご紹介です。英語圏のサイトなので日本語はまた別ではありますが、これはこれで参考になるかと思います。まだ数が少ないので今後に期待。

人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。

シンプルなCSSフレームワークです。グリッドレイアウトとレスポンシブに対応。同じようなフレームワークはいくつもありますが選択肢が多いにこした事は無いのでご紹介。

Metroライクなデザインに変更
できるTwitter Bootstrapのテ
ーマ・Cosmoのご紹介です。
Bootstrapはレイアウトが上手く
出来ているので見た目を変える
だけで十分かもしれないですね。

著作権放棄のレスポンシブWeb
デザイン対応CSSフレームワー
ク、rwdgridのご紹介。自由に
使っていいフレームワークは
非常にありがたい存在ですね。
ありがたく使わせて頂きます。