【CSS】webサイトに動きをつける方法【コードの書き方】

「CSSだけ」を使ってwebサイトに動きをつける方法が知りたい。自分でコードを書いて作りたい。

この記事は、この様な方を想定読者として書いています。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

僕は三年前にプログラミングの独学を開始して、今では個人でお仕事を取ってきて、実務をこなせるまでに成長しました。そんな僕が、「CSSだけで」webサイトに動きをつける方法を、丁寧に解説しますので、ぜひ最後までお読み下さい。

「CSSだけ」でwebサイトに動きをつける方法は3パターンある。

「CSSだけ」でwebサイトに動きをつける方法は、大まかに分けて、3パターンあります。それは下記の通りです。

この記事で、それぞれの使い方を丁寧に解説していきます。

では、詳細に入ります。

疑似クラス

特定の書き方でCSSのセレクターを書くことで、そのセレクターの状態まで考慮して、より細かく指定することが可能です。

例えば、「h1:hover」　のように書くと、

「h1要素にカーソルが乗っている時」を指してスタイルを当てることができます。

このように、通常のCSSセレクターよりもさらに細かく、状態までを指定したセレクターのことを「疑似クラス」と言います。

一般化すると、「(セレクター):(キーワード)」このようにセレクターを書きます。:(コロン)の後にキーワードを書く感じです。

通常の時と、疑似クラスのスタイルが当たっている時で、スタイルを分けることでwebサイトに動きをつける方法が一つ目の方法です。

では、上記のような疑似クラスを使って、具体的にどうやってwebサイトに動きをつけるか、コードも紹介しながら丁寧に解説していきますね。

:hover

(ここに何かセレクターを):hoverと書くことで、マウスがその要素に乗っている時はスタイルが当たるという指定が可能です。

.circle {
    border-radius: 50%;
    background-color: green;
    width: 100px;
    height: 100px;
}

.circle:hover {
    background-color: blue;
}

緑の要素を作って、その要素に対して、:hoverという疑似クラスを使っています。この例では、マウスが乗った時に、要素の色が青になります。

このように、動きがあると面白いですよね！

あと、疑似クラスは「:」コロン一つです。
似たものにコロン二つの疑似要素というのがあるので注意です。

:active

(ここに何かセレクターを):activeと書くことで、ユーザーによってアクティブ化されている時だけスタイルが当たるという指定が可能です。

アクティブ化とは、ボタンなどが押し下げられている時などのことを指します。

クリックとはマウスで「押す」と「離す」の２つで1クリックですが、その「押す」の間だけスタイルが当たる感じです。

実際にコードと動画でお見せします。

.circle:active {
    background-color: blue;
}

この様に、さっき作った緑の円の要素にactive疑似クラスを設定しました。

押している間は、色が青くなっていることが確認できると思います。

:focus

(ここに何かセレクターを):focusと書くことで、inputタグなどに入力中の間だけスタイルが当たるという指定が可能です。

inputタグをHTMLで設置すると、ユーザーからの入力を受け取ることができます。お問い合わせフォームなどで使われていますね。入力中は「フォーカス」という状態になります。

そのフォーカス状態の時だけスタイルが当たるという指定方法ですね。

<input type="text">

この様にHTMLファイルにinputタグをおいて入力欄を作りました。

input:focus {
    background-color: rgb(177, 163, 163);
}

そして、CSSで「:focus」という疑似クラスを設定しました。この例ではフォーカス時に背景色が灰色になる設定ですね。どうなるかは下記の通りです。

フォーカス時に、背景色が灰色になっていることが確認できると思います。

checked

(ここに何かセレクターを):checkedと書くことで、チェックボックスにチェックが入ってる状態の時だけに、チェックボックス自体にスタイルを当てるという指定が可能です。

<input type="checkbox">

このようにHTMLファイルにチェックボックスを設置しました。

input:checked {
    width: 70px;
    height: 70px;
}

そしてcheckedという疑似クラスを設定しました。

この例では、チェックされている時は、幅を70px、高さを70pxにして、少し大きく表示してあげるという設定ですね。
では、どうなるか試してみます。

チェックボックスにチェックが入ってる状態の時に、少し大きく表示されていることが確認できます。

