コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
継承のプロパティを試す
このレッスンでは、 継承のプロパティを試して、 その結果を確かめたいと思います。 親のスタイルからどう継承するか、 しないかということが プロパティで定められるんですけれども、 プロパティは4つあります。 「inherit」「initial」 「unset」「revert」ですね。 そして、ここに テスト用のテキストがあるんですが、 リンクがあったほうが分かりやすいので リンクも設定してあります。 リンクは、これは ブラウザがデフォルトで決めていて、 通常はこの様に下線があって 青色になりますね。 このa要素の設定が どう変わるかということを これらのプロパティで 確かめてみたいと思います。 li要素が4つありますけれども、 クラス名としてプロパティと同じ名前が つけてあります。 まずは、 li要素に対するスタイルを決めます。 li で color で定めましょう。 color: green ということで、 4つの項目が green になるはずですので 確認しましょう。 4つのli要素、グリーンになったんですが、 リンクのほうは、これは デフォルトの設定が生きていて、 ブルーに下線という状態になっていますね。 まず、プロパティ inherit から 試してみましょう。 class は inherit で、 そして inherit 中のa要素で ですからli要素、 class="inherit" の中にある、 このリンクの部分が設定される ということになるわけですけれども、 ここに color を定めます。 color: inherit と。 そうすると、 親から継承するということになりますから、 a要素の親は li ですね。 ということでこの li の color が 設定されるはずです。 確認しましょう。 「inherit」の項目ですね。 下線は残っていますけれども、 カラーはli要素から継承して グリーンに変わりました。 次は initial です。 .initial ということで、 a要素で、そして、 そして color には initial と。 というふうに設定します。 これも確かめてみましょう。 そうすると、デフォルトの スタイルシートのカラー。 これは黒なんですけれども、 ですからリンク、下線が残っていますが、 黒くなりました。 あと2つはもう…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。