ＣＳＳ　７日目

第１６章・続：セレクタの種類

疑似クラス：特定の状態や位置を付加

最初の要素

最初の要素を意味する疑似クラス

セレクタ:first-child {
  プロパティ名: 値;
}

★「セレクタ」と「：」は空白を空けずに記述する

HTML
<ul class="group1">
  <li>１番目の項番</li>
  <li>２番目の項番</li>
  <li>３番目の項番</li>
  <li>４番目の項番</li>
</ul>

.group1 li:first-child {
  color: #f00;
}

.group1 li:first-child {
  border-top: solid 1px #333;
  color: #f00;
}

.group1 li:first-child {
  border-top: solid 1px #333;
  color: #f00;
}

■リストの上下全行に線を入れる場合

.group1 li {
  border-bottom: solid 1px #333;
}


.group1 li:first-child {
  border-top: solid 1px #333;
}

最後の要素

セレクタ:last-child {
  プロパティ名: 値;
}

.group1 li:last-child {
  color: #f00;
}

HTML
<ul class="group1">
  <li>１番目の項番</li>
  <li>２番目の項番</li>
  <li>３番目の項番</li>
  <li>４番目の項番</li>
</ul>

〇番目の要素

■〇番目の要素を意味する疑似クラス

セレクタ:nth-child(数値) {
  プロパティ名: 値;
}

HTML
<ul class="group1">
  <li>１番目の項番</li>
  <li>２番目の項番</li>
  <li>３番目の項番</li>
  <li>４番目の項番</li>
  <li>５番目の項番</li>
  <li>６番目の項番</li>
</ul>

半角スペースで区切ると「子孫セレクタ」（group1 li）

.group2 li:nth-child(3) {
  color: #f00;
}

■倍数の要素を意味する疑似クラス

セレクタ:nth-child(数値n) {
  プロパティ名: 値;
}

HTML
<ul class="group1">
  <li>１番目の項番</li>
  <li>２番目の項番</li>
  <li>３番目の項番</li>
  <li>４番目の項番</li>
  <li>５番目の項番</li>
  <li>６番目の項番</li>
</ul>

.group2 li:nth-child(3n) {
  color: #f00;
}

【応用】〇番目の項目

.group4 li:nth-child(3n-1) {
  background-color: #ccc;
}

■奇数要素を意味する疑似クラス

セレクタ :nth-child(odd) {
  プロパティ名: 値;
}

HTML
<ul class="group1">
  <li>１番目の項番</li>
  <li>２番目の項番</li>
  <li>３番目の項番</li>
  <li>４番目の項番</li>
  <li>５番目の項番</li>
  <li>６番目の項番</li>
</ul>

■偶数要素を意味する疑似クラス

セレクタ :nth-child(even){
  プロパティ名: 値;
}

奇数に文字色

.group2 li:nth-child(odd) {
  color: #f00;
}

※「odd」「even」行ごとに背景色を変えて見やすくするときによく使われる

.group3 li:nth-child(even) {
  background-color: #ccc;
}

.group5 p:last-child {
  margin-bottom: 0;
}

※前回授業の「*」「>」の応用

「group5」の「すべての要素」の内「子要素のみ」で「最初の要素」に定義する
　（孫要素には反映させない）

.group5 > *:first-child {
  margin-top: 0;
}

疑似クラス：リンクのスタイルを定義

リンクのスタイルを定義

■リンクの基本スタイル

a{
プロパティ名: 値;
}

■リンクの上にマウスカーソルが乗った時（ホバー時）のスタイルを定義
　※「:hover」はa要素以外にも使用できる

a:hover{
プロパティ名: 値;
}

★必ず基本デザインの「a要素セレクタ」より下に記述する

★link → visited → hover → active　の順で書く
　　　（ただし「hover」以外はあまり使わない）

↑　リンクの基本スタイルを定義する

今回は「明るい青」「下線なし」

a {
  color: #2196f3;
  text-decoration: none;
}

ホバー時「下線あり」にする

a {
  color: #2196f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

表示方法を定義する：display

リンクのスタイルではインライン要素であるa要素に幅と高さを設定するために使用する

display: 表示方法の値 ;

透明度を定義：opacity

この値は子孫要素に継承されないが、不透明度の効果は子孫要素に及ぶ

opacity: 不透明度の値 ;

変化の時間を定義：transition

疑似クラス「:hover」や「:active」等によってスタイルに変化が起きるときの時間を定義する（どのくらいの時間をかけて変化させるか）

transition: 対象プロパティ 時間 変化の種類 遅延 ;

transition: 対象プロパティ 時間 ;

★「-（ハイフン）」始まりのclass名は、基本デザインにバリエーションをつける際に使用する
バリエーションを「モディファイア」と呼ぶことが多い

  <div class="group2">
    <a class="btn -type1" href="menu1.html">ボタン</a>
    <a class="btn -type2" href="menu1.html">ボタン</a>
    <a class="btn -type3" href="menu1.html">ボタン</a>
    <a class="btn -type4" href="menu1.html">ボタン</a>
  </div>

リンクでボタンを作成

★ボタンのデザインは必ず「a要素」に対して行う！！

例）150pxの幅を持つボタンを作りたい

.btn {
  width: 150px;
}

インライン要素には「幅」「高さ」を指定できないので
displayプロパティに以下（のどちらか）を設定する

「display: inline-block;」：横並び
「display: block;」：改行して横並び

.btn {
  display:  inline-block;
  width: 150px;
}

/* リンクをボタン化 */
/* 基本デザイン */
.btn {
  display:  inline-block;
  width: 150px;
  background-color: #2196f3;
  color: #fff;
  text-align: center;
  padding: .5em 2em;
  border-radius: 10px;
  margin: .3em;
}

さらにホバー時の設定「opacity」でちょっと透明になるようにする

.btn:hover {
  opacity: .7;
}

デザインにバリエーションをつくる

変更のなさそうな要素を残して基本デザインを作る

/* リンクをボタン化 */
/* 基本デザイン */
.btn {
  display:  inline-block;
  text-align: center;
  padding: .5em 2em;
}

.btn:hover {
  text-decoration: none;
}

★セレクタは「ボタンかつタイプ１」を意味する「.btn.-type1」を記述
　「.btn」「.-type1」の間には空白を入れない
※セレクタの間に「半角スペース」が入ると子孫セレクタになってしまう

/* バリエーション */
/*
背景色：青
文字色：白
枠線（破線）
角丸
枠線の外に余白が欲しい⇒影をぼかさずにつける
*/
.btn.-type2 {
  background-color: #2196f3;
  color: #fff;
  border: dashed 1px #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #2196f3;
  margin: .5em;
}

box-shadowを有効活用する

/*
背景色：白
文字色：黒
枠線：しっかりめ
影：黒
角丸
ホバー時背景色をゆっくり変化
*/
.btn.-type3 {
  background-color: #fff;
  color: black;
  border: solid 3px black;
  box-shadow: 3px 3px black;
  border-radius: 10px;
  margin: .5em;
  transition: background-color 1s,color 1s;
}

.btn.-type3:hover {
  background-color: greenyellow;
}

「transition」複数定義する場合は「,(カンマ区切り)」で設定できる
　※今回は「背景色」と「文字色」を設定

縦方向の中央揃え

◆１行限定で高さが決まっている場合
　heightとline-heightに同じ数値を指定する

◆複数行で高さが決まっている場合
　display: flex;
align-items: center;

◆高さを決めずに上下余白同じ値を指定する

ボタン作成：おさらい

<body>
  <div class="test">
    <a href="#" class="btn">PUSH!</a>
  </div>

.test {
  margin: 20px;
}

.btn {
　/*縦の中央揃え その１*/
  display: flex;
  justify-content: center;
  align-items: center;

  /* 縦の中央揃え その２
　display: inline-block;
  text-align: center;
  line-height: 45px; */

  width: 135px;
  height: 45px;
  background-color: #fff;
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: solid 2px #000;
  transition: background-color .3s,color .3s;
}

.btn:hover {
  background-color: #000;
  color: #fff;
}