演習 - セレクター

完了

前の演習では、html や h1 などの要素にスタイルを適用しました。 スタイルを適用するには、多くの場合、少し幅を狭める必要があります。

この演習では、ページ上のソーシャル メディアとエクスペリエンスのセクションとリンクのスタイルを設定します。

クラスと ID へのスタイルの適用

まず、ソーシャルメディアとエクスペリエンスセクションのスタイルを設定します。

1. 前の演習で使用した vscode.dev ウィンドウに戻ります。

2. index.html内で、10 行目に social-media の ID を持つ section 要素に注目してください。このセクションに style を適用して色を青に設定します。

3. style.css の末尾に、次の CSS を追加して social-media 要素の色を設定します。

   #social-media {
       color: blue;
   }
   

4. ページが更新され、ソーシャル メディア セクションのコンテンツが青色に設定されます。

5. index.htmlの内部では、28 行目と 32 行目の 2 つのセクションにクラスの経験があることに注意してください。これらのセクションにスタイルを適用して、フォントを斜体にします。

6. style.css の末尾に、次の CSS を追加して、エクスペリエンス クラスがある要素のフォントを変更します。

   .experience {
       font-style: italic;
   }
   

7. ページが更新され、エクスペリエンス内のフォントが斜体に設定されます。

擬似クラスを使用してリンクスタイルを設定する

多くの Web 開発者は、ページ上のハイパーリンクの色とスタイルを変更します。 リンクの色を緑色に設定し、ユーザーがリンクにカーソルを合わせるとリンクが強調表示されるようにします。

1. style.css の末尾に、次の CSS を追加してリンクが常に緑になるように設定します。

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. ページが更新され、リンクが緑で表示されます。

3. style.css の末尾に次の CSS を追加して、リンクにカーソルが置かれたときに強調表示されるようにします。

   a:hover {
       background-color: yellow;
   }
   

4. ページ上のリンクにカーソルを置き、そのリンクが強調表示されることに注目してください。

レビュー

次のスクリーンショットは、適用した CSS の結果を示しています。 クラス、ID、擬似クラスを使用して、特定の要素と要素の論理グループにスタイルを適用しました。