ＣＳＳ　８日目

投稿日：2021-11-02

更新日：2022-03-24

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

（AM中はボタン作成のおさらい）

リンクのスタイルを定義

背景画像を使ったボタンを定義する

「通常の画像」と「ホバー時の画像」を1枚画像で書き出す

ボタンとして使用するエリアの幅と高さを確認
「通常の画像」と「ホバー時の画像」の移動した数値を確認
背景色をCSSで指定するなら、背景を透明にしてPNG書き出し

【おさらい】

「画像はインライン要素」
インライン要素には「幅」「高さ」を指定できないので
displayプロパティを使って「表示方法」を置換インライン要素に変更する
以下（のどちらか）を設定

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

<div class="group1">
  <a class="btnContact" href="contact.html">お問い合わせはこちら</a>
</div>

.btnContact {
  background-color: #ffc107;
  /* リンクエリア作成 */
  display: inline-block;
  width: 260px;
  height: 120px;
  /* 背景画像 */
  background-image: url(img/btn_contact.png);
  background-repeat: no-repeat;
}

左上に表示されているリンク文字「お問い合わせはこちら」の文字を
わざとはみ出させて非表示にする

.btnContact {
  background-color: #ffc107;
  /* リンクエリア作成 */
  display: inline-block;
  width: 260px;
  height: 120px;
  /* 背景画像 */
  background-image: url(img/btn_contact.png);
  background-repeat: no-repeat;
  /* リンク文字を非表示 */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

①<text-indent: 100%>文字を要素の幅100%分のインデントをとる

要素100%のインデントが取られたので、１文字目が要素の外側から開始される

②<white-space: nowrap;>改行しないようにする

要素の中に文字が改行されてこなくなった

③<overflow: hidden;>はみ出たところを非表示にする

要素のボックスからはみ出てた部分が隠れて見えなくなった

text-indent: -9999px;
でも消せる

◆ホバー時のデザイン

背景画像の表示開始位置を縦（y軸）方向に-120pxにする
（1枚の画像に通常ボタンとオンマウス画像が含まれているので、背景画像開始位置を調整して画像を切り替える）

.btnContact:hover {
  background-color: #ffeb3b;
  background-position-y: -120px;
}

●CSSスプライトを使ったアイコン表示

CSSスプライトとは？
アイコンやボタンなど、小さい画像がたくさんあると１つ１つ読み込むための表示速度が遅くなることがある。小さな画像を１枚の画像にまとめてしまい必要な部分だけ表示される手法

class名「icon」を付与した要素にアイコン画像を表示させる

HTML
<ul>
  <li>
    <a class="icon -contact" href="contact.html">お問い合わせはこちら</a>
  </li>
  <li>
    <a class="icon -map" href="map.html">地図はこちら</a>
  </li>
</ul>

元の状態

/* アイコン共通デザイン */
.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-image: url(img/icon.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

基本のボタンデザインが完成
（1枚画像の左上が表示されている）

背景画像の表示位置を変えることで表示する画像を変えたように表示ができる

.icon.-contact {
  background-position: 0 0;
}
.icon.-map {
  background-position: -80px 0;
}

.icon.-contact:hover {
  background-position: 0 -80px;
}

.icon.-map:hover {
  background-position: -80px -80px;
}

「-contact:hover」に左下の画像を表示

「-map」は右上の画像を表示

応用：右上の画像サイズを変えて表示する

.icon.-contact {
  background-position: 0 0;
}
.icon.-map {
  background-position: -80px 0;
  width: 40px;
  height: 40px;
  background-size: 80px auto;
  background-position: -40px 0;
}

属性セレクタ

（使用頻度は高くないけど知っていると便利）

■属性名が一致する要素

別タブ表示している外部リンクへスタイルを定義する場合に便利

セレクタ[属性名] {
  プロパティ名: 値;
}

HTML
<a href="https://jobtech.jp/" target="_blank">外部サイトへのリンク</a>

a[target] {
  color: #e91e63;
}

■属性名と値が一致する要素

「お問い合わせ」へのリンクなど特定リンクへのスタイル定義に便利

セレクタ[属性名="値"] {
  プロパティ名: 値;
}

HTML
<a href="contact.html">お問い合わせ</a>

a[href="contact.html"] {
  color: #ff9800;
}

■属性名と値の前方が一致する要素

「#」で始まるページ内リンクへのスタイル定義に便利

セレクタ[属性名^="値"] {
  プロパティ名: 値;
}

[属性名^=”値”]
「=」の前に「^（ハット記号）」を記述

HTML
<a href="#top">ページ内リンク</a>

a[href^="#"] {
  color: #4caf50;
}

■属性名と値の後方が一致する要素

ファイル拡張子「.pdf」等、特定ファイルリンクのスタイル定義に便利

セレクタ[属性名$="値"] {
  プロパティ名: 値;
}

[属性名$=”値”]
「=」の前に「$」を記述

HTML
<a href="sample.pdf">PDFファイルへのリンク</a>

a[href$=".pdf"] {
  color: #795548;
}

疑似要素：コンテンツを追加

疑似要素はCSSを使ってHTMLにコンテンツ（疑似要素）を追加する

対象要素内の先頭・末尾にコンテンツを追加

コンテンツを追加する場所をセレクタで指定
「セレクタ」と「::before」「::after」の間には「半角スペース」を入れない

※疑似要素を追加する内容を指定するcontentプロパティを必ず記述する

■対象要素内の先頭にコンテンツ追加

セレクタ::before {
  content: "追加する内容";
  プロパティ名: 値;
}

■対象要素内の末尾にコンテンツ追加

セレクタ::after {
  content: "追加する内容";
  プロパティ名: 値;
}

HTML
<h2>グループ1</h2>
  <div class="group1">
    <p class="test">サンプルテキスト</p>
  </div>

.test::before {
  content: "★";
  color: #e91e63;
}

.test::after {
  content: "！";
  color: blue;
}

タイトルに英字説明を追加

HTMLに変更を加えずに英字説明を追加できる
追加したコンテンツを改行したい時はdisplayプロパティに「block」を指定する

HTML
<h2>グループ2</h2>
  <div class="group2">
    <h1 class="title -type1">サンプルタイトル</h1>
  </div>

/* 見出し */
.title {
  background-color: #fce4ec;
  border-radius: 10px;
  font-size: 20px;
  padding: .5em 1em;
  display: inline-block;
  text-align: center;
}

.title.-type1::after {
  content: "sample title";
  color: #e91e63;
  font-size: 80%;
  /* 追加したコンテンツを「ブロック表示」にして改行させる */
  display: block;
}

「sample title」が疑似要素「::after」で追加されたコンテンツ
これを<display: block;>でブロック要素にすることで改行される

■特定ファイルリンクにファイルの種類名を追加

拡張子でファイルの種類を特定する

HTML
<h2>グループ3</h2>
  <div class="group3">
    <a href="sample.pdf">PDFリンク</a>
  </div>
  <div class="group3">
    <a href="sample.html">HTMLリンク</a>
  </div>
  <div class="group3">
    <a href="sample.zip">ZIPリンク</a>
  </div>

/* リンクデザイン */
a {
  text-decoration: none;
}
a:hover {
  opacity: .7;
}
a[href$=".pdf"]::after {
  content: "pdf";
  background-color: #e91e63;
  font-size: 65%;
  padding: 0 .4em;
  vertical-align: top;
  margin-left: .4em;
  color: #fff;
}