Normalize.cssをベースに作られたCSSリセット・「ress」
ress ressはNormalize.cssをベースとしたモダンなCSSリセットです。Normalize.cssに加えて10前後の設定が追加されています。各要素へのbox-sizing: border-box;追加やボタンへのcur...
Resource - フレームワーク
軽量シンプルなオープンソースのUIキット・「Css-mint」
Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」
Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」
okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」
Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...
テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」
txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」
SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...
モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」
Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」
Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」
jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」
minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...
YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」
superembed.js superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく...
JavaScriptのTipsを不定期で紹介する・「JS Tips」
JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...
自身の技術スキルをアニメーションする棒グラフで表示できるjQueryスクリプト・「skills」
skills skillsは自身の技術スキルをアニメーションする棒グラフで表現するためのスクリプトです。jQuery依存です。よくある、スクロールに応じてアニメーションしながらグラフが設定値まで伸びる、というもの。アニメーションや...
要素の背景に水面を指でなぞるようなエフェクトを付与できるスクリプト・「jQuery Ripples」
jQuery Ripples ※Resultを押せば別の画像が表示されます。 jQuery Ripplesは要素に揺れる水面っぽいエフェクトを付与できるスクリプトです。WebGLで任意の要素に指定した画像に上記のようなエフェクト...
スクロールに応じて要素をCSS3で手軽にアニメーションさせられるライブラリ・「Kissui.scrollanim」
Kissui.scrollanim Kissui.scrollanimはスクロールに応じて要素をアニメーションしながら表示させるためのライブラリです。オシャレ感ただようWebページに大抵あるあのエフェクトを手軽に付与しよう、という...
inputに任意の接頭語を付与するスクリプト・「jquery-plugin-input-prefix」
jquery-plugin-input-prefix jquery-plugin-input-prefixはinputに任意の削除できない接頭語を付与するスクリプトです。jQueryに依存します。placeholder属性と違い、テキ...
高機能で非依存のlightboxスクリプト・「lightgallery.js」
lightgallery.js lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 ...
Web制作のスピードを早める為に作られたモジュール式の軽量CSSフレームワーク・「BlazeCSS」
BlazeCSS BlazeCSSはモジュール形式のモバイルファーストなCSSフレームワークです。Web製作スピードを早めるために設計、公開されたそう。各コンポーネントは必要なものだけ該当のCSSを読み込むモジュール式でモノリシックな...
オートコンプリートの住所検索の為のスクリプト・「Algolia Places」
Algolia Places Algolia Placesはオートコンプリートな住所検索の為のスクリプトです。上デモのようにOpenStreetMapを使って検索対象を世界にする事が可能です。高速さが売りのようですね。導入も割と簡単で...
リアルタイムにグラフを描けるチャートライブラリ・「Epoch」
Epoch Epochはリアルタイムにグラフを描くチャートライブラリです。頻繁に更新されるような時系列データをSVGを使って可視化する為の汎用ライブラリとして公開されています。D3.jsに依存するみたい。スタイリングもし易いように設計...
軽量、レスポンシブでエレガントなモーダルウィンドウを実装出来るjQueryプラグイン・「iziModal」
iziModal iziModalはRWD対応で軽量、エレガントなモーダルウィンドウの為のjQueryプラグインです。任意のコンテンツは勿論、iframeや通知などにも対応可能で、タイトルや空＾設定など、細かい設定項目が用意されていま...