【CSS】positionの親子関係について

Question

あるボックスを親として、そこにコンテンツを配置したいと思っています。 flaot は使わず、posiotion で位置を指定する想定で、下記のスクリプトを書きました。（該当箇所以外の部分は省きます） << CSS >> #container { position: relative; } #main { position: absolute; top: 10px; } #side { position: absolute; top: 10px; right: 10px; } << HTML >>

これを実行すると、main は container に合わせて移動がされる（親子関係になっている）のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。 relative と absolute で親子関係を作る、という考え方自体は合っていると思うのですが、何か法則など（親子関係は一対一でなければならない等）あるのでしょうか。 CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。

ORUKA1951 · Accepted Answer

＞今はまだ、HTMLに書くべき画像とそうでない画像の区別が少し曖昧ですが、
　デザイン畑から入られると、ここが一番慣れない部分でしょうね。
・その文書のコンテンツとして必要なものなのか
　　商品写真とか、旅行記・図鑑・アルバムなどの場合はコンテンツそのものですから
・将来、変更する可能性があるか
　　背景(ページや各要素の)
　　リンクボタン
　　見出し要素(h1～h6)
　　　これらは、ページのデザインを変更する時にHTMLに書いていたら全部のHTML書き直さなければならなくなります。
　基本的には「画像自体がコンテンツの主要な要素でない場合、すべてCSSで指定する。」で良いと思います。
　企業サイトで「イメージカラーやロゴの変更でサイト全体のロゴや背景、ボタンを変更する」なんて時にスタイルシートだけ書き換えれば済むのですからね。
　HTMLもシンプルになるため、変更や追加がとっても楽になります。後任の誰が見ても、どこに何が書かれているか一目瞭然。(もちろん検索エンジンも)
　それができると、極端な話--HTMLを一切見なくてもスタイルシートを記述できるようになります。
[例]
html,body{margin:0;padding:0}
div.header,div.section,div.footer{
　width:100%;min-width:630px;max-width:1000px;
　margin:0 auto;padding:5px;
}
div.header div.nav ol,
div.header div.nav ol li{
　　margin:0;padding:0;
　　line-height:2em;
　　text-align:center;
　　position:relative;
}
div.header div.nav ol li{
　　display:inline:block;
　　width:20%;
}
と書いていける。あなたが見てもHTMLの構造もCSSで何をしているかが分かるはず。
・タイプセレクタなど広いものか順に詳しく記述していくだけで随分とわかりやすくなるでしょう。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
2.4.1 構造とプレゼンテーションの分離
　・・・【中略】・・・
　また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より

頑張ってください。数ヶ月で基本的な事は身につけられますよ。後は繰り返すだけです。No.1の説明が今は理解できるようになってることでしょう。

HTML5では、mainは、ちょっと特殊な意味を持ちます。使用は避けたほうがよいかも
・4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-main-element )

ORUKA1951 · Answer

　厳しいことを言うようですが、そのような形でスタイルシートを学んでも、一切身につきません。　スタイルシートでプレゼンテーションを指定していく最大の目的はただひとつ!! ★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 　です。↑ここを、短いですのでしっかり読んでおくこと!! 　SGMLは、SGMLの背景( http://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language#.E8.83.8C.E6.99.AF )の項の最後のあたり　HTMLを拝見すると、HTML自体がプレゼンテーション目的で記述されています。HTMLには文書構造しか書きません。すなわち文書をそれを構成する要素(Element)に分解して、タグでマークアップしていきます。

ここは見出し

この間はひとつの段落

そしてここは重要と言う風に、　【重要】どのようにプレゼンテーションするかは考えません。　しかし、HTML4.01以前(XHTML1.0,XHTML1.1を含む)は文書構造を示す要素(タグ)が用意されていませんでしたから、『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』となっていました。　すなわち、DIVやSPANはデザインのためではなく文書構造を示すための物です。　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　※実際にはあなたが参考にされたように、container、contents、main、sideのような、およそ文書構造とは言えない使われ方がされてきました。　※HTML5では、その反省から「文書をよりよく構造化するために、新しい要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」　スタイルシートも、HTMLがきちんと出来ていることが前提です。W3CのCSS検証にも『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/ )』　以上を理解されたうえで、本題ですが・・　これらの画像は、その文書にとってコンテンツでないなら背景です。すなわちコンテンツでしたら

　のようにマークアップされているはずです。　これらの画像がその要素の背景でしたらHTMLではなくスタイルシートで指定すべきです。＞これを実行すると、main は container に合わせて移動がされる（親子関係になっている）のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。　いいえ、main自体の幅widthプロパティのデフォルトはautoです。 'width'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#propdef-width ) 　一方、置換インライン要素img要素は親要素にoverflow:hiddenが指定されていない限り親要素を超えて表示されます。　そのために、親要素の幅に合わせてその右端に表示されるので、指定どおりに表示されています。　製作されているのですから、当然開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、そのアドオン Firebug( https://addons.mozilla.jp/firefox/details/1843 )だと、その状況は一目瞭然です。 ★HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) 　の二つは、必要なときどこを読めばよいかがわかる程度は目を通しておくこと。　必要な情報はすべてそこにある。しかも正しいし正確 [簡単なサンプル] ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済み＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿＿

本文はsection

＿＿

＿＿＿

補足記事

＿＿＿

本文と直接関係ない(aside)記事

＿＿

＿

ORUKA1951 · Answer

/* 次回 */
の部分
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;text-align:center;}
p{text-indent:1em;text-align:left;}

div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;min-height:400px;}
div.section h2,div.section p{margin-right:120px;}
div.section div.aside{position:absolute;top:0;right:0;width:100px;height:100%;padding:0 5px;}
div.section div.aside p{margin:0;}
/* 背景 */
body{background-color:gray;}
div.header{background:url(container.png) aqua;background-size:cover;}
div.section{background:url(main.png) white;background-size:cover;}
div.section div.aside{background:url(side.png) yellow;font-size:0.9em;}
div.footer{background-color:lime;}

HTMLにはプレゼンテーションに関わる部分は一切書かれていませんから、デザインは好きに変更できます。
　また印刷時には適用されませんから印刷時には素のHTMLとして印刷される。(印刷プレビュー)
　検索エンジンにもわかりやすいし、もちろん自身もメンテナンスが楽になる。

ORUKA1951 · Answer

すみませんでした。
＞CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。 
　と書かれていたので、本道を説明したつもりでした。私自身ははじめて自分のウェブページを作り始めて今年で17年になります。その間の経験から、『学問に王道はない』と言うことを何度も経験して来ましたから、本道を説明したつもりでした。
　確かに、用語は難しかったかもしれませんね。このような場所では、あなたの顔も見えませんから、「詳しい方にご解説を」だけを頼りに説明してしまったようです。
　私が始めた頃は、質問するにもニュースグループしかなくて、質問しようものなら「MAN!」とだけ帰ってきたものです。(マニュアルを読め!と言う意味)
　随分ショックでしたが、その分必死に英語のマニュアルを呼んだものです。おかげで・・
　そのうち、これらの用語は分かるようになりますから御安心を・・
＞20回以上読み直して、なんとなく言いたいことがわかりました。
　すばらしいです。投げ出さない姿勢には感心します。きっとすばらしいスピードで上達されるでしょう。若いって良いですね。

イメージを頂いたのですが、もう少し説明してください。
Q: 最初の質問では背景画像(container.png？)の高さが400pxしかないのに、中に置くであろうmain.png,side.pngは650pxあります。これも自動的に背景画像に合わせて伸縮させて収めるのですか？

Q: 親コンテナブロックのサイズがありませんが、そうすると表示サイズに合わせて伸縮します。画像はそのままでは伸縮しませんから、内部の画像の位置を指定しようとするとずれていきます。
　あなたが最初に試されたとおり・・No.1で説明したのはそういうことです。

ORUKA1951 · Answer