transition:　動きを滑らかに。

「transition」プロパティを設定することで、動きを滑らかにすることができます。

今まで解説してきた動きは、「transition」を設定していないので、一瞬でスタイルが切り替わっているかと思います。

ですが、「transition」を設定することで、よりモダンなwebサイトにすることが可能です。

「transition」は変化前のスタイルと、変化後のスタイルの間を補完してくれる感じです。

では、設定方法を解説します。

「transition」プロパティの基本的な知識。

まず「transition」プロパティの基本的な知識からお伝えします。
大まかに概要を知っておくことは大切です。

「transition」は一括指定プロパティです。なのでまず、「transition」で個別にどんなプロパティを一括指定しているのかを書きます。

下記のようなプロパティを一括指定で設定することによって、動きを滑らかにしています。

では、これらの指定方法を丁寧に解説しますね。

transition-duration:

「transition-duration」プロパティによって、変化開始から変化完了にかかる時間を指定できます。

初期値は「0s」なので、設定しない場合は、一瞬でスタイルが切り替わります。

単位は、s(秒) または ms(ミリ秒) で記述します。

※「疑似クラスではなくて」、要素そのものに設定することに注意して下さい。

.button {
    width: 100px;
    padding: 8px 16px;
    background-color: skyblue;
    color: #fff;
    text-align: center;
    transition-duration: 0.3s;
}
.button:hover {
    background-color: blueviolet;
}

上のようなCSSのコードを書きました。
水色のボタンにhoverすると、0.3秒かけて、背景色がバイオレット色になります。

この動画のように、変化の間が補完されて、「滑らかに動かす」ことができます。

transition-delay:

「transition-delay」を設定すると、動き始めるまでに「待ち時間」を作ることが可能です。

単位は、s(秒) または ms(ミリ秒) で記述します。

初期値は「0s」なので、設定しない場合は、待ち時間はなく、すぐに動き始めます。

.button {
    width: 100px;
    padding: 8px 16px;
    background-color: skyblue;
    color: #fff;
    text-align: center;
    transition-duration: 0.3s;
    transition-delay: 0.5s;
}
.button:hover {
    background-color: blueviolet;
}

例えば、上のように、先ほどのコードに「transition-delay: 0.5s;」と一行追加してみました。
すると次の動画のようになります。

この動画では、カーソルがボタンに乗ってから、または離れてから、動き始まるのに「待ち時間」があることが確認できます。

このように、「transition-delay」プロパティで、「動作が始まるまでの待ち時間」を指定することが可能なのです。

transition-property:

複数の変化がついている時、「transition-property」によって、トランジションをつける変化を指定することができます。

一つの要素に、２つ以上の変化を同時につけている場合に「片方はすぐ変化を始めてほしいけど、もう片方は0.5sだけ遅れてほしい」などの願望がでることが想定できます。

そこで使えるのが「transition-property」です。
トランジションを適用するプロパティを指定することができるからです。

「transition-property」の初期値は「all」なので、トランジションを設定すると、全ての変化にトランジションが効きますが、明示的に指定することで、「予期せぬプロパティにまでトランジションがついてしまう」ことが防げます。

書き方は下のコードのように、トランジションをつけたい「プロパティ名」を書いてあげればOKです。

.button {
    width: 100px;
    padding: 8px 16px;
    background-color: skyblue;
    color: #fff;
    text-align: center;
    transition-duration: 3s;
    transition-property: padding;
}
.button:hover {
    background-color: blueviolet;
    padding: 32px 64px;
}

このように、hoverしたらpaddingが広がる指定にしました。
paddingはトランジションがついてるのでゆっくり3秒かけて変化しますが、ボタンの色は一瞬で変化するはずです。
試すと次の動画のようになりました。

paddingの部分だけにトランジションが効いているのが確認できるかと思います。

transition-timing-function

「transition-timing-function」を設定することで、「変化の補完部分をより細かく指定する」ことができます。

例えば、1秒かけて変化させる場合、最初の0.1秒間で変化の90%を終わらせるのか、逆に最初の0.9秒間ではほとんど変化せず、最後の0.1秒間で急激に変化するのか、などのように「どんな変化をするか」が指定できます。

