GitHub - filamentgroup/tablesaw: A group of plugins for responsive tables.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
tableをスマホ用に変形
デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ：幅480pxで表示 左：ヘッダ有り、右：ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="
Optimizing Responsive Layouts | WP Theming
Styling for a range of different screen sizes is rather easy in CSS thanks to media queries. But what if you want to deliver slightly different content or markup based on screen size? WordPress has a wp_is_mobile tag that can be used- but this covers a wide array of devices and doesn’t allow for specific screen size targeting. Here’s a couple techniques I’ve been using that are a pure front end so
stickUp - a free jQuery Plugin
a jQuery plugin A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts. Scroll down to see it in action. Visit GitHub Simple Integration stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily mak
背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」 – bl6.jp
WallpaperというjQueryプラグインを使えば背景画像のレイアウトをブラウザ幅に合わせることができます。ブラウザ幅を縮小したり拡大することによって、そのサイズに最適化された配置に調整されるのでいろんなデバイスで見ることができますね。とても便利なので覚えておきたいプラグインです。 [ads_center] Wallpaperの使い方 このようにブラウザ幅のサイズによって背景画像のレイアウトが調整されます。 以下は縮小時。 使い方もシンプルですね。 $("#element").wallpaper({ source: "path/to/image.jpg" }); Wallpaper
クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」:phpspot開発日誌
:: Alessandro Ferrini :: FerroSlider jQuery Plugin クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 iPhone、iPadなどのタブレットでもレスポンシブに表示されるだけでなく、PCでもタッチ操作も可能なスライダが実装可能 自動再生機能の他、上下左右にスライドを送れるようなユニークな機能も付いている模様。 関連エントリ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCra
テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」:phpspot開発日誌
Treegrid jquery plugin デモ：TreeGrid for Bootstrap 3.0.x テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」。 Bootstrap3なサイトでも使うことができるようです。マークアップ上はただのテーブルですが、これを階層化して開閉できるUIは便利そうです。 こうしてますますBootstrapが強化されていって作り手としては嬉しい限りですね 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるア
任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements
任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。 前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。 特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。 セッティングは要素ごとにカスタムデータ属性を利用します。 <div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">これで、画面サイズにあわせてclassが付与されます。 詳細は以下よりどうぞ。 Responsive e
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements
最も狭い幅では、テキストのみに。 Responsive Elementsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="responsive-elements.js"></script> Step 2: HTML レスポンシブ対応にする要素に「data-respond」を加えます。 <div class="quote" data-respond> Step 3: JavaScript スクリプトは特に記述する必要はありません。 Step 4: CSS レスポンシブ用のスタイルを定義します。 ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルにな
スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」 – bl6.jp
スクロールするとナビゲーションが上部に固定配置されるjQueryプラグイン「HeadShrinker」を使ってみました。レスポンシブにも対応しており、ブラウザの横幅を小さくするとメニューアイコンに切り替わる仕組みになっています。使い方もシンプルなので、あっという間に今風のナビゲーションを実装することができます。以下は使い方です。 [ads_center] 使い方 このようにスクロールすることでナビゲーションが上部に固定されます。 ブラウザ幅を縮小していくと、こんな感じでナビゲーションメニューがアイコンに切り替わります。レスポンシブのサイトでよく見かけますよね。 使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。 <link rel="stylesheet" href="headshrinker.css" media="all" /> <
Web Design, Interface Design, User Experience | Simple Focus
What does FlowType.JS do? Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width. Addi
レスポンシブメニューを実現してくれるjQuery集「15 Responsive Navigation jQuery Plugins」
TOP > javascript , WebDesign > レスポンシブメニューを実現してくれるjQuery集「15 Responsive Navigation jQuery Plugins」 スマートフォンのシェアが高まるに連れてPCでもスマートフォンでも両方共通のコンテンツで、各端末ごとに最適化されたデザイン+機能。多くのWEBデザイナーが頭を迷わせるところですが、今回紹介するのはその中でもユーザーが操作するナビゲーションをレスポンシブにしてくれるjQueryを集めたエントリー「15 Responsive Navigation jQuery Plugins」です。 Sidr 最近のスマートフォンアプリのナビのようにサイトのサイドからせり出てくるようなナビゲーションから、端末によって、それぞれの端末に最適化された形に変化するものまで多種多様なレスポンシブメニューがまとめられてい
レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」 – bl6.jp
ホーム JavaScript レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」 今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポンシブ対応のタブパネルを実装できる「Easy Responsive Tabs to Accordion」です。シンプル&軽量で素晴らしいですね。ブラウザ幅を縮小していくとタブパネルからアコーディオンに切り替わるのが特徴です。タブは水平・垂直も可能です。 [ads_center] 使い方 このようなタブパネルからブラウザを縮小していくと。 こんな感じでアコーディオンに切り替わります。ブレイクポイントは768pxになっています。以下はHTMLです。 <div id="demoTab"> <ul class="resp-tabs-list"> <li>..
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」:phpspot開発日誌
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
[JS]コンテンツをデスクトップ時はタブに、タブレット・スマフォ時はアコーディオンにするスクリプト
シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更（指定も可）するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。 デスクトップ時はタブ、スマフォ時はアコーディオン。 同じページに複数のタブをセット可能。 IE7+を含むクロスブラウザ対応。 デスクトップ、タブレット、スマフォのクロスデバイス対応。 デモ デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。 まずは、デスクトップサイズで表示してみます。 デモページ：幅1200pxで表示 デスクトップ時はタブで、上：水平型、下
レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」:phpspot開発日誌
jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 スマホ関連のリモートホストのまとめ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」
レスポンシブでタッチ対応な軽量なスライダー実装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ページを開く
プラグインやチュートリアル 25
Glide.js