f:id:mugitea_drink:20190901164614p:plain

見出し。

前置き。
本文。

疑似要素?
transition?
使ってみる。

まとめ。
参考。

前置き。

久しぶりの投稿でございます。

すいません、またちょっとリアルで用事があって...って、最初に「自分のペースで」って言ったのに、短い間隔で更新しようとするっていう。ちょっと焦っている気持ちもあるかも。

あ、あと今回のブログは短くなりそうです。

本文。

というわけで今回は、「JavaScriptを使わなくても、CSSだけでも意外とアニメーションっぽいことが出来る!」ということを発見したので、それについて軽くまとめようかと思います。疑似要素というものと、transitionというものを使います。

疑似要素?

疑似要素とは、CSS内で要素を指定した後に「:」を付けるものです。言葉で説明するのは難しいので、以下に例を示します。


/*こっちは普通に要素を指定*/
#sample{
    background-color: #000;
    width: 300px;
    height: 300px;
}

/*こっちは疑似要素*/
/*hoverは、その要素にカーソルを当てたときを指します。*/
#sample:hover{
    background-color: #666;
    width: 500px;
    height: 500px;
}

コード中にもコメントしていますが、上は普通に要素、下が疑似要素になります。hoverを指定すると、マウスカーソルを当てたときに疑似要素内の処理が実行されます。

注意点として、要素名と「:」の間にはスペースなどを挿入しないでください。読み込まれなくなります。

transition?

transitionとは、どのくらいの時間で遷移を行うかを設定するものです。実際に使用例を見た方が早いかも。

使ってみる。

以下のように書いてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta lang="ja">

    <style>
        #box{
            background-color: blue;
            width: 100px;
            height: 100px;
            transition: .5s;
        }

        #box:hover{
            background-color: blueviolet;
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

これならはてなブログ内でも実装できるので、以下に示します。

こんな感じ。transitionは、前述の通り、変化する秒数を指定できます。これのおかげでじわーっとサイズが変わってるんですね。

他にも、以下のコードを書けば、ボタンのアニメーションっぽいものも出来ます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta lang="ja">

    <style>
        #center{
            /*ボタンを中央に寄せる(好みの問題)*/
            text-align: center;
        }

        #button{
            /*フォントの設定*/
            font-family: sans-serif;
            font-size: 25px;
            font-weight: bold;
            color: white;

            /*サイズ・幅の設定*/
            width: 500px;
            margin: 0;
            padding: 10px;

            /*背景色の設定*/
            background-color: rgb(54, 100, 252);

            /*角丸に*/
            border-radius: 8px;

            /*枠内に入ったらマウスポインタを変更*/
            cursor: pointer;

            /*変化秒数は0.2秒*/
            transition: .2s;

            /*ボタンの枠を消す*/
            border: none;

            /*影を付ける(横に0px、下に5px、1pxぼかし、1px広がる、色はblue)*/
            box-shadow: 0px 5px 1px 1px blue;

            /*相対座標を使用*/
            position: relative;

            /*上から0pxに配置(hoverで変更するため、設定)*/
            top: 0px;
        }

        /*ボタンにカーソルを当てたとき*/
        #button:hover{
            /*上から3pxに配置(少し下にずれる)*/
            top: 3px;

            /*影を付ける(下側を2pxに変更)*/
            box-shadow: 0px 2px 1px 1px blue;
        }
    </style>
</head>
<body>
    <div id="center">
        <button type="button" id="button">カーソルを当ててみてね</button>
    </div>
</body>
</html>

リンクは設定していないので気軽に押してください。

ポイントは、cssでbuttonとbutton:hover内のtopの値の変化の値と、box-shadowの下側への影の変化の値が一緒のことです。こうすると多分位置がずれません。