【CSS講座⑤】擬似クラスを使ってカッコ良くHTMLを装飾する

今回は疑似クラスを使って、カッコ良くHTMLを装飾したいと思います。

CSSの基本を理解する

CSS（ Cascading Style Sheets ）とは、Webサイトをデザインするためのマークアップ言語です。CSSは、セレクタ・プロパティ・バリューの構成で成り立っていることを最初に理解してください。

マークアップ言語には、HTMLのほかにSGML、XHTML、XMLなどがあります。

CSSの書き方の基本

CSSの書き方の基本は、セレクタ { プロパティ : 値 } です。

  1. セレクタとは、スタイルをHTMLのどの要素に適用するのかを決める役割になります。
  2. 次のプロパティとは、どんな種類のスタイルを適用するのかを決める役割になります。
  3. 最後のバリューとは、どのように適用するか値を決める役割になります。

コメントアウトのやり方

CSSもしくはSTYLEタグ内でのコメントアウトの方法は、/*から始まり、*/で終わります。

例：/* この中に書いたものがコメントアウトされます。*/

疑似クラスとは

擬似クラスとは、指定の要素が特定の状態である場合に、スタイルを適用するセレクタのことを指します。

疑似クラスの書き方

疑似クラスの書き方は、要素名:疑似クラス{ プロパティ: 値; } になります。

例：p:hover {  color: red; }

要素名の後のコロン（：）は１つ指定してください。

パターン別、疑似クラスの使い方

以下、パターン別、疑似クラスの使い方を説明していきます。

①リンクに対する疑似クラス

:linkと:visitedは、リンク要素が未訪問もしくは訪問済の場合に装飾を適用するセレクタになります。

例えば、A要素に対して:linkを使うと、未訪問のリンク色を変更できます（初期値は”青色“です）。また、A要素に対して:visitedを使うと、訪問済のリンク色を変更できます（初期値は”紫色“です）。

例：

  1. a:link {
  2.   color: red;
  3. }
  4. ～～～～～～～～～～～～～～～～～～～
  5. <p><a href=“#”>未訪問のリンク色を赤にします。</a></p>

②カーソルによる疑似クラス

:hoverは、ある要素上にカーソルが乗る場合に装飾を適用するセレクタになります。

例えば、Aタグにカーソルが乗ると背景色を変更します。

例：

  1. a:hover {
  2.   background: yellow;
  3. }
  4. ～～～～～～～～～～～～～～～～～～～
  5. <p><a href=“#”>カーソルを合わせると、背景色を黄色にします。</a></p>

③要素内のｎ番目に対する疑似クラス

:nth-child(n)は、要素内のｎ番目にあたる要素にスタイルを適用するセレクタになります。また、n番目以外の指定も可能で偶数・奇数・１番目・最終番目など細かく指定もできます。

例えば、nth-child(even)の場合は、偶数行の背景色を変更します。また、nth-child(odd)の場合は、奇数行の背景色を変更します。

例：

    1. div p:nth-child(even)
    2. {
    3.   background: yellow;
    4. }
    5. ～～～～～～～～～～～～～～～～～～～
    6. <div>
    7. <p>Pタグの1番目です。</p>
    8. <p>Pタグの2番目です。</p>
    9. <p>Pタグの3番目です。</p>
    10. <p>Pタグの4番目です。</p>
    11. <p>Pタグの5番目です。</p>
    12. <p>Pタグの6番目です。</p>
    13. </div>

今日の問題

まず始めに、以下をメモ帳で記述し、CSS_Chapter05.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <style>
  6.   H2 { color: blue }
  7. </style>
  8. <meta name=”description” content=”ページの要約文”>
  9. </head>
  10. <body>
  11. <h2>人気のウェブページ　トップ５!!</h2>
  12. <p>1. Yahoo（https://www.yahoo.co.jp）</p>
  13. <p>2. Google（https://www.google.com)</p>
  14. <p>3. YouTube（https://www.youtube.com)</p>
  15. <p>4. Amazon（https://Amazon.co.jp)</p>
  16. <p>5. 楽天（https://rakuten.co.jp)</p>
  17. <div>ここにカーソルを合わせている間<br />背景色を変更します。</div>
  18. </body>
  19. </html>

問1

12行目～16行目をリンク化してください。

問2

リンク未訪問時の場合は、青色にして下さい。また、リンク訪問時の場合は、赤色＋取消線にして下さい。

問3

17行目のPタグにカーソルを合わせた場合は、背景色を黄色にしてください。

問4

疑似クラス：nth-childを使って、3つ目のPタグの文字を赤色に変更してください。

 

コメント