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

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

関連記事

インクジェットプリンタでクリーニング機能を実施しても印刷が汚れてしまう

みなさんはインクジェットプリンタで写真などを印刷したときに、印刷した面がインクで汚れていたという経験はございませんか? 写真などをキレイに印刷するため光沢紙を使ったときにインクの汚れがついてしまうとやりきれない気持ちになります。 印刷した面がインクで汚れてしまう場合、インク...続きを読む

2018.03.05プリンタ印刷

【無料】商用利用OKシームレステクスチャ「木目(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの柱、床材のような木の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.11シームレステクスチャ

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の...続きを読む

2018.01.04

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション