CSS B4 〜擬似クラス hover〜

下記のWebページを内部スタイルシート形式で作成してください。
事前準備
ヒント
こたえ
- ソースコード

下記のWebページを内部スタイルシート形式で作成してください。

下記のマウスが上に乗ったら文字がピンク色になるようにWebページを内部スタイルシート形式で作成してください。

事前準備

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。

「webst8」フォルダの中に「css-lesson-b4」フォルダを作成して、Atomで「lesson-b4.html」を新規作成します。

以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson-b4.html」に内部スタイルシート形式でCSSを記述していってください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSS</title>
  <style media="screen">
  .info-wrap{
    width: 400px;
    padding: 20px;
  }
  ul{  padding:0;  }
  li{
    list-style: none;
    line-height: 2;
  }
  li:not(:last-child){
    border-bottom:1px dotted #000000;
  }
  a{
    text-decoration: none;
    color: #000;
  }
  a:???{
    color:pink;
    }
  </style>
</head>
<body>
  <div class="info-wrap">
    <h3>お知らせ情報</h3>
    <ul>
      <li><a href="#">2017年12月11日　年末年始休業日のお知らせ</a></li>
      <li><a href="#">2018年1月1日　あけましておめでとうございます。</a></li>
      <li><a href="#">2018年1月5日　本日から営業開始です。</a></li>
      <li><a href="#">2018年1月15日　次回セミナーのお知らせ</a></li>
    </ul>    
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

.info-wrap{

width: 400px;

padding: 20px;

}

ul{ padding:0; }

li{

list-style: none;

line-height: 2;

}

li:not(:last-child){

border-bottom:1px dotted #000000;

}

text-decoration: none;

color: #000;

}

a:???{

color:pink;

}

</style>

</head>

<body>

<h3>お知らせ情報</h3>

<ul>

<li><a href="#">2017年12月11日　年末年始休業日のお知らせ</a></li>

<li><a href="#">2018年1月1日　あけましておめでとうございます。</a></li>

<li><a href="#">2018年1月5日　本日から営業開始です。</a></li>

<li><a href="#">2018年1月15日　次回セミナーのお知らせ</a></li>

</ul>

</div>

</body>

</html>

一通り記述できたら上書き保存して「lesson-b4.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。

ヒント

ある要素が特定の状態にあるときにスタイルを指定する方法に擬似クラスがあります。

例)

ある要素に対して、クリックされた状態にある時
ある要素に対して、カーソルが上に乗っている時

などなど。

擬似クラスは、以下のように指定します。

セレクタ:擬似クラス{
　任意のCSS設定
}

で指定します。

代表的なものとしてマウスがある要素上に載ったら色や形を変えるなどがあります。

詳細は下記をご参照ください。

知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について

本問題で利用している擬似クラスはhoverです。

詳細は下記をご参照ください。
1-7. マウスが乗っている時 :hover

こたえ

ソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSS</title>
  <style media="screen">
  .info-wrap{
    width: 400px;
    padding: 20px;
  }
  ul{  padding:0;  }
  li{
    list-style: none;
    line-height: 2;
  }
  li:not(:last-child){
    border-bottom:1px dotted #000000;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    color:pink;
    }
  </style>
</head>
<body>
  <div class="info-wrap">
    <h3>お知らせ情報</h3>
    <ul>
      <li><a href="#">2017年12月11日　年末年始休業日のお知らせ</a></li>
      <li><a href="#">2018年1月1日　あけましておめでとうございます。</a></li>
      <li><a href="#">2018年1月5日　本日から営業開始です。</a></li>
      <li><a href="#">2018年1月15日　次回セミナーのお知らせ</a></li>
    </ul>    
  </div>
</body>
</html>