Resource - CSS

再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」

RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...

シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」

Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...

メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」

Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...
Ads

モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」

Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...

Bootstrapで使えるコードスニペットを集めている・「CodeLab」

CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...

シンプルでフレキシブルなCSSグリッドシステム・「Pintsize」

Pintsize PintsizeはシンプルでフレキシブルなRWD対応のCSSグリッドシステムです。flexboxを使ったグリッドシステムで特定のclassを付与する事でネストやボックスの配置を手軽に設定出来るようになっている様です。...

Semantic UIライクなスタイルのBootstrapテーマ+コンポーネント集・「Semantic UI Bootstrap」

Semantic UI Bootstrap Semantic UI BootstrapはSemantic UIライクなスタイルのBootstrapテーマと、そのコンポーネント集です。Semantic UIのスタイルをBootstrap...

Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」

Flexbox Patterns Flexbox PatternsはFlexboxを使ったUIパターンをコードと共に紹介するWebサイトです。display:flexプロパティを使って何が出来るのか、使い方や実際にUIとして実装するコ...

軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」

Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...

FlexboxベースのモダンなCSSフレームワーク・「Bulma」

Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...

CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」

Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...

Web標準の16色を綺麗なカラーパターンにする為のCSS・「COLORS」

COLORS COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので...

軽量且つクリーン、ミニマルなUIフレームワーク・「Milligram」

Milligram Milligramは軽量でミニマルなUIフレームワークです。必要最低限のコードでクリーン、圧縮版で2KBと軽量な設計ながら欲しいUIコンポーネントは一通り揃っていて使いやすそうな印象でした。大きな特徴がこれといって...

CSSで変更できるカーソルとコードの一覧・「CSS Cursor」

CSS Cursor CSS CursorはCSSで変更できるカーソルとそのプロパティ、対応ブラウザの一覧ページです。思いの外しらないものもあったので備忘録的に。HTML製のWebアプリも増えているので以前よりも需要は高くなっているか...

cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」

FLEXBOX FROGGY FLEXBOX FROGGYはflexboxをゲームで遊びながら学べるツールです。カエルをflexboxプロパティを使用して葉の上に持っていければOKというシンプルなもの。24レベルまで用意されています。...

CSSのブレンドモードとフィルターを組み合わせて動作テストできる・「FilterBlend」

FilterBlend FilterBlendはCSSのbackground-blend-modeとfilterプロパティを組み合わせて動作テスト出来るツールです。任意の画像をアップロードしてblend-modeを設定し、filter...

Dropbox製のオープンソースSCSSフレームワーク・「Scooter」

Scooter ScooterはDropboxが提供するOSSのSCSSフレームワークです。Dropbox向けに開発した基本スタイルのSCSS及びUIフレームワークをオープンソースとしてもユーザーに公開しているようです。スタイルに関し...

任意の画像をアップロードするとCSSに変換してくれる・「img2css」

img2css img2cssは任意の画像をアップロードするだけでCSSに変換するツールです。アップロードされた画像をパースして色や形状をCSSのみで実装、コードを提出してくれます。用途は正直な所、思い浮かびませんが、技術としては凄い...

Webサイトのナビゲーション、メニュー等のチュートリアルやコードをTumblrで収集する・「navnav」

navnav navnavはCSSやjQuery等で作られたナビゲーション、メニュー等のチュートリアルやコードが書かれたWebページを集めているTumblrのサイトです。ちょっと目を引くようなナビゲーションが揃っている印象でした。コン...

CSSのみで棒グラフを作るためのチャートシステム・「chart.css」

chart.css chart.cssはCSSのみで棒グラフを作成する為のCSSチャートシステムです。上図のようなシンプルな棒グラフのみ作成可能となっています。用意されたclassやカスタムデータ属性によってパーセンテージの表示、太さ...

軽さを意識したシンプルなCSSフレームワーク・「Kickstart」

Kickstart Kickstartは軽さを重視したCSSフレームワークです。元々はKickstrapという名でBootstrapの拡張ツールだったそうですが、Ver.3で完全に独立したCSSフレームワークになったとの事です。Boo...

JavaScriptやPython、コマンドラインの使い方等を無料で学べる学習サイト・「Codecademy」

Codecademy Codecademyは対話形式でコードを学べる学習サイトです。無料で利用可能で、学習項目はHTMLやCSS、JavaScriptからPHPやRuby、Pythonの他、コマンドラインの使い方まで揃えられています。...
Ads