• 締切済み

html ヘッダーを固定し

海外サイトのテンプレートを元にホームページを作っています。 出来上がったホームページを改良したいと思っています。 ヘッダーとフッターを固定し、 ヘッダーの中にはcssを使ったhtmlを入れ、 中央部分にリンク先が表示されるようにしたいです。 検索しながら試行錯誤していますが、全然うまくいきません。 素人が手を出す領域ではないかもしれませんが、 お知恵を貸して頂けるとありがたいです。 よろしくお願いします。

画像を拡大する
  • CSS
  • 回答数1
  • ありがとう数14

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

スタイルシートを使用してプレゼンテーションを指定する最大の目的は 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ですよ。 　デザイン目的でHTMLを書かないためです。 ＞海外サイトのテンプレートを元にホームページを作っています。 　文書構造が異なるため、それだと決してうまく行きません。 ★HTMLの文書構造が分からないので具体的なアドバイスは不可能です。 ＞ヘッダーとフッターを固定し、ヘッダーの中にはcssを使ったhtmlを入れ、中央部分にリンク先が表示されるようにしたいです。 　という発想ではなく。 ・ヘッダーを視覚系メディアではウィンドウのトップに固定して 　　position:fixed;height:100px; ・ヘッダーの下部にナビゲーションリストを横並びで表示して 　　position:absolute;top:100px; ・ポインターを項目に乗せると、その詳細がヘッダーの下にぶら下がって表れるようにしたい 　　li ul{display:none;} 　　li:hover ul{display:block;} 　という風に考えます。 例えば、HTML5で書くと下記のように ※HTML5より前のHTMLでしたら 　<header></header>は<div class="header"></div>のようになる。section,footer,navも同様です。 理由 ＞DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ＞HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;background-color:green;} header{ ＿height:100px;width:100%; ＿position:fixed; ＿top:0;left:0; } header nav{ ＿height:50px; ＿position:absolute; ＿bottom:0; ＿line-height:50px;font-size:0; ＿width:100%;/* navの巾に合わせる */ } header nav ol,header nav ol li,header nav ul{ ＿margin:0;padding:0; ＿list-style:none; } header nav ol li{ ＿width:10%; ＿display:inline-block; ＿background-color:lime; ＿font-size:25px; ＿border:red 1px solid; ＿position:relative; } header nav ol li ul{ ＿font-size:50%; ＿position:absolute;top:52px;width:300%; ＿line-height:30px; background-color:white; } header nav ol li ul li{ ＿width:50%; ＿font-size:inherit; ＿width:100%; ＿border:none; ＿background-color:transparent; } header nav ol li+li+li+li+li ul{right:0;} header nav ol li ul{display:none;} header nav ol li:hover ul{display:block;} section{:margin-top:100px;} --> </style> </head> <body> ＿<header> ＿＿<h1>ページタイトル</h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li>Menue1 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">あいうえお</a></li> ＿＿＿＿＿＿<li><a href="">かきくけこ</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>Menue2 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">さしすせそ</a></li> ＿＿＿＿＿＿<li><a href="">たちつてと</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>Menue3 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="">なにぬねの</a></li> ＿＿＿＿＿＿<li><a href="">はひふへほ</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> <section> <h2>本文</h2><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p> </section> ＿</section> ＿<footer> ＿＿<h2>フッタ</h2> ＿</footer> </body> </html>

soulset319
質問者

お礼

