軽量で非依存型のパーティクルエンジン・「particles.js」 particles.js particles.jsは軽量で他ライブラリに依存しない非依存型のパーティクルエンジンです。簡易的なものですが圧縮版で2.5kbほどと軽量で依存せず単体で動作してくれるのと、設定が簡単で扱いやすい印象です...2016.10.09 | 10時06分43秒
CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」 Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...2016.10.06 | 10時17分05秒
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」 placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...2016.10.04 | 10時11分55秒
CSSのみで作るシンプルなツールチップ・「Wenk」 Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...2016.10.03 | 10時27分06秒
input要素の入力をサポートする非依存スクリプト・「Cleave.js」 Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...2016.09.30 | 9時45分07秒
記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」 text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...2016.09.29 | 10時19分57秒
Githubのコードを任意のWebページに埋め込める・「github-embed」 github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...2016.09.26 | 10時16分27秒
色覚障害の方に対応したWeb制作の為のChromeエクステンション・「ChromeLens」 ChromeLens ChromeLensは色覚に異常のある方に対応出来るWebサイトの制作をサポートするChromeエクステンションです。拡張機能を追加すると、デベロッパツールにChromeLensという項目が追加されます。このタブ...2016.09.16 | 12時13分04秒
WordPressの管理画面内でドラッグ&ドロップによるレイアウト作成が可能なプラグイン・「Tailor」 Tailor TailorはWordPressの管理画面内でレイアウトをD&Dで作成出来るWordPressプラグインです。テーマカスタマイザーで要素をドラッグし、そのまま各所を編集出来るようになっています。テーマカスタマイザーはレス...2016.09.14 | 11時15分38秒
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」 Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...2016.09.12 | 10時04分00秒
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」 okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...2016.09.11 | 10時46分01秒
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」 Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...2016.09.07 | 9時59分16秒
テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」 txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...2016.09.06 | 10時02分11秒
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」 SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...2016.09.03 | 10時33分08秒
モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」 Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...2016.09.02 | 10時32分31秒
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」 Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...2016.08.31 | 10時45分38秒
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」 jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...2016.08.30 | 10時25分41秒
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」 minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...2016.08.29 | 10時14分38秒
YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」 superembed.js superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく...2016.08.27 | 10時11分30秒
GithubやGitLabでIDEのようにファイルをツリー表示するChromeエクステンション・「Octotree」 Octotree OctotreeはGithubやGitLabでファイルをツリー表示するChromeエクステンションです。FirefoxやOperaの拡張もあります。上図のようにIDEライクなツリー表示にしてくれるのでファイルへのアク...2016.08.26 | 10時23分44秒
JavaScriptのTipsを不定期で紹介する・「JS Tips」 JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...2016.08.23 | 10時58分09秒
高品質な写真を著作権放棄で配布する・「SKUAWK PUBLIC DOMAIN PHOTOS」 SKUAWK PUBLIC DOMAIN PHOTOS SKUAWK PUBLIC DOMAIN PHOTOSは高品質な写真をパブリックドメインで配布するWebサイトです。よくあるストックフォトサイトのように大量に保管、配布されてはお...2016.08.21 | 10時58分19秒