cssやプログラミング

Webページのタイトルに未読数等を動的に追加表示する軽量スクリプト・TitleNotifier.js

Webページのタイトルに未読数等を動的に追加表示する軽量スクリプト・TitleNotifier.jsのご紹介。メールやSNSサイトでよく見るやつですね。良さそうだったので備忘録として。

CSSのみでアニメーション絵を作成/公開するプロジェクト・CSS A/Z

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

タッチデバイスにも対応の、要素をドラッグ&ドロップでソートできる軽量スクリプト・Sortable

要素をソートできるスクリプトのご紹介。タッチデバイスにも対応しており、軽量で非依存型となっています。なかなか便利そうですね。
Ads

Twitter Bootstrap向けのUIキットを複数配布する・PixelKit-Bootstrap-UI-Kits

Twitter Bootstrap向けのUIキットを配布するプロジェクトが素敵だったので備忘録。何種類か用意されており、どれもクオリティの高いものとなっています。

Google Mapのカラー見本とコードをまとめている・Snazzy Maps

Google Mapのカラー見本と、変更する為のコードをまとめているWebサイト・Snazzy Mapsのご紹介です。Webデザインに合わせてGoogle Mapのデザインも変更しておきたいですね。

CSSのテストを行うためのリソースをまとめている・csste.st

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

フリップエフェクト付きのローディングインジケーターを実装するスクリプト・Flipload.js

フリップ(引っくり返す)エフェクト付きのローンディングインジケーターを実装する、というライブラリのご紹介です。目立つのでロード中というのをしっかり明示できそうです。

レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms

RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。

画像内の部分的な明度を判定して、重ねたエレメントにclassを付与するライブラリ・BackgroundCheck

画像の中の明度を部分的に判定し、そこに重ねられたエレメントにそれぞれclassを与える、というライブラリのご紹介。技術的に面白かったので備忘録です。

Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.js

Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.jsのご紹介。シートを元にグラフや地図などを作成出来るみたいです。

レスポンシブWebデザインに対応するナビゲーションのパターンをいくつかまとめている・Responsive Navigation

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

デザインテーマのカスタマイズツールも用意されているオープンソースのフロントエンドフレームワーク・UIkit

カスタマイズツールも用意されたOSSのフロントエンドフレームワークのご紹介。名前は同じなので誤解されそうですが、Appleのアレとは関係ありません。

商用でも無料の、合字を利用してアイコンを実装するWebフォント・MONO SOCIAL ICONS FONT

合字を利用してアイコンを表現できるWebフォント・MONO SOCIAL ICONS FONTのご紹介です。Open Font License(OFL)なので商用でも無料で利用する事が出来ます。

Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI

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

各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks

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

有用なCSSフレームワークをまとめた・FRONT-END CSS FRAMEWORKS

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

緩いライセンスで提供された、モバイルファーストなWebサイト制作用フレームワーク・Kraken

モバイルファーストなWebサイトの制作向けに作られたフレームワークです。ライセンスはあまり聞きなれないWTFPLというもの。かなり緩いので使いやすいのでは無いかと思います。

様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO

様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。

Subtle Patternsのパターン画像を閲覧中のサイトの背景として表示確認できるブックマークレット・SubtlePatterns Bookmarklet

使いやすいデザインのパターン画像を公開してくれているサービスのSubtle Patternsの画像を閲覧中のWebサイトの背景として表示確認が出来る、というブックマークレットです。愛用している方は如何でしょう。

各種コンポーネントのスタイルも用意されたレスポンシブWebデザイン対応フレームワーク・Groundwork

タブやフォーム、ボタンなど、各種コンポーネントのスタイルも用意されているレスポンシブWebデザイン対応のフレームワークのご紹介。SASSを使って構築しているそうです。レイアウトも数種用意済みです。

フォームやボタンなど、良く使われるエレメントのスタイルも揃ったCSS3+HTML5フレームワーク・Workless

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

軽量でシンプルなレスポンシブWebデザイン向けのボイラプレート・Responsive Boilerplate

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