![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
Web作成初心者(ド素人)です。
今、Webページを固定ヘッダーを使って作成しているのですが、固定ヘッダにあるリンク元からリンクをクリックした際に、固定ヘッダの下部分にリンクをしたいと思っています。
図のように、固定ヘッダの「(1)」のリンクをクリックすると、画面下部のみ「(1)」の画像が表示されるページへ遷移し、「(2)」のリンクをクリックすると、画面下部のみ「(2)」の画像が表示されるページへ遷移をさせたいです。
固定ヘッダにそのままリンクを書くと、当然ではありますがブラウザの全体ページとしてリンク先の画像があるページへ移動してしまいます。
固定ヘッダ部分は何も遷移せずに、下部分のみ変更させたいです。
すいませんが、ご教授をお願いできませんでしょうか。
よろしくお願いいたします。
![「Webページ作成の際に、固定ヘッダの下へ」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/3/542908071_5d232b6607c5f/M.jpg)
No.3ベストアンサー
- 回答日時:
No2です
>CSSでの非表示方法を調べさせていただきます。
別ファイルを読込む方式でなくとも良いのであれば、単に、表示/非表示だけの制御を行えば良くなるので、比較的簡単な仕組みで実現可能です。
ごく簡単なサンプルを例示しておきますので、何かのご参考にでもなれば。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
menu { background-color:#E66; }
menu a {text-decoration:none; color:white; margin:15px; }
div.frame { width:80vw; height:60vh; margin:10vh 10vw; }
div.frame>div { width:100%; height:100%; display:none; }
div.frame>div:target { display:block; }
</style>
</head>
<body>
<menu>
<a href="#no1">link1</a>
<a href="#no2">link2</a>
</menu>
<div class="frame">
<div id="no1" style="background-color:#CFF;">
①の内容
</div>
<div id="no2" style="background-color:#CFC;">
②の内容
</div>
</div>
</body>
</html>
こんばんわ。
親切にサンプルコードまでありがとうございます。
さっそく実験してみました結果、私の望む形のものができました!
ありがとうございました!。
もう少し勉強して、中身を完全に理解してから、仕事のコードに組み込ませていただきます。
No.2
- 回答日時:
No1です
>iframeは~~~求めているものとは違いました。
別にiframeでなくとも、objyectなどでも外部HTMLは表示可能なようです。
とは言っても、リンクとの連動ができなくなるでしょうから、スクリプト等を用いて参照先を書き換えるといった連動処理が必要になるものと思います。
どうせスクリプトを利用するなら、表示用の要素等を限定せずに任意の包含要素の中に外部ファイルの内容を流し込むという方法も考えられます。
リンクのクリックをトリガーとして、ajaxで外部ファイルを読込み、包含要素の中に表示させるといった仕組みです。
…とは言え、下にゆくほど難易度は高くなると思いますので、一番簡単なのがNo1で挙げたiframe利用の方法になると思います。
一方、外部ファイルにこだわらなくても良いのであれば、あらかじめ①、②とも読み込んでおいて非表示にしておき、クリックに対応して表示するという仕組みにしておく方法も考えられます。
これであれば、CSSだけでも実現可能と思います。
被リンク要素の疑似クラス(:target)を利用して、クリックされたら表示するように設定しておけばよさそうですので。
なるほど!
確かに難易度が高いところはむつかしい(^^;ですが、非表示ならば調べればできるかもしれません。
スクリプトはWeb作成始めて1週間の私には荷は重すぎます。
CSSでの非表示方法を調べさせていただきます。
No.1
- 回答日時:
こんにちは
>「(1)」の画像が表示されるページへ遷移し、
ということは、添付画像の①、②のところの内容は別ページと考えて良いのでしょうか?
一番簡単そうな方法は、対象の部分をiframeにしておいて、ヘッダーのリンクからはtarget指定でリンク内容を表示させる方法でしょうか。
https://developer.mozilla.org/ja/docs/Web/HTML/E …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- WordPress(ワードプレス) WordPress ドメイン移転後のURL変更 2 2022/07/03 08:53
- WordPress(ワードプレス) wordpressでphpを読み込みたい 1 2022/10/30 23:40
- WordPress(ワードプレス) WordPressのメニューについて 1 2022/10/22 01:10
- WordPress(ワードプレス) ワードプレスのパーマリンク設定について 1 2023/02/11 19:08
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- ホームページ作成・プログラミング ログインしないとみることができないWebページの作成方法 3 2023/07/29 13:33
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
静止画画像をクリックすると音...
-
トリミングで表示した画像をク...
-
サイトにコンテンツを並べる際...
-
HTMLで特定の文字だけ色を変え...
-
Google検索も終わりですか? グ...
-
テーブルの行を折りたたみたい...
-
HTMLで表をつくったのですがウ...
-
HTMLですCSSです この画像のよ...
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
WEBページを強制的に横画面で見...
-
htmlです 文字はタマで、 黒線...
-
webデザインの勉強で、HTML/CSS...
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報
こんにちわ、ご返信ありがとうございます。
説明不足で申し訳ございません。
①のページと②のページは確かに別ページになります。
ただフレーム機能を用いて、上部の固定メニューと下のコンテンツエリアを分けているわけではなく。CSSレイアウトによって分けています。
私の言葉足らずでどう表現すればいいのかむつかしいのですが、
上部のメニューバー①・②をクリックすると、ページ全体が切り替わらずに、下部のコンテンツエリアのみが表示が変わるということを実現したいです。
iframeは調べたり、試したりはしてみたのですが、iframeを指定したところがスクロールバーのあるBOXになってしまい、求めているものとは違いました。
本当に言葉足らずで申し訳ございません><