コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
擬似要素を使う
このレッスンでは、 疑似要素を使ってみます。 「疑似要素」というのは、 セレクタの後に加えられる キーワードなんですけれども、 疑似クラスとちょっと似ていますが、 「::」でスタートします。 コロン2つで始まるキーワードです。 特定の部分の要素に スタイルを加えるんですけれども ひと言で説明するのは ちょっと難しいですね。 構文としては「セレクタ::キーワード」 ということになります。 こちらはMDNの「CSS入門」の 「疑似クラスという要素」 というページなんですけれども、 これをスクロールしていって、 これですね。 こんな疑似要素があるんですけれども、 ひと言で説明するのは 難しいと言ったんですが、 比較的面白くて応用の余地が広いのが この after と before ですので、 この2つをご紹介したいと思います。 after と before ですね。 これは基本的な機能としては、 その要素に子要素を加えるんですね。 子供の要素を作って加えてしまいます。 名前のとおり before は要素の最初に加え、 after は要素の最後に加える という違いがあります。 使ってみたほうが早いと思いますので、 このli要素に対して まずは before を加えてみたいと思います。 ここで li:: ですね。 そして before ということで、 加える要素にテキストが入れられますので、 それを content というプロパティで テキストは "" で囲んで 星印にしましょう。 ★ として、これですね。 この星印が li要素それぞれの先頭に加わります。 確認してみましょう。 ファイルを保存します。 li要素の先頭に ★ が加わりました。 そうすると、この先頭にある 「･」邪魔ですね。 消してしまいましょう。 あと、ちょっと次のテキストとの間隔が 詰まっていますので、 ここを開けたいと思います。 ::before で加えた子要素は、 普通の要素と同じように スタイルが適用できますので、 例えば color ですね。 color は deeppink にしましょう。 それから、間隔を開けると言いましたので、 padding の、右側ですよね。 ですから、right ということで、 4px ほど開けたいと思います。 機能が分かったと思いますので、 after…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。