最近、Yahoo.comのトップページがリニューアルしたようなのですが、そこで使われているタブで表示を切り替える方法を自分のウェブサイトでも使ってみたいと思いました。どのような仕組みで動いているのでしょう? また、このような仕組みの作り方を解説されているウェブサイトや書籍などはありますか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/04/02 23:07:01
  • 終了:2006/04/02 23:38:00

ベストアンサー

id:WANT No.2

WANT回答回数118ベストアンサー獲得回数92006/04/02 23:31:30

ポイント150pt

 あれは、CSSで実現されています。

現在のネットでは結構ありふれた技術なので、

カンタンに実装できるとおもいます。

下記サイトで実装例が紹介されているので、

ご参考にされては如何でしょうか?

 Yahooもそうですが、右クリックで→ソースの表示でコードが見れます

http://nais.to/~yto/tools/css_tabs/

id:jeffsfia

おお、まさしくこれです。

挑戦してみます!!!!!!

ありがとうございます。

2006/04/02 23:34:48

その他の回答(2件)

id:kishiro No.1

kishiro回答回数161ベストアンサー獲得回数42006/04/02 23:18:21

ポイント25pt

yahoo.comで、ヤフーで使用されているデザインパターンが

まとめられているので、紹介します。

http://developer.yahoo.com/ypatterns/pattern_navigationtabs....

これは、ヤフーが開発したわけではなくて、まとめているだけであって一般的に使用されているテクニックです。


「ナビゲーションタブ」パターンの仕組みはいたって簡単で

単にパラパラ漫画や紙芝居と同じ原理です。

複数の似たレイアウトのHTMLを用意しておいてタブが切り替わったように見せているだけです。

たとえば、下記の黒い部分がアクティブなタブだったとします。

■□□

他に下記のような2つのHTMLを用意して

タブの部分のリンクを押した時に画面を切り替えているわけです。

□■□

□□■

id:jeffsfia

ありがとうございます。

紹介されているページへ言ったのですが、僕が探しているニュースのものがありませんでした。

同じ原理なのでしょうか?

タブをクリックして、URLを確認してみたのですが、Yahoo!NEWSのように変化することがなかったので、ページが変わったようには思いませんでした(ページ内でその場所だけ読み込んでいるというような印象です)。

Yahoo!があそこだけ変えるのにHTMLを複数用意しているとは考えにくいです。

トップページにある、写真つきのニュースがある部分のタブなのですが、どうなのでしょう?

ところで、このウェブサイトはとても参考になりますね。

ありがとうございます。

2006/04/02 23:33:19
id:WANT No.2

WANT回答回数118ベストアンサー獲得回数92006/04/02 23:31:30ここでベストアンサー

ポイント150pt

 あれは、CSSで実現されています。

現在のネットでは結構ありふれた技術なので、

カンタンに実装できるとおもいます。

下記サイトで実装例が紹介されているので、

ご参考にされては如何でしょうか?

 Yahooもそうですが、右クリックで→ソースの表示でコードが見れます

http://nais.to/~yto/tools/css_tabs/

id:jeffsfia

おお、まさしくこれです。

挑戦してみます!!!!!!

ありがとうございます。

2006/04/02 23:34:48
id:kishiro No.3

kishiro回答回数161ベストアンサー獲得回数42006/04/02 23:24:48

ポイント25pt

作り方のリンクを張り忘れていたので、追記します。

http://technique.eweb-design.com/0905_tb.html

http://www.1uphp.com/con2/menu/tabmenu1.html

id:jeffsfia

何度もありがとうございます。

とても参考になりました。

2006/04/02 23:36:35

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません