プロが教えるわが家の防犯対策術！

<div id="container">の使いかたについて

解決済

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか？

「<div id="container">」の質問画像
通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞HTML５とCSS3に関するおすすめの本があったら教えていただけないでしょうか？


　これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
　仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
　それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
　しばしば、仕様書を読んだことがあるのか疑問のものがある。

　これについては、No.1でいくつか説明しました。

　よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
　最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
　まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
　本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
　本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

　最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
　私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )

　ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
　ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

　そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
　で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。
    • good
    • 2
    • 件
通報する
この回答へのお礼

本質的なことを教えていただきありがとうございました。色々なところから情報をひっぱってきて自分でも混乱状態でしたが、教えていただいた方法で学んでみようと思います。本当にありがとうございました。

通報する
お礼日時：2015/08/15 19:44

No.2

  • 回答者： ORUKA1951
  • 回答日時：

そんなHTMLは書きません。


--残念ながらネット上にはたくさんのそんな誤まった情報が満ち溢れています。原因はさるオーサリングツールだと思いますが・・
　div要素は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。実際にはこれが守られなくて、HTML5では「文書構造を示す新しい要素が追加されました( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
　すなわち
HTML5だと
<body>
　<header>この文書のヘッダー
　　<nav>ナビゲーション(グローバルナビなど本文ではない場合</nav>
　</header>
　<section>
　　本文、HTML5ではdivは原則として使わない。
　　<section>文書の階層はsectionの入れ子で示す</section>
　　<nav>このセクションの目次の場合</nav>
　</section>
　<footer>この文書のフッター
　　ここにある簡単なナビゲーションはnavにはしない。
　</footer>
</body>

HTML4.01でしたら
<body>
　<div class="header">この文書のヘッダー
　　<div class="nav">ナビゲーション(グローバルナビなど本文ではない場合</div>
　</div>
　<div class="section">
　　本文
　　<div class="section">文書の階層はsectionの入れ子で示す</div>
　　<div class="nav">このセクションの目次の場合</div>
　</div>
　<div class="footer">この文書のフッター
　　ここにある簡単なナビゲーションはnavにはしない。
　</div>
</body>

＞ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか？
　こんな発想--重要な『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』を理解していないから、そんな質問になる。

★文書とプレゼンテーションの分離と言う事は
　footer以外は
CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}
の指定でプレゼンテーションしたいと言う事ですから、
body>div.header,body>div.section{
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}
だけで良いのです。
　実際には
body>div.header,body>div.section{
font-size: large;
line-height: 1.3em;
color: rgb(60,60,60);
width: 100%;
min-width:640px;
max-width:1050px;
margin: 0 auto;
}
とかユーザーのディスプレイの幅に合わせることが多いです。スマホやタブレットもありますので・・

※containerはさすがに使いませんが、bodyと言う要素があるのでそれを使いましょう。
※body直下でない、例えば本文内で転載記事などではarticleを使います。
※li(リストメニュー)をmedia queryでスマホ表示用CSSを書くが画面幅いっぱいに出来ない( https://oshiete.goo.ne.jp/qa/9040402.html )
　も参考に
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧に教えてくださりありがとうございました。独学で勉強しているのですが、HTML５とCSS3に関するおすすめの本があったら教えていただけないでしょうか？

通報する
お礼日時：2015/08/15 11:02

No.1

  • 回答者： narative_h
  • 回答日時：

上記のコードのみだと添付された画像のようにならないのでなんとも言えないのですが、



まず
>ページの上から
はページの上部の隙間ということでしょうか？

その場合はcssのはじめに
*{
margin:0px;
}
と記述すると隙間がなくなると思います。（*は全ての要素）

body{
margin:0px;
}
でも大丈夫です。


>フッターの手前くらいまで（フッターの手前？）
に関してですが、この場合は下記のように
sample要素を付け足すような形で分けるといいです。

<body>
<div id="container">

<div id="sample">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
</div><!--sample-->

<div id="footer">フッター</div>
</div><!--container-->

</body>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。助かりました。

通報する
お礼日時：2015/08/15 11:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報