演習 - セレクター

完了

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

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

クラスと ID に対してスタイルを適用する

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

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

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

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

   #social-media {
       color: blue;
   }
   

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

5. index.html 内の 28 行目と 32 行目にある、クラス experience の 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、擬似クラスを使用して、特定の要素と要素の論理グループにスタイルを適用しました。