- ベストアンサー
CSSのpositionによる親子関係について
- CSSのpositionを使用して要素の位置を指定する際、親子関係を作ることができます。
- しかし、親子関係を作る際にはいくつかの規則があります。
- 詳しくは以下の解説をご覧ください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞今はまだ、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 )
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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名になります。 <body> <header> <h1>ページタイトル</h1> <nav> <ol> <li><a href=""></a></li> ・・・・・ <li><a href=""></a></li> </ol> </nav> </header> <section> <h2>章タイトル</h2> 記事 <section> <h3>項見出し</h3> </section> <aside> <h3>補足記事</h3> </aside> <nav> サイト内の目次・・ </nav> </section> <footer> 文書情報 </footer> </body> などのようになる事が多いですね。 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の文書構造は同じでもデザインは変わるかと思います。
お礼
ご丁寧にありがとうございます。 最後にご紹介してくださったサイトで実際にHTMLを見て、CSSを変更しながらいじってみて、ついでにこの記事を読んで（https://www.ayudante.jp/column/2012-09-24/13-02/）、ようやくあなたの仰りたいことが理解できたと思います。 文法チェックのサイトのご紹介も助かりました。 Firefoxのものが体感的にわかっていいかなと思ったのですが、Mac環境では使用できなかったので、他に良さそうなものを探してみます。 私自身、元々デザインの方にいた人間なので、Webサイトを作る際もデザインありきで考えていました。 タイトルロゴはもちろん、ナビゲーションや見出しを画像にすることもあります。 必ずしもそれがダメ、ということではないと思いますが、最低限CSSを使用しない・画像が読み込まれない状況でも見ることのできるHTMLを書けるようにならなくてはいけないのでしょうね。 今はまだ、HTMLに書くべき画像とそうでない画像の区別が少し曖昧ですが、これから勉強していきます。 アドバイスありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみませんでした。 ＞CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。 と書かれていたので、本道を説明したつもりでした。私自身ははじめて自分のウェブページを作り始めて今年で17年になります。その間の経験から、『学問に王道はない』と言うことを何度も経験して来ましたから、本道を説明したつもりでした。 確かに、用語は難しかったかもしれませんね。このような場所では、あなたの顔も見えませんから、「詳しい方にご解説を」だけを頼りに説明してしまったようです。 私が始めた頃は、質問するにもニュースグループしかなくて、質問しようものなら「MAN!」とだけ帰ってきたものです。(マニュアルを読め!と言う意味) 随分ショックでしたが、その分必死に英語のマニュアルを呼んだものです。おかげで・・ そのうち、これらの用語は分かるようになりますから御安心を・・ ＞20回以上読み直して、なんとなく言いたいことがわかりました。 すばらしいです。投げ出さない姿勢には感心します。きっとすばらしいスピードで上達されるでしょう。若いって良いですね。 イメージを頂いたのですが、もう少し説明してください。 Q: 最初の質問では背景画像(container.png？)の高さが400pxしかないのに、中に置くであろうmain.png,side.pngは650pxあります。これも自動的に背景画像に合わせて伸縮させて収めるのですか？ Q: 親コンテナブロックのサイズがありませんが、そうすると表示サイズに合わせて伸縮します。画像はそのままでは伸縮しませんから、内部の画像の位置を指定しようとするとずれていきます。 あなたが最初に試されたとおり・・No.1で説明したのはそういうことです。
補足
私は勉強を始めようと思い立ってからまだ2ヶ月ほど、その間休日に少しの時間しかとれていませんでしたので、おそらく勉強した時間は50時間にも達していないと思います。 17年のベテランの方が話す用語や話を難なく理解するには力不足だったのでしょうね。 ご質問ですが、補足が不十分だったようですみません。 ＞背景画像(container.png？)の高さが400pxしかないのに、中に置くであろうmain.png,side.pngは650pxあります。 こちらは、ここでの質問用に書いたものでしたので、実際はcontainerに入るサイズで作成しています。 ＞親コンテナブロックのサイズがありませんが、そうすると表示サイズに合わせて伸縮します。画像はそのままでは伸縮しませんから、内部の画像の位置を指定しようとするとずれていきます。 親コンテナというのはcontainerではない、全体の背景の方でしょうか。 正しい書き方なのかはわかりませんが、containerのサイズをHTMLではなくCSSで記述し（width: 700px）、margin-leftを-350px（widthの半分）に指定することで実現できました。 参考URL：http://blog.creamu.com/mt/2007/07/cssdivlocate_div_at_the_center.html HTML内でのサイズ指定は主にページ読み込み時の不具合を防ぐためと思っていましたが、CSSで記述することで上記のような処理もできることを知りました。 その上で、おそらくですが、あなたが仰っていた私の誤った認識とは、画像の伸縮などのレイアウト変更要素は、HTMLではなくCSSで記述するべきで、HTML内でサイズを指定した画像を伸縮させようというのはおかしい、ということかと思います。 的外れでしたらすみません。 そもそも私が「画像を移動するだけ＝画像のレイアウトは変更しない」という認識でいたためにあなたの仰っていることが全く理解できなかったことが悪かったのでしょうね。 前回の質問でも感じたことですが、今の勉強法（まずは1つのサイトを作ることを目的としたテキストをこなす）だけでは、今のWeb業界の常識が学べないことに不安が募ります。 重ね重ねで申し訳ないですが、No1への補足で書いた私の認識が誤っていたり、その他改善すべきことがあれば、アドバイスいただきたいです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
/* 次回 */ の部分 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
- ベストアンサー率45% (5062/11036)
厳しいことを言うようですが、そのような形でスタイルシートを学んでも、一切身につきません。 スタイルシートでプレゼンテーションを指定していく最大の目的はただひとつ!! ★構造とプレゼンテーションの分離( 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)に分解して、タグでマークアップしていきます。<h1>ここは見出し</h1><p>この間はひとつの段落</p><p>そしてここは<strong>重要</strong>と言う風に、 【重要】どのようにプレゼンテーションするかは考えません。 しかし、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/ )』 以上を理解されたうえで、本題ですが・・ <img src="container.png" width="700" height="400"> <img src="main.png" width="550" height="650" id="main"> <img src="side.png" width="100" height="650" id="side"> これらの画像は、その文書にとってコンテンツでないなら背景です。すなわちコンテンツでしたら <h1><img src="title.png" width="700" height="150" alt="[このページのタイトル]"></h1> <div class="figure"><!-- figure(英:挿絵) --> <img src="" width="" height="" alt=""> </div> のようにマークアップされているはずです。 これらの画像がその要素の背景でしたら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# ) でチェック済み <!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" media="screen"> <!-- /*次回に*/ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="aside"> ＿＿＿<h3>補足記事</h3> ＿＿＿<p>本文と直接関係ない(aside)記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ご丁寧にありがとうございます。 しかし、あなたの説明は冗長且つ言葉が難しすぎて、私にはうまく理解できません。 いつもリンク付きでご説明くださいますが、リンク先の文章もいまいち理解しがたく、必死に読んでみますが、不明な言葉を調べながら読んでいると、どんどん深みにはまります。 プレゼンテーションって何？SGML？HTML5の説明をしていたのにサンプルはHTML4.01？？ 全くわかりません。理解できない自分にもイライラします。 わかる箇所だけで回答しますと、container、main、sideはここで質問するために暫定的につけた名前です。 containerは背景、mainとsideはリンク画像です。 名前の付け方が悪かったのかもですが、普通のWebサイトのようなメインコンテンツやサイドバーではなく、リンクが貼られているただの画像です。 あなたの言わんとすることはなんとなくですが、理解できます。 きっと私のようなこれから勉強をする初心者に、正しいHTMLやCSSの構造・記述を理解させようとしているのだと思います。 でも、私にはあなたの説明は全く頭に入ってきませんし、どんどん自己嫌悪に陥ります。 書籍があれば読みますので、あなたの伝えたいことがまとめられている書籍を紹介してくださった方が助かります。
補足
20回以上読み直して、なんとなく言いたいことがわかりました。 プレゼンテーションというのは、レイアウトのことですよね？ HTMLにはただ見出しや本文などの要素をひたすら記述していき、それをどうレイアウト（プレゼンテーション）するかはCSSで行うこと、ということを仰りたいのだと思います。 自分としては、その法則に則って上記を書いたつもりです。 HTMLにはdivやpなどの最低限の要素を記述し、CSSで配置や要素のデザインをする、ということを意識して＜CSS＞、＜HTML＞と分けて記述しました。 ＞HTMLを拝見すると、HTML自体がプレゼンテーション目的で記述されています。 上記の想定で合っているとすると、これがHTML内のどこのことを仰っているのかわかりません。 命名規則が問題だということでしょうか。 ＞厳しいことを言うようですが、そのような形でスタイルシートを学んでも、一切身につきません。 「HTMLは要素のみ記述、CSSでレイアウト」という考え（形）でHTMLやCSSを学んでいたつもりですが、「一切身につかない」と仰っている「形」とは、私のどのような形（考え方）を指しているのでしょうか。 あなたの日本語を理解できない私が史上まれに見るほどの馬鹿だということでしょうかね。 ----------------- 今回の質問は自己解決しました。 やりたかったこと（画像用の背景と画像を同時に動かす）もできました。
お礼
何度もありがとうございます。 No1の回答も、何が原因で行き詰まっていたのかも、理解することができました。 独学で周りに聞ける方もいない、きっと昔のあなたと同じであろう状況にいますが、誰もが通る道だと思って前向きにがんばります。 またこちらで質問させていただくこともあるかと思いますが、よろしくお願いします。 （意図がきちんと伝わるような質問ができるようにもならなくてはですね） 何から何までありがとうございました。