モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」 Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...2016.04.17 | 10時14分57秒
レスポンシブWebデザイン対応のHTMLメールフレームワーク・「Outline Mail」 Outline Mail Outline MailはRWDなメールのHTMLフレームワークです。スマフォの普及で以前より需要が増している印象です。HTMLメールのRWD対応は通常のWebページとは少し勝手が違うのでこの手のフレームワー...2016.04.14 | 9時31分06秒
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」 RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...2016.04.02 | 10時51分16秒
任意の画像にプレビューを確認しながらフィルタをかけてCSSのfilterでコードを出せる・「」 CSS Filter See the Pen CSS Filter by Jordano Aragão (@jordanoaragao) on CodePen. CSS Filterは任意の画像にCSSのfilterをテストでき...2016.03.18 | 11時02分55秒
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」 Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...2016.03.17 | 10時28分37秒
40種以上の画像のマウスホバーエフェクトを使いやすくまとめたスタイルシート・「imagehover.css」 imagehover.css imagehover.cssは画像のホバーエフェクトをclass付与などで手軽に扱えるようにしたスタイルシートです。上記のように画像にマウスを乗せた際のエフェクトを40種以上まとめて一つのCSSにしたもの...2016.03.15 | 10時56分36秒
製品等のデータ比較のためのtable要素にフィルタ機能を付与する・「Products Comparison Table」 Products Comparison Table Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意...2016.03.11 | 10時44分55秒
VSCOのようなフィルターを実装する為のスタイルシート・「CSSCO」 CSSCO CSSCOはスマフォの写真加工/共有アプリ、VSCOで出来るようなフィルターを画像にかけるためのスタイルシートです。InstagramのフィルタをかけられるCSSGramにインスパイアされたらしく、そのVSCO版を作成した...2016.03.05 | 10時11分30秒
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」 Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...2016.03.04 | 9時22分53秒
レスポンシブWebデザインにも対応した、APIのドキュメント作成キット・「Slate」 Slate SlateはAPIのドキュメントを作成する為のテンプレートです。RWD対応で、基本的には目次、説明、サンプルコードの3カラム構成になっているようです。このタイプの仕様書が個人的には一番見やすいです。ナビゲーションもよく見か...2016.03.03 | 10時19分53秒
モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」 Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...2016.02.29 | 10時07分33秒
シンプルでフレキシブルなCSSグリッドシステム・「Pintsize」 Pintsize PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。...2016.02.20 | 9時40分55秒
Semantic UIライクなスタイルのBootstrapテーマ+コンポーネント集・「Semantic UI Bootstrap」 Semantic UI Bootstrap Semantic UI BootstrapはSemantic UIライクなスタイルのBootstrapテーマと、そのコンポーネント集です。Semantic UIのスタイルをBootstrap...2016.02.16 | 10時39分25秒
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」 Headermessage HeadermessageはCSSのみで開閉コンテンツを作るスタイルシートです。よくある上からスライドダウンするやつをCSS3を使って実現しよう、というもの。上記デモはこのページではうまく動かせないかも...2016.02.14 | 10時02分09秒
Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」 Flexbox Patterns Flexbox PatternsはFlexboxを使ったUIパターンをコードと共に紹介するWebサイトです。display:flexプロパティを使って何が出来るのか、使い方や実際にUIとして実装するコ...2016.02.11 | 11時08分39秒
軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」 Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...2016.02.07 | 10時38分38秒
モバイルアプリ向けのランディングページテンプレート・「Takeoff」 Takeoff Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。...2016.02.04 | 11時00分45秒
FlexboxベースのモダンなCSSフレームワーク・「Bulma」 Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...2016.02.01 | 10時57分22秒
CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」 Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...2016.01.25 | 10時22分49秒
Codepenで2015年に話題になった投稿TOP100をまとめた・「MOST The HEARTED 2015」 MOST The HEARTED 2015 MOST The HEARTED 2015はCodepenで話題になった投稿TOP100をランキング化したWebページです。最もグッと来た投稿、コードを紹介しています。心に来たコード=実際に...2016.01.19 | 10時17分20秒
Web標準の16色を綺麗なカラーパターンにする為のCSS・「COLORS」 COLORS COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので...2016.01.18 | 10時26分18秒
軽量且つクリーン、ミニマルなUIフレームワーク・「Milligram」 Milligram Milligramは軽量でミニマルなUIフレームワークです。必要最低限のコードでクリーン、圧縮版で2KBと軽量な設計ながら欲しいUIコンポーネントは一通り揃っていて使いやすそうな印象でした。大きな特徴がこれといって...2016.01.11 | 10時20分07秒