レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768pxがブレイクポイントとなっており、それ以下になるとアコーディオンに変換してくれます。ダウンロード デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <link href="easy-responsive-tabs.css" type="text/css" rel="stylesheet"> <script src="easyResponsiveTabs.js" type="text/javascript"></script> 実装(HTML) <div id="htab"> <ul class="resp

無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法［Infi

今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。 実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。 こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。 なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。 また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。 レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【Slick

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した

今回は、軽量のjQueryツールチッププラグインの使い方のご紹介です。 こちらのjQueryプラグインは、実装も簡単な上に軽量なツールチッププラグインとなっております。 最近では、よくツールチップがアイコンフォントなんかに使われているのを見ます。 ちょっとした文字をマウスホバーで表示させるのは、レイアウト/デザインの保持やスペースの節約になると思います。 また、以前にツールチップの記事を書きましたが、以前書いたツールチップは、マウスの動きに合わせてツールチップも表示されますが、こちらのツールチッププラグイン【Tipso】は、ご自身で上・右・下・左など指定した場所に表示されます。 下記に実際に【Tipso】を利用したデモサイトもありますので、ご確認頂ければと思います。 デモサイト 実装に必要なファイルなどもありますので、下記リンク先よりダウンロードして下さい。 【Tipso】 Tipso 実

今回は、画像や動画などをオーバーレイ表示出来るLightbox系jQueryプラグイン【Colorbox】の使い方のご紹介です。 こちらの【colorbox】は、画像だけではなく動画やinlineコンテンツなどのもオーバーレイで表示出来るので、大変便利なjQueryプラグインとなっています。 また、オーバーレイのスタイルも5種類ほど用意してあり対応したCSSを読み込めば対応しています。 実装のハードルも高くなく割と簡単に実装も出来ると思います。 実際に【Colorbox】を利用したデモサイトもありますので、ご参考下さい。 デモサイト 実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。 Clorbox それでは、jQueryプラグイン【Colorbox】の使い方をご説明していきます。 実装するにあたりこちらより必要なファイルなどを事前にダウンロードしておいて下さい。

今回は、レスポンシブメニューの実装に使えるjQueryプラグイン【Sidr】の使い方のご紹介です。 こちらの【Sidr】が適応されると、メニューがサイドからスライド表示されるようになります。 便利な所が、既存メニューを利用してスマホなどの閲覧時にスライドメニューに対応出来るので、WordPressにも簡単に実装が出来ると思います。 また、メニューだけではなくコンテンツもスライド表示ができ、スライド時のテーマも2種類あり専用のCSSファイルを読み込むだけで、テーマが適応されるようになっています。 なので、今回はPCの通常閲覧時(768px以上)には、通常通りのメニューを表示させ、プレイク後(768px以下)には、【Sidr】が適応されたスライドメニューを表示させたいと思います。 言葉で言っても、あんまり伝えるの苦手なのでwww下記にデモサイトのようなメニューの表示方法です。 デモサイト 実際

今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。