- 締切済み
CSSについてです
tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。 サイト http://d.hatena.ne.jp/seto-san/20081215/1229335070 HTML <body> <div id="body">本文</div> </body> CSS * { margin: 0px; padding: 0px; } html{ height: 100%; } body{ height: 100%; } #body { height: 100%; min-height: 100%; } body > #body { height: auto; } tumblrのテーマはごちゃごちゃしているので、簡易的なページを位置から作ってそこでサイドバーを実装してみてもうまくいきませんでした。 何かうまいやり方があったら教えてください
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
修正したはずが修正前の物をあげてしまったようです。 セクションや行数を増減、ウィンドウ幅を変更してみてください。 常に高さ一杯(少ないときはウィンドウ高さ一杯)で左のborderは引かれる筈です。 ★HTMLにはデザイン的要素はありませんから、自由にデザインは変更できるはずです。 ★印刷時には表示されません。 ★子供セレクタ(>)使用していませんので冗長ですが、IE7以降は問題なく表示されるはずです。 <!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@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} /* 左右の枠線指定 */ /* 検索フォームを左に、最底画面高～body高さ */ /* 本文目次は本文右、高さは本部高 */ html{height:100%;} body{min-height:100%;} div.header form p, div.section div.nav{ position:absolute; height:100%; top:0;width:150px;/* 位置 */ border:ridge gray; } /* 枠線など細かい調整 */ div.section{position:relative;}/* 位置サイズの基準 */ div.section div.nav{border-width:0 0 0 2px;right:0;} div.header form p{ border-width:0 2px 0 0; left:0;text-align:center; } div.header,div.section,div.footer{margin-left:155px;} h1,h2,h3,h4,p{margin:0;line-height:1.6em;} div.section p{text-indent:1em;} div.section div.section{margin:0 155px 0 5px;} div.header form p form{ margin-top:20px; } /* テストのため */ div.section div.section{min-height:300px;} /* おまけ */ div.header form p:before, div.section div.nav ol:before{ color:red;font-weight:bold;white-space:pre; } div.header form p:before{content:"ディスプレイ高一杯\A";} div.section div.nav ol:before{content:"本文高一杯\A";} pre{border:solid black 1px;padding:0.5em;1em;} body{background-color:silver;} div.section{background-color:white;} div.section div.section{background-color:rgb(255,255,200);} div.header form p{background-color:aqua;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- div.section div.nav,form{display:none;} div.footer{page-break-before:always;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<form action="./"><p><input type="text" size="10" value=""><input type="submit" value="検索"></p></form> ＿</div> ＿<div class="section"> ＿＿<h2>質問と回答</h2> ＿＿<div class="section" id="Question"> ＿＿＿<h3>CSSについてです</h3> ＿＿＿<p> ＿＿＿＿tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。</p> ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="Answer"> ＿＿＿<h3>親コンテナブロックを基準に</h3> ＿＿＿<p> ＿＿＿＿デザインは必ず文書構造に従うはずです。文書構造に反したデザインは利用しづらい。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿このサンプルでは記事全体に付随したヘッダは記事全体に、本分に付随した目次は本文のサイズに従います。 ＿＿＿</p> ＿＿＿<pre>position:absolute; height:100%;</pre> ＿＿＿<p>ポイントは、この2プロパティだけ・・・</p> ＿＿</div> ＿＿<div class="nav" id="tableContent"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Question">CSSについてです</a></li> ＿＿＿＿<li><a href="#Answer">親コンテナブロックを基準に</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-02-13</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
全く酷いサイトがあるものですね。 ・横に表示する要素を内容が少ないときは表示高さ一杯、 ・多いときはそれと同じ長さまで伸ばす。 (その要素には一方にborderを引く) ということはその要素はルートに存在するはずです。ということは文書構造もそうなっているはずです。 でしたら、極めて単純で必要な指定は、 position:absolute; height:100%; たった、これだけ。 そもそも、デザインのためにHTMLを書こうとするから難しくなるのです。 HTMLは、文書構造をひたすらマークアップする物で、プレゼンテーションはスタイルシートに任せる。15年も前のHTML4.01の勧告以来、言われ続けてきたことです。 ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ★『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 すなわち、どこが文書のヘッダーか、どこが本文か、どこがナビゲーションか機械にも判る様に <div class="header"> この文書の導入やナビゲーション <div class="nav"> ナビゲーション </div> </div> <div class="section"> 本文だよ </div> <div class="footer"> 文書情報・著作権などフッタ </div> としろと・・・これなら機械は無論!!。作者も他人もよくわかる。その上で、どのようにデザインするかをスタイルシートで書けば良い。下記サンプル（HTML4.01）を見ると、スタイルシートだけ読んでも、デザインで何をしようとしているか判るはず。もちろんHTMLも誰でも書き加えられる。さして検索エンジンもページの内容を理解できる。印刷では、そんな枠線はなくシンプルに印刷される。 あまりにも浸透しないため、HTML5では、 ★ ⇒文書をよりよく構造化するために、要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) section、article、aside、hgroup(採用されない見込み)、、header、footer、nav、figure および、figcaption、それ以外にmainが加わる予定・・ よってHTML5では、 <header> この文書の導入やナビゲーション <nav> ナビゲーション </anv> </header> <section> 本文だよ </section> <footer> 文書情報・著作権などフッタ </footer> となる。 [HTML4.01サンプル]タブは＿に置換してあるので戻す。とってもわかりやすいでしょう。 <!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@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;position:relative;} div.header form p, div.section div.nav{ position:absolute; height:100%; top:0;width:150px; border:ridge gray; } div.section{position:relative;} div.section div.nav{border-width:0 0 0 2px;right:0;} div.header form p{ border-width:0 2px 0 0; left:0;text-align:center; } div.header,div.section,div.footer{margin-left:155px;} h1,h2,h3,h4,p{margin:0;line-height:1.6em;} div.section p{text-indent:1em;} div.section div.section{margin:0 155px 0 5px;} div.header form p form{ margin-top:20px; } div.section div.section{min-height:400px;} div.header form p:before, div.section div.nav ol:before{ color:red;font-weight:bold;white-space:pre; } div.header form p:before{content:"ディスプレイ高一杯\A";} div.section div.nav ol:before{content:"本文高一杯\A";} pre{border:solid black 1px;padding:0.5em;1em;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<form action="./"><p><input type="text" size="10" value=""><input type="submit" value="検索"></p></form> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>質問と回答</h2> ＿＿＿<div class="section" id="Question"> ＿＿＿＿<h3>CSSについてです</h3> ＿＿＿＿<p> ＿＿＿＿＿tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 ＿＿＿＿</p> ＿＿＿</div> ＿＿＿<div class="section" id="Answer"> ＿＿＿＿<h3>親コンテナブロックを基準に</h3> ＿＿＿＿<p> ＿＿＿＿＿デザインは必ず文書構造に従うはずです。文書構造に反したデザインは利用しづらい。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿このサンプルでは記事全体に付随したヘッダは記事全体に、本分に付随した目次は本文のサイズに従います。 ＿＿＿＿</p> ＿＿＿＿<pre>position:absolute; height:100%;</pre> ＿＿＿＿<p>ポイントは、この2プロパティだけ・・・</p> ＿＿＿</div> ＿＿＿<div class="nav" id="tableContent"> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#Question">CSSについてです</a></li> ＿＿＿＿＿<li><a href="#Answer">親コンテナブロックを基準に</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<dl class="documentHistry"> ＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿＿<dd>2013-02-13</dd> ＿＿＿</dl> ＿＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿</div> ＿</div> </body> </html>
- kon77
- ベストアンサー率70% (83/117)
恐らくですが、以下の記事が参考になるのではないでしょうか。 【ブロックレベルのカラムの高さを揃える4つの方法】 http://blog.e-riverstyle.com/2009/07/4.html 【Equal Height Columns with Cross-Browser CSS （英語サイト）】 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
お礼
display要素はnoneとblockしかつかっていなかったためとても参考になりました。 borderがついてこないのが少し不便ですが、シンプルで後から整理しやすいので当分はこれを使ってみようかとおもいます。
お礼
丁寧にありがとうございます。参考にします。