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

div要素を左右交互に配置していくと重なってしまいます。
どうしたらよいでしょうか。

A 回答 (2件)

重なるのが嫌なら、floatにすればいい。

そうすれば、重なる状況では下に落っこちる。

どうしたら?ではなく、どうしたいのかです。なぜ重なるのかは、左右の幅が合計で親要素の100%を越えているからではないかと推察します。計算してみてください。

左右の幅がmarginとwidth+border+paddingの合計の値が親要素の100%以下になっていますか?
または、
box-sizing: border-box;の指定をし、marginとwidthの合計の値が親要素の100%以下になっていますか?


どうしたらよいのでしょうかって、私は重なっても困らないので、そのままでもいいのでは?と思います。dragon_さんが、どうしたいの?サイズを小さくしてでも重ならないようにしたいのか、大きさはそのままで別のデザインにしたいのか?



以下は幅50%のdiv要素を左右交互に配置した例です。50%が2つなので、100%です。

<style type="text/css">
div{
width:50%;
box-sizing: border-box;
float:right;
margin:0;
padding:1em;
background:#ffdddd;
border:1px solid #ffffff;
}
div:nth-child(odd){
float:left;
background:#ccffff;
}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>
    • good
    • 0

DIVでは分かりません。

大原則なので御存知だと思いますが、DIVは『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のものでデザインのために使用するものではありません。HTML5では、
【引用】____________ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )]より
翻訳すると「注意:著者には、他に適切な要素がない時の最後の最後の手段としてDIV要素を使用することが強く推奨される。DIVでないより適切な要素を使用する事は、読者にはより良いアクセシビリティを著者にはメンテナンス性の向上につながる。」

 DIVでは分からないので、私の経験からその質問に該当する事象として次の場面が思い浮かびます。

 HTML5で表現すると、多分次のような場面だと思われます。
<body>
 <header>文書のヘッダ</header>
 <section>主文
  <section>
   項目記事
   <nav>ナビゲーション目次</nav>
   <aside>このsectionと直接関係ない記事</aside>
  </section>
  <section>
   項目記事
   <nav>ナビゲーション目次</nav>
   <aside>このsectionと直接関係ない記事</aside>
  </section>
・・・・・
 </section>
 <footer>この文書のフッタ</footer>
</body>
★HTMK5未満の場合は、<section></section>は<div class="section"></div>となっていたところです。

 とすると、この質問は
「sectionごとのナビゲーションと関連記事を、そのsectionの右左に配置したいが、sectionが短い時に重なってしまう。それを重ならないようにしたい」
(対策)
1.左右に配置されるコンテンツの高さが分かっている場合、それが属するsectionのmin-heightを指定する。
┌─┐┌───┐┌─┐
│↑││ ↑ ││↑│
│固││min- ││固│
│定││height││定│
│↓││ ↓ ││↓│
└─┘└───┘└─┘
2.左右に配置されるコンテンツの高さが未定の場合は、overflow:autoなどでスクロールを提供する。
になるでしょう。
┌─┐┌───┐┌─┐
│↑││ ↑ ││↑↑
│未││ 未 ││未scroll
│定││ 定 ││定↓
│↓││ ↓ ││↓│
└─┘└───┘└─┘

 別の状況でしたら、文書構造を分かるように指示してください。
    • good
    • 1

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

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

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

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

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で、contentsがfooterに重なってしまう

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

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

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

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

Aベストアンサー

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<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>

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<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="ar...続きを読む

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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の方も修正する方法でもよけ...続きを読む

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画像と文字が重なって表示される。

画像と文字が重なって表示される。


こんにちは。
今、会社でHPの更新プロジェクトにアサインされています。
ただ、HTMLは初めて扱います。

本題ですが、

【 ●ホームへ戻る 】

上記をすべてのページの右下に表示しているのですが、
ほぼすべてのページでは画像と文字が隣り合って表示されているのですが、
1つのページだけは画像と文字が重なってしまいます。

IEの"表示"→"ソース"でひらいてみても、記述内容は同じなのですが、
表示が違います。

これはどういった原因が考えられるのでしょうか。

Aベストアンサー

ありがちなオチとしては表示の違うファイルのみ DOCTYPE 宣言の記述が違うとか。html のソースが同じで、CSS も同一のものを使用している場合、もっともありえそうなのはコレかと。

もしくは CSS の指定に子孫セレクタを使用していて、表示部分の親要素の記述ミス(id や class のタイプミスとか)が存在する、という可能性も無きにしも非ず。

想像で答えられるのはこの程度。
あとは実際にソースを見せてもらわない事には、なんとも言えないですね。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

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...続きを読む

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング