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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

3回答

338閲覧

HTMLとCSSでサイトを作っている場合のメニュー作成方法

Kussy-

総合スコア59

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/08/24 02:37

初歩的な質問ですが、検索してもピンとくる答えがなかったため質問させていただきます。

■聞きたいこと
メニューバーを設置する際の方法(構成)として、よい案があれば教えていただきたいです。

■やりたいこと

<li>で作成した横並びのメニューバーを各コンテンツページの一番上に設置したいです。 メニューバーは<li>を入れ子にして多階層ドロップダウン項目があります。

■試した事(問題点)
メニューバーをheader.htmlとして別ページに作り、各コンテンツページのあたま部分にiframeで読み込みをしたのですが、ドロップダウンの部分がiframeからはみ出してしまい、選択できません。
overflowやz-indexを試してみましたが、ドロップダウン部分だけ前にすることはできませんでした。

■考えられる改善方法
iframeではなく、各コンテンツページにメニュー部分を直書きするしかないのでしょうか。
※ただそれだとコンテンツページが増えれば増えるほど、メニューを更新する場合の編集箇所が増えメンテナンス性が悪いように思えます。

他にいい案があるように思えるのですが、それがなにかわからないので質問させていただきました。

初歩的な質問で恐縮ですが、宜しくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

サーバー側の言語で処理するのが確実ですが、場合によってはjavascriptなどで
対応してもよいでしょう。

投稿2017/08/24 03:31

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kussy-

2017/08/24 04:52

ご回答ありがとうございます。 jsでの対応を検討してみます!
guest

0

ベストアンサー

共通化については下記のように色々方法はあります。
静的HTMLのためのテンプレートエンジン:第1回 共通部分が多いHTML

現在の環境と作られてるソースコードがないためどれが最適かというのは明言できませんが・・。
もしかしたら現在のiframeのままでも現象を解決できるかもしれませんし。

静的HTMLに対するテンプレート機能を備えたエディタとかあったように思いますので、それを使うのも手です(有料ですがDreamweaverとか)
Webからログインしてコンテンツを編集するCMSもたくさんありますので
動作環境を整える必要がありますが、いっそCMSを使ってしまうのも1つの手です。

投稿2017/08/24 03:01

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kussy-

2017/08/24 04:57

ご回答ありがとうございます。 CMSですか。、 それが出来たらベストなんですけどねぇ。。 環境提示を失念しておりましたが、参考サイトなどのご提示ありがとうございます
m.ts10806

2017/08/24 05:02

最初の参考サイトに共通化について色々書かれているのでそちらも試してみてください。
Kussy-

2017/08/24 09:47

ありがとうございます。 結局参考サイトに記述のjsを使用する方法にて実現することにしました。 また機会がありましたら宜しくお願いいたします。
guest

0

ifreamでそういう使い方した経験が無いのでなんとも言えませんが
z-indexで数値を増減させてもifreamの中での上層下層の設定になるのでは無いかと(間違ってたらすみません)
共通のヘッダー作るならphpが一番手っ取り早いですが、phpを使わないのであれば
Wordpress(ゆくゆくはphp使いますが)等のCMSを使うか、header.htmlは諦めるかしか無いように思います。
ヘッダーのナビゲーションにそんなに修正(追加)が入るのでしょうか?
大分類(ナビゲーション) → 中分類(リストでドロップダウン)までにして
リンク先で小分類の一覧を表示させる等の運用になるのでは無いでしょうか?

投稿2017/08/24 03:17

poko_poko

総合スコア168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kussy-

2017/08/24 04:55

ご回答ありがとうございます。 やはりz-indexはそこですよね。。。 確かに修正タイミングは少ないと思いますが、できるだけ同じ部分は纏めて共有化しておきたいというのがありまして、今回の質問にいたっております。 運用についてはご提示頂いたような形になると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問