早速の回答ありがとうございます！！ 凄いです！ ORUKA1951さんのアドバイスをもとに、もう一度考え直してみます。 明日、早速会社で確認してみますね。 まだ、出来た訳ではありませんが、 回答して頂けたことが嬉しいです。 本当にありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • html?/css?/Javascript? でのフッター特殊な固定方

    html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが 　 スクロールした時にスクロールするのは内容のみ。 　 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。

    • ベストアンサー
    • HTML
  • ヘッダー画像固定のもう一枚画像を重ねる

    ホームページ作成初心者です。（ビルダーでなく手打ちの作成方法です。）ヘッダー画像上部固定をしていまして、さらにセンタリングもして全体を中央寄せしてます。そのヘッダー画像にもう一枚リンク用の画像をヘッダー画像右側に重ねたいのですが、重ねると、重ねた画像に対して、ヘッダー画像で効いている固定、中央寄せが反映されません。ズームアウトするとどんどんその重ねた画像のみ、遠ざかっていきます・・・・・・ 原因はDIVのヘッダーの部分が100%のwidthになっているため、重ねる画像のposition:absolute;で場所を指定すると、ズームアウトしていくことにより、ずれが生じてくるのかなと思っています。 かと言ってヘッダー画像を本来の画像の大きさのPXの幅にすると上部で固定はできますが、センタリングが効かなくなります・・・ ヘッダー上部固定センタリング効かせつつ、リンク用の小さい画像をそのヘッダー画像に重ねる方法（そのリンク画像はそのヘッダー画像の決められた位置で固定）を知っておられる方、お知恵を拝借できませんでしょうか。 宜しくお願い申し上げます。

  • ヘッダー部の固定の方法

    こちらの簡単なサンプルを参考にサイトを作成しています。 http://scuderia-web.com/tips/xhtml_css/sample/fixed_header_and_footer.html 私が作るとメイン部がヘッダーもフッターも突き抜けて スクロールしてしまいました。 原因を調査したらフッター部は後から上書きすることで 上側に配置される状態になり、固定していると分かりました。 しかし、同じ考えをヘッダー部に当て嵌めてみても固定しません。 その内に分かるかなと思って数ヶ月・・・未だにギブアップです。 ヘッダー部はどういう理由で固定（上側に来る）されるのでしょう？ なお、ヘッダー部にz-index:5 とかを割り当てれば固定してくれます。 しかし、この解決法はちょっと強引な気がしています。

    • ベストアンサー
    • CSS
  • ヘッダとフッタが固定でコンテンツのみスクロール可能

    いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。

    • 締切済み
    • CSS
  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。

    • 締切済み
    • CSS
  • 各ページに共通するヘッダーやフッターの記述

    各ページに共通するヘッダーやフッターの記述 ホームページ作成について質問です。 過去の質問を検索しましたが 解決できなかったので質問させていただきます。 ホームページビルダーで各ページに共通するヘッダーやフッターをテンプレートにすると 全てのページにヘッダーに使われている文章やリストなどのhtmlソースがすべて記述されてしまいます。 いろんなサイトを見るとヘッダー部分は同じなのにhtmlソースが記述されておりません。 SSIのincludeもなくphp、java scriptも記述されていません。 別ページにリンクさせているようなアドレスが記述されています。 そのような方法はあるのでしょうか？ またSEO対策としてはどちらがいいのでしょうか？

  • css外部ファイル（ヘッダ、フッタ）の書き方

    素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • Webページ作成の際に、固定ヘッダの下へのリンク

    Web作成初心者（ド素人）です。 今、Webページを固定ヘッダーを使って作成しているのですが、固定ヘッダにあるリンク元からリンクをクリックした際に、固定ヘッダの下部分にリンクをしたいと思っています。 図のように、固定ヘッダの「(1)」のリンクをクリックすると、画面下部のみ「(1)」の画像が表示されるページへ遷移し、「(2)」のリンクをクリックすると、画面下部のみ「(2)」の画像が表示されるページへ遷移をさせたいです。 固定ヘッダにそのままリンクを書くと、当然ではありますがブラウザの全体ページとしてリンク先の画像があるページへ移動してしまいます。 固定ヘッダ部分は何も遷移せずに、下部分のみ変更させたいです。 すいませんが、ご教授をお願いできませんでしょうか。 よろしくお願いいたします。

  • CSSをつかったHPの作成でヘッダーフッターサイドバーをいれたいのですが、どうすればいいですか？

    ホームページ作成を依頼しているのですが、CSSでヘッダー、フッター、サイドバーなどを固定化することは無理なのでしょうか？ また、CSSと組み合わせてSSIなどをつかってするものなのでしょうか？ 一般的に良く使われているページをつくりたいだけなのですが 対応してもらえず、困っています。 -----ヘッダー------ - - サ 本 イ ド　　　文 - - ----フッター------- といったようにしたいのですが、 一般的に、このようなページはどうやってつくるのか 教えてください。

  • ホームページビルダー　ヘッダーのつくり方

    jpgなどではなくhtmlで　ヘッダーと　フッターを作成しなければならず、これをどうすればつくれるのか解らなくて困っています。 　とりあえずホームページ作成ソフトのホームページビルダーを持っていましたので　これで　やってみようと「超図解ホームページビルダー」というマニュアル本まで買ってきたのですが　解りません。 　大変申し訳ないのですが　素人向けの回答を是非お願いします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する