序章

Web開発の重要な部分は、ユーザーが要素を操作したときにフィードバックを提供することです。 この相互作用は、 state を変更することで実現されます。これは、ユーザーがページ上の特定の要素をどのように使用しているか、または使用したかを示します。 CSSでは、 pseudo-class と呼ばれるセレクターに特別なバリエーションがあり、状態の変更によってスタイルの変更を開始できます。

このチュートリアルでは、 :hover, :active、 と :focus ユーザーアクションと :visited 場所の疑似クラス。 使用します <a> と <button> チュートリアルのインタラクティブな要素として。 これらの要素は両方とも同様のインタラクティブな状態を持ち、機能的にはユーザーと同じです。 開発の観点から、 <a> 要素は特にURLと対話するためのものですが、 <button> 要素は、フォームまたはJavaScript関数をトリガーするために使用されます。 これらの4つの異なる状態での作業に加えて、 transition これらの対話性の状態間のスタイルをアニメーション化するプロパティ。

前提条件

初期HTMLとCSSの設定

リンクとボタンの操作を開始するには、まず、チュートリアルの基盤として必要なHTMLとCSSを設定します。 このセクションでは、レイアウトを処理して視覚的な美学を開始するために必要なすべてのHTMLといくつかの初期CSSスタイルを書き出します。

開始するには、 index.html テキストエディタで。 次に、次の強調表示されたHTMLをファイルに追加します。

index.html
<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

次に、 <head> タグを付けて追加します <meta> HTMLファイルの文字セットを定義するタグ。 次に、ページのタイトルを設定し、 <meta> モバイルデバイスがページをレンダリングする方法を定義するタグ、そして最後にCSSファイルをロードする <link> 鬼ごっこ。 これらの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

追加した後 <head> コンテンツ、次の移動 <body> 情報ブロックを作成するためにコンテンツが追加される要素 <a> と <button> インタラクティブな要素としてのタグ。 このコードブロックから強調表示されたセクションを index.html テキストエディタのファイル：

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <section>
      <header>
        <button class="link" type="button">
          Close Window
        </button>
      </header>
      <div>
        <p>
          This is a demo paragraph for some demo content for a tutorial. By reading this text you are now informed that this is text for the demo in <a href="https://do.co/tutorials">this tutorial</a>. This means you can agree to use this content for the demo or not. If you wish to continue with this tutorial demo content, please select the appropriately styled interactive element below.
        </p>
        <div>
          <button class="button" type="button">
            Yes, Please
          </button>
          <a class="button" href="#">
            No, Thank you
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

変更をに保存します index.html Webブラウザを開いて index.html そこにファイルします。 ページのコンテンツは、白い背景に黒いセリフフォントで表示されます。 The <button> 要素のスタイルはブラウザとオペレーティングシステムによって異なりますが、ページは次の画像のようになります。

次に、というファイルを作成します styles.css と同じディレクトリにあります index.html ファイル。 コードブロック内の次のスタイルは、を保持するコンテナの基本スタイルを設定します <button> と <a> チュートリアルの残りの部分でスタイリングする要素。 次のコードをに追加します styles.css ファイル：

styles.css
body {
  background-color: #454545;
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
}

section {
  margin: 2rem auto;
  width: 90%;
  max-width: 50rem;
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 2rem;
  border: 0.25rem solid #777;
  background-color: white;
}

header {
  text-align: right;
}

このコードブロックのCSSは、デモコンテンツ領域の3つの部分にスタイルを追加します。 最初は body セレクター。濃い灰色の背景を適用してから、デフォルトのフォントプロパティを定義します。 2番目のセレクターは <section> elementは、デモコンテンツの主要なコンテナであり、大きな丸い角と最大幅を持つ白いブロックを作成するため、指定された量までしか成長しません。 最後に、 header 要素セレクターはテキストの配置を右に設定するため、ウィンドウを閉じるボタンは <section> 容器。