指定できる値は、下記のようなものがあります。

初期値は「ease」です。

それでは、個別に少し解説を追加していきますね。

「ease」と指定すると、ゆっくり変化していき、変化の半分くらいまでは変化スピードが速くなり、そこから最後になるまで徐々に変化スピードが落ちます。

また、初期値は「ease」なので、何も設定していない場合は「ease」となります。

「ease-in」と指定すると、最初はゆっくり変化していき、そのまま最後まで変化スピードが上がっていきます。

小さなUI部品を動かす時に、使われることが多いです。

「ease-out」と指定すると、最初は速い速度で変化していき、徐々に変化速度が落ちていきます。

「ease-out」と指定すると、最初はゆっくり変化し、速度が速くなって、最後は速度が遅くなります。

大きなUI部品を動かす時に、使われることが多いです。ドロワーなどですかね。

変化は一定の速度となります。

transform

「transform」プロパティによって、webサイトに動きをつけることも可能です。

「transform」プロパティを使うと、要素を「移動、回転、拡大縮小、傾斜」することができます。

さらにそれらを組み合わせることも可能なので、自由度が高くとても便利です。また、上手く使うと、おしゃれなwebサイトを作成することに「活躍」します。

ここで注意してほしいのは、要素の移動は見かけ上だけで、他の要素は、「transform:」が無かったように配置されるということです。留意しておいて下さい。

「transform」プロパティには、下記のような値が設定できます。

これらが全てではありませんが、よく使う重要なものを紹介しました。

それでは、それぞれの使い方の詳細について、丁寧に解説していきますね。

translate()

「transform」プロパティに「translate()」を設定することで、要素を「移動」させることができます。

div {
    transform: translate(200px, 100px);
}

このように書くと、要素のX座標、Ｙ座標を、書き換えることが可能です。
つまり、要素を移動させることができます。

例では、最初の200pxがX座標(水平方向)をどれだけ動かすかを指定していて、次の100pxがＹ座標(垂直方向)をどれだけ動かすかを指定しています。

上のコードでは、図のような移動ができます。

図のように、フレックスボックスレイアウトで要素を順番に横並びにして、1番目の要素を「transform: translate」を使って「Y軸方向だけ」動かしました。

ですが、1番目の要素が元々あった場所が、詰められて表示されていません。

このように、要素の移動は見かけ上だけで、「他の要素」は「transform: translate」が無かったように配置されます。

また、「上の解説で出てきたフレックスボックスレイアウトって何？」という方は、下記の記事がおすすめです。記事内でフレックスボックスについて解説しています。

※この挙動は、「transform: translate」だけでなく、他の「transform」も同じです。

div {
    transform: translate(50%, 100%);
}

このように書くと、要素の高さと幅に対して、何%の距離を移動するかが指定できます。

上の図では、要素の幅が200pxなので、その50%分の100pxが水平方向に移動しています。

そして、要素の高さが100pxなので、その100%分の100pxが垂直方向に移動しています。

片方だけ%で指定することも可能です。

div {
    transform: translate(-100px, -200px);
}

この様に、マイナスでの指定もOKです。

間は，（カンマ)で区切ります。カンマさえ入っていれば、半角スペースや改行も入れてOKです。

div {
    transform: translate(100px);
}

値を一個だけ指定することも可能です。

その場合は、「水平方向の値」となります。なので垂直方向には動きません。

div {
    transform: translateX(100px);
}

この様に書いて、明示的にX軸方向への移動距離だけ指定することも可能です。

div {
    transform: translateY(100px);
}

この様に書いて、Y方向への移動距離だけ指定することも可能です。

rotate()

「transform」プロパティに「rotate()」を設定することで、要素を「回転」させることができます。

div {
    transform: rotate(45deg);
}

このように書くと、要素を指定した角度だけ「時計回り」に回転させることができます。

「deg」は英語のdegree（度、°）を省略した用語です。

また、「transform-origin」というプロパティで回転の中心点を指定できます。

こちらのプロパティの指定方法は、ここで解説すると長くなるので省きますが、この記事の後半でしっかりまとめておきます。

「transform-origin」を指定しなければ、上の図のように「要素自体の中心点」が回転の中心点となり回転します。

