サイドバーの高さを本文部分と揃えるCSS

締切済

質問者：nkmyr
質問日時：2013/11/01 11:42
回答数：4件

イメージ画像のようなレイアウトを制作していますが、うまくいきません。
参考になるサイト（サンプル付きがあれば望ましい）とテンプレートとかがありましたら教えてください。
宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4

回答者： ORUKA1951
回答日時：2013/11/18 18:14

＞サイドと本文部分がフッターとくっついていませんでした。

いえ、あなたの補足では「フッターはボトムに固定したいです。」となっていましたよ。

　本文にくっつけたいなら、もっと楽です。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2013/11/01 14:55

＞フッターはボトムに固定したいです。

＞サイドや本文部分はフッターに密着するようにしたいです。
　そんなことしたら、スマホのような小さな画面や、スマホを縦や横にしたり、視覚弱者がフォントを大きくしたら不都合は起きませんか？？
　HTMLを使用してウェブドキュメント(ページ)を書くのは
『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　通常はそのような場合は、先に示したように最低限の高さを確保しておくのが順当です。フッターなんて利用者にとって重要な情報ではありませんので・・。

　どうしてもなら、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/CSS … )
　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

- 0
- 件

通報する

この回答へのお礼

サイドと本文部分がフッターとくっついていませんでした。
下記を参考にしましたら出来ました。
http://www.climarks.com/

色々とアドバイスをありがとうございました。

通報する

お礼日時：2013/11/01 16:07

No.2

回答者： ORUKA1951
回答日時：2013/11/01 12:55

そんなの全く難しくはないですよ。

HTMLは文書構造しか書きませんから、サイドに来る要素が本文要素に含まれる物だから、本文の区域に入れてデザインできるはずですよね。

HTML5だと、文書構造を示す要素が追加された( http://standards.mitsue.co.jp/resources/w3c/TR/h … )ので
<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-html4 … )』
よって
<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">

＿</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>