• ベストアンサー

見出しシールみたいなテーブル。

よく企業のサイトで見かけるような、 見出しタブのようなことがしたいです。 (書類にくっつけた見出しインデックスシール みたいな感じ) タブをクリックすると目的のページが 表示されるようなものです。 仕掛けを考えてみたんですが、 フレームでタブと説明文を表示する 部分を切ってタブにリンクURLを 挿入、説明を表示させたいテーブル部分にリンク させる。。。みたいな感じでしょうか? そういうテンプレートやフリー素材などを 探してみたんですがキーワードの入れ方が 悪いのか思ったようなのが見つかりません。 言葉が足りなかったら補足しますので、 よろしくご教授願います。

  • HTML
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • eco7
  • ベストアンサー率62% (15/24)
回答No.2

はじめまして^^ そういうタブ式の表示方法はわかりやすくていいですよね。 やり方はいくつか考えられますが、表示方法が異なってきます。 lolipop_starさんのおっしゃるフレーム分けして表示する事もできます。 タブリンク ───── ←フレーム境界 内容 ↑上下分けの場合。 選択中のタブに色をつける方法は、 フレーム分けしないでタブごとに各ページを作成し、それにリンクするという表示方法もあります。 恐らく有名サイトや企業サイトではこのパターンの方が多い気がします。 (各ページ毎に同じフォーマットのデザインで作成する方法) 検索するとJavaScriptを使ったものが多く紹介されていますが、 基本的には上記方法で可能です。 検索は 「素材 タブ メニュー」等でかければいくつかHITしましたので 試してみてください。 http://flashcafe.jp/menu/tab/ http://www.sys5jp.net/simplest/tablei.php?act=9 こういったものもありました。 タブの素材は、素材屋さんによって表現方法がまちまちなのと、カテゴリとしてくくっている人が少ないと思われるので、 可能ならば自作されたほうが早いかもしれません^^;

lolipop_star
質問者

お礼

上の図(?)、とってもわかり易いかったです。 私の考えてる方法でもできる事も 教えてくださいまして、ありがとうございます。 「フレーム分けせず、タブごとに各ページを作成し、 それにリンクする」 という方法はいまいちイメージが掴めないです。 教えていただいたURLのものどちらも 良い感じです! シンプレストってサイトは自分でも見に行ったのに、 このコーナーは気がつかなかったです。(^_^;) 回答ありがとうございました。

その他の回答 (2)

回答No.3

フレームはあまりお勧めしません。 タブの高さが各OSやブラウザで違うので あなたのPCで見れても他の環境の人だと 隠れてしまう場合がありますよ。 それに、ユーザビリティが悪いので。 DHTMLでたくさんサンプルがあります。 http://www02.so-net.ne.jp/~oka/oritatami3c.html の Java、DHTML、JavaScript、CSS、XMLサンプルをクリックして、トップナビバーをクリックすると、すごくたくさんのタブ型ナビゲーションのサンプルと書き方があるので参考にされては? あとはPHPとかでヘッダのテンプレートを作成して、 一括管理とかもできますけど、、、ちょっと難しいかな?

lolipop_star
質問者

お礼

確かにブラウザによってフレームの 表示が若干違っちゃいますよね。 埋まってしまったら何も出来ないですね。 教えていただいたURL参考になりました。 説明もわかりやすかったです。 PHP、勉強したいんですが そこまでまだ余裕がなくて。。。 なので、一括管理出来る事も 良くわかりませんでした。 便利そうなので、余裕があったら 勉強してみようかな。 回答ありがとうございました。

回答No.1

>よく企業のサイトで見かけるような、 >見出しタブのようなことがしたいです。 参考URLみたいな物をイメージしておられるのでしょうか? 「タブのような見た目の素材」が欲しいのですか? それとも、構築法が知りたいのですか? それによって回答が変わってくるのですが。 タブのような見た目にするためには、 おそらくは「タブのような見た目の画像」をテーブルなどで配置して使うことになると思います。 構築法については、お手本にしたい企業サイトのソースをみてみると勉強になりますよ。

参考URL:
http://www.apple.com/
lolipop_star
質問者

お礼

回答ありがとうございます。 参考URLのような感じのページを 作りたいんです。 >「タブのような見た目の素材」が欲しいのですか? それとも、構築法が知りたいのですか? 構築法については私が上で考えたような 仕掛けでいいのかということを教えて 戴きたかったんです。 ソース見て研究してみます。 タブのような見た目の素材も情報を 募集中です! 出来たらロールオーバー用に 色違いのものがあると尚うれしいです。 自分で作るっていうのも手ですが。

関連するQ&A

  • HP作成のフレームとテーブル

    HP作成に挑戦しています。 無料ブログなどで記事やプラグインに見よう見まねでタグを使っている程度です。 HP作成にあたりページヘッダー部分にHPのタイトルを入れ2カラムにしたいのですがフレームで分割すると一つのフレームにファイルを割り当てているようなのですが(例えばトップページを分割するならばフレーム定義ファイルはindex.htmlに対し左フレームに****.html右フレームに****.htmlというように)コンテンツの部分はそれでも構わないのですがヘッダーとなる部分をフレーム分割するとタイトルだけ表示させることに悩んでしまいました。 無料ブログのように各分割部分にテキストで書き込むようにするにはテーブルを使って分割するのでしょうか? 無料ブログ等はテンプレートのスタイルシートが出来上がっておりますので当然未熟な私にも使えるのですが1からレイアウトとなると 戸惑います。 HP用のテンプレートをお借りしたとするとブログのようにテキストで使えるのでしょうか? 不慣れな為的を得て質問できずにごめんなさい

  • 見出し用フレームがうまく表示されない

    FrontPageで見出し用フレームを作成しました(縦2分割) プレビューで見る限りクリックするとホバーボタンの色も変わり指定のリンク先にジャンプしてちゃんとページが表示されます 10ページのHPですが見出しは右フレームにちゃんと固定され左フレームで各ページが自由に移動表示できます ところがインターネットにアップロードすると見出しフレームのホバーボタンがねずみ色でフォントも表示されずクリックしても何の変化も無しです ファイルは全てアップロードしたのですが何か抜けているのでしょうか よろしくお願いいたします 使用OS:XP I/E6.0 FrontoPage2000

  • テーブルが欲しい!!

    タブが付いているテーブル(http://liki.boo.jp/szi/szi.html←こんなかんじ)が欲しいのです。 色々探しましたが、上記のものかhttp://www.sys5jp.net/simplest/tablej.php?act=2 ここくらいしか見つかりませんでした。 タブの部分は自分で書きたいのですが、素材サイトでも作り方でも いいのでわかる方は教えていただけないでしょうか? 作り方を教えてくさる方は、本当にあつかましいのですが 僕自身HP作成は初心者なので噛み砕いてわかりやすく説明していただけると嬉しいです。

  • 見出しについて

    golive を使ってHP作成中です。 ブラウザによる検証を行ったとき、使用するブラウザによって文字がずれて見えてしまう可能性はあると思います。しかし、今回のことはブラウザが原因とは考えにくい感じがします。(今まで、safariばかりつかってましたが、くずれてみえるHPは知りません。) 以下具体的に提示します。 cssで見出し<h5>を作成し、各htmlファイルに展開しました。 htmlファイルで見出し<h5>をテーブル内で使用しました。IEだとテーブルの中央に見えるのに、safariでは上によってます。試しに見出しではなく<tb>のままの設定ですと中央に表示されます。 以上により、cssの見出し<h5>の設定がおかしいのかと思ったのですが。ここでさわったのはテキストの色、サイズ、行の高さのみです。いろいろさわってみたのですが、それらしい設定がないような気がするのですが、どなたかご存じの方がいらっしゃればぜひ教えてください。

  • 「見出し語」だけを検索するスクリプト

     現在、テーブルを組んで辞書のようなページを作っているのですが、そのタテ一列だけを「見出し語」として文字検索の対象にするには、どうスクリプトを記述すれば良いでしょうか?  現在使っているスクリプトは、 1,テキストエリアに文字を入力 2,「検索」ボタンを押す 3,一致した部分が反転表示される  といった感じなのですが、見出し語だけでなく説明文も引っかかってしまい、また一箇所しか反転表示されないので、結果が複数ある場合には「検索」ボタンを何度も押さなければならないんです。  そこでできれば、 1,テキストエリアに文字を入力 2,「見出し語のみ検索」か「説明文も含めて検索」かをプルダウンメニューで選ぶ 3,「検索」を押す 4,一致した部分が反転表示される。複数ある場合は一度にすべて反転表示になる  という風にしたいのですが、できるのでしょうか? ご助言よろしくおねがいいたします。

  • [WORD2003]見出しマップや目次がおかしくなります

    ご存知の方がいらっしゃいましたらお教えください。 環境:Windows XP   :Word2003 本文中のスタイルに「見出し1~3」を使用しており、見出しマップと目次も作りました。 おかしな現象としては、先日まで「見出し」の設定通りにマップも 目次も表示されていたのですが、何か設定を変えてしまったのか、 「見出し」に設定していない文章が「見出しマップ」にリンクとして出てきてしまいます。(見出しの設定をした文章もインデックスされます) 試しに、 出てきてしまう部分を、「書式のクリア」 ↓ この操作で見出しマップから消えます ↓ 保存して閉じる ↓ 再度開くと、「書式のクリア」状態なのに見出しマップに表示 といった具合です。 他のPCで同じファイルを開いてみたのですが、問題なく先日までの 正しい設定で見出しマップが表示されました。 なので、わたしのPCのwordの設定か何かがおかしいのでは?と思っています。 このような状態なのですが、この症状の解決方法をご存知の方、お教えください。よろしくお願いいたします。

  • テーブル?フレーム?

    geocitiesを利用しています。 ホームページビルダーを利用して、今までページを作っていました。 質問です。 よく、素材サイトなどのページで、 フレームで言うと縦3列に並んでいて、中央だけが表示されているような状態のサイトや、 (両端のフレームにあたるところはつねに空白) 画面中央に縦の長四角のスペースがあり、 そこだけが画面として変化するサイトがあります。 あのように、全面が表示されないページを作りたいのですが、 テーブルやフレームなどをあまり利用した事がありません。 どのような処理、タグを使うと、あのようになるのでしょうか。(説明しにくいので、補足はいたします) また、トップページが全画面でも、 子画面が開き、ブラウザボタンなどがつかえないような、 大きさが固定されたページがでるサイトもあります。 前者よりこちらのほうが簡単であれば、こういった形式でもいいな、と思っています。 とにかく初心者で、ビルダーで作ってきたので、 説明が下手なのですが、 わからない部分は補足させていただきますので(本日中には必ずレスが返せる体制です) よろしくお願いいたします。 FTPなどでアップするのではなく、ブラウザ上からアップしているので、フレームを利用する際にも、いちいちフレームのページを1・2・3、などとアップしています。 (もしかしたら方法を知らないだけかもしれません) 「こんな感じで検索すればわかる」というご意見でもいただけると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブル内に貼るリンクについて教えて下さい。

    HP作成に関する疑問です。 左右2つにわけたテーブルの左にある画像にリンクをはって、 右のテーブルにその結果(リンク先のページ)を表示したい場合、使うのはCGIでしょうか?Javascriptでしょうか? それとも、それは普通にHTMLでできることなのでしょうか? フレームでそういった表示方法を使ったことはあるのですが、今回はテーブルの中で使いたいのです(が、何を学んだらいいのかわからずに困っています) 初歩的な質問で申し訳ありませんが、教えて下さい。

    • ベストアンサー
    • CGI
  • フレームについて

    こんにちは、初めて質問させていただきます。 フレームでホームページをつくり、いろいろな 検索サイト(goo・google等)にリンクを させていただいたのですが、キーワードで 検索をしたときに、フレームの中のページが ひっかかって出てきてしまいます。 (フレームのページ→index.htmlなのですが、  menu.htmがひっかかる) 見たときに、index.htmlを表示させるように するには、どうしたらよいのでしょうか?

    • ベストアンサー
    • CSS
  • Word2007の見出しマップが、上手く動作しない

    こんにちは。 現在、32bit版WindowsVistaのSP2で、Word2007を使用しています。 また、今までのWindowsUpdateは、全てインストールしている状態です。 Word2007では、リボンの[表示]タブの[表示/非表示]の部分にある、[見出しマップ]という項目にチェックを入れると、画面の左端に、見出しマップが表示されます。 普通、この見出しマップに表示される文字列は、「見出し1」や「見出し2」といった書式が付いている文字列だけです。 基本的に、こういった見出し系の書式は、文字列を選択した状態で、 リボンの[ホーム]タブの[スタイル]の部分から設定しなければ、付かないはずです。 しかし、こういった見出し系の書式が付いていないにも関わらず、いつの間にか、 特定の文字列が[見出しマップ]に表示されている事があります。 具体的には、添付した画像にある、 「Ex. What is the highest of this ・・・」や、 「Ex. see ocean earth」といった文字列の事を言っています。 これらの文字列には、見出し系の書式が付いていないにもかかわらず、何故か[見出しマップ]に表示されています。 こういった現象は特に、[見出しマップ]という概念を知る前に作成したdocxファイル内にある、沢山の文字列で、起きています。 これでは、本当に見出しにしたい文字列だけを、[見出しマップ]に表示させる事ができないので、 大変困っている状態です。 [見出しマップ]に表示されている文字列を選択し、リボンの[ホーム]タブの[スタイル]の部分で、「標準」という書式を選択すると、文字列の書式が全てクリアされるので、その文字列は[見出しマップ]から消えるのですが、[見出しマップ]に表示されている文字列が沢山ありすぎて、1つのdocxファイルを整理するだけでもかなり苦労しています。 それなら、ファイル内の全ての文字列を選択した状態で、「標準」を選択するとよいと思われるかもしれませんが、それだと、色やフォントサイズなどを設定した文字列の書式まで解除されてしまうので、ダメなのです。 しかも、[見出しマップ]に表示されている文字列の書式を、一度クリアして、[見出しマップ]に表示されていない状態にしてから、docxファイルを上書き保存して閉じた後、再びそのファイルを開くと、 [見出しマップ]の状態が、書式をクリアする前に戻ってしまっている事もあります。 なぜこういった問題が起こるのでしょうか? また、回避方法はあるのでしょうか? 何か御存じの方がいらっしゃれば、是非、情報を提供して頂きたく思います。 では、よろしくお願い致します。

専門家に質問してみよう