急いでいます！

Webページ作成の際に、固定ヘッダの下へのリンク

解決済

質問者：ろでます
質問日時：2019/07/08 20:39
回答数：3件

Web作成初心者（ド素人）です。

今、Webページを固定ヘッダーを使って作成しているのですが、固定ヘッダにあるリンク元からリンクをクリックした際に、固定ヘッダの下部分にリンクをしたいと思っています。

図のように、固定ヘッダの「(1)」のリンクをクリックすると、画面下部のみ「(1)」の画像が表示されるページへ遷移し、「(2)」のリンクをクリックすると、画面下部のみ「(2)」の画像が表示されるページへ遷移をさせたいです。

固定ヘッダにそのままリンクを書くと、当然ではありますがブラウザの全体ページとしてリンク先の画像があるページへ移動してしまいます。

固定ヘッダ部分は何も遷移せずに、下部分のみ変更させたいです。

すいませんが、ご教授をお願いできませんでしょうか。
よろしくお願いいたします。

こんにちわ、ご返信ありがとうございます。
説明不足で申し訳ございません。

①のページと②のページは確かに別ページになります。
ただフレーム機能を用いて、上部の固定メニューと下のコンテンツエリアを分けているわけではなく。CSSレイアウトによって分けています。

私の言葉足らずでどう表現すればいいのかむつかしいのですが、
上部のメニューバー①・②をクリックすると、ページ全体が切り替わらずに、下部のコンテンツエリアのみが表示が変わるということを実現したいです。

iframeは調べたり、試したりはしてみたのですが、iframeを指定したところがスクロールバーのあるBOXになってしまい、求めているものとは違いました。

本当に言葉足らずで申し訳ございません＞＜

No.1の回答に寄せられた補足コメントです。補足日時：2019/07/09 11:14
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.3ベストアンサー

回答者： fujillin
回答日時：2019/07/10 09:38

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>

- 1
- 件

通報する

この回答へのお礼

こんばんわ。
親切にサンプルコードまでありがとうございます。

さっそく実験してみました結果、私の望む形のものができました！
ありがとうございました！。

もう少し勉強して、中身を完全に理解してから、仕事のコードに組み込ませていただきます。

通報する

お礼日時：2019/07/10 19:56

No.2

回答者： fujillin
回答日時：2019/07/09 12:51

No1です

＞iframeは～～～求めているものとは違いました。
別にiframeでなくとも、objyectなどでも外部HTMLは表示可能なようです。
とは言っても、リンクとの連動ができなくなるでしょうから、スクリプト等を用いて参照先を書き換えるといった連動処理が必要になるものと思います。

どうせスクリプトを利用するなら、表示用の要素等を限定せずに任意の包含要素の中に外部ファイルの内容を流し込むという方法も考えられます。
リンクのクリックをトリガーとして、ajaxで外部ファイルを読込み、包含要素の中に表示させるといった仕組みです。

…とは言え、下にゆくほど難易度は高くなると思いますので、一番簡単なのがNo1で挙げたiframe利用の方法になると思います。
一方、外部ファイルにこだわらなくても良いのであれば、あらかじめ①、②とも読み込んでおいて非表示にしておき、クリックに対応して表示するという仕組みにしておく方法も考えられます。
これであれば、CSSだけでも実現可能と思います。
被リンク要素の疑似クラス（:target）を利用して、クリックされたら表示するように設定しておけばよさそうですので。

- 1
- 件

通報する

この回答へのお礼

なるほど！
確かに難易度が高いところはむつかしい(^^;ですが、非表示ならば調べればできるかもしれません。
スクリプトはWeb作成始めて1週間の私には荷は重すぎます。

CSSでの非表示方法を調べさせていただきます。

通報する

お礼日時：2019/07/09 22:23

No.1

回答者： fujillin
回答日時：2019/07/09 10:36

こんにちは

＞「(1)」の画像が表示されるページへ遷移し、
ということは、添付画像の①、②のところの内容は別ページと考えて良いのでしょうか？

一番簡単そうな方法は、対象の部分をiframeにしておいて、ヘッダーのリンクからはtarget指定でリンク内容を表示させる方法でしょうか。
https://developer.mozilla.org/ja/docs/Web/HTML/E …