ツイートするシェアするピンするブクマするあとで読むLINEで送る通常CSSはWebサイトを制作する際、HTMLで構築されたWebサイトの各要素をどの様に装飾していくかを指定していくのに使用します。Webサイトがディスプレイに表示された時の各要素の大きさやレイアウトなどどのようなスタイルで表示・出力するかを指定できます。CSSについての基本はこちらCSSの疑似クラスとは何?CSSの疑似クラスはセレクタに付加して使用します。セレクタとはCSSのスタイルを指定するための目印です。セレクタに使用するのは通常IDやclassを使用します。下記例のように<a>タグにclass="btn-link"やID="btn-link"のように指定します。ここで気をつけてほしいのは、同名classはページ内で複数回使用できますが、同名IDを重複させない方が良いです。複数リンクを設置する場合はclassを使用した方が良いでしょう。CSSの「:hover」疑似クラスとは?「:hover」疑似クラスは<a>タグに使用する代表的な擬似クラスです。この「:hover」擬似クラスを指定された要素は、カーソルを重ねると実行されるクラスになります。見かけるのがWebサイトを閲覧している時にリンクが貼られ、他と違う色に装飾されたテキスト(青系の色が多い)にマウスポインターを合わせると、アンダーラインが表示されたり、テキストの色が変化したりするタイプのものです。その他<a>タグに使用できる擬似クラス「:hover」擬似クラスが代表的な擬似クラスですが、他にも<a>タグに使用できる擬似クラスはあります。:link(リンクされた要素のデフォルト状態):visited(過去にクリックされたリンク要素の状態):hover(マウスポインターがリンク要素に重なった状態):active(リンク要素をクリックして放すまでの状態)これらの要素を使用する場合はCSSに記載する順番にもご注意ください。上から1:link→2:visited→3:hover→4:activeの順番で記載しないと自分が思ったような動作ができない場合があります。疑似クラスの詳細につきましてはスタイルシートリファレンスを御覧くださいCSS「:hover」で動きのあるテキストリンクを装飾するここまで「:hover」などの疑似クラスを説明してきましたので、実際にテキストリンクに「:hover」を指定しテキストリンクに動きを付けてみましょう。リンクタグは下記のものを使用します。<a>タグにクラスセレクタ”btn-link”が指定されています。このクラスセレクタ”btn-link”にCSSプロパティを指定していきます。}の中にプロパティを記入していきます。上記の指定でクラスセレクタ”btn-link”が指定されているテキストリンクは青色になります。HTMLのみでリンクを指定した時に表示される下線を表示させないようにします。CSS「:hover」擬似クラスで動きをつける上記のCSSではまだ、リンク時の装飾をしたのみで、マウスポインターが合わさっても変化は起こりません。簡単な「:hover」を追加してみましょう。先ほど指定した.btn-linkの後にハイライト部分のように.btn-link:hoverを追加します。textこれでカーソルが合わさった時にテキストカラーがオレンジ色になり、下線が表示されるかと思います。「:hover」時にテキストカラーをオレンジにしたのは変化をわかりやすくする為であり、実際に実装する場合はもっとさりげない変化がおしゃれかと思います。ボタンタイプのCSS「:hover」疑似クラスを作る上記はテキストリンクを装飾しましたが、CSSの装飾にしかたによってはボタンのようなリンクも作成できます。リンクタグは下記のものを使用します。<a>タグにクラスセレクタ”btn-link-box”が指定されています。このクラスセレクタ”btn-link-box”にCSSプロパティを指定していきます。HTMLの記述例CSSと「:hover」擬似クラスの記述例ボタンタイプの「:hover」動作例は以下のものになります。BoxCSS「:hover」疑似クラスのまとめ今回の例は余計な部分をできるだけ省いて「:hover」の例を作成しました。CSSを理解し思いのままにデザインできるようになれば、さらにおもしろい表現が可能になります。「:hover」はWebサイトを作成した時に必ずといっていいほど使用する疑似クラスなので、ここでちょっと手の混んだ表現をしておくと、ユーザーに少し「おっ!」と思わせるWebサイトになりますね。Yamamoto広島県広島市育ち、現在岡山でWeb制作の仕事をしています。「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。他にもこんなおすすめ記事がありますPREV「ナースときどき女子」のサイトで当サイトの記事を紹介していただきました。NEXTCSSのbackgroundで背景レイアウト指定を初心者向けにまとめました!コメントはこちらコメントをキャンセルコメント名前メールアドレス次回コメントで使用するためブラウザに自分の名前、メールアドレスを保存する。JunJunWeb.Net。