最近は少しづつ「レスポンシブWEBデザイン」の手法でサイトを制作することが多くなってきました。 レスポンシブWEBデザインの基本は、media queryを使ったgrid layoutとFluid Image（画面のサイズに合わせて画像を拡大縮小してフィットさせる）だと思うのですが、画像をfruidさせるときに、縦横比が結構めんどくさい印象です。 画像の横幅はwidth:100%とかで可変にすれば良いのですが、overflow:hiddenで画像の表示範囲を指定して一部切り取りたい時などは、heightをwidthと合わせなければいけないので、CSSだけでは正直難しい印象です。 そこで、ウィンドウをリサイズしても画像の縦横比を正方形のまま維持するjQueryを作りましたので、ご紹介します。 jQuery(function($){ //.rectの縦横比をレスポンシブに合わせて調整 func

デモページ JavaScript (function($){ $(function() { $('#sort li').on('click', function() { var $this = $(this), $grid = $('#itemList'); $('#sort .active').removeClass('active'); $this.addClass('active'); $grid.shuffle($this.data('group')); }); $('#itemList').shuffle({ group: 'all', speed: 400, easing: 'ease-in-out' }); }); })(jQuery); HTML <div id="sortArea"> <div id="sort"> <ul> <li data-group="all" cl

特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。

マークアップのお仕事をしていると、 毎回必ずと言っていいほどスライダーがデザインに入っているのですが、 私がいつもお世話になっているのが、bxsliderというスライドショー用のjQueryのプラグインです！ ・シンプル ・導入が驚くほど簡単 ・カスタマイズも簡単 ・公式サイトのサンプルの説明が豊富 という、とってもありがたいこのプラグイン！しかも！ ・カルーセルスライダー対応 ・サムネイル付きスライダー対応 ・レスポンシブ対応 ・フリックでスライド対応 ・選べるエフェクト（普通にスライドorフェード） ・デフォルトでコントロール（よく見る黒いちょぼちょぼ）とページャー（前後へ動かす左右にある矢印アイコン）付き などなど、シンプルな物からちょっと変形スタイルまで、 スライダーで求められることは大概簡単にカスタマイズできます！ しかーーーーし！ 先日、こんなデザインがやって来ました。 なるほ

こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ

サムネイル画像にマウスを合わせたとき、それがリンクになっていることをユーザーに分かってもらう必要があります。CSSによって透明度を変えるのがもっとも一般的かと思いますが、今回は画像をボーダーで囲み、マウスホバーするとボーダーがアニメーションでにゅっと太くなるサムネイルの作り方をご紹介します。 デモページ まずは仕組みから 仕組みは至ってシンプルです。position:relative;を指定した親要素の中に、絶対配置(position:absolute;)で画像を入れたブロック要素とdisplay:block;でブロック要素化したa要素を重ねます。HTMLソース内で画像のブロック要素の後にa要素を記述すれば、特にスタイル指定しなくてもa要素が上に重なります。 CSSでは通常時(マウスホバーしていない状態)のスタイルを指定しておきます。これにjQueryでマウスホバー時のボーダーのアニメーシ

jQueryプラグインのスライダーの紹介は久しぶりになります。 いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、 ご紹介させていただきます。 その名も「Slider Pro」公式サイトはこちらSlider Pro サイト自体もけっこうかっこいいですね！ 一応僕が試してみたDEMOもあります。 DEMO 簡単ですが、特徴としては、 ・レスポンシブ対応 ・スワイプ対応 ・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等) ・高さ自動対応 ・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる ・フルスクリーンモードにできる ・上記からいろんなレイアウトに簡単に変更できる！ 「Slider Pro」の使い方 まずは公式サイトからダウンロードをお願いします！ まずCSSを読み込み、

2017.07.11 CSS3アニメーションとFlexboxを使用した新バージョン「infiniteslide.js v2」を作成しました。 古いブラウザへの対応が不要な場合はぜひ新バージョンもご検討ください。 2013.09.09追記 マウスオーバーで停止するオプションを追加しました。jQuery Pauseプラグインを使用しています。 2013.06.13追記 Chromeで動作しなかったのを直しました。imgのwidth,heightは必須でした。 2013.03.27追記 自作プラグインなどはGitHubで公開・管理することにしました。 最新版はGitHubにあります。 デモと解説とダウンロード OTAGGIOみたいなサイトがいい！なんて言われたので書きました。 当初はベタに書いてましたが、使いどころがいろいろありそうだったのでプラグイン化しました。 解説ページに大体のことは書いて

jqueryで文字を縦書きにする Webと言えば左から右へ読んでいく横書きが通常ですが、縦書きもいいものです。 ただ今まではcssでごまかしごまかし縦書きにしていたのでなんだが文字列が汚いし、ブラウザによるし。ページ全体を縦文字にすると対処も面倒で大変でした。 こちらのjqueryではかなり綺麗に縦書きレイアウトが実現できます。 ファイルをダウンロードします 配布ファイルのダウンロードはこちら ファイルはこちらの「h2v.js : Webページを縦書きレイアウトに変換するJavaScript」さんで配布しています。

This domain may be for sale!

HTML5のdata属性を使用して指定して、簡単にパララックス効果を実装できるスクリプトのご紹介。 しかもレスポンシブ対応です。 使い方 以下のコードは、Parallax ImageScroll -GitHubに掲載のコードです。 必要ファイルを読み込み、画像とコンテンツを配置します。画像は、HTML5のdata属性を使用して指定します。 <div data-image="anImage.jpg" data-width="1600" data-height="900"></div> <section><p>Content that "slides" on top of the images</p></section> <div data-image="anotherImage.jpg" data-width="1600" data-height="900">[optional conten

Vegas2Background SlideShowjQuery/Zepto PluginProject by Jay Salvat, Pictures from Unsplash. Need support? Don't waste your precious time, Hire me Feeling Generous? Buy me a beer, beer is good for motivation Need support?Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving y