- ベストアンサー
css 階層構造について
今 HTMLとCSSを覚えています。 cssで階層構造の概念がありつまずいています。 例）下記のソ!DOCTYPE html> <html> <head> </head> <body> <div> <h1>今日の天気</h1> <p>くもりのち<strong>晴れ</strong>です。</p> <p> <span>暖かくなるでしょう。</span> </p> </div> <style> p-span{ color: red; } </style> </body> </html> body要素は親です。p要素はspan要素から見れば親でspanは子要素です。 同じ階層だと思いますが、もし間違えであれば教えてください。 出来れば階層構造について分かりやすく説明とヒントになるサイトがあれば教えて下さい。 困っています。お願いいたします。 ースコードを自分なりに説明したいと思います。 body要素
- greenday501
- お礼率4% (10/218)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
その他の回答 (1)
- retorofan
- ベストアンサー率34% (435/1276)
【1】HTMLソース HTMLファイルのソースは次のようにしたほうが良いでしょう。 （下線は半角スペース） <!DOCTYPE_html> <html> <head> <title>今日の天気</title> <style> __p > span { ____color: red; __} </style> </head> <body> __<section> __<h1>今日の天気</h1> __<p>くもりのち<strong>晴れ</strong>です。</p> __<p> ____<span>暖かくなるでしょう。</span> __</p> __</section> </body> </html> <div>タグは汎用的なコンテナであり、特定の意味を持ちません。 一方、<section>タグは意味的に関連するコンテンツをグループ化する場合に適しています。 上記の例では、天気に関する情報をセクションとして扱ったほうが理にかなっています 【2】あなたの説明に関して 「body要素は親です。p要素はspan要素から見れば親でspanは子要素です。」 ー＞正しいです。 <p>タグは段落を表し、その中にある<span>タグはインライン要素として扱われます。 したがって、<p>は親要素であり、<span>は子要素です。 【3】スタイルシート ー＞正しくは、次のとおり。 <style> p > span { color: red; } </style> このCSSルールは、<p>要素の直接の子要素である<span>要素に対して、 文字色を赤に設定します。 なお、階層構造などの説明に関するサイトは、ネットでキー検索すれば、 いくらでも見つかりますから割愛させて頂きます。
お礼