カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」 You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...2016.07.10 | 9時47分51秒
要素をシェイクさせるスタイルシート・「CSShake」 CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...2016.07.09 | 11時14分49秒
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」 Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...2016.06.15 | 9時35分36秒
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」 WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...2016.06.07 | 10時19分21秒
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」 Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...2016.06.06 | 9時43分04秒
レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」 Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...2016.05.15 | 10時35分20秒
モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」 Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...2016.04.17 | 10時14分57秒
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」 RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...2016.04.02 | 10時51分16秒
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」 Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...2016.03.17 | 10時28分37秒
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」 Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...2016.03.04 | 9時22分53秒
モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」 Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...2016.02.29 | 10時07分33秒
Bootstrapで使えるコードスニペットを集めている・「CodeLab」 CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...2016.02.26 | 9時42分54秒
シンプルでフレキシブルな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秒
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秒
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秒
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秒
CSSで変更できるカーソルとコードの一覧・「CSS Cursor」 CSS Cursor CSS CursorはCSSで変更できるカーソルとそのプロパティ、対応ブラウザの一覧ページです。思いの外しらないものもあったので備忘録的に。HTML製のWebアプリも増えているので以前よりも需要は高くなっているか...2015.12.30 | 10時12分04秒
cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」 FLEXBOX FROGGY FLEXBOX FROGGYはflexboxをゲームで遊びながら学べるツールです。カエルをflexboxプロパティを使用して葉の上に持っていければOKというシンプルなもの。24レベルまで用意されています。...2015.12.02 | 10時53分43秒