の使いかたについて

Question

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

ナビゲーション

ページの内容

CSS #container { font-size: 21px; line-height: 28px; color: #353535; width: 1050px; margin: 0 auto; } ランディングページのようなものを作りたく、ページの上からフッターの手前くらいまで

を効かせるにはどのように記述すればよいでしょうか？

ORUKA1951 · Accepted Answer

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

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

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

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

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

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

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

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

ORUKA1951 · Answer

そんなHTMLは書きません。 --残念ながらネット上にはたくさんのそんな誤まった情報が満ち溢れています。原因はさるオーサリングツールだと思いますが・・　div要素は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』です。実際にはこれが守られなくて、HTML5では「文書構造を示す新しい要素が追加されました( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」　すなわち HTML5だと　

この文書のヘッダー　　　

　　本文、HTML5ではdivは原則として使わない。　　

文書の階層はsectionの入れ子で示す

　 HTML4.01でしたら　　

　　本文　　

文書の階層はsectionの入れ子で示す

このセクションの目次の場合

　＞ページの上からフッターの手前くらいまで

を効かせるにはどのように記述すればよいでしょうか？　こんな発想--重要な『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』を理解していないから、そんな質問になる。 ★文書とプレゼンテーションの分離と言う事は　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 ) 　も参考に

narative_h · Answer

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

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

その場合は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>

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

</body>

ナビゲーション

ページの内容

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

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

そんなHTMLは書きません。

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

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

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

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