CSS要素セレクターの使用方法について詳しく知りたい場合は、CSSでスタイル設定するHTML要素を選択する方法を確認してください。

に変更を保存します styles.css ファイルを作成してリロードします index.html ブラウザのファイル。 次の画像に示すように、ページスタイルはブラウザのデフォルトからカスタマイズされたスタイルに変換されます。

HTMLを設定し、ページのコンテンツの基本スタイルをロードしました。 次に、カスタムのデフォルトリンクスタイルを作成し、そのデフォルトスタイルを適用する方法を提供します button 要素。

テキストリンクのスタイルの作成

このセクションでは、新しい色を設定して、カスタムのデフォルトのリンクスタイルを作成します。 次に、ボタンをデフォルトのリンクのように見せるために、デフォルトのボタンスタイルを削除します。 a と button 明確な目的がありますが、Webサイトのユーザーは同じように両方を操作します。 場合によっては、ユーザーにインタラクションを説明したり、デザインの美学に一致させたりするために、これら2つの要素を同じように表示する必要があります。

このセクションの最初の部分では、ジェネリックで使用されるデフォルトのリンクスタイルを設定します <a> 要素とクラス .link、一般的なリンクスタイルをに適用できます <button> エレメント。 を含むグループセレクターを作成することから始めます a 要素セレクターと .link クラスセレクター color プロパティと値 #25a:

styles.css
...
a,
.link {
  color: #25a;
}

変更をに保存します styles.css 開いて index.html ブラウザで。 The <a> ページ上の要素は、ブラウザのデフォルトのリンクの青よりも濃い青になりました。 また、 <button> 要素と class="link" ボタンに同じ青色のテキストがあります。 ブラウザの変更の外観は、次の画像に示されています。

次に、デフォルトの外観の削除を開始します button. デフォルトでは、ブラウザはルックアンドフィールに多くのカスタマイズを追加します <button> インタラクティブな要素として区別できることを確認するための要素。 ブラウザがこれらの要素に追加する余分なスタイルを削除するには、に戻ります。 styles.css テキストエディタで、 button 要素セレクターを作成し、次のコードブロックに示すように2つの同様のプロパティを追加します。

styles.css
...
a,
.link {
  color: #25a;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

最初のプロパティは -webkit-appearance: none;、ベンダープレフィックスプロパティとして知られています。 The -webkit- プロパティの位置は、SafariやChromeなど、WebKitブラウザーエンジンの派生物で構築されたブラウザーによってのみ読み取られます。 これらのブラウザの一部のバージョンは、 appearance 自分で財産を所有し、 -webkit- 動作するためのプレフィックス。

ベンダープレフィックスの使用は減少傾向にありますが、それでも発生します。 プレフィックス付きとプレフィックスなしの両方のバリアントをサポートするブラウザでプロパティが上書きされないように、プレフィックスなしのプロパティの前にベンダープレフィックス付きのプロパティを配置することが重要です。

変更をに保存します styles.css 更新します index.html ブラウザで。 The button 要素はすべてのスタイルを失うことはありません。 代わりに、Web仕様で期待されるデフォルトのスタイルに簡略化されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

ボタンの残りのデフォルトスタイルを削除するには、さらにいくつかのプロパティを追加する必要があります。 あなたに戻る styles.css テキストエディタでファイルを作成し、 button セレクタ。 次に、プロパティを追加して削除します background-color, border, margin、 と padding. 次に、のプロパティを削除します button エレメント、 color, font、 と text-align、 に inherit ページの値。

次のコードブロックは、これを設定する方法を示しています。

styles.css
...
button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
}

これらの変更をに保存します styles.css 更新します index.html Webブラウザで。 両方のボタンがデフォルトのスタイルを失い、ウィンドウを閉じるボタンのスタイルがリンクに近づきました。 はい、お願いしますボタンのスタイルについては、次のセクションで説明します。 次の画像は、これがブラウザにどのように表示されるかを示しています。

ウィンドウを閉じるボタンをテキストリンクのように見せるために、開く styles.css テキストエディタで。 下 a, .link グループセレクター、専用の新しいクラスセレクターを追加します .link クラス。 それに追加します text-decoration の値を持つプロパティ underline. 次に、というプロパティを追加します cursor、これは、その要素上にあるときにマウスカーソルがどのように表示されるかを定義し、値を次のように設定します。 pointer. The pointer 値スタイルカーソルは、デフォルトでリンク上に表示されるハンドスタイルです。

styles.css
...
a,
.link {
...
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
...

これらの変更をあなたに保存します styles.css ファイルを作成してからブラウザに戻り、更新します index.html. ウィンドウを閉じるボタンが表示され、一般的なものと同じように動作します <a> 要素のスタイル。 次のアニメーションは、ウィンドウを閉じるボタンの上に移動したときにカーソルがどのように変化するかを示しています。

このセクションでは、カスタムのデフォルトスタイルを作成しました <a> 要素と作成された .link リンクスタイリングをに適用するクラス <button> エレメント。 次のセクションでは、両方に適用できるカスタムのボタンのようなスタイルを作成します <button> と <a> 要素。

ボタンのスタイルの作成

次に、クラスセレクターを使用してカスタムのボタンのようなスタイルを作成し、スタイルを次のいずれかで使用できるようにします。 <button> または <a> エレメント。 ようではない <a> テキストコンテンツ全体で使用される要素、 <button> 要素には、より意図的な目的があります。 これにより、ジェネリックスタイルを作成する必要が少なくなります。 <button> 要素、代わりに常に追加することができます class 属性。

開くことから始めます styles.css テキストエディタで。 と呼ばれる新しいクラスセレクターを作成します .button. ここでのスタイルは、前の手順でリセットされたプロパティの多くを再定義します。 button 要素セレクター。 テキストに色を追加します color プロパティ、図形を background-color プロパティ、次にいくつかの定義を提供します border 財産。 その後、ボタンに丸みを帯びた角を付けます。 border-radius 財産。 最後に、 padding テキストの上下にスペースを入れるための省略形。次に、左右でその量を2倍にします。

次のコードブロックには、これらの値が含まれています。

styles.css
...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
}

変更をに保存します styles.css ブラウザに戻って更新します index.html ファイル。 はい、お願いしますといいえ、ありがとうございますボタンの外観はプロパティに合わせて変更されます。 テキストはデフォルトと同じ青です a 背景にはるかに明るい青、境界線に別の濃い青を使用したスタイル。 次の画像は、これがブラウザにどのように表示されるかを示しています。

2つのボタンのサイズには顕著な違いがあります。 いいえ、ありがとうございますボタンは <a> の代わりに要素 <button>、に追加する必要があるいくつかの追加のプロパティがあります .button これら2つの要素間のデフォルトを等しくするためのセレクター。

戻る styles.css テキストエディタで、 .button クラスセレクター。 開始するには、を追加します display: inline-block、のデフォルトスタイルです button 要素。 次に、 text-decoration: none から下線を削除するには <a> エレメント。 あなたがしたように .link セレクター、追加 cursor: pointer マウスカーソルが要素の上にあるときにポインティングハンドアイコンを取得するには、セレクターに移動します。 最後に、 vertical-align: bottom ルール。 この最後のプロパティはすべてのブラウザに必要なわけではありませんが、要素の下部が行のどこに配置されるかを定義します。

styles.css
...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  vertical-align: bottom;
}

これらの追加をに保存します styles.css その後、更新します index.html ブラウザで。 2つのボタンは、外観が同等になり、デフォルトの属性を相互に借用しているため、同様の相互作用があると認識されます。

両方のスタイルを設定するカスタムクラスセレクターを作成しました <button> と <a> このセクションのボタンのようなスタイルの要素。 次に、マウスカーソルがインタラクティブ要素の上にあるときに条件付きスタイルを作成します。

今、あなたは使用します :hover カーソルが要素上にあるときに表示される代替スタイルを作成するための疑似クラス。 疑似クラスは、コロン（:）およびセレクターに追加された条件の名前。 たとえば、 a ホバー疑似クラスを持つ要素セレクターは次のようになります a:hover.

開ける styles.css テキストエディタで。 のグループセレクターの下 a, .link、各セレクターにホバー状態の新しいセレクターを追加します。 :hover 疑似クラス： a:hover, .link:hover. 次に、カーソルを要素の上に置いたときに目立つ変更を加えるには、 color の値を持つプロパティ #b1b、これは濃いピンク色です：

styles.css
...
a,
.link {
  ...
}

a:hover,
.link:hover {
  color: #b1b;
}
...

変更を保存します styles.css ファイルと更新 index.html ブラウザで。 このチュートリアルリンクまたはウィンドウを閉じるボタンのいずれかにカーソルを合わせると、ホバー時に色の変更が開始されます。 次の画像は、カーソルがこのチュートリアルリンク上にあるときのホバー状態を示しています。

次に、ホバー状態をに追加するには .button 要素、に戻る styles.css テキストエディタで。 下 .button クラスセレクター、追加 .button:hover ホバー操作専用のスタイルを作成するためのセレクター。 次に、セレクター内に、カーソルがボタン上にあるときにボタンの外観を変更するカラープロパティを追加します。 を設定します color プロパティに white、次に作成します background-color と border-color 両方のプロパティがに設定されている #25a:

styles.css
...
.button {
  ...
}

.button:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}

これらの変更をあなたに保存します styles.css ファイルを作成し、ブラウザに戻って更新します index.html ファイル。 次に、マウスカーソルを取り、下部にある2つのボタンのいずれかにカーソルを合わせます。 スタイルは、濃い青のテキストと境界線のある水色の背景から、白いテキストのある濃い青の背景に変わります。 次の画像は、マウスカーソルをはい、ボタンの上に置いたときのホバースタイルを示しています。

あなたは :hover このセクションの疑似クラスは、要素の上にカーソルが置かれていることに基づいて、要素にスタイルの変更を作成します。 次のセクションでは、キーボードを使用してページをナビゲートする場合の条件に、これと同じ概念を適用します。

適用する :focus 疑似クラス

Webサイトの訪問者は、マウスやタッチスクリーンを使用する代わりに、キーボードを使用してページの要素をナビゲートおよび操作することがあります。 これは、ほとんどの場合、 TAB キー。ページ上のインタラクティブな要素を循環します。 デフォルトのスタイルは outline 要素にフォーカスがあることを視覚的に示すプロパティ。 このスタイルは、を使用してカスタマイズできます :focus この状況にプロパティ値を適用するための疑似クラス。

ページ上の要素のフォーカス状態での作業を開始するには、 styles.css テキストエディタでファイルします。 下の新しいセレクターから始めます a:hover, .link:hover フォーカス状態用の新しいグループセレクターを備えたグループセレクター： a:focus, .link:focus.

フォーカス状態をカスタマイズする上で最も重要なことは、デフォルト状態とは著しく異なることを確認することです。 ここでは、 :focus 疑似クラススタイルには、背景が金色の黒いテキストがあります。

styles.css
...
a:hover,
.link:hover {
  ...
}

a:focus,
.link:focus {
  color: black;
  outline: 2px solid gold;
  background-color: gold;
}
...

この場合、 color プロパティに black そしてその background-color プロパティに gold. あなたも使用しました outline プロパティ。テキストの端の周りに金色を追加しました。 background-color プロパティに到達できます。

The outline プロパティは、 border 幅、スタイル、および色を受け入れるため、省略形のプロパティ。 ただし、 border プロパティ、 outline 常に要素全体を一周し、特定の側に設定することはできません。 また、とは異なり border、 outline ボックスモデルには影響しません。 形状は視覚的にのみ適用され、コンテンツの流れは変わりません。

変更をに保存します styles.css 更新します index.html Webブラウザで。 を押し始めます TAB ブラウザがウィンドウを閉じるにフォーカスを移し、このチュートリアルの要素が金色の背景で強調表示されるまでキーを押します。 次の画像は、このチュートリアルリンクがフォーカスされている場合のブラウザでの表示を示しています。

次に、同様のカスタムフォーカススタイルをに適用するには .button クラス要素は、作成することから始めます .button:focus クラスおよび疑似クラスセレクター。 以来 .button 要素はすでに使用しています border、フォーカスを示すためにそれを使用するので、 outline プロパティを次の値に設定することによるデフォルト none. 前のリンクのように、 color プロパティはに設定されます black そしてその background-color プロパティはに設定されます gold. 最後に、 border-color の値を持つプロパティ black:

styles.css
...
.button:hover {
  ...
}

.button:focus {
  outline: none;
  color: black;
  background-color: gold;
  border-color: black;
}

追加したものは必ず保存してください styles.css 次に、ブラウザに戻って更新します index.html ファイル。 繰り返しますが、 TAB キーを押して、ページ上のキーボードフォーカス可能な要素を、 .button 要素。 これで、背景が金色になり、境界線が黒のテキストが黒くなります。 次の画像は、フォーカスされたときにはい、お願いしますボタンがブラウザにどのように表示されるかを示しています。

このセクションでは、 :focus 疑似クラス。Webサイトの訪問者がキーボードを使用してページをナビゲートしたときに表示されるカスタムスタイルを作成します。 次のセクションでは、 :active ユーザーがマウスクリックまたはキー押下を介して要素を操作していることを示す疑似クラス。

適用する :active 疑似クラス

使用する次の疑似クラスは :active インタラクティブ要素の状態。 アクティブ状態は、通常、マウスダウンまたはマウスクリックアクションを介して要素が操作される状態です。 これにより、訪問者に明確な状態を提供して、マウスのクリックとボタンの押下が成功したことを示すことができます。

での作業を開始するには :active 疑似クラス、オープン styles.css テキストエディタで。 のグループセレクターブロックに続く a:focus, .link:focus、グループセレクターで新しいセレクターブロックを追加します a:active, .link:active. 与える color の値 #808、より濃いピンクを作成します :hover 州。

一部のブラウザは、 :focus 疑似クラスと :active 疑似クラス。 これを防ぐには、を削除する必要があります outline と background-color プロパティをに設定して none と transparent、 それぞれ：

styles.css
...
a:focus,
.link:focus {
  ...
}

a:active,
.link:active {
  color: #808;
  outline: none;
  background-color: transparent;
}
...

追加を保存します :active あなたへの疑似クラス styles.css ファイル、次にリロード index.html Webブラウザで。 次のアニメーションは、 :active このチュートリアルリンク上でマウスをクリックすると、状態がピンクから濃いピンクに変わります。

次に、アクティブ状態をに適用するには .button、 戻る styles.css テキストエディタで。 追加する .button:active 疑似クラスセレクターとのダークバリアントであるスタイルを適用します :hover スタイル。 のために color プロパティ、値をライトグレーに設定します #ddd. 両方のために background-color と border-color プロパティの場合、値を濃い青に設定します。 #127. 次のコードブロックの強調表示されたセクションは、これがどのように記述されているかを示しています。

styles.css
...
.button:focus {
  ...
}

.button:active {
  color: #ddd;
  background-color: #127;
  border-color: #127;
}

これらの変更を必ずに保存してください styles.css、次にブラウザに戻って更新します index.html. コンテンツの下部にある2つのボタンのいずれかにマウスカーソルを合わせて、下にクリックします。 ボタンは、青いテキストと境界線のある水色の背景から、ホバーすると白いテキストのある完全な青いボタンに変わり、クリックすると明るい灰色のテキストのある濃い青のボタンに変わります。 次のアニメーションは、この変化が :hover に :active マウスボタンをクリックすると状態が表示されます。

を使用して、マウスボタンの押下イベントの視覚的なインジケータを作成しました :active そのイベントが発生したときにスタイルを変更するための疑似クラス。 次のセクションでは、 :visited の指標を提供する疑似クラス <a> の要素 href 属性がそのリンクにアクセスしました。

適用する :visited 疑似クラス

The :visited 疑似クラスは、このチュートリアルで説明した以前の疑似クラスとは異なります。 以前の疑似クラスがユーザーと要素のアクティブな相互作用を伴う場合、 :visited 疑似クラスは、要素が以前に操作されたことを示します。 具体的には、 :visited 疑似クラスはどちらかを示します <a> と href 属性はブラウザの履歴に存在します。つまり、これらのリンクにアクセスしたことを意味します。

カスタマイズされたものを作成するには :visited テキストリンクのインジケーター、あなたの styles.css テキストエディタでファイルします。 下 a:active, .link:active グループセレクター、ターゲットとする新しいグループセレクターを追加します a:visited, .link:visted グループセレクター。 デフォルト :visited リンクスタイルは通常紫色です。 デモの目的で、 :visited 色は濃い緑色になります。

追加する color の値を持つプロパティ #080、次の強調表示されたコードに示されているように：

styles.css
...
a:active,
.link:active {
  ...
}

a:visited,
.link:visited {
  color: #080;
}
...

この変更をに保存します styles.css ファイルを開いてから開く index.html Webブラウザで。 まだの場合は、このチュートリアルとをクリックしてください。いいえ、ありがとうございます <a> 要素リンク。 次の画像に示すように、これらのリンクは両方とも濃い緑色のテキスト色になります。

これで、ボタンの緑色のテキストがいいえ、ありがとうボタンの目的の邪魔になります。 さらに、訪問したリンクが再び相互作用するとき :hover また :active 状態では、それぞれの状態に対して定義された色の代わりに濃い緑色が残ります。

これらのシナリオに対処するには、 styles.css テキストエディタでファイルします。 まず、を追加します a:hover, .link:hover シナリオが追加されたグループセレクター :visited アクティブな要素 :hover 追加して状態 a:visited:hover, .link:visited:hover. 同様に、 a:active, .link:active セレクターブロック a:visited:active, .link:visited:active. 最後に、 .button 要素は、デフォルトの状態と同じスタイルになります。 そのため、 .button セレクターはのグループセレクターになる必要があります .button, .button:visited、したがって、訪問済みの状態はデフォルトの状態と同じように表示されます。

styles.css
...
a:hover,
.link:hover,
a:visited:hover,
.link:visited:hover {
  color: #b1b;
}
...
a:active,
.link:active,
a:visited:active,
.link:visited:active {
  color: #808;
}

a:visited,
.link:visited {
  color: #080;
}
...
.button,
.button:visited {
  ...
}

.button:hover,
.button:visited:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}
...

に変更を保存します styles.css ファイルとリロード index.html Webブラウザで。 デフォルトのテキスト :visited ボタンスタイルのリンクはボタンの外観を維持しながら、リンクは目的の濃い緑色で表示されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

あなたは :visited 疑似クラス。ブラウザの履歴にリンクが存在する場合に固有のスタイルを作成し、アクセスされたリンクをユーザーに示します。 このセクションでは、疑似クラスの作業を終了し、それらを使用して特定の状態の特定のスタイルを定義します。 このチュートリアルの最後のセクションでは、 transition これらの異なる疑似クラス状態間でシームレスなアニメーションを作成するためのプロパティ。

使用する transition 状態間をアニメーション化する

要素の状態を操作する場合、状態間のスタイルのシフトが突然発生する可能性があります。 The transition プロパティは、この突然の変化を回避するために、ある状態から次の状態にスタイルをブレンドしてアニメーション化するために使用されます。 The transition プロパティは、 transition-property, transition-duration、 と transition-timing-function プロパティ。

The transition-property 2つの指定された値の間で計算された値を持つ任意のプロパティにすることができます。 色名を使用している場合でも、色は数値であるため、これに含まれています。 The transition-duration プロパティは、遷移が発生する期間の数値です。 期間の値は、多くの場合、秒単位で表されます。 s 単位、またはミリ秒 ms 単位。 最後に、 transition-timing-function 時間の経過とともにアニメーションがどのように再生されるかを制御し、アニメーションを強化するために微妙な変更を加えることができます。

での作業を開始するには transition プロパティ、あなたの styles.css ファイルに移動し、 a, .link グループセレクターと .button, .button:visited グループセレクター。 追加する transition の値を持つプロパティ all 0.5s linear. The all の値です transition-property、これは、状態間で変化するすべてのプロパティをアニメーション化するようにブラウザに指示します。 The 0.5s それは transition-duration 値であり、0.5秒に相当します。 これは次のように表すこともできます 500ms. 最後に、 linear 位置は transition-timing-function value。これは、期間中、ある値から次の値に一定の増分で移動するようにブラウザに指示します。

styles.css
...
a,
.link {
  ...
  transition: all 0.5s linear;
}
...
.button,
.button:visited {
  ...
  transition: all 0.5s linear;
}

変更をに保存します styles.css そして開く index.html Webブラウザで。 ページが読み込まれたら、リンク要素とボタン要素の操作を開始し、さまざまな状態間でスタイルがどのようにアニメーション化されるかに注意してください。 次のアニメーションは、デフォルト状態からデフォルト状態に移行するボタンスタイルを示しています。 :hover 疑似クラス状態：

アニメーションをよりきびきびと自然に感じさせるには、 styles.css ファイルを作成して調整します transition プロパティ値。 のために a,.link グループセレクター、期間をから変更 0.5s に 250ms、これは以前の半分の期間です。 次に、 linear タイミング関数の値を ease-in-out. これにより、最初はゆっくり、途中でスピードアップし、最後までスローダウンするアニメーションが作成されます。 次に、 .button,.button:visited グループセレクター、期間をより速く変更します 180ms タイミング機能を同じに設定します ease-in-out リンクとしての値：

styles.css

...
a,
.link {
  ...
  transition: all 250ms ease-in-out;
}
...
.button,
.button:visited {
  ...
  transition: all 180ms ease-in-out;
}

これらの変更をあなたに保存します styles.css ファイルを更新してから、 index.html Webブラウザのページ。 状態間の遷移アニメーションは引き続きアニメーション化されますが、はるかに高速になり、感じも速くなります。 とともに transition プロパティでは、値をいじってデザインに合ったアニメーションを見つけることが重要です。 次のアニメーションは、ボタンがデフォルト状態から :hover に状態 :active 州。

これで、状態間のアニメーションが作成されました。 The transition プロパティは、州間の変更をより魅力的で楽しいものにするのに役立ちます。

結論

インタラクティブな要素の状態の間に明確な違いを提供することは、Webサイトにとって貴重な資産です。 状態は、インタラクションに視覚的なフィードバックを提供することにより、Webサイトの訪問者に重要な概念を伝えるのに役立ちます。

このチュートリアルでは、プライマリ状態の疑似クラスを使用して、さまざまなインタラクティブ要素の複数のスタイルを作成することに成功しました。 また、背後にはさまざまな目的があることも学びました <button> と <a> 要素ですが、視覚的には同様の概念を伝えることができます。 最後に、 transition これらの状態間でスムーズなアニメーションを提供して、より魅力的なインタラクティブ要素を作成するプロパティ。 Webサイトを作成するときは、これら4つの状態を念頭に置いて、訪問者にこの重要なインタラクティブなフィードバックが提供されるようにすることが重要です。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。