CSSの状態疑似クラスでリンクとボタンを使用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
Web開発の重要な部分は、ユーザーが要素を操作したときにフィードバックを提供することです。 この相互作用は、 state を変更することで実現されます。これは、ユーザーがページ上の特定の要素をどのように使用しているか、または使用したかを示します。 CSSでは、 pseudo-class と呼ばれるセレクターに特別なバリエーションがあり、状態の変更によってスタイルの変更を開始できます。
このチュートリアルでは、:hover、:active、および:focusユーザーアクションと、:visitedロケーション疑似クラスを使用します。 チュートリアルでは、インタラクティブ要素として<a>と<button>を使用します。 これらの要素は両方とも同様のインタラクティブな状態を持ち、機能的にはユーザーと同じです。 開発の観点から、<a>要素は特にURLとの対話用であり、<button>要素はフォームまたはJavaScript関数をトリガーするために使用されます。 これらの4つの異なる状態での作業に加えて、transitionプロパティを使用して、これらの対話性の状態間のスタイルをアニメーション化します。
前提条件
- CSSのカスケードと特異性の機能とボックスモデルの理解。
- タイプセレクター、コンビネーターセレクター、およびセレクターグループに関する知識。
- テキストレイアウトおよびカラープロパティに精通していること。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。 styles.cssという空のCSSファイルとindex.htmlという空のHTMLファイルは、どちらもローカルマシンの同じディレクトリに保存されています。
初期HTMLとCSSの設定
リンクとボタンの操作を開始するには、まず、チュートリアルの基盤として必要なHTMLとCSSを設定します。 このセクションでは、レイアウトを処理して視覚的な美学を開始するために必要なすべてのHTMLといくつかの初期CSSスタイルを書き出します。
まず、テキストエディタでindex.htmlを開きます。 次に、次の強調表示されたHTMLをファイルに追加します。
index.html
<!doctype html> <html> <head> </head> <body> </body> </html>
次に、<head>タグに移動し、<meta>タグを追加して、HTMLファイルの文字セットを定義します。 次に、ページのタイトルを設定し、モバイルデバイスがページをレンダリングする方法を定義する<meta>タグを追加し、最後に<link>タグを含むCSSファイルをロードします。 これらの追加は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
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ファイルを開きます。 ページのコンテンツは、白い背景に黒いセリフフォントで表示されます。 <button>要素のスタイルは、ブラウザとオペレーティングシステムによって異なりますが、ページは次の画像のようになります。
次に、index.htmlファイルと同じディレクトリにstyles.cssというファイルを作成します。 コードブロック内の次のスタイルは、チュートリアルの残りの部分でスタイリングする<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つの部分にスタイルを追加します。 1つ目はbodyセレクターで、濃い灰色の背景を適用してから、デフォルトのフォントプロパティを定義します。 2番目のセレクターは、デモコンテンツのプライマリコンテナーである<section>要素に焦点を当て、指定された量までしか成長しないように、大きな丸い角と最大幅を持つ白いブロックを作成します。 最後に、header要素セレクターはテキストの配置を右に設定し、ウィンドウを閉じるボタンが<section>コンテナーの右上隅に配置されるようにします。
CSS要素セレクターの使用方法について詳しく知りたい場合は、CSSでスタイル設定するHTML要素を選択する方法を確認してください。
変更内容をstyles.cssファイルに保存し、ブラウザにindex.htmlファイルをリロードします。 次の画像に示すように、ページスタイルはブラウザのデフォルトからカスタマイズされたスタイルに変換されます。
HTMLを設定し、ページのコンテンツの基本スタイルをロードしました。 次に、カスタムのデフォルトリンクスタイルを作成し、そのデフォルトスタイルをbutton要素に適用する方法を提供します。
テキストリンクのスタイルの作成
このセクションでは、新しい色を設定して、カスタムのデフォルトのリンクスタイルを作成します。 次に、ボタンをデフォルトのリンクのように見せるために、デフォルトのボタンスタイルを削除します。 aとbuttonには明確な目的がありますが、Webサイトユーザーは同じように両方を操作します。 場合によっては、ユーザーにインタラクションを説明したり、デザインの美学に一致させたりするために、これら2つの要素を同じように表示する必要があります。
このセクションの最初の部分では、汎用<a>要素と.linkのクラスで使用されるデフォルトのリンクスタイルを設定します。これにより、汎用リンクスタイルをに適用できます。 <button>要素。 a要素セレクターとcolorプロパティおよび#25aの値を持つ.linkクラスセレクターを含むグループセレクターを作成することから始めます。
styles.css
...
a,
.link {
color: #25a;
}
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを開きます。 ページの<a>要素は、ブラウザのデフォルトのリンクの青よりも濃い青になりました。 また、class="link"を含む<button>要素のボタンには、同じ青色のテキストがあります。 ブラウザの変更の外観は、次の画像に示されています。
次に、buttonのデフォルトの外観の削除を開始します。 デフォルトでは、ブラウザは<button>要素のルックアンドフィールに多くのカスタマイズを追加して、インタラクティブ要素として区別できるようにします。 ブラウザがこれらの要素に追加する余分なスタイルを削除するには、テキストエディタでstyles.cssに戻り、button要素セレクタを作成し、次のコードブロックに示すように2つの同様のプロパティを追加します。
styles.css
...
a,
.link {
color: #25a;
}
button {
-webkit-appearance: none;
appearance: none;
}
最初のプロパティは-webkit-appearance: none;で、これはベンダープレフィックスプロパティとして知られています。 プロパティの-webkit-の位置は、SafariやChromeなどのWebKitブラウザーエンジンの派生物で構築されたブラウザーによってのみ読み取られます。 これらのブラウザの一部のバージョンは、それ自体でappearanceプロパティをサポートしておらず、機能するには-webkit-プレフィックスが必要です。
ベンダープレフィックスの使用は減少傾向にありますが、それでも発生します。 プレフィックス付きとプレフィックスなしの両方のバリアントをサポートするブラウザでプロパティが上書きされないように、プレフィックスなしのプロパティの前にベンダープレフィックス付きのプロパティを配置することが重要です。
変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新します。 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に保存し、Webブラウザーでindex.htmlを更新します。 両方のボタンがデフォルトのスタイルを失い、ウィンドウを閉じるボタンのスタイルがリンクに近づきました。 はい、お願いしますボタンのスタイルについては、次のセクションで説明します。 次の画像は、これがブラウザにどのように表示されるかを示しています。
ウィンドウを閉じるボタンをテキストリンクのように見せるために、テキストエディタでstyles.cssを開きます。 a, .linkグループセレクターの下に、.linkクラスのみの新しいクラスセレクターを追加します。 これに、underlineの値を持つtext-decorationプロパティを追加します。 次に、cursorというプロパティを追加します。このプロパティは、その要素上でマウスカーソルがどのように表示されるかを定義し、値をpointerに設定します。 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つのボタンのサイズには顕著な違いがあります。 いいえ、ありがとうございますボタンは<button>の代わりに<a>要素を使用しているため、[に追加する必要のある追加のプロパティがいくつかあります。 X165X]セレクターは、これら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疑似クラスをリンクとボタンに適用する
次に、: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プロパティが到達できる範囲の外側で、テキストの端に金色が追加されました。
outlineプロパティは、幅、スタイル、および色を受け入れるため、border省略形プロパティと同様に機能します。 ただし、borderプロパティとは異なり、outlineは常に要素全体を囲み、特定の側に設定することはできません。 また、borderとは異なり、outlineはボックスモデルに影響を与えません。 形状は視覚的にのみ適用され、コンテンツの流れは変わりません。
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 ブラウザがウィンドウを閉じるにフォーカスを移し、このチュートリアルの要素が金色の背景で強調表示されるまで、TABキーを押し始めます。 次の画像は、このチュートリアルリンクがフォーカスされている場合のブラウザでの表示を示しています。
次に、同様のカスタムフォーカススタイルを.buttonクラス要素に適用するには、.button:focusクラスと疑似クラスセレクターを作成することから始めます。 .button要素はすでにborderを使用しているため、これを使用してフォーカスを示します。したがって、プロパティの値を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疑似クラスを使用して、href属性を持つ<a>要素がそのリンクにアクセスしたことを示すインジケーターを提供します。
:visited疑似クラスの適用
:visited疑似クラスは、このチュートリアルで説明した以前の疑似クラスとは異なります。 以前の疑似クラスがユーザーと要素のアクティブな対話を含む場合、:visited疑似クラスは、要素が以前に対話されたことを示します。 具体的には、:visited疑似クラスは、href属性を持つ<a>がブラウザの履歴に存在することを示します。つまり、これらのリンクにアクセスしたことを意味します。
テキストリンクにカスタマイズされた:visitedインジケーターを作成するには、テキストエディターでstyles.cssファイルを開きます。 a:active, .link:activeグループセレクターの下に、a:visited, .link:vistedグループセレクターをターゲットとする新しいグループセレクターを追加します。 デフォルトの:visitedリンクスタイルは、通常、紫色です。 デモの目的上、:visitedの色は濃い緑色になります。
次の強調表示されたコードに示すように、値が#080のcolorプロパティを追加します。
styles.css
...
a:active,
.link:active {
...
}
a:visited,
.link:visited {
color: #080;
}
...
この変更をstyles.cssファイルに保存し、Webブラウザでindex.htmlを開きます。 まだの場合は、このチュートリアルといいえ、ありがとうございます<a>要素のリンクをクリックしてください。 次の画像に示すように、これらのリンクは両方とも濃い緑色のテキスト色になります。
これで、ボタンの緑色のテキストがいいえ、ありがとうボタンの目的の邪魔になります。 さらに、訪問したリンクが:hoverまたは:active状態と再度対話されると、それぞれの状態に定義された色の代わりに濃い緑色が残ります。
これらのシナリオに対処するには、テキストエディタでstyles.cssファイルに戻ります。 まず、a:visited:hover, .link:visited:hoverを追加して、アクティブな:hover状態を持つ:visited要素のシナリオを追加したa:hover, .link: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ファイルに保存し、Webブラウザでindex.htmlをリロードします。 テキストのデフォルトの:visitedリンクが目的の濃い緑色で表示されるようになりましたが、ボタンスタイルのリンクはボタンの外観を保持しています。 次の画像は、これがブラウザにどのように表示されるかを示しています。
:visited疑似クラスを使用して、ブラウザの履歴にリンクが存在する場合に固有のスタイルを作成し、アクセスしたユーザーリンクを示しました。 このセクションでは、疑似クラスの作業を終了し、それらを使用して特定の状態の特定のスタイルを定義します。 このチュートリアルの最後のセクションでは、transitionプロパティを使用して、これらの異なる疑似クラス状態間でシームレスなアニメーションを作成します。
transitionを使用して状態間をアニメーション化する
要素の状態を操作する場合、状態間のスタイルのシフトが突然発生する可能性があります。 transitionプロパティは、この突然の変化を回避するために、ある状態から次の状態へとスタイルをブレンドおよびアニメーション化するために使用されます。 transitionプロパティは、transition-property、transition-duration、およびtransition-timing-functionプロパティを組み合わせた省略形のプロパティです。
transition-propertyは、指定された2つの値の間で計算された値を持つ任意のプロパティにすることができます。 色名を使用している場合でも、色は数値であるため、これに含まれています。 transition-durationプロパティは、遷移が発生する期間の数値です。 期間の値は、多くの場合、s単位では秒単位で、ms単位ではミリ秒単位で表されます。 最後に、transition-timing-functionは、アニメーションが時間の経過とともにどのように再生されるかを制御し、アニメーションを強化するために微妙な変更を加えることができます。
transitionプロパティの操作を開始するには、styles.cssファイルを開き、a, .linkグループセレクターと.button, .button:visitedグループセレクターに移動します。 transitionプロパティをall 0.5s linearの値で追加します。 allは、transition-propertyの値であり、状態間で変化するすべてのプロパティをアニメーション化するようにブラウザーに指示します。 0.5sはtransition-durationの値であり、0.5秒に相当します。 これは、500msとして表すこともできます。 最後に、linearの位置はtransition-timing-functionの値であり、期間中、ある値から次の値に一定の増分で移動するようにブラウザーに指示します。
styles.css
...
a,
.link {
...
transition: all 0.5s linear;
}
...
.button,
.button:visited {
...
transition: all 0.5s linear;
}
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 ページが読み込まれたら、リンク要素とボタン要素の操作を開始し、さまざまな状態間でスタイルがどのようにアニメーション化されるかに注意してください。 次のアニメーションは、デフォルト状態から: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ファイルに保存してから、Webブラウザーのindex.htmlページを更新してください。 状態間の遷移アニメーションは引き続きアニメーション化されますが、はるかに高速になり、感じも速くなります。 transitionプロパティでは、値を試して、デザインに合ったアニメーションを見つけることが重要です。 次のアニメーションは、ボタンがデフォルト状態から:hover状態、:active状態にすばやく移行することを示しています。
これで、状態間のアニメーションが作成されました。 transitionプロパティは、状態間の変更をより魅力的で楽しいものにするのに役立ちます。
結論
インタラクティブな要素の状態の間に明確な違いを提供することは、Webサイトにとって貴重な資産です。 状態は、インタラクションに視覚的なフィードバックを提供することにより、Webサイトの訪問者に重要な概念を伝えるのに役立ちます。
このチュートリアルでは、プライマリ状態の疑似クラスを使用して、さまざまなインタラクティブ要素の複数のスタイルを作成することに成功しました。 また、<button>要素と<a>要素の背後にはさまざまな目的があることも学びましたが、視覚的には同様の概念を伝えることができます。 最後に、transitionプロパティを使用して、これらの状態間でスムーズなアニメーションを提供し、より魅力的なインタラクティブ要素を作成しました。 Webサイトを作成するときは、これら4つの状態を念頭に置いて、訪問者にこの重要なインタラクティブなフィードバックが提供されるようにすることが重要です。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
