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

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

関連記事

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【WP】ワードプレスで会員登録機能を実装するプラグイン「WP-Members」

今回紹介するプラグイン「WP-Members」を使用すると、WordPressでユーザーの登録フォームを公開したり、会員情報として住所やフリガナなど項目をカスタマイズすることや、登録しているユーザーのみに記事を限定に公開する機能を構築することができます。 WP-Member...続きを読む

2016.07.01WordPress

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

D-SALON様WEBサイトのデザイン提案

美容室のD-SALON様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。WEBサイトのリニューアルのご提案において、従来のWEBサイトより、ふんわりとした女性らしく可愛らしいイメージでデザインをいたしました。 お店の特徴やPRしたい内容をバナーとして掲載し、...続きを読む

2019.04.15WEBデザイン美容室

寺坂商店様「ウェブ戦略舎」WEBサイト制作

webサイト制作から納品だけでなく、クライアントの、商品サービス、事業戦略、提供手法を深く理解し、ウェブ集客に必要なマーケティングの最適化と売れる仕組み作り。目指す月商売上の再現を導き出すために、売れる仕組み作りのウェブ戦略構築とマーケティング手法、貴社が運用できる様にメ...続きを読む

2023.12.13WEBサイト制作WEBデザイン