4つのセクションをそれぞれ左右に分けるには

締切済

質問者：satsumaimoboy
質問日時：2013/07/03 20:58
回答数：3件

<body>
<section id="s1"></section>
<section id="s2"></section>
<section id="s3"></section>
<section id="s4"></section>
</body>

#s1{width:200px;height:400px}
#s2{width:200px;height:600px}
#s3{width:800px;height:800px}
#s4{width:800px;height:200px}

以上のセクションを1つ目と2つ目を左に、3つ目と4つ目を右に並べてbodyの幅・高さともに1000pxにおさめる方法はありますか？
ただし各セクションを<div>で囲むことはできません
ご回答よろしくおねがいします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2013/07/04 14:48

No.1です。

　スタイルシート(absoluteなど)を使用して強制的に配置させることは出来ますが、そのまえにHTML自体を根本から見直しましょう。
　そのように表示したいと言うことは、必ず文書の構造に根付いているのです。
<header>
・・・この部分は内容が変わらない固定されたもの
</header>
<nav>
ナビゲーション
</nav>
<section>
本文
</section>
<footer>
</footer>
あるいは、
</header>
<section>
本文
　<nav>
　ナビゲーション
　</nav>
</section>
<footer>
</footer>

No.1で示したように縦サイズは指定していません。なぜなら、データ量は変化しますし、視覚弱者のユーザーは文字サイズを拡大してご覧になるかもしれない。それどころか、スタイルシート自体使わないか、自身のスタイルシートを使用されるかもしれない。もちろん印刷には使えないだろう。携帯電話やスマホじゃサイズが固定されると利用しずらい・・

★HTMLは、様々な利用環境で利用できるからこそHTMLなのです。カタログを作るような用途でしたら、HTMLじゃなく、PDFなどを利用すべきです。

　一度、HTMLを見直してください。

- 0
- 件

通報する

No.2

回答者： play_with_you
回答日時：2013/07/04 11:13

囲めないならfloatでs1とs2はleft、s3とs4はrightにするしかないかと。

ちなみに、たぶん分かってると思いますが、サイズが計1000ぴったりなので、上記の方法だとブラウザごとのボックス解釈の差異で酷いことになる危険性はあります。でも外側にdiv書けないんじゃしょうがない。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/07/03 23:54

section要素を使われていると言う事は、HTML5を想定されているのだと思いますが、HTML5ではそのような構造はありえません。

sectionは文書のアウトラインを構成する用途に使うのです。
　サイズから判断すると
<body>
　<header>
　　<nav>
　　</nav>
　</header>
　<section>
　</section>
　<footer></footer>
</body>

ではないかと思われます。
　また、HTML5は、それ以前のHTML以上に様々なユーザーエージェントを想定していますから、1000pxで固定するのはまずいです。

　その上で、上記HTMLをプレゼンテーションを指定すると
body{width:100%;max-width:1000px;min-width:640px;}
header{position:absolute;left:0;top:0;width:20%;}
section,footer{margin-left:21%;}