質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

cssで、タブ切り替えとiframe切り替え

nitarou2
nitarou2

総合スコア0

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

3263閲覧

投稿2019/04/25 05:44

編集2022/01/12 10:58

先程質問させて頂いた件の続きです。
Htmlでタブを変えると同時にページも変えたいのですが、タブが変わっても、ページが変わりません。どのように記述すれば良いでしょうか?
お力添えください。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* --- タブ(ラジオボタン)のエリア ------------------------ */ #tabArea{ line-height : 1; /* 1行の高さ */ letter-spacing : 0; /* 文字間 */ text-align : center; /* 文字位置は中央 */ } /* --- ラジオボタン ---------------------------------------- */ #tabArea input[type=radio] { display : none; /* ラジオボタン非表示 */ } /* --- ラジオボタン直後のlabel ----------------------------- */ #tabArea input[type=radio] + label { display : inline-block; position : relative; padding : 6px 10px; /* labelの余白 */ font-size : 12pt; /* タブの文字サイズ */ font-weight : bold; /* タブは太文字 */ border : 3px solid #999; /* 未選択タブのの枠線 */ border-bottom : none; /* 下罫線は消す */ border-radius : 5px 5px 0 0; /* タブの上左右角丸 */ margin : 0 1px; /* タブ間隔 */ background : #fff; /* 未選択タブの背景色 */ color : #666; /* 未選択タブの文字色 */ } /* --- 選択されたラジオボタン直後のlabel ------------------- */ #tabArea input[type=radio]:checked + label { border-color : #4682B4; /* 選択タブの枠線 */ color : #4682B4; /* 選択タブの文字色 */ cursor : default; /* デフォルトカーソル */ z-index : 2; /* 重なりを最前面へ */ } /* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */ #tabArea input[type="radio"]:not(:checked) + label:hover { background : #b4cee2; /* カーソルタブの背景 */ cursor : pointer; /* リンクカーソル */ } /* --- タブ下の本体エリア ---------------------------------- */ .tabBody{ position : relative; border : 3px solid #4682B4; /* 本体の枠線 */ background : #fff; /* 本体の背景色 */ margin-top : -3px; /* タブと罫線分重ねる */ z-index : 1; /* 未選択タブより全面 */ } .auto-style1 { font-size: xx-small; } </style> </head> <body> <div id="tabArea"> <input type="radio" name="tab" id="tab1" onclick="tabClick(1)"> <label for="tab1">メニュー1<a target="Change" href="表示したいurl1"></a></label> <input type="radio" name="tab" id="tab2" onclick="tabClick(2)"> <label for="tab2">メニュー2<a target="Change" 表示したいurl2"></a></label> <input type="radio" name="tab" id="tab3" onclick="tabClick(3)"> <label for="tab3">TOPへ戻る<a target="Change"最初に表示したいurl"></a></label> <div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"></iframe> </div> <script type="text/javascript"> function tabClick(argTabNo) { document.getElementById("tabNo").innerHTML = "タブ" + argTabNo; } </script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

dit.
dit.

2019/04/25 07:17

コードがうまくコードブロックになっていないので、質問を編集し 「お力添えください。 ```html <!DOCTYPE html PUBLIC "-//……」となるようにしてください。 パソコンからなら右側にプレビューが表示されているはずなので確認しながら編集してください。
nitarou2
nitarou2

2019/04/25 07:35

すいません。会社のPCからではセキュリティのためか、当ホームページに入れないので、スマホで書いております。ご迷惑お掛けします。 編集致しましたので、多分治っていると思います。
dit.
dit.

2019/04/25 07:46

修正確認できました
x_x
x_x

2019/04/25 08:06

開始タグが終わる前に終了タグが出現していますが、この通りに書かれているのでしょうか? frameborder="0"</iframe
nitarou2
nitarou2

2019/04/25 08:21

今は、ご指摘の通りの記述になっていて、エラーになっていますね。 ここも間違った記述なんだと思うのですが、素人なので、正しい記述がわからないです。 すいません

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。