2014/10/23Tweet今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。汎用性を考えてjQueryプラグインとして作成してみました。少ないスペースを利用して多くの情報を掲載する際によく使われるタブパネルは、更新情報などでカテゴリー毎に掲載したり、複数の商品の紹介などに使うことができます。今回作成したサンプルサンプル1ではタブパネルの幅をテキストの量によって変わるものと幅を固定して一定のサイズにするサンプルを作り、サンプル2では切り替えをクリックとマウスオーバーによって切り替わるパターンと内容部分をフェオードアニメーションにしました。【サンプル1】タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル【サンプル2】クリックやマウスオーバーでの切り替えやフェードアニメーションのサンプルタブエリアのHTMの作成タブの作成にはタブ部分にはリスト要素を使用して必要な数のタブを用意し、切り替えの際のidとclassを用意する。表示させる内容には、div要素内にarticle要素にレイアウト用のclassの領域内を常時内容としてそれぞれidを設定する。class内を切り替えするのでこちらのHTML内は表示したい内容を自由にレイアウトすることができます。clearfix"><p>エチオピア区の南スーダンからザンビアにかけての湿地に分布する。IUCNのレッドリストでは絶滅危惧II類に指定されており、ワシントン条約によって国際取引が規制されている。ハシビロコウ亜科は、ハシビロコウ1属1種のみ。TOP</a></p>タブボタンの幅についてサンプル1の上の作例ではタブ部分の見出しのテキスト内容によってタブの幅は自動的にサイズが伸びていくようになっています。どのような文字量になっても自動的に幅が調整され同じデザインになるので便利ですが、タブの数があまりなく、テキストの文字量が違う場合はデザイン的にバラバラな感じがしていまいますのでCSSで設定することで統一感のあるタブを作ることもできるので使用する用途によって使いわけましょう。3%;}ただしスマートフォンなどモバイル環境の場合はウインドウサイズが小さいのでタブの数やテキスト文字数はある程度ルールを作って制限するとよいでしょう。スマートフォンでは幅が狭いのでタブの数と文字数によっては改行されます。今回のタブ機能を実装するJavascriptは、この要素に囲まれた箇所をタブ化するということが直感的にわかることや、オプションによって最初から開いているタブを指定できるようにするなどの使い勝手を考慮し、jQueryプラグインとして作成することにしました。jQueryプラグイン作成と言っても、それほど難易度が高いものではなく一定の型に則って通常通りjQueryを記述すれば、それをプラグイン化することができます。mousemove」(マウスオーバーとマウスムーブ)に、そして最初から開いているタブの位置の変更などをしてみます。jQuery));今回は以上になります。書籍の方ではjQueryプラグインについての基本的な設定などについても紹介しております。次回はユーザビリティを向上として、マウスがあたった際に入力やリンク先のヒントを表示させるツールチップの作成について取り上げたいと思います。jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。自分はここで18個のサンプルを担当しており、この連載でどんどん紹介していこうと思っています。作成したサンプルや本の紹介はこちらをご覧ください。jQueryデザインのメソッド』発売いたしました。JAPANというサイトを作りました。このプロジェクトでは、日本各地の素晴らしい風景やイベントを動画で伝えていきたいと思ってます。トレーラーとして京都でのムービーをアップしましたのでよかったら見てください。※PCでご覧の方は是非4Kのフルスクリーンで見てください。ハヤシユタカ2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。詳しいプロフィールはこちら最近書いた記事2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。ユーザビリティを向上するツールチップを作る【jQuery連載06】Facebookページで2つのブログの更新情報をチェック「HTML5でサイトをつくろう」と「WEBデザインクリップ」の更新情報やWEB制作に役立つ情報を更新しています。System」の使い方をまとめました。System」に画像対応などしてレスポンシブWEBサイトをつくろう(カスタマイズ編)最新のエントリー2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。勉強しながら調べたサイト情報やサンプルの作成。そのほかweb制作に役立つ情報を共有し、情報交換できるサイトになればうれしいです。