11月の新作迷路を作るべく、CSSの学習をしてみました。
CSSは見様見真似で色々と実験してみました。
※今回の記事はパソコンを前提としています
まずは、今回のものを色々試すための箱を作ります。
＜箱のcss＞
#box{
position:relative;
width:200px;
height:150px;
border:solid 3px #000000;
margin:0px auto;
}
次に、今回の仕掛けの一つである、マウスが重なると色が変わるエリアを作ります。
今回は通常時は緑色で、マウスが重なると赤くなる背景を作っていました。
＜マウスオーバー時に背景色が変わるcss＞
#backA{
display:block;
width:200px;
height:150px;
background-color:#00FF00;
z-index:1;
position:absolute;
}
#backA:hover{
display:block;
width:200px;
height:150px;
background-color:#FF0000;
z-index:10;
}
ここでは、z-indexというのが大事になってきます。
z-indexはレイヤーを示し、1よりも10の方が大きいため、マウスが重なるとhoverの表示が有効になります。
ちなみに、hover側のwidthを半分にしてあげると、半分のエリアだけ色を変える事もできます。
次に、先程の色が変わっていた部分を画像に変えてみます。
＜マウスオーバー時に画像が変わるcss＞
#backB{
display:block;
width:200px;
height:150px;
background-color:#00FF00;
z-index:1;
position:absolute;
}
#backB:hover{
display:block;
width:200px;
height:150px;
background-image:url({画像のURL});
z-index:10;
}
単純な色の変化ではなく、『背面』という画像に切り替わりました。
最後に、上記のcssを2つ組み合わせてみます。
＜マウスオーバー時に画像が変わるcss（前面用）＞
#over{
top:40px;
left:0px;
display:block;
width:100px;
height:70px;
background-color:#AAAAAA;
z-index:2;
position:absolute;
}
#over:hover{
display:block;
top:0px;
left:0px;
width:200px;
height:150px;
background-image:url({画像のURL});
z-index:10;
}
overの方はz-indexを2にしているため、通常時はbackBより前面に表示されます。
これで、back側にマウスを重ねた時は『背面』、over側にマウスを重ねた時は『前面』と表示されるようになりました！
これにて私の実験は完了です。
今回の機能を使って迷路ブログの方で11月の新作迷路を作ろうと思います。
どんな迷路ができあがるか想像がつく方も居ると思います＾＾
お楽しみに★