scale()

「transform」プロパティに「scale()」を設定することで、要素を「拡大縮小」させることができます。

div {
    transform: scale(1.5);
}

このように、()の中に数値を書くことで、その倍率で要素を拡大縮小させられます。

skew()

「transform」プロパティに「scale()」を設定することで、要素を「傾斜」させることができます。

div {
    transform: skew(-30deg);
}

()の中には、X軸方向(水平方向)にゆがめるのに使う角度を指定します。

自分が作りたいイメージと、数値がいまいち一致しないかもしれませんので、いろいろ数値をいじってみると良いと思います。

transform-origin:

「transform-origin」というプロパティを設定することで、変化の中心点を指定できます。

※疑似クラス側につけるのではなく、元の要素の方に「transform-origin」を設定する点に気をつけて下さい。変化後のスタイルが当たっている時だけ使うものではないので。

「translate()」は影響がありませんが、他の３つは影響があります。

「rotate()」「scale()」「skew()」はどこを変化の中心点とするかで、「変化後の要素の位置」が変わるということが起きます。

div {
    transform-origin: 30px 60px;
}

上の図のように、「要素の左上の角から」、X軸方向(水平方向)にどれくらいか、Y軸方向(垂直方向)にどれくらいの距離の位置を中心点として変化させるかを指定します。

例のように、「X軸方向(水平方向)　Y軸方向(垂直方向)」の順番で指定します。

他にも、高さや幅を100%として、「%」で指定することも可能です。これも左上の角を出発点とします。

「transform-origin」の値には、一つのキーワードを使うこともできます。

「center」と指定すると、要素の中心が変化の中心点となります。

「top」とすると、要素の「１番上かつ水平方向は真ん中」の位置を中心点とします。

「left」とすると、要素の「１番左かつ垂直方向は真ん中」の位置を中心点とします。

「bottom」とすると、要素の「１番下かつ水平方向は真ん中」の位置を中心点とします。

「right」とすると、要素の「１番右かつ垂直方向は真ん中」の位置を中心点とします。

「right bottom」とすると、要素の「1番右かつ1番下」の位置を変化の中心点とします。

この感じで、キーワード２つを組み合わせた指定も可能ということですね。

複数の「変化」を適用する方法。

一つの要素に、複数の「変化」を適用することが可能です。

div {
    transform: translate(100px) rotate(45deg);
}

上のようなコードを書くと、X軸方向に100px移動した「後に」、45度回転します。

ですが、下記のコードのように順番を入れ替えると、45度回転した「後に」、X軸方向に100px移動します。

div {
    transform: rotate(45deg) translate(100px);
}

試してみると次の画像のようになります。

このように「前に書かれた変化から順番に行われる」ことが確認できます。

「変化の順番によって、最終的な要素の位置が変わってくる」ので、複数の変化をさせる時は、「変化の順番」を意識しましょう。

複数の「変化」を適用する際のよくあるミス。

複数の変化を適用する際に、下記のようなコードでは、上の「transform」が下の「transform」で上書きされてしまいます。

div {
    transform: rotate(45deg);
    transform: translate(100px);
}

なのでこの場合は、上書きによって、下の「transform: translate(100px);」だけしか適用されないので注意して下さい。

cssアニメーション

CSSで「@keyframes」という少し変わった記述をすることで、アニメーションの「途中経過をより細かく指定」することができます。

今までみてきたものは、「hoverした時に、このスタイルを当てる」というように、変化前のスタイルと変化後のスタイルとを指定して、それにtransitionをつけて滑らかに動かす、というものでした。

ですが、「@keyframes」を使うことで、変化の「始まりと終わり」以外のタイミングに、スタイルを当てることが可能となります。

これにより複雑なアニメーションをwebサイト上で作ることができます。

では、「@keyframes」の使い方を、詳しく丁寧に解説していきます。

@keyframes

@keyframes test {
    0% {transform: none;}
    10% {transform: translate(100px, 100px);}
    50% {transform: rotate(45deg);}
    100% {transform: scale(2);}
}

まず、アニメーションを作成します。

このように、「@keyframes」の次に、任意の文字列を書くことで、アニメーションに名前をつけます。これは何でもOKです。

