今回は「子孫セレクタ」「子セレクタ」「隣接セレクタ」という３つのセレクタを使って、シンプルで読みやすいブログ記事を一緒に作ってみましょう！↓これを作ります
htmlコードの作成
htmlコードを書きましょう！
・emmet機能を使って簡単作成！
・クラス名blog
クラス名つけたdiv要素を書く場合は、このようにemmet機能を使って簡単に書きましょう！
・emeetの使い方はこちらから→・タグをいちいち全部書かなくてもOK! 「Emmet機能でコードが一瞬で書ける」
・できるだけ簡単にコードを書く練習をするために、emmet機能を使って同じコードを書いてください↓
・htmlのみで書いたコードをWeb表示させた状態です。↓
親子関係を整理
このhtmlの親子関係が分かりますか？
・分からない方はこちらを読むと理解します→親からひ孫まで！要素の世代物語
・親要素…一番外側は親要素
・子要素…<h1> と<div class=”article”>と<div class=”footer”>
・孫要素…<div class=”article”>の中にある<h2>や<p>
・ひ孫要素…<div class=”footer”>の中にある<a href=”#”>シェア</a>
子孫セレクタ
<style>タグを作ってCSSを書いていきましょう！
・たとえば、以下のように子孫セレクタを使ってCSSデザインをします
・子孫セレクタの書き方は、セレクタとセレクタの間に、半角スペースを入れるのがポイント！
子セレクタ
・子セレクタの書き方は、セレクタとセレクタの間に、大なりを入れるのがポイント！
隣接セレクタ
・隣接セレクタの書き方は、セレクタとセレクタの間に、➕を入れるのがポイント！
まとめ
CSSでは、「どの場所のどのタグにデザインを適用するか」をセレクタで指定します。
今回紹介したセレクタは、それぞれ関係の近さで使い分けます。
・子孫セレクタ…親の中の「どこかにある」子にスタイルを当てたい時に使う
セレクタとセレクタの間に スペース を入れる
・子セレクタ…「すぐ下の子」だけにスタイルを当てたい時に使う
セレクタとセレクタの間に > を入れる
・隣接セレクタ…「すぐ隣にある兄弟要素」だけにスタイルを当てたい時に使う
セレクタとセレクタの間に ＋ を入れる
この3つのセレクタは、「どれくらい近い関係か」で使い分けるのがコツです。
最初はややこしく感じますが、HTMLの構造（親子関係）をイメージしながらCSSを書くと、グッと理解が深まります。
コメント