- 締切済み
サイドバーの高さを本文部分と揃えるCSS
イメージ画像のようなレイアウトを制作していますが、うまくいきません。 参考になるサイト（サンプル付きがあれば望ましい）とテンプレートとかがありましたら教えてください。 宜しくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞サイドと本文部分がフッターとくっついていませんでした。 いえ、あなたの補足では「フッターはボトムに固定したいです。 」となっていましたよ。 本文にくっつけたいなら、もっと楽です。 <!-- html,body{margin:0;padding:0;} h1,h2,h3,p{margin:0;line-height:1.8em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:890px; margin:0 auto; padding:5px; } div.section{ position:relative;/* ★ */ min-height:200px;/* ★ナビゲーションに最低限必要な高さ */ } div.section h2,div.section div.section{ margin-left:20%;/* ★ナビの置き場 */ } div.section div.section{ width:auto;min-width:0; min-height:0; } div.section div.nav{ position:absolute; top:0;left:-2px; height:100%;/* ★ */ width:20%; } /* 色づけ */ div.header{background-color:red;} div.section{background-color:green;} div.section div.section{background-color:silver;} div.section div.nav{background-color:orange;} div.footer{background-color:navy;} -->
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞フッターはボトムに固定したいです。 ＞サイドや本文部分はフッターに密着するようにしたいです。 そんなことしたら、スマホのような小さな画面や、スマホを縦や横にしたり、視覚弱者がフォントを大きくしたら不都合は起きませんか？？ HTMLを使用してウェブドキュメント(ページ)を書くのは 『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』 通常はそのような場合は、先に示したように最低限の高さを確保しておくのが順当です。フッターなんて利用者にとって重要な情報ではありませんので・・。 どうしてもなら、footerの高さを固定して html,body{position:relative;height:100%;} div.section,div.section div.nav{padding-botom:120px;min-height:100%;} div.section div.section{padding-bottom:0;} div.footer{position:fixed;bottom:0;left:0;height:100px;width:100%;background-color:transparent;max-width:2000px;} div.footer>*{ width:80%;min-width:470px; margin:0 auto;padding:0px 5px; background-color:navy; } を最後に付け加えればよい。 いずれにしてもHTMLさえ文書構造が正しく示されていれば、その文書構造にしたがってセレクタを指定すればよいだけです。 1) HTMLをデザインのために書かれているように感じました。 それは誤りです。文書構造しか書かないようにするととってもシンプルで分かりやすいものになります。 2) カスケーディング・・その文書構造に基づいてセレクタを書くことを身につけてください。 CSS(カスケーディングスタイルシート)では、プロパティなどより大事です。 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんなの全く難しくはないですよ。 HTMLは文書構造しか書きませんから、サイドに来る要素が本文要素に含まれる物だから、本文の区域に入れてデザインできるはずですよね。 HTML5だと、文書構造を示す要素が追加された( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )ので <body> <header></header> <section> ・・本文・・ <nav>ナビゲーション</nav> </section> <footer></footer> </body> HTML4.01だと、DIVを使って文書構造を示してきました。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 よって <body> <div class="header"></div> <div class="section"> ・・本文・・ <div class="nav">ナビゲーション</div> </div> <div class="footer"></div> </body> のように、書かれているはずです。 ここまで読めば分かるように、スタイルシートは div.section{position:relative;} div.section div.nav{position:absolute;height:100%;width:20%;} だけでよいですよね。 ★floatは画像の周囲にテキストを回りこませるための物で本来の用途と違う ★ブロックはサイズや位置を指定されたら直近のstaticでない親要素を参照する。 よって、下記のようになる。 ★HTMLには文書構造しか書かない。 ★タブは＿に置換してあるので戻す。 <!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;} h1,h2,h3,p{margin:0;line-height:1.8em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:890px; margin:0 auto; padding:5px; } div.section{ position:relative;/* ★ */ min-height:200px;/* ★ナビゲーションに最低限必要な高さ */ } div.section h2,div.section div.section{ margin-left:20%;/* ★ナビの置き場 */ } div.section div.section{ width:auto;min-width:0; min-height:0; } div.section div.nav{ position:absolute; top:0;left:-2px; height:100%;/* ★ */ width:20%; } /* 色づけ */ div.header{background-color:red;} div.section{background-color:green;} div.section div.section{background-color:silver;} div.section div.nav{background-color:orange;} div.footer{background-color:navy;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>たったこれだけで、横幅にも関わらずスマホから幅広ディスプレイまでウィンドウサイズに依存しない。</p> ＿＿＿<p>内容が増えようが減ろうが本文サイズにぴったりと合う。</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
すみません、説明不足でした。 フッターはボトムに固定したいです。 サイドや本文部分はフッターに密着するようにしたいです。 宜しくお願いします。
- web2525
- ベストアンサー率42% (1219/2850)
CSSはよく分からんので、検索結果のリンクだけ http://www.shoshinsha.com/hp/template/layout/index.html
補足
すみません、説明不足でした。 フッターはボトムに固定したいです。
お礼
サイドと本文部分がフッターとくっついていませんでした。 下記を参考にしましたら出来ました。 http://www.climarks.com/ 色々とアドバイスをありがとうございました。