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

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

関連記事

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング

Webで最も人気のあるフロントエンド·テンプレート『html5-boilerplate』

『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。 このパッケージのコンセプトとして、フロントエンド(初期段階)にかかる作業を短縮して、高速で堅牢、柔軟性のあるWEBアプリやサイトを素早く構築すること...続きを読む

2015.02.06HTMLコーディング

【WP】オリジナルショートコードの作り方

WordPressでは、shortcodes(ショートコード)という簡単な記述で、事前の用意された処理コードを実行することができます。 ショートコードを作成する ショートコードの作成はPHP関数の基本的な必要になりますが、オリジナルのショートコードは簡単に作成すること...続きを読む

2015.02.24WordPress

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー

【WP】空き状況を表示するカレンダーを作成することができるBookingプラグイン5選

レストランやホテル、イベント会場などWEBサイトで、席の空き状況をカレンダーに表示して予約をスムーズに行う仕組みを見かけることがあると思います。 この空き状況を案内するカレンダーをWordPress上で作成することができるプラグインがありますのでご紹介します。 今...続きを読む

2015.02.26WordPress