- 締切済み
4つのセクションをそれぞれ左右に分けるには
<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>で囲むことはできません ご回答よろしくおねがいします
- satsumaimoboy
- お礼率48% (13/27)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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を見直してください。
- play_with_you
- ベストアンサー率37% (112/301)
囲めないならfloatでs1とs2はleft、s3とs4はrightにするしかないかと。 ちなみに、たぶん分かってると思いますが、サイズが計1000ぴったりなので、上記の方法だとブラウザごとのボックス解釈の差異で酷いことになる危険性はあります。でも外側にdiv書けないんじゃしょうがない。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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%;}