そのアニメーションの内容全体を{}で囲って、さらに、何個でも任意で「キーフレーム」を設定することができます。

キーフレームとは「10% {transform: translate(100px, 100px);}」などのことです。

基本的なアニメーションは、0%から始まり、100%で終わります。その途中で、「どんな変化の経過をたどるか」を細かく書くことができます。

上の例では、それぞれ一行のtransformしか書いていませんが、何行でもCSSの宣言を書くことが可能です。

※アニメーションの名前が重複した場合は、新しく読み込まれるもので上書きされます。

animation-name:

「@keyframes」と書いて、アニメーションを作ったら、そのアニメーションを「どの要素に適用するか」を指定します。

.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

このようなboxクラスがついたdiv要素を作りました。

.anime {
    animation-name: test;
}

その要素に対して、このように、「animation-name」プロパティの値に、作ったアニメーションの名前を与えます。

※ですが、これだけでは「まだ」アニメーションは機能しません。

animation-duration:

.box {
    animation-name: test;
    animation-duration: 2s;
}

「animation-duration」プロパティでアニメーションにかかる時間を設定することができます。

試すと、次の動画のようになります。

作ったdiv要素が、作ったアニメーション通りに動いているのが確認できます。

「animation-name」と「animation-duration」の２つを設定すると、最低限のアニメーションを動かすことができます。

上の動画では、いい感じに動いてますが、アニメーションが100%まで進んだ後に、「変化前の姿」に戻ってしまっているようです。

では次に、変化したまま要素を固定する方法について解説します。

animation-fill-mode:

「animation-fill-mode」は、アニメーションし終わった後に、どのスタイルを当てるかを指定することができます。

「animation-fill-mode」プロパティの値に、「forwards」と指定すると、変化後の形でそのまま固定されます。

.anime {
    animation-name: test;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

試してみると、次の動画のようになります。

変化後の形でそのまま固定されているのが確認できると思います。

animation-iteration-count:

「animation-iteration-count:」を使うと、アニメーション周期を繰り返す回数が指定できます。

初期値は「1」なので、何も指定しなかった場合は、1周期のアニメーションが再生されます。

.anime {
    animation-name: test;
    animation-duration: 2s;
    animation-iteration-count: 1.5;
}

また、このように、整数値じゃなくて、小数点を含む形でも指定できます。

「animation-iteration-count」の値を「infinite」とすると、アニメーションを無限に繰り返す指定ができます。

animation-direction

「animation-direction」プロパティを設定すると、アニメーションの方向を変更することができます。

初期値は「normal」です。

「normal」では、順方向にアニメーションが再生されます。
つまり、0%から100%へ向けてアニメーションします。

その後は、また0%にリセットされて、そこから100%へ向かいます。

「animation-direction」の値を「reverse」とすると、アニメーションが逆方向に再生されます。
つまり100%から0%へ向けてアニメーションします。

その後は、また100%にリセットされて、そこから0%へ向かいます。

「animation-direction」の値を「alternate」とすると、アニメーションの方向を毎回反転させます。

最初は順方向でアニメーションして、次回のアニメーションは逆方向に再生し、その次はまた順方向、のようにです。

「animation-direction」の値を「alternate-reverse」とすると、「alternate」の時と同じように、毎回アニメーションが反転して再生されます。

違いは、最初が逆方向から始まる点です。

from to

@keyframes test {
    from {transform: none;}
    to {transform: scale(2);}
}

キーフレームの0%は「from」、100%は「to」と書くこともできます。

まとめ

CSSだけでも、これだけたくさんの動きがつけられます。

さらに自分でコードを書けるようになると、色々とカスタマイズできて、楽しいですよね。

ですが、さらに動きをつけるタイミングなどもを細かく指定するには、「JavaScript」を使うことになります。

「CSS」と「JavaScript」を組み合わせることで、さらに様々な指定が可能となります。

そのためにも、この記事にまとめたCSSで動きをつけるための知識はとても重要なので、何度も読み返してみて下さい。

「JavaScript」によって、CSSのクラスをつけたり外したりして、動きをつける方法がよく使われます。

長くなりましたが、最後まで読んでくれて、本当にありがとうございました。

ではまた！