今回はアニメーションみたいに動きを出せる疑似クラスの『:hover』『:active』『:checked』について見てみましょう。
これらを使いこなしていくと、少しずつ動的なサイトが作れるようになっていくので、1つずつ見ていきましょう。
疑似クラスと疑似要素がごちゃごちゃになっている人は、先にこちらをご覧ください。
『:hover』とは
:hoverは疑似クラスでカーソルが要素に乗っかった時の挙動を指定します。
[HTML]
<p><a href="https://sunsukeblog.com">
ここにマウスを乗せる
</a></p>[CSS]
p {
max-width:200px;
color:#fff;
background-color:gray;
border:double 2px silver;
text-align: center;
padding:0;
margin:10px auto;
}
p a {
display: block;
text-decoration:none;
color:white;
}
p a:hover {
background-color:lightgray;
}マウスを乗せた時だけ色が変わります。これがhoverの特性で、リンク先などをユーザーが選んでいる時に「今、この部分を選択している」というのをわかりやすくする効果があります。
hoverの表現方法の例を見てみる
よくあるタイプの横並びメニューについて作成手順を見てみましょう。
[HTML]
<div>
<ul>
<li><a href="https://sunsukeblog.com/tag/html">HTML</a></li>
<li><a href="https://sunsukeblog.com/tag/css">CSS</a></li>
<li><a href="https://sunsukeblog.com/tag/wordpress">Wordpress</a></li>
</ul>
</div>[CSS]
div {
text-align:center;
margin:10px;
}
ul li {
list-style-type:none;
display:inline-block;
font-size:80%
}
ul li a{
display:block;
height:auto;
min-width:100px;
max-width:150px;
background-color:navy;
color:#fff;
text-align:center;
vertical-align:middle;
text-decoration:none;
border:solid 1px navy;
border-radius:10px;
padding: 0;
font-size:80%
}
ul li a:hover{
max-width:150px;
background-color:#00ff66;
border:solid 1px #00ff66;
color:#006600;
font-size:1.2em;
}ただ色を変えるだけでなく、borderを出現させたりfont-sizeを変更するだけでも簡単なアニメーションぽくする事が出来ます。
また、今回作成したのはdisplayプロパティでリストを横に並べるようにしたメニューです。カテゴリー別にページを分ける時などに使えるのでしっかり身に付けておきましょう。
画像でもできる？
先程は<p>や<li>で作りましたが画像でも同じ事が出来ます。
[HTML]
<div class="hoverexample4">
<a href="リンクさせたい先"><img src="画像のパス">
<div class="cover">
<div class="content">ここをクリック</div>
</div></a>
</div>[CSS]
.hoverexample4 {
width: 280px;
height: 180px;
overflow: hidden;
position: relative;
}
.hoverexample4 .content {
font-size: 1.3em;
width: 180px;
text-align: center;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
color: #fff;
border:double 3px silver;
background-color: gray;
border-radius:15px;
}
.hoverexample4 .cover {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.6);
transition: all 0.8s ease;
}
.hoverexample4:hover .cover {
opacity: 1;
}
.hoverexample .cover a{
text-decoration: none;
}CSSが少し長くなってますが、『画像』『画像のカバー(hover時に被さる部分)』『文字(配置や装飾)』『hoverの挙動』『リンク設定』という形で幅広く設定する必要があります。
ただそのぶん、見栄えよくアレンジしやすいのでしっかり理解しておきましょう。
『:active』とは
:activeはクリックをした時の挙動についての疑似クラスです。厳密にはクリックを押しこんでから離すまでが対象となります。
[HTML]
<div></div>[CSS]
div {
background-image: url(画像パス);
height:200px;
width:250px;
background-size: cover;
background-repeat: no-repeat;
}
div:active{
background-image: url(active用画像パス);
height: 200px;
width: 250px;
background-size:cover;
background-repeat: no-repeat;
}
画像をクリックする事で切替が出来るようになります。:hoverはカーソルが指定した要素に乗った時、:activeはマウスをクリックした時の挙動を指しています。
:hoverと:activeを両方出来る？
Google先生に聞いてみると『出来る』といいながら疑似クラスと疑似要素の組み合わせの話が出てきますが今回知りたいのは『疑似クラスを同じセレクタに2つ指定できるか』ということです。結論言います。
疑似クラス2つ設定はできまぁぁす!!!
では実際に疑似クラスである:hoverと:activeを２つ同時に設定してみます。以下のようになります。
[HTML]
<div></div>[CSS]
.cover2{
background-image: url(img/face1.png);
height:200px;
width:250px;
background-size: cover;
background-repeat: no-repeat;
}
.cover2:hover{
background-image: url(img/face3.png);
height: 200px;
width: 250px;
background-size:cover;
background-repeat: no-repeat;
}
.cover2:active{
background-image: url(img/face2.png);
height: 200px;
width: 250px;
background-size:cover;
background-repeat: no-repeat;
}
注意すべきはCSSの記述の順番です。基本的なことですが、後から書かれたものが優先されるのでやり方によってはうまくいきませんし、そもそも不可能なものもあったりします。
(例：今回のhoverとactiveでは、表示する順番は『通常(何もしていない)』→『hover』→『active』となります。よってhover→actriveの順でCSSも優先順位を設定していきます。
しかし、hoverとactiveの順を逆に書くと『通常』→『active』→『hover』となり、クリックした状態よりもhoverのほうが優先順位が高くなる為、activeは表示されません。クリックする段階で先にhoverのほうが条件を満たしてしまうからですね。)
『:checked』とは
:checkedは簡単にいってしまえばONとOFFを切り替えるスイッチという事です。:activeはクリックしている間だけの疑似クラスですが、:checkedは1度クリックすればONになりもう一度クリックするまでOFFにはなりません。
以下のようなものを作ることが出来ます。
隠していた文字が出てきます。
[HTML]
<div class="fx1">
<div class="checkedexample">
<label for="labeltest">
<span class="fx2">ここをクリック</span></label>
<input type="checkbox" id="labeltest"/>
<div class="appear">
<p>隠していた文字が出てきます。</p>
</div></div></div>[CSS]
.fx1 {
position:relative;
max-width:500px;
width:100%;
height:auto;
border:solid 3px red;
.fx2 {
max-width:450px;
background-color: red;
color:white;
padding:3px 10px;
font-weight:bold;
overflow:visible;
}
.checkedexample input {
display: none;
}
.checkedexample .appear {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.checkedexample input:checked ~ .appear {
padding: 10px 0;
height: auto;
opacity: 1;
}
inputやlabelなどが出てきたので簡単に解説します。
<input type=”種類”>というタグで、種類には今回使用した『checkbox』や『radio』『pasword』『submit』など様々なtype属性があります。
今回のtype=”checkbox”は☑を作るものです。(CSSでinputをdisplay:none;で隠しています)
<label for=”指定先”>〇〇</label>というタグで、〇〇はfor属性で指定した部分に係る要素だと紐付けをする意味を持っています。
今回で言うならば<label for=”labeltest”>の後に<input type=”checkbox” id=”labeltest”>で&、lt;label>タグ内の「ここをクリック」という文字が<input>タグと紐付けっられて、文字をクリックすれば☑ボックスに✓を入れた/外したと同様の意味を持たせています。
この２つのタグで☑ボックスを加工して、✓を入れた状態に関してはinput:checkedという疑似クラスで装飾をする事が可能になります。
あと細かい部分ですが、同一階層の自身より後を指定する『~』がinput:checked ~ .appearで使われています。これで通常は.appearがopactity:0;で透過度が100%ですが、:checked ~ .appear(要は✓が入った時)はopacity:1;とすることで疑似クラスを使って✓が入った時には透過度を0%にしています。
よくわからんという時はこちらで『間接セレクタ』について見てみてください。
あとはmarginやtext-alingなど使ってうまく位置の調整などをしてみてください。
今回紹介した3つの疑似クラスを使うと、動きのあるサイトを作ることが出来るようになるのでサンプルサイトなどを作りながら練習してみましょう。
