- 締切済み
CSSのレイアウトについて
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; }
- keisuke1258
- お礼率63% (37/58)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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"> <!-- 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:absolute;top:0;width:200px;height:100%;background-color: #E7DBD5;} div.section div.contentTable{left:0;} div.section div.aside{right:0;} /* わかりやすいように色と高さを指定してみる。 */ div.header{min-height:300px;} div.nav{height:30px;} div.section div.section{min-height:600px;} /* 希望によりサイズを変更 */ div.section div.section{margin:0 40% 0 20%;width:auto;min-width:0;background-color: #F2F2E6;} div.section div.contentTable, div.section div.aside{position:absolute;top:0;height:100%;background-color: #E7DBD5;} div.section div.contentTable{width:19%;} div.section div.aside{width:38%;} --> ＿</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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLもCSSもとてもまずいので大変ですね。 HTMLのclass名やidは「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とされて(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をつけなくても、クラスセレクタ、子孫セレクタや兄弟セレクタなどを上手に使いましょう。 巾とたかさの両方を固定してしまうと、目の悪いユーザーがフォントを大きくすると入りきらなくなっちゃいます。すくなくとも高さはフリーにしておきましょう。
- too_bad
- ベストアンサー率53% (70/130)
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.dtd"> <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> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Navigation --> <div id="navigation"> This is the Navigation </div> <!-- End Navigation --> <!-- Begin Left Column --> <div id="leftcolumn"> Left Column </div> <!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> <a href="#">Download this CSS Layout</a> </div> <!-- End Content Column --> <!-- Begin Right Column --> <div id="rightcolumn"> Right Column </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html>
補足
ORUKA1951さん 回答ありがとうございます。 実行してみたのですが、ちょっと私の想像するレイアウトとは違いました。 こちらのサイトのようなレイアウトにしたかったのですが。 http://www.yamaga-fc.com/ お手数をお掛けしますが、よろしくお願いします。