- 締切済み
XHTMLでＨＰのコンテンツ以外を固定する方法
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
誰でも最初は素人なので言わなくても質問内容からわかります。 ＞それでヘッダー、サイドバー、フッターを固定してコンテンツだけに別のページを表示させたいのですが、可能ですか？ たぶんフレームのことをイメージされているのでしょうが、ご存知のようにframeは長く非難の対象でXHTMLでは廃止されました。 ホームページという言葉は紛らわしくて使わないほうがよいです。元来homeとは家(house)ではなく、故郷とか出発点とかの意味合いがある言葉でブラウザを起動したときに最初に表示されるページ--私はgoogleをホームページに指定しています。--とか。 流用されて、ウェブサイトのトップページ--出発点をホームページということも行われます。たとえば番組のホームページとか。それはあくまでその番組のウェブサイトのトップ=出発点という意味。 ウェブサーフィンをする立場ではこの違いは重要ではありませんが、製作者の立場になると一転します。あなたのウェブサイトのトップページを作る話ではなく、ウェブサイトを作っている話ですから。 XHTMLにしろHTMLにしろ、object や、iframeを使えばページ内に他のページを表示させることは可能です。objectやiframeで調べてください。 HTML4.01だと Frames in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#edef-IFRAME ) Objects, Images, and Applets in HTML documents ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-OBJECT ) タグの閉じ方が違う程度で基本的にはXHTMLもHTMLも大差ありません。
関連するQ&A
- ヘッダー・フッター固定でコンテンツのみ可変
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 （ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー（固定） ------------------------------- コンテンツ（可変） ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター（固定） -------------------------------
- 締切済み
- HTML
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- ヘッダー部の固定の方法
こちらの簡単なサンプルを参考にサイトを作成しています。 http://scuderia-web.com/tips/xhtml_css/sample/fixed_header_and_footer.html 私が作るとメイン部がヘッダーもフッターも突き抜けて スクロールしてしまいました。 原因を調査したらフッター部は後から上書きすることで 上側に配置される状態になり、固定していると分かりました。 しかし、同じ考えをヘッダー部に当て嵌めてみても固定しません。 その内に分かるかなと思って数ヶ月・・・未だにギブアップです。 ヘッダー部はどういう理由で固定（上側に来る）されるのでしょう？ なお、ヘッダー部にz-index:5 とかを割り当てれば固定してくれます。 しかし、この解決法はちょっと強引な気がしています。
- ベストアンサー
- CSS
- フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法
現在 http://www.stylish-style.com/csstec/ultimate/fix-foot.html で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、 #mainのheightは100%-フッタ用パンディングの30pxとなっています。 #main内にヘッダ、ナビゲーションを上部から順に配置し ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。 ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。 私の考えている表示としては、 (1)コンテンツ部は常にフッタまでボックスを広げる。 (2)コンテンツがoverflowした場合はスクロールする。 この2点をクリアさせたいです。 #main2のheightをピクセルで固定させればできそうですが 解像度の変化に対応できないと思うので… どなたか良い方法を知っている方がいれば教えていただければ幸いです。 htmlとcssは下記URLです。 http://beatprovider.info/test/index.html http://beatprovider.info/test/style_d.css よろしくお願いします。
- 締切済み
- CSS
- CSSをつかったHPの作成でヘッダーフッターサイドバーをいれたいのですが、どうすればいいですか？
ホームページ作成を依頼しているのですが、CSSでヘッダー、フッター、サイドバーなどを固定化することは無理なのでしょうか？ また、CSSと組み合わせてSSIなどをつかってするものなのでしょうか？ 一般的に良く使われているページをつくりたいだけなのですが 対応してもらえず、困っています。 -----ヘッダー------ - - サ 本 イ ド 文 - - ----フッター------- といったようにしたいのですが、 一般的に、このようなページはどうやってつくるのか 教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- CSS+XHTMLで作成のページが画面には映っているのに全部印刷プレビューできない
はじめまして。初めて質問させていただきます。 今ホームページを初めて、CSS+XHTMLでつくっています。 ブラウザ（IE6.0、Firefox）で確認したところ、 意図するようにちゃんと表示されるのですが、 印刷プレビューをみると、 ２ページ目に印刷されるはずのものがプレビューされず、 １ページしかプレビューされません。 １ページ目の下のほうは、 １ページでおさまる分までで文章が途中で切れたような感じになってます。 div でボックスをつくってくみあわせていますが （ヘッダーフッターありの２段組。左ナビで右メインです。） divの設定がおかしくて文章が途中できれて、 自動的に伸びていないのかなと思い、調べているのですがよくわからなくなり、困っています。 ここがこうなのではないかとか、 これがこうなっているはずだからこうすれば、とか 教えていただけませんでしょうか。 よろしくお願い致します。
- 締切済み
- CSS
- テーブルのヘッダの表示を固定してスクロールする方法
javaスクリプトを使わずにCSSのみで、テーブルのヘッダを固定する方法を探しております。 ご存知の方がいらっしゃいましたら、お教え願います。
- ベストアンサー
- HTML
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSファイルの上手な使い方を教えて下さい。
現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか？ 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか？ この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか？
- ベストアンサー
- 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
お礼
丁寧な回答ありがとうございます。 いろいろ調べてみます＞＜！