Resource - CSS3

Bootstrapベースのスタイルガイド用テンプレート・「Bootstrap Style Guide Boilerplate」

Bootstrap Style Guide Boilerplate Bootstrap Style Guide BoilerplateはBootstrapベースのスタイルガイド用Boilerplateです。スタイルガイド作成の手間を省...

完成形を見ながらインタラクティブにCSSグリッドのコードを生成する・「cssgr.id」

cssgr.id cssgr.idはCSSグリッドのコードをインタラクティブに生成するジェネレーターです。シンプルにそれ以上でも以下でもないものです。生成されるコードは以下のようなものです。 CSSグリッドはコンテナを並...

様々なレイアウトに対応できるよう設計されたflexboxベースのグリッドシステム・「Flexible Grid」

Flexible Grid Flexible Gridは様々なレイアウトでも対応できるよう設計されたflexboxベースのCSSグリッドシステムです。モバイルファーストでレスポンシブ且つ、セマンティックなマークアップにも使用可能でリー...
Ads

一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」

Mustard UI Mustard UIはWebサイト等で必要になりそうなUIコンポーネントを一通り取り揃えたCSSフレームワークです。モジュラー式なので必要なコンポーネントのCSSだけ読み込めばいいので軽量で済みます。スタイルはあ...

テキスト入力すると自動でマインドマップを作成できる・「Text2MindMap」

Text2MindMap Text2MindMapはテキスト入力だけでマインドマップを作成してくれるツールです。CSSとJavaScriptで出来ており、インデントすれば子のアイテムを作成します。非常に簡易的なもので、保存はプレーンテ...

Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」

Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...

Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」

Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...

エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」

Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...

FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」

Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...

CSSグラデーションを直感的な操作で作成できる・「GradPad」

GradPad GradPadは直感的な操作でCSSグラデーションを作成できるツールです。よくあるジェネレーターと言われればそれまでなんですが、個人的には使用感が凄く良いと感じたので備忘録的に書いてます。2つのボタンを動かすことでグラ...

CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」

basicScroll See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen. basicScrollはCSS変数を利用して...

フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」

Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...

CSS Gridを使ったWebサイトのギャラリーサイト・「Grid Examples」

Grid Examples Grid ExamplesはCSS Gridを実際に使用してレイアウトを組んでいるWebサイトのギャラリーサイトです。実例を見て学ぼう、みたいな趣旨みたいです。が、まだほとんど集まってないみたいなですね。自...

必要なものだけ揃えられたベーシックなCSSのboilerplate・「roolith」

roolith roolithは必要最低限のものだけ揃えたCSSのboilerplateです。タイポグラフィやボタン、カラースキーム、グリッドやRWDの為のブレークポイント、各ナビゲーションやフォームからヘルパークラスまで、分かりやす...

3本線のメニューアイコンのアニメーションパターンをいろいろ集めたサンプル集・「Half Second Hamburger Helper」

Half Second Hamburger Helper See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen. Half Sec...

iPhone Xや8、Galaxy S8、MacBookやApple Watchなど様々なデバイスのモックアップを作れるスタイルシート・「Devices.css」

Devices.css Devices.cssはiPhone Xや8、Galaxy S8、MacBookやApple Watch、Surfaceなどモダンなデバイスのモックアップを表現できるCSSのセットです。かなり大昔にご紹介したの...

美しいグラデーションをリスト化、編集やCSSコードのコピーも出来る・「CSS GEARS」

CSS GEARS CSS GEARSは美しいグラデーションを公開しているプロジェクトサイトです。各グラデーションは編集も可能で、CSSコードをコピーする事も可能です。マウスホバーで左右にボタンが出ますので、カラーコードを直接編集する...

画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」

Instagram.css Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgram...

CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」

Hexi-Flexi-Grid Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こう...

clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」

Angled edges Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーン...

CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」

Microtip MicrotipはCSSのみで実装できる超軽量(圧縮版で1kbだそう)なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-...

Bootstrap 4向けのモダンで軽量なUIキット・「Shards」

Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...
Ads