コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
型セレクタを使う
このレッスンでは 型セレクタを使って 要素のスタイルを定めてみます。 型セレクタというのは 別名「要素セレクタ」というんですけれども この名前のとおり HTMLの要素名をそのままセレクタにして 要素を選択します。 例えばというと 「h1」とか「p」とか「li」、 あるいは「ul」とか「ol」とかといった その要素名がそのままセレクタになります。 多くの場合、 CSSで一番最初に習うセレクタが この型セレクタですね。 今 style には何も指定してありませんので おさらいを兼ねて型セレクタを使って 要素のスタイルを定めてみたいと思います。 まずは h1 ですね。 h1 については background-color と しまして、 color は aqua とします。 いわゆるシアンですね。 それから border を入れましょう。 border で太さは 1px。 実線、solid ですね。 color は通常どおり black と。 それから li がありますので li、通常は丸い形が先頭につきますね。 一番最初は黒丸。 子要素になってくると白丸になると いうことになってくるんですが 四角くすることはできます。 li要素に対して list-style ということで circle は白丸です。 disc は黒丸なんですけれども square というのがありまして これは黒い四角になります。 確認しましょう。 ファイルを保存します。 h1要素の背景の塗りがアクア。 そして黒い実線の枠がつきました。 太さは1pxですね。 それからリストの先頭なんですが、 ちょっと見にくいかもしれませんが 黒い四角に変わっています。 あと見出しの要素ですね。 これの文字の色を変えてみましょう。 見出しには h1 と h3 を使っています。 2つとも同じcolorにしたいと思います。 そういう場合には2つを並べて 選ぶことができますね。 h1 と , で区切ります。 h3。 それから strong があるんですが、 これも同じ色にしましょう。 ということで strong として 文字の色は color ですね。 blue にしましょう。 こうすると h1、h3、strong。 3つの要素にまとめて同じ色、 blue を設定することができます。 ファイルを保存します。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。