HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

2019/11/11 447 users コリス ホバー時 class フォーカス時 エフェクト

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス

2019/01/16 166 users コリス Flexbox グリッド Vue.js 動的コンテンツ

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、... 続きを読む

便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス

2018/10/24 395 users コリス バリデーション デフォルト スマホアプリ 記述

Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8n... 続きを読む

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス

2018/10/22 205 users コリス cla Lazy Load img要素 テクニック

最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にcla... 続きを読む

[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS | コリス

2018/05/31 75 users Git コリス ポパー before After

要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -Git... 続きを読む

[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt | コリス

2017/01/30 52 users jQuery GitHub tilt シャドウ グラデーション

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落... 続きを読む

[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons | コリス

2014/05/06 81 users htm コリス Step class ライブラリ

使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 スタイルシートは1.4kbで、超軽量！ beautons beautons -GitHub 使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に記述します。 [html] ... [/htm... 続きを読む