HTMLとCSSの学び方で一番効率的なのは、HTMLだけを先に記述する。(スタイルシートで何が出来て何が出来ないかを知っておく事は必要) 　この時に参考になるのが、・HTML5 における HTML4 からの変更点の「新しい要素」( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　です。この訳は古いので最新は( http://dev.w3.org/html5/html4-differences/ ) 　　hgroupが廃止( WHATWG HTMLには残る )、mainが追加　これは、HTML4.01strictでのDIVの用途としてNo.1の回答で示しました。　そのうえでHTMLを書くと、・・・HTML5で書いたほうがわかりやすいのでHTML5で書いておきます。HTML4.01(XHTML1.0,XHTML1.1)の場合はclass名になります。　

ページタイトル

章タイトル

　　記事　　

項見出し

　　などのようになる事が多いですね。　HTMLが書けたら、 Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) や Html Validator( https://addons.mozilla.jp/firefox/details/249 )などで文法チェックをします。特にAnother HTML Lintは口うるさいですが、原因の説明も対処も示してくれるので参考になりますね。　そして、Lynx などのテキストブラウザを使用して、サイトを確認します( https://support.google.com/webmasters/answer/35769?hl=ja#2 ) 　それが出来てから、スタイルシートを書き始めます。 ★たぶん、このステップの取り方が違うのじゃないかと思います。　(ただし)実際には経験が必要です。　　スタイルシートを書き始めてみたらHTMLのマークアップが足りなかったりする事は　　最初のうちは必ずあります。　本題です。　そのうえで、header内の目次全体を背景画像の上において、リスト項目をその背景の上に任意に配置したい。　と進みます。スタイルシートはHTMLの制限がありませんから自由自在にデザインできますし、screemメディア(PCやスマホ)、印刷、携帯電話、スクリーンリーダー、点字出力用にデザインを変えることもできる。　No.1で私が「そのような形でスタイルシートを学んでも、一切身につきません。」と厳しく言ってしまったのは、＞あるボックスを親として、そこにコンテンツを配置したいと思っています。　というフレーズと・・・デザインのためにHTML書かない!! ＞CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。　というフレーズによるものです。　もし質問が、『ナビゲーション全体を背景画像の上において、ナビゲーションリスト項目をその背景の上に画像に置き換えて任意に配置したい。』でしたら・・・(^^) ＞前回の質問でも感じたことですが、今の勉強法（まずは1つのサイトを作ることを＞目的としたテキストをこなす）だけでは、今のWeb業界の常識が学べないことに不＞安が募ります。＞重ね重ねで申し訳ないですが、No1への補足で書いた私の認識が誤っていたり、そ＞の他改善すべきことがあれば、アドバイスいただきたいです。　下記のような練習が効率的でよいと思います。 [サンプル] 　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　このページのHTMLのソース自体は、(検索エンジンを含め)誰にでもわかるシンプルな物ですが、ブラウザの[表示]メニューから[スタイル(シート)]を選択して、色々なデザインに変わります。印刷もデザインが変わります。　このサイトのHTMLだけをダウンロードしてきて、色々にデザインしてみる。　さらに、自身で適当なサイトを想定してHTMLを書いて、それを色々とデザインしてみる。 ★これって、HTMLもCSSも本当に身につきます。　なお、ひとつのサイトはデザインは可能な限りデザインは共通にしたほうがよいのですが、それでも・サイトのトップやカテゴリーのトップ　　ナビゲーションリストがsection内にある・詳細な内容のページ・会社情報・プロフィール・問合せなど事務的なページ・ショップでしたら商品説明など　程度にはHTMLの文書構造は同じでもデザインは変わるかと思います。

【CSS】positionの親子関係について

厳しいことを言うようですが、そのような形でスタイルシートを学んでも、一切身につきません。

この回答への補足

/* 次回 */

この回答への補足

すみませんでした。

この回答への補足

HTMLとCSSの学び方で一番効率的なのは、HTMLだけを先に記述する。

＞今はまだ、HTMLに書くべき画像とそうでない画像の区別が少し曖昧ですが、

似たような質問が見つかりました

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

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

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

　厳しいことを言うようですが、そのような形でスタイルシートを学んでも、一切身につきません。