Calendario: A Flexible Calendar Plugin | Codrops
Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both
レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider
シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。 キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 オープンソース ライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。 超軽量 スクリプトは6KBで、超軽量です。 実装は簡単でクリーンなHTML 数分で実装でき、非常にシンプルでValidなHTML。 スライドの方向は多彩 通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートし
![[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider](https://cdn-ak-scissors.b.st-hatena.com/image/square/08bc7be458afe18c7e32cf5b8ed94c85bcfb1cd0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120302-03.png)
Glide.js | A dependency-free JavaScript ES6 slider and carousel
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more Lightweight The modular structure provides excellent compression. Oh yes, it weights only ~23kb (~7kb gzipped) with every functionality included. Dependency-free Everything on board, ready for action. Written in vanilla JavaScript without hidden dependencies.
jcSlider
This plugin does not use jQuery animations. Only CSS3, because performance matters. No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them. It couldn't be easier! Only 1 js file 1Kb minified Responsive Multiple effects (more than 60!) Works with html, images... whatever you want to animate Testimonial slider example Fringilla nisl. Donec accumsan
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
レスポンシブのうまいアイデア満載！RWD対応のナビゲーションを実装するスクリプトのまとめ
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。 WordPressのプラグインも有り。 mmenu (jQueryのプラグイン) mmenu -GitHub デモページ On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
Responsive Nav — Responsive Navigation Plugin
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “cle
Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」:phpspot開発日誌
Unslider ? the super-tiny jQuery slider レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロスブラウザ・キーボードショートカット・タッチ等にも対応しており、最近の環境にマッチした使い方ができます。 コールバック、スピード調整等のオプションも指定可能。 シンプルなスライダーを実装する際にレスポンシブでタッチ対応というのはなかなかありがたいところですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 タッチ可能でレスポンシブなスライダー実装「RoyalS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster![[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster](https://cdn-ak-scissors.b.st-hatena.com/image/square/17e1a288172e3bbd2f08f4fe530b95a86e66a99f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011505.gif)
NavNav+
SlickNav
プラグインやチュートリアル 25
