親子におすすめの新型プラネタリウムとは?

スタイルシートでページを作成しています。

上からheader、contents, footerとボックスを配置しているのですが、
contentsの内容が多くなると、下に膨らむのですがこのときにページ最下部にあるfooterに重なってしまいます。
contents内には、さらにボックスが複数ありテキストや画像があります。

ためしにcontents内をすべてテキスト文字にしてたくさん記載をしたところ、
footerには重ならず、footerが自動的に下へ移動しました。

これは何がいけないのでしょうか?
なぜcontents内にボックスを入れると、footerに重なってしまうのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

多分floatを使っている。


>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
 <h2>本文見出し</h2>
 <p>・・・</p>
 <div class="section">
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <div class="article"><!-- header,section,footerをもちうる完結した記事 -->
   <div class="header"></div>
   <div class="section"></div>
   <div class="footer"></div>
  </div>
 </div>
 <div class="nav"><!-- ナビゲーション -->
 </div>
 <div class="aside"><!-- このsectionと直接関係ない記事 -->
 </div>
</div>
<div class="footer">
</div>
header,section,footerは何箇所も登場する可能性があるのでclassのほうが良いかな・・

[HTML5だと]
<header>
</header>
<section>
 <h2>本文見出し</h2>
 <p>・・・</p>
 <section>
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <article>
   <header></header>
   <section></section>
   <footer></footer>
  </div>
 </section>
 <nav>
 </nav>
 <aside>
 </aside>
</section>
<footer>
</footer>

floatを使ってブロックの配置をしないことが原則ですが、画像の場合はfloatさせることもあるでしょうから、その場合にはfloatを終了させるコンテナブロックに対して
:afterまたは:beforeの擬似要素にて
{content:"";
clear:[right|left|both];
display:block;
}
のセットで良いはずです。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 のDATAでチェック済みHTML4.01 + CSS2.1
★タブは_に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
body>div.header,
body>div.section,
body>div.footer{
width:90%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px;
}
body>div.section{position:relative;}
body>div.section>h2,
body>div.section>div.section,
body>div.section>p{
margin: 0 200px;
}
div.section div.nav,
div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
/* ここからが本題 */
/* もしもfloatを使って配置していたら */
div.section img{
float:right;
}
body>div.section:after{
content:"";
display:block;
clear:right;
}
/* わかりやすいように色分け */
div.header{background-color:aqua;}
div.section{background-color:blue}
div.aside{background-color:fuchsia}
div.nav{background-color:gray}
div.footer{background-color:green}
div.section div.section{background-color:lime}
div.div.aside{background-color:maroon}
div.section div.article{background-color:orange;}
div.section div.article div.header{background-color:purple;}
div.section div.article div.section{background-color:silver;}
div.section div.article div.header{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
_</div>
_<div class="section">
__<h2>本文見出し</h2>
__<p>・・・</p>
__<div class="section">
___<h3>項見出し</h3>
___<p><img src="./images/01.jpg" width="240" height="180" alt="写真"></p>
___<p>記事</p>
___<div class="article"><!-- header,section,footerをもちうる完結した記事 -->
____<div class="header">HEADER</div>
____<div class="section">SECTION</div>
____<div class="footer">FOOTER</div>
___</div>
__</div>
__<div class="nav"><!-- ナビゲーション -->
___ナビ
__</div>
__<div class="aside"><!-- このsectionと直接関係ない記事 -->
___補足
__</div>
_</div>
_<div class="footer">
__<h2>フッタ</h2>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます。根本的に見直した方がよさそうです。
参考にさせていただきます。

お礼日時:2015/05/19 09:50

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcss固定したフッターが本文と重なってしまいます

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定...続きを読む

Aベストアンサー

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出...続きを読む

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Qcssでコーディング レイアウト重なってしまう

たすけてください
かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで
重なり作業ができません。positionの設定がいけないのはわかっています。。。

上から順にheader→nav→a→b(c1,c2)→footerです。
jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、
navがうごくようになったら他の<div>がきゅっとうえによってしましました。
他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。
空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。

以下にソース書きます。
お願いいたします。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){

$(window).scroll(function(){
var dy=$(this).scrollTop();
console.log(dy);
$("#nav").css("top",150+dy/8);
});

});
</script>


<body>
<div id="wrap">
<div id="header" class="box"></div>
<div id="nav" class="box"></div>
<div id="a"></div>
<div id="b" class="box">
<div class="c_box" id="c1"></div>
<div class="c_box" id="c2"></div>
</div>
<div id="footer"></div>
</div>
</body>


<style type="text/css">
.box{ margin:0 auto; width:1260px; position:fixed;}
#wrap{ weidth:1260px;}
#header{ height:145px; background:#fcc; }
#nav{ height:69px; background:#ccc; top:150px; }
#a{ width:1285px; height:522px; background:#ccf; }
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:24px; top:308px; }
#c2{ position:absolute; left:465px; top:308px; }
#footer{ height:100px; background:#fac; }

</style>

たすけてください
かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで
重なり作業ができません。positionの設定がいけないのはわかっています。。。

上から順にheader→nav→a→b(c1,c2)→footerです。
jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、
navがうごくようになったら他の<div>がきゅっとうえによってしましました。
他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。
空が白みはじめたのであきらめまし...続きを読む

Aベストアンサー

こんな感じでいいですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
body{margin:0;padding:0;}
#wrap{ width:100%; width:100%;}
#header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;}
#nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;}
#a{ width:100%; height:522px; background:#ccf; margin-top:150px;}
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:0; bottom:0;}
#c2{ position:absolute; right:0; top:0;}
#footer{ height:100px; background:#fac; }
</style>
</head>

<body>
<div id="wrap">
<div id="header">
header
<div id="nav">nav</div>
</div>

<div id="a">a</div>
<div id="b" class="box">b
<div class="c_box" id="c1">c1</div>
<div class="c_box" id="c2">c2</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

こんな感じでいいですか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
body{margin:0;padding:0;}
#wrap{ width:100%; width:100%;}
#header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;}
#nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;}
#a{ width:100%; height:522px; background:#ccf; margin-top:150px;}
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; p...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qフッターの位置を一番下に表示させたいのですが・・・

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。

そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。

サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。

これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか?

ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、...続きを読む

Aベストアンサー

>今回のこの手法はポイントとしては・・合ってますでしょうか?

相対値の中の絶対値を指定する(分かり難くてすいません。)ことで画面最下部へ持ってきています。

positionについては代表的なものを挙げると、
position:relative;←相対
position:absolute;←絶対
※z-index←重なり順(ブラウザによって解釈の違い有)
などがあります。
また、
position:fixed;bottom:0;
などを使って固定してしまう方法もあります。
今回のようなフッターの位置指定については多くのサイトが
いろいろ例などを挙げているので参考にして試してみてください。

>その際に、このpositionを使った・・などはありませんでしょうか?

positionに限らずですが、ブラウザによってはいろいろと不具合があります。
とくにIEは大変です。「CSSハック」などを覚えておくと対応できると思います。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


人気Q&Aランキング