CSS3の基本 - レベルアップCSS

構造疑似クラス -child系疑似クラス編

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
最初や最後の要素、1つおきの要素など、特定の要素を全体から選んでスタイルを付加するときは、構造疑似クラスの:~-child系疑似クラスを使用します。ここでは、:~-child系疑似クラスの使い方について紹介します。
講師:
10:52

字幕

最初や最後の要素、1つ置きの要素など特定の要素を全体から選んでスタイルを適用するときは構造疑似クラスの child 系疑似クラスを使用します。このレッスンでは child 系疑似クラスの使い方について紹介します。画面の左側には HTML と CSS の編集画面。右側にはその結果を表示するウェブブラウザを表示しています。まず last-child 疑似クラスについて紹介します。last-child 疑似クラスは最後の要素に対してスタイルを適用するときに使います。あらかじめ HTML を確認してみましょう。HTML には ul 要素が2つ定義されています。そして ul 要素の中にはそれぞれリスト項目がマークアップされています。構造疑似クラスは同じ階層のグループごとに対して適用されるためここで例えば li 要素に対してlast-child 疑似クラスを使うと1つ目の ul 要素では「 Brackets 」と書かれているリスト項目に、2つ目の ul 要素では「その他、お好みの環境をお選びください!」と書かれているリスト項目に対してスタイルを適用することができます。それでは CSS を書いていきましょう。 ここでは li 要素を対象にします。そしてこの li 要素の最後の要素を選択する為last-child 疑似クラスを使います。ここでは 「:last-child 」と入力します。これは決められたキーワードです。そして背景色を山吹色に設定してみましょう。ウェブブラウザを見ると1つ目の ul 要素の最後のリスト項目に背景色が適用され2つ目の ul リストにも唯一のリスト項目ですがこちらにも背景色が適用されていることが分かります。次に nth-child 疑似クラスこちらについて紹介していきます。nth-child 疑似クラスは指定した順番の要素に対してスタイルを定義するものです。例えばここでは2番目の「 PhpStorm 」と書かれているリスト項目に対して背景色を設定してみましょう。先ほどと同様にリスト項目に対して書くのでli 要素のタイプセレクタを書きます。そしてその後に「 nth-child 」この括弧の中には指定したい順番を記入します。ここでは2番目のリスト項目を選択したいため「 2 」と入力します。これに対して背景色を設定しましょう。background プロパティを使って背景色を設定しますここではエメラルドグリーンにしてみました。 ウェブブラウザを見ると2番目の「 PhpStorm 」に対して背景色が設定されていますね。同じように nth-child とは別にnth-last-child 疑似クラスというものもあります。nth-child は上から順番を数えるのに対してnth-last-child は下からつまり後ろから順番を数えます。ここでは後ろから3つ目、1つ目の ul 要素の中で下からつまり後ろから3つ目。ここでは「 IntelliJ IDEA 」と書かれたリスト項目に対して背景色を適用してみましょう。同じく li 要素に対して「 nth-last-child 」そして括弧の中に数字を入力します。後ろから3番目の要素ですので「 3 」を入力して背景色を設定します。背景色の設定は background プロパティです。ここでは青系の色を設定してみましょう。と綴りを間違っていますのでここ修正します。いかがでしょうか。ウェブブラウザを見ると下から3番目の要素「 IntelliJ IDEA 」という文字列の背景色が設定されました。このとき2番目の ul リストの中にあるリスト項目に対しては上から2番目、先頭から2番目や後ろから3番目といったリスト項目が存在しないためエメラルドグリーンや青の背景色は適用されていません。 次に nth-child 疑似クラスや nth-last-child疑似クラスで使えるodd even というキーワードについて紹介します。odd even は奇数偶数を指定するためのキーワードです。ここでは奇数に対して背景色を別に設定してみましょう。同じようにリスト項目に対して上から数えて奇数だった場合、背景色を設定します。ここでは同様に青に設定してみましょう。ウェブブラウザを見るとリスト項目の奇数に対して、つまり1番目、3番目、5番目の項目に対して背景色が青に設定されています。また先ほどは背景色が変わらなかった2番目の ul 要素に対してもこちらは1つしかリスト項目がありませんので奇数である1つ目この順番に適用されるため背景色が青に変わっています。同様に偶数についても背景色を設定してみましょう。偶数についてはキーワードは「 even 」を使います。この even に対して背景色、背景色の値を赤系の色に設定します。ウェブブラウザを見ると奇数と偶数の順に青赤青赤と背景色が設定されていますね。さらにできる細かい指定として nth-child疑似クラスと nth-last-child 疑似クラスでは数値を指定して細かい順番を制御することもできます。 試してみましょう。li 要素に対して nth-child 疑似クラスを使います。そしてこの括弧の中に数値や odd evenではなく計算式を入力します。書式はコメントに書いてある「 an+b 」という形です。まず a という部分にはいくつ置きに要素を選択するかというのを入力します。ここでは2つ置きに要素を選択したいため「 2 」という数字を入力します。そしてキーワードである n 記号の + を入力して先ほど選択した2つ置きの要素に対していくつ置きの要素に適用するかについてb の部分で数字で指定します。ここでは2つ置きに選択した要素に対して2つ目の要素を選択したいためさらに「 2 」を入力します。こうすることで2つごとに選択した要素に対して2つ目つまりこの5つのリスト項目があるリストの中では「 PhpStorm 」と「 Sublime Text 」2番目と4番目に対してセレクタを適用するということができます。ではここではすべてのリスト項目に対して背景色が適用されてしまっているため背景色を一旦透明にしてみましょう。background-color プロパティを使って「 transparent 」を指定します。 すると意図した通り「 PhpStorm 」「 Sublime Text 」つまり2番目と4番目の項目に対して背景色が無くなりました。この指定はさらに細かく指定することもでき例えばnth-child を使って 10n-1という指定をすることもできます。この記号の部分にはプラスの代わりにマイナスを使うこともできるのです。こうすることでここでは10個のまとまりの中から-1 となりますので9番目の要素そして19番目の要素、29番目の要素、これ以降は10個のまとまり -1という数値のまとまりで要素を選択することができます。ここではリスト項目の数が5個になりますのでこの指定は有効にはなりません。最後に only-child 疑似クラスについて紹介します。only-child 疑似クラスはリスト項目が1つだけの場合に適用されます。試してみましょう。リスト要素に対してonly-child 疑似クラスです。ここでも背景色を設定してみましょう。background-color プロパティを使って背景色を紫に設定します。するとリスト項目を確認してみると ul 要素、1つ目の ul 要素の中にはリスト項目が5つありますので背景色は適用されていません。 2つ目の ul 要素にはリスト項目が1つだけです。そのため新しく指定した紫の背景色が適用されています。この only-child 疑似クラスは別の書き方をすることもできまず first-child 疑似クラスを使う。そしてこの後にそのままスペースを開けずlast-child 疑似クラスこのセレクタを使うとonly-child 疑似クラスと同じ意味を持つセレクタを作ることもできます。このレッスンでは最初や最後の要素、1つ置きの要素など特定の要素を全体から選んでスタイルを適用するときに使う構造疑似クラスの child 系疑似クラスの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。