この記事ではCSSの書き方について、特に「:hover」擬似クラスについて解説をしていきます！
「:hover」を使えるようになると、今までは普通のリンクだったボタンにも動きをつけられるようになります。
「:hover」擬似クラスの使い方を知りたい。
CSSでボタンを作ってみたい。
といった方に向けてこの記事では、
- 擬似クラスとは
- 「:hover」とは
- 「:hover」を使ったボタンの作り方
について解説していきます。
CSSの勉強を始めたばかりの方も、ぜひご覧ください！
なお、休日やふと空いたすきま時間に収入が増やせるスキルを身につけたい人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。月5~10万円の収入獲得を見据え、スキルの習得から仕事の取り方・進め方まで一貫して学べます。
受講料が最大80%OFFになる「給付金コース」も提供中。未経験から副業で収入を増やしたい人は、ぜひ一度お試しください。
擬似クラスとは
ではまずは擬似クラスとは何かについて見ていきましょう。
そもそもCSSにはスタイルを適用するための目印になるセレクタが必要になります。そのセレクタにはクラスやIDを使うことが出来ます。
<a class="link" href="#">This is link</a> <a id="link" href="#">This is link</a>
このような、classやidで指定された部分がセレクタで、タグで囲まれた部分（今回は「This is link」）が要素と呼ばれる部分になります。
そこで、疑似クラスとは何かについて考えてみましょう。
擬似クラスはすでにいくつか用意されているクラスで、要素が特定の状態になっているときだけ実行されるクラスになります。
CSSの基本についてをまずは知りたいという方は、ぜひこちらの記事をご覧ください。
「:hover」とは
「:hover」も擬似クラスの一つになります。
この「:hover」では要素の上にマウスのポインタを要素の上に置いたときに実行されるクラスです。
サイトの中で、要素にマウスポインタを重ねる必要があるものといえば、リンクですよね。
なので、リンクを作成するaタグと一緒に使われることが多い擬似クラスです。
この擬似クラスを使うことで、記事のURLに装飾を加えたり、クリックしたくなるようなボタンを作ることが出来ます。
aタグに使える擬似クラス
「:hover」の他にもaタグに適用できる代表的な擬似クラスは、
- :link（リンクのデフォルトの状態）
- :visited（すでにクリックされたリンクの状態）
- （:hover）（マウスのポインタをリンクに重ねた状態）
- :active（リンクをクリックしてからクリックし終わるまでの状態）
があります。
ちなみにCSSには順番も関係してくるので、上から順に「link→visited→hover→active」で書かなければ期待したようには動きません。
「:hover」でボタンを作ろう
「:hover」とその他の擬似クラスについてもある程度分かったところで、実際にCSSでボタンを作ってみましょう。CSSではセレクタに対してプロパティを適用し、形を作ったりデザインをしていきます。
それでは順を追って解説していきます！
枠と背景を作る
まずは枠と背景を作りましょう。
ここで重要になるプロパティは「border」と「color」になります。
それではコードを見ていきましょう。
button.html
<style>
.button {
color: #fff; /* 文字色を白にする */
background-color: #3a3a3a; /* 背景色をグレー（#3a3a3a）にする */
border: 2px solid #000; /* 要素の枠を2pxの太さで、線の種類をsolidに、色を黒にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
</style>
<body>
<a class="button" href=#>Button</a>
</body>
実行結果
HTMLの中にstyleタグでCSSを直接書いています。まずはボタンの通常時に、文字色や背景色、枠などを扱うプロパティを追加しました。そのstyleタグの下のbodyタグには、CSSで装飾する元になる部分がありますね。
ちなみに「#」から始まる3桁や6桁の数字とアルファベットは、色を表しています。
また「/* */」で囲われた部分はコメントになるので実行時には影響しません。
では、今作ったボタンを「:hover」で装飾してみましょう。
「:hover」で動きをつける
先程のコードには「:hover」が含まれていませんでしたね。早速追加してみましょう。
こちらのコードをご覧ください。
button.html
<style>
.button {
color: #fff; /* 文字色を白にする */
background-color: #3a3a3a; /* 背景色をグレー（#3a3a3a）にする */
border: 2px solid #000; /* 要素の枠を2pxの太さで、線の種類をsolidに、色を黒にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
.button:hover{
color: #000; /* 文字色を白にする */
background-color: #c9c9c9; /* 背景色をグレー（#c9c9c9）にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
</style>
<body>
<a class="button" href=#>Button</a>
</body>
実行結果（マウスホバー前）
実行結果（マウスホバー中）
「.button:hover」から始まるブロックが追加されましたね。
ここに書いたコードが、マウスのポインタをリンクの上に乗せたときに実行されるようになっています。
このコードは非常に簡潔なコードですが、色の組み合わせを変えたり、borderの内側のスペース（padding）と外側のスペース（margin）を調整することでとても見栄えの良いボタンが出来ますよ。
挫折なくプログラミングスキルを高めるなら
ここまでCSSの擬似クラス「:hover」の使い方を解説しましたが、ITエンジニアへの転職や副業での収入獲得を見据え、これからCSSスキルの向上はもちろんJavaScriptやPHPといった他のプログラミング言語を習得したいと考えている人は多いですよね。
ただ実のところ、プログラミング言語の学習途中で挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では
- 確実にスキルを身につけられると思ったから
- 独学では不安がある
- 効率よく学べそう
などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。
調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。
上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。
いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 料金 | 月分割4.098円~ |
| 実績 | ・累計指導実績4万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% |
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。
しかし、侍エンジニアでは
- 現役エンジニア講師によるマンツーマンレッスン
- 現役エンジニアに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。
また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なお、侍エンジニアでは最大80%OFFで受講可能な「給付金コース」を提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。
※1：転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ
学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアへの転職や副業での収入獲得などの目的が実現できますよ。
公式サイトで詳細を見るまとめ
この記事ではCSSの簡単な基本から「:hover」の使い所、さらにボタンの簡単な作り方を解説してきました。
擬似クラスついてはなんとなく分かって頂けたでしょうか？擬似クラスは他にもたくさん用意されていて、それぞれで使い所も変わってきます。
また今回のコードで解説したプロパティについてもぜひ調べてみて、使ってみてください！
