CSSのレイアウトについて

締切済

質問者：keisuke1258
質問日時：2012/12/16 18:24
回答数：3件

CSSのレイアウトをダウンロードしました。
初心者ながら調べてやっていたのですが、2点ほど分からない点があります。

・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。
widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。

・3カラムの真ん中を固定幅900pxにしたい。

ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。

以下がCSSのソースです。

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
height: 200px;
background: #E7DBD5;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
margin: 0px 0px 0px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#content {
float: left;
color: #333;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 460px;
display: inline;
}
#rightcolumn {
color: #333;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#footer {
width: 900px;
height: 200px;
clear: both;
color: #333;
background: #BD9C8C;
padding: 10px;
}

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： ORUKA1951
回答日時：2012/12/17 16:34

No.2です。

absoluteのつづり間違えてましたね。

単純に、asideを広くしてそれに見合うようにsection sectionの右を空けるだけです。

下記はHTML4.01strictです。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )
　にてチェック済み--ご確認ください。
　文書構造しか書いてないので、内容を内容を追加するのは楽だと思います。なによりもスタイルシートで好きなようにデザインできますし、デザインの自由度も高くなります。またSEOとしても万全です。
　1) HTMLを作成する段階でデザインを考えたらダメです。
　2) HTMLさえきちんと書けていたら下記サイトや例のようにデザインは自由になります。
　3) HTML/CSSがシンプルでわかり易くなり、いずれか一方を見るだけでメンテナンスできます。

　表示させてウィンドウ幅を大きくしても小さくしても中央に表示されるはずですし、スマホの640px幅でもよいはず。

　ナビゲーションなどは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>
＿</div>
＿<div class="nav">
＿＿ナビ
＿</div>
＿<div class="section">
＿＿<div class="section">
＿＿＿[本文]
＿＿</div>
＿＿<div class="contentTable">
＿＿＿[目次]
＿＿</div>
＿＿<div class="aside">
＿＿＿[付録]
＿＿</div>
＿</div>
＿<div class="footer">
＿＿[文書情報]
＿</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/12/16 23:27

HTMLもCSSもとてもまずいので大変ですね。

HTMLのclass名やidは「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」とされて(1999年)いて久しいのに・・。
　それでは、HTMLを見なくては解らないという悲劇的なことになります。
　HTMLがちゃんと書かれていれば、
body{color: #333;}
div.header,div.nav,div.section,div.footer{
width:90%;max-width:900px;min-width:640px;
margin:0 auto;
padding:10px;
}
div.header{background-color: #E7DBD5;}
div.nav,div.footer{background-color: #BD9C8C;}
div.section{position:relative;}
div.section div.section{margin:0 200px;width:auto;min-width:0;background-color: #F2F2E6;}
div.section div.contentTable,
div.section div.aside{position:abslute;top:0;width:200px;height:100%;background-color: #E7DBD5;}
div.section div.contentTable{left:0;}
div.section div.aside{right:0;}
だけで期待された配置になるはずですし、HTMLを見なくても解りますよね。先で目次(contentTable)を右に置こうが、下に置こうが自由自在です。
それでいて、幅広のディスプレイにもスマホのような狭いディスプレイでも中央に表示されますね。HTMLもスタイルシートを見るだけで想像がつきます。
すなわち
<body>
　<div class="header">
　</div>
　<div class="nav">
　</div>
　<div class="section">
　　<div class="section">
　　</div>
　　<div class="contentTable">
　　</div>
　　<div class="aside">
　　</div>
　</div>
　<div class="footer">
　</div>
</body>

まもなく勧告のHTML5でしたら
body{color: #333;}
header,nav,section,footer{
width:90%;max-width:900px;min-width:640px;
margin:0 auto;
padding:10px;
}
header{background-color: #E7DBD5;}
nav,footer{background-color: #BD9C8C;}
section{position:relative;}
section section{margin:0 200px;width:auto;min-width:0;background-color: #F2F2E6;}
section contentTable,
section aside{position:abslute;top:0;width:200px;height:100%;background-color: #E7DBD5;}
section contentTable{left:0;}
section aside{right:0;}

<body>
　<header>
　</header>
　<nav>
　</nav>
　<section>
　　<section>
　　</section>
　　<div class="contentTable">
　　</div>
　　<aside>
　　</aside>
　</section>
　<footer>
　</footer>
</body>

配置とは関係ありませんが、colorプロパティは継承されますから親要素に書けば良いです。background-colorは継承されませんがinheritで継承させることが出来ます。
　また、基本的なことですがidはjavascriptやリンクのターゲットになるとか、よほどのことがない限り使わないほうが良いです。id(一意セレクタ)は詳細度が[0,1,0,0,]と高く、しかも一箇所にしか使えませんからスタイルシートが冗長になる原因になります。
　いちいちidをつけなくても、クラスセレクタ、子孫セレクタや兄弟セレクタなどを上手に使いましょう。
　巾とたかさの両方を固定してしまうと、目の悪いユーザーがフォントを大きくすると入りきらなくなっちゃいます。すくなくとも高さはフリーにしておきましょう。

この回答への補足

ORUKA1951さん

回答ありがとうございます。
実行してみたのですが、ちょっと私の想像するレイアウトとは違いました。

こちらのサイトのようなレイアウトにしたかったのですが。

http://www.yamaga-fc.com/

お手数をお掛けしますが、よろしくお願いします。

補足日時：2012/12/17 11:23

通報する

- 0
- 件

通報する

No.1

回答者： too_bad
回答日時：2012/12/16 19:15

HTMLもお書きいただかないと、どこにどのCSSを割り当てているのかわかりません。

人間を見ただけでどのメーカーのどのPCを使っているかなんてのが分かる人は別ですが、
構造が分からなければ中身だけ伝えられても見えてこないものです。
CSSの内容も必要ですが、併せてHTMLの記述もお願いします。

この回答への補足

失礼しました。HTMLは下記のようになってます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 3 Column - fw-36-3-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>


<div id="wrapper">


<div id="header">

This is the Header

</div>



<div id="navigation">

This is the Navigation

</div>



<div id="leftcolumn">

Left Column

</div>



<div id="content">

<a href="#">Download this CSS Layout</a>

</div>



<div id="rightcolumn">

Right Column

</div>



<div id="footer">

This is the Footer

</div>


</div>


</body>
</html>