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

構造疑似クラス :empty疑似クラス編

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
空の要素に対してスタイルを付加するときは、構造疑似クラスの:empty疑似クラスを使用します。ここでは、:empty疑似クラスの使い方について紹介します。
講師:
02:22

字幕

内容が空の要素に対してスタイルを適用するときは構造疑似クラスの empty 疑似クラスを使います。このレッスンでは empty 疑似クラスの使い方について紹介します。画面では左側に HTML と CSS の編集画面、右側にその結果を表示するウェブブラウザを表示しています。HTML を見ると中ほどに内容が入っていないp 要素がマークアップされています。このような要素に対してスタイルを適用したいときは empty 疑似クラスを使います。ここでは empty 疑似クラスを使って内容が空の要素に対してボーダーを設定してみましょう。empty 疑似クラスを使うには記号の : に続きempty という決められたキーワードを入力します。そしてこの empty 疑似クラスに対してボーダーを設定しましょう。ここでは実線の 2pxそして赤色のボーダーを設定します。すると内容が空の p 要素 h2 要素の下の部分ですね、ウェブブラウザを見るとこの h2 の下の部分についてボーダーが適用されていることが分かります。ここで少し下の場所にも同じようにボーダーが適用されていることに注目してください。この箇所の HTML を確認してみましょう。 同じ箇所には hr という要素がマークアップされています。hr 要素はいわゆる空要素で終了タグを必要としない要素です。このような開始タグのみで了タグを必要としない空要素では内容が空になるためこのようにp 要素と同じようにempty 疑似クラスで指定したスタイルが適用されるのです。このレッスンでは空の要素に対してスタイルを適用するときに使う構造疑似クラスの empty 疑似クラスの使い方について学びました。

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

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

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

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

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

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