インデックスタブ制作のチュートリアルまとめ

web-tabbed-design-tutorial

WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。

作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデックスタグ(索引)を制作するチュートリアルが掲載されているサイトをあつめてみました。

jQuery idTabs

jQueryと組み合わせてタブを作ることができるJavasvriptのライブラリです。

web-tabbed-design-tutorial-01

JavaScript tabifier

単独で機能することができるJavasvriptのライブラリです。

web-tabbed-design-tutorial-02

Tabmenu for free

単独で機能することができるJavasvriptのライブラリです。タブはマウスオーバーで内容が切り替わります。

web-tabbed-design-tutorial-03

dhtmlxTabbar

横並び・縦並びの表示も可能な高性能なタブを作ることが出来ます。GPL ライセンスのオープンソースと商用有料ライセンスがあります。

web-tabbed-design-tutorial-04

CSS Tabs

CSSによるタブのデザインのみのチュートリアルです。

web-tabbed-design-tutorial-05

[demo・tutorial]

DOMTab

CSSとDOMscripting(Javascript)によるタブのチュートリアルです。

web-tabbed-design-tutorial-06

関連記事

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション

モバイル時代のモバイルフレンドリーによるSEO対策

日本国内のスマートフォン保有率は50%にのぼり、20代になると80%にもなります。消費者のパソコンからスマートフォンへのインターネット活用が大きく変わり、ウェブサイトへのアクセス方法もパソコンからスマートフォンへ移りつつあります。 まだ業種によって差はありますが飲食店、美容...続きを読む

2015.03.16SEO

【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。 今回は、Tooltips(吹き出し)を実...続きを読む

2015.03.03HTMLコーディング

【WP】シンプルなショッピングカートを導入できるプラグイン「WP−OliveCart」

今回紹介するプラグイン「WP-OliveCart」は、WordPressでショッピングカートを追加することができるプラグインです。無料版と有料版の2つがあり、国産プラグインで、日本語に対応したプラグインになっております。無料版では「ショッピングカート機能」「商品管理機能」、有料版...続きを読む

2018.11.19WordPress

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08HTMLコーディング