- 締切済み
【HTML】タブメニューの中身となる要素について
HTML、CSSについて勉強中の者です。 タブメニューによってコンテンツ部分を切り替えるようなサイトがありますが（参考：http://hyper-text.org/archives/2013/05/css_only_tab_ui.shtml）、ほとんどのサイトで、中身となるコンテンツ部分は、全て同じHTMLファイルに記述しているように見受けられます。 コンテンツ部分がそこまで内容的に大きくないものであれば問題ないかと思うのですが、コンテンツ部分で少し複雑な処理をさせる場合などは、どうされているのでしょうか。 iframe要素をコンテンツ部分に入れて、別ファイルを呼び出すような書き方をするのが一般的なのか、あるいはどれだけ長くなろうとも全て一つのHTMLファイルに書いているのか、 もしくは全く別の方法で書かれているのか…。 皆さんがどうされているのか、教えていただきたいです。
- adober
- お礼率67% (19/28)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- t_ohta
- ベストアンサー率38% (5080/13275)
Ajaxで中身のHTMLをサーバから取ってきて差し替えるという方法もあります。
関連するQ&A
- 【HTML５】セクションを示す要素の使い分け
HTML、CSSを勉強中の者です。 HTML５のセクションを示す要素（section・article・aside など）をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。 様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。 あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「？？？」という感じです。 例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？ header・・・ヘッダー（オレンジ） nav・・・タブメニュー（薄青） section・・・タイトル（緑）、コンテンツ（濃青） article・・・記事（黄色） aside・・・サブメニュー（紫）、リンク（ピンク） footer・・・フッター（薄赤） また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。 最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。
- ベストアンサー
- HTML
- タブのメニューに画像って・・・
http://hyper-text.org/archives/2007/09/javascript_tab.shtml を参考にjavascriptでタブメニューを作りました。 上手く表示できたのですが、メニュー部分を画像にと、応用しようとしたのですが、うまく出来ません。 何が出来ないかというと、メニューをクリックしたらそのボタンを違う（カレント用の）画像が表示されるようにしたいのですが。。。 やり方や参考サイトなど、情報が有りましたら教えてください！！ よろしくお願いします！！！
- 締切済み
- JavaScript
- ページの上下に同じタブメニューを付けたい
現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。
- 締切済み
- JavaScript
- jQueryの画像を使ったタブメニューについて
下記のサイトを参考にタブメニューを制作いたしました。 jQueryを使ったタブ（画像）による画面切り替え http://web.showjin.me/2011/05/jquery_tab_image.html 各コンテンツの中にリストタグやpタグなどで内容を記載すると うまくいくのですが、divタグを使用するとまったく表示されないようです。 divタグに style="display: none;"と読み込まれてしまいます。 各コンテンツの内容にjqueryを使用してサムネイルのアルバムを設置したいと 思っているので、divタグなどでも問題なく表示されるようにしたいと思っています。 scriptを修正して実現できる方法が分かる方がおられましたら お教え頂けないでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- Netscape7でtxtファイルに記述されているHTML文をiframeでHTMLとして表示するにはどうしたらよいのでしょうか？
初心者です。わかる方がいらっしゃればぜひ教えてください。 現在、サイトを構築しているのですが、 別のサイトにおいてある***.txtというファイルを iframeで取り込んでいます。 ***.txtの中身は、HTMLのタグ（<li>や<a href="">など）が記述されています。もともと、そのtxtファイルは別サイトでSSIで取り込まれているものなので、<HTML>タグや<BODY>タグなどはありません。 IEで私のサイトを閲覧すると、うまい具合にHTML文としてリンクなどが表示されるのですが、Netscape7やfirefox、Mozillaで閲覧をすると、HTMLのソースがそのまま表示されてしまいます。 試しにtxtファイルをダウンロードして、拡張子をhtmに変更し、iframeのsrc="XXX"の記述を、そのHTMLファイルのローカルパスにしてみたところ、Netscape7でもうまくHTMLとして認識されたようで、リンクなどが表示されました。 これはやはりブラウザの仕様なのでしょうか？iframeに何かの記述を追加すれば解決するのでしょうか？ 必ずしもiframeにこだわっているわけではありませんので、何か別の解決方法があればそれでも結構です。 IEでもNetscape7などのブラウザでも、うまくHTMLとして表示されれば手段は問いません。 ちなみに、別サイトのtxtの拡張子は変更できません。 ＃ その別サイトの管理者には、そのtxtファイルを取り込むことについて了解をいただいています。
- ベストアンサー
- HTML
- タブメニューを上下に設置
下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。 スクリプトをどのように すればいいかお分かりの方がおられましたら ご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div> <ul class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- フレームの外枠を消したい HTML、CSS
<iframe></iframe> このタグを使ってページ内にフレームを作成しました。 このフレームの外枠(ボーダー？)を消したいのですが・・・。 タグ内にborder=0を入れ <iframe border=0></iframe> としましたが、外枠は消えません。 CSSも少しならわかるので、CSSを使用する方法でもいいのですが・・・。どちらにしろHTMLで作られている外枠部分を消す必要がありますよね？考え方が間違っていたらおかしなこと言ってるのかもしれません。 とにかく<iframe></iframe>タグで作成したフレームの外枠を消したい。ということで質問させていただきます。わかる方どうぞよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSによるタブメニューの構築について
アクセスありがとうございます。 可変幅のタブ形式メニューをスマートなHTMLで実現したく、CSSで試行錯誤しましたが、どうも成功しません。 アドバイス頂ければと思います。 http://www.pageflakes.com/ こちらのタブメニューの様な物を以下のHTMLで作りたいと思っています。 <ul id="tab"> <li><a href="#">TabName1</a></li> <li><a href="#">TabName2</a></li> <li><a href="#">TabName3</a></li> <li><a href="#">TabName4</a></li> </ul> 使用する画像は "tab_corner_left.png" "tab_corner_right.png" "tab_background.png" の３種類で、名前の通りそれぞれ左端・右端・テキスト部の背景となっており、タブの高さは29pxです。 わざわざ画像を３種類に分けるのは、タブ内に何文字でも入力できる可変幅にしたいからです。 また、ul自体も"position: absolute;" "top: x;" "right: y;"で配置位置を直接指定できればと思います。 タブ内のテキストも、上下の余白を近似値にしたいと思います。 描画エンジンは、GeckoとIEの両方に対応したいと思います。 その際のhackはなるべく避けたいです。 HTMLの多少の改変は構いませんが、直接imgタグを使ったりは避けたい所です。 よろしくお願いします。
- ベストアンサー
- HTML
- ＨＴＭＬにジャバスクリプトを書く位置は？
http://archiva.jp/web/javascript/tab-menu.html 上記のサイト「タブ切替ジャバスクリプトプログラム」は、上下２つのスクリプトに分かれています。 上のスクリプトは、「置き場所は</body>直前を勧めとく」と解説されています。 下のスクリプトは、「先の起動部分より先に宣言されていなければならない」と解説されています。 それなら、上下を逆にして１個のスクリプトで書けば良いのではないでしょうか？ http://hyper-text.org/archives/2007/09/javascript_tab.shtml その問題を解消する為に、上記のサイトでは「window.onload=function() 」で上のスクリプトを囲んでいます。 どうして、この様な解決法になるのでしょうか？
- ベストアンサー
- JavaScript
- cmsをつかって吐き出されたHTMLファイルの中身を、別のページで共有
cmsをつかって吐き出されたHTMLファイルの中身を、別のページで共有したいと考えております。 実際には共通のサイドメニューの部分をCMSで生成して、一つのhtmlファイルとして生成し、そのhtmlファイルの中身を共通する各ページの部分に読み込みたいのですが。。 SSIやphp、javascript、iframeなどを使ってhtmlファイルを外部から読み込む為の方法がいくつかありますが、自動で生成されたHTMLファイルの、任意の部分だけ（bodyタグ以下のソースだけ、IDを指定しているdiv部分のみなど）を指定して読み込む方法があれば教えてください。 サーバーの負荷も考えるとできれば、ssiではなくjavascriptで実行できればと考えております。どなたか教えて下さい、お願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 なるほど…HTMLの言語だけで考えていましたが、そういうものもあるのですね。 悩みますね…。