人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: jeffsfia
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Yahoo ウェブサイト トップページ リニューアル 書籍
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kishiro
●25ポイント

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

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

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

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


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

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

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

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

■□□

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

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

□■□

□□■

◎質問者からの返答

ありがとうございます。

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

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

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

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

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

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

ありがとうございます。


2 ● WANT
●150ポイント ベストアンサー

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

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

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

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

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

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

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

◎質問者からの返答

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

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

ありがとうございます。


3 ● kishiro
●25ポイント

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

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

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