Webデザインの教科書
CSS 上級編
Scroll
  1. ホーム
  2. CSS 上級編

CSSだけで簡単に作れる実際に使えるアニメーションの作り方

今回はCSSだけで出来るアニメーションのやり方を紹介します。

アニメーションは難しいイメージがありますが、実はとても簡単です。

ぜひ習得して、Webデザインに取り入れてみてください。

CSSアニメーション

CSSアニメーションは、CSSだけで出来るアニメーションです。

動作が軽快で、重くなりにくいのが特徴です。

CSSでアニメーション
A
N
I
M
A
T
E

CSSアニメーションは「変化の前後をなめらかにする」方法と「複雑な動きを演出する」方法の2つがあります。

変化の前後をなめらかにする

この方法はマウスカーソルを乗せた時など、シンプルなアニメーションに向いている方法です。

CSSプロパティの「transision」を使うことで、アニメーションをしながら状態を変化するようにします。

アニメーションの設定に必要な値は「対象」「秒数」の2つが必要です。

アニメーション対象

アニメーション対象はCSSプロパティを選択することが出来ます。

例えば、色を対象にする場合は「color」「background-color」であったり、大きさを対象にする場合は「width」「height」といったCSSプロパティを選択することが可能です。

もし、すべてのCSSプロパティを対象にする場合は「all」を選択するも可能です。

アニメーション時間

状態の変化前から変化後までの変化する秒数をしています。

指定した秒数が長いほどゆっくりとしたアニメーションで変化していきます。

秒数の指定は、1秒間の場合は「1s」と指定します。

transition: all 1s;
トランジションの特徴
  1. CSSの変化をアニメーション

    CSSを上書きする時に変化前と変化後をなめらからにアニメーションすることが出来ます。

  2. 変化を一直線にアニメーション

    変化前と変化後だけを決めて、アニメーションして切り替えます。

    アニメーションは一直線に変化するので、複雑な動きは出来ません。

  3. 反対方向にもアニメーション

    CSSが上書きされたタイミングで変化後から変化前に戻すことが出来ます。

    アニメーションの途中であったとしても、アニメーションしながら変化前に戻すことも可能です。

複雑な動きを演出する

この方法はより複雑な動きを取り入れたアニメーションが可能です。

あらかじめアニメーション内容を細かく定義する必要があり、その定義された「アニメーションの名前」と「秒数」の2つが必要になります。

アニメーションの定義

アニメーションの定義を「keyframes」で作ります。

下のコードの例ではアニメーションの定義を「koro-koro」というアニメーションの名前で定義します。

CSSプロパティの「color」「background-color」「top」「left」といった様々なCSSプロパティを組み合わせてアニメーションを作成することが可能です。

アニメーションの選択

アニメーションの定義を「keyframes」で作成した後、その定義したアニメーションの名前でアニメーションを選択します。

下のコードの例では「koro-koro」のアニメーションの選択しています。

アニメーション時間

状態の変化前から変化後までの変化する秒数をしています。

指定した秒数が長いほどゆっくりとしたアニメーションで変化していきます。

秒数の指定は、5秒間の場合は「5s」と指定します。

animation: koro-koro 5s;
@keyframes koro-koro {
0% {
/* 左からスタート */
left: 0;
}
70% {
/* 右に転がる */
left: 100%;
}
80% {
/* 左に戻る */
left: 80%;
}
100% {
/* また右に転がる */
left: 100%;
}
}
キーフレームの特徴
  1. 複雑なアニメーション

    CSSで複雑なアニメーションをすることが出来ます。

    CSSで変化前と変化後の状態を決めて、さらに変化途中も細かく設定することが出来ます。

  2. 反対方向は出来ない

    アニメーションは変化前と変化後の一方通行であるため、変化後から変化前に戻すことは出来ません。

    アニメーション自体の向きを反転する事は可能ですが、アニメーションの途中で向きを反転する事はできません。

  3. アニメーション後は最初に戻る

    アニメーションが終了したあとは、アニメーションが始まる前の状態に戻ります。

    アニメーション終了後の状態を維持する方法はありますが、基本的には最初の状態に戻ります。

アニメーションの方法は２種類あることが分かりました。

実際に作ってそれぞれの特徴に触れてみましょう。

なめらかに変化させる

まずはトランジションを使って変化をなめらかにアニメーションします。

いろんな使い方がああるので、よく使う方法を紹介します。

ホバーアニメーション

<ul class="menu">
<li>Top</li>
<li>Address</li>
<li>About Us</li>
</ul>
.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.menu li {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: black;
color: white;
transition: all .5s;
}
.menu li:hover {
background: white;
color: black;
}
  • Top
  • Address
  • About Us
ホバーアニメーション
  • Top
  • Address
  • About Us

メニューのリストにマウスカーソルを乗せた(ホバー)時に、リストの背景の色と文字の色をなめらかに変更します。

スマホやタブレットはタッチした時にホバーと同じ状態になります。

アニメーション設定

CSSの状態の変化を検知して、アニメーションをしながら変化する設定をします。

今回はアニメーション対象を「all」に指定して、アニメーションの秒数は「0.5秒」に設定します。

小数点で秒数を指定する場合は「.5s」のように、最初の「0」を省略することが可能です。

.menu li {
transition: all .5s;
}
ホバーした時のCSS

ホバーする前と後でCSSの値を変更することで、アニメーションをしながら変化をさせることが出来ます。

今回は、ホバーした時に文字の色と背景の色を変更するため、変化前と変化後の値を下記のように指定します。

/* 変化前 */
.menu li {
background: black;
color: white;
transition: all .5s;
}
/* 変化後 */
.menu li:hover {
background: white;
color: black;
}

はい！とても簡単ですね！

アニメーションさせた要素にトランジションを追加するだけです。

続いてはアコーディオンを作ってみましょう。

アコーディオン

<div class="accordion">
<div class="menu" onclick="toggle()">
メニュー
</div>
<ul>
<li>ハンバーガー</li>
<li>チーズバーガー</li>
<li>テリヤキバーガー</li>
<li>ベーコンバーガー</li>
<li>ベジタブルバーガー</li>
<li>ライスバーガー</li>
</ul>
</div>
<script>
function toggle() {
document.querySelector('.accordion').classList.toggle('open');
}
</script>
.menu {
background: #01558d;
color: white;
padding: 5px 10px;
cursor: pointer;
}
.accordion ul {
margin: 0;
background: #e7e7e7;
max-height: 0;
overflow: hidden;
transition: all .5s;
}
.accordion.open ul {
max-height: 300px;
}
.accordion li {
padding: 5px 10px;
}
メニュー
  • ハンバーガー
  • チーズバーガー
  • テリヤキバーガー
  • ベーコンバーガー
  • ベジタブルバーガー
  • ライスバーガー
アコーディオンメニュー
メニュー
  • ハンバーガー
  • チーズバーガー
  • テリヤキバーガー

メニューをクリックした時にそれに関する項目をアコーディオンのように表示します。

アニメーション設定

CSSの状態の変化を検知して、アニメーションをしながら変化する設定をします。

今回はアニメーション対象を「all」に指定して、アニメーションの秒数は「0.5秒」に設定します。

小数点で秒数を指定する場合は「.5s」のように、最初の「0」を省略することが可能です。

.accordion ul {
transition: all .5s;
}
メニューの開閉

アコーディオンの実装は要素の高さを調節する事で実装が可能です。

メニューを閉じた状態は高さがない状態にして、反対にメニューを開く際は高さを戻すようにして作ります。

メニューを閉じた状態

メニューを閉じた状態にするには、アコーディオンの「ul」タグの最大の高さを「0px」にします。

CSSプロパティの「max-height」の値を「0」にする事で、メニューを閉じた状態にします。

また、ただ単に高さを「0px」にしただけでは、はみ出た部分は非表示になりません。

そのため、はみ出た部分は非表示にするために、CSSプロパティの「overflow」の値を「hidden」に設定します。

.accordion ul {
max-haight: 0;
overflow: hidden;
}
メニューを開いた状態

メニューを閉じた状態にするには、アコーディオンの「ul」タグの最大の高さをもとに戻します。

CSSプロパティの「max-height」の値を「300px」ぐらいにする事で、メニューを開いた状態にします。

今回は「max-height」の値を「300px」にしていますが、目的に合わせて要素の最大の高さを「0 ~ 999px」ぐらいの大きさで調節してみてください。

.accordion.open ul {
max-height: 300px;
}
はみ出てしまった部分って？

高さが「0px」にしたから非表示になると思った方がいると思います。

実際に高さは「0px」になっていますが、実はそれだけでは非表示になりません。

overflow 設定なし
みなさん。
こんにちは。
このサイトを作っているヒツジです。CSSテクニックや体験したバグなどの情報を発信しようと思っています。

要素の高さを「100px」にしてわざとはみ出るようにしました。

この場合、高さは「100px」になっていますが、文章は下にはみ出てしまっている状態です。

height: 100px;
overflow: hidden

「overflow: hidden」を設定すると、要素の高さの「100px」からはみ出た部分は表示されなくなります。

高さを変更すれば見える範囲も変わります。この特徴を利用してアコーデオンメニューを作ります。

height: 100px;
overflow: hidden;
メニューの開閉切り替え

アコーディオンの「メニュー」の帯をクリックすると、メニューの開閉を切り替える機能を実装します。

メニューの開閉の切り替えが「open」クラスが存在する時に開き、反対に存在しない時に閉じるようにします。

<div class="accordion">
<div class="menu" onclick="toggle()">
メニュー
</div>
<ul>
...
</ul>
</div>
<script>
function toggle() {
document.querySelector('.accordion').classList.toggle('open');
}
</script>
<script>
関数名:toggle {
'accordion'クラスに'open'クラスを付加または消去する;
}
</script>
/* メニューを閉じた状態 */
.accordion ul {
max-haight: 0;
overflow: hidden;
}
/* メニューを開いた状態 */
.accordion.open ul {
max-height: 300px;
}
  1. 「メニュー」をクリック

    「メニュー」をクリックすると「onclick」が反応します。

    「onclick」の中に設定している「toggle()」という処理を開始します。

    <div class="menu" onclick="toggle()">
    メニュー
    </div>
  2. 「open」クラスの付加と消去

    「toggle()」の処理は「script」タグの中に記述します。

    「accordion」クラスに「open」クラスを付加します。

    もし「open」クラスがある場合は反対に「open」クラスを消去します。

    <div class="accordion open">
    ...
    </div>
  3. CSSでメニューの高さを変える

    CSSで「open」クラスがある時とない時でメニューリストの高さを変更します。

    「open」クラスがない時の最大の高さを「0」に設定します。

    「open」クラスが付加された時の最大の高さを「300px」にして、メニューリストを開きます。

    .accordion ul {
    max-haight: 0;
    }
    .accordion.open ul {
    max-height: 300px;
    }

ちょっとだけ難しくなりました。

「open」クラスがあるかないかでメニューを開きました。

JavaScriptの部分はなんとなく覚えとく程度で大丈夫です。

続いては、スマホ用のメニューボタンを作ってみます。

メニューボタン

<div class="menubutton" onclick="toggle()">
<i></i>
<i></i>
<i></i>
</div>
<script>
function toggle() {
document.querySelector('.menubutton').classList.toggle('open');
}
</script>
.menubutton {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: black;
cursor: pointer;
z-index: 100;
}
.menubutton i {
display: block;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
width: 30px;
height: 5px;
background: white;
transition: all .5s
}
.menubutton i:first-child {
top: 10px;
}
.menubutton i:nth-child(2) {
top: 50%;
}
.menubutton i:last-child {
top: 30px;
}
.menubutton.open i:first-child {
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}
.menubutton.open i:nth-child(2) {
opacity: 0;
}
.menubutton.open i:last-child {
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}
メニューボタンの作成
メニューボタンの作成

HTMLとCSSでメニューボタンを作成します。

黒の正方形を作ったあと、白いバーを3本用意して等間隔で配置していきます。

  1. 黒い正方形を作成

    「40px」の黒の正方形を作成します。

    <div class="menubutton"></div>
    .menubutton {
    width: 40px;
    height: 40px;
    background: black;
    }
  2. 白いバーを作成

    HTMLの「i」タグで3本の白いバーを作成します。

    作成した直後は上の図のように、すべて左上に寄った状態になります。

    <div class="menubutton">
    <i></i>
    <i></i>
    <i></i>
    </div>
    .menubutton i {
    display: block;
    width: 30px;
    height: 5px;
    background: white;
    }
  3. 3本の白いバーを配置する

    黒の正方形の左右方向に対して、3本の白いバーの左上が中央に来るように配置します。

    その後、上下方向に3本の白いバーが等間隔に並ぶように、個別に上下方向に配置していきます。

    .menubutton i {
    position: absolute;
    left: 50%;
    }
    .menubutton i:first-child {
    top: 10px;
    }
    .menubutton i:nth-child(2) {
    top: 50%;
    }
    .menubutton i:last-child {
    top: 30px;
    }
    個別にCSSを当てる

    個別にCSSを当てる必要がある場合は、要素の並ぶ順番を利用してCSSを当てる事が出来ます。

    今回の場合はHTMLの「i」タグに対して、順番にCSSを当てていきます。

    first-child

    複数ある要素の中で最初のある要素に対してCSSを当てます。

    nth-child(2)

    複数ある要素の中で2番目のある要素に対してCSSを当てます。

    last-child

    複数ある要素の中で最後のある要素に対してCSSを当てます。

    <div class="menubutton">
    <i></i>
    <i></i>
    <i></i>
    </div>
    .menubutton i:first-child {
    top: 10px;
    }
    .menubutton i:nth-child(2) {
    top: 50%;
    }
    .menubutton i:last-child {
    top: 30px;
    }
  4. 3本の白いバーの配置を調整
    translate(X,Y)

    最後に白いバーを中央に配置するように調節します。

    白いバーの大きさの半分(50%)を左上に戻す必要があります。

    CSSプロパティの「transform」の値を「translate(-50%,-50%)」に設定して位置を調節します。

    .menubutton i {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    }
メニューボタンの配置

作成したメニューボタンを、画面の左上に固定してスクロールしても常に表示されている状態にします。

CSSプロパティの「position」の値を「fixed」に設定して、さらに「top」「left」の値を「0」にして画面の左上に配置します。

そして「position」を使う際は、他の要素の上に重ねることになるので、重なる順番の優先順位を「z-index」で指定します。

今回の場合「z-index」の値を「100」に指定します。

.menubutton {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
z-indexについて
100
50
20

positionで他の要素の上に要素を重なる場合は、重なる順番が重要になります。

CSSプロパティの「z-index」は、重なる順番を意図的に入れ替えることは可能です。

z-indexの値が大きいほど、画面の手前に表示されます。

反対に背景画像など奥に表示させたい時は「-1」のようにマイナス値を指定することも出来ます。

z-index: -1;
ポインターの設定

メニューボタンにマウスカーソルを乗せた際に、マウスカーソルをポインターに変更します。

.menubutton {
cursor: pointer;
}
メニューボタンをクリックした時

メニューボタンがクリックされた際に、アニメーションをしながら「×」に変化させます。

メニューボタンの切り替える機能はJavaScriptで行い、CSSでメニューボタンの形を変化するようにします。

アニメーション設定

CSSの状態の変化を検知して、アニメーションをしながら変化する設定をします。

今回はアニメーション対象を「all」に指定して、アニメーションの秒数は「0.5秒」に設定します。

.menubutton i {
transition: all .5s
}
メニューボタンを切り替える機能

メニューボタンの切り替えは、JavaScriptを使って作成します。

ボタンが「押された」「押されていない」を判断するための目印(クラス)を操作する機能を作っていきます。

今回はJavaScriptを使って、HTMLタグに「open」クラスのがある場合は「押された」と判断して、ない場合は「押されていない」を判断するようにします。

<div class="menubutton" onclick="toggle()">
<i></i>
<i></i>
<i></i>
</div>
<script>
function toggle() {
document.querySelector('.menubutton').classList.toggle('open');
}
</script>
<script>
関数名:toggle {
'menubutton'クラスに'open'クラスを付加または消去する;
}
</script>
  1. クラスを付加・削除する機能を作る

    HTMLの「menubutton」クラスの要素に、メニューの表示・非表示を判別する目印を付けたり削除する機能を作ります。

    HTMLの「menubutton」クラスの要素に、目印として「open」クラスを付加もしくは削除する機能をJavaScriptで作ります。

    function toggle()
    関数の名前を「toggle」に設定します。
    document.querySelector('.menubutton')
    HTMLの中にある「menubutton」クラスがある要素を対象に操作します。
    classList
    対象のHTMLタグにクラスの操作します。
    toggle('open')
    対象のHTMLタグに「open」クラスがない時はクラスを付加して、反対に「open」クラスがある時はクラスを消去します。
    <script>
    function toggle() {
    document.querySelector('.menubutton').classList.toggle('open');
    }
    </script>
    <script>
    関数名:toggle {
    'menubutton'のクラスがある要素に'open'クラスを付加または消去する;
    }
    </script>
  2. クリックを検知する

    HTMLのタグに「onclick="toggle()"」を追加します。

    先ほど作成した関数名「toggle」を、クリックを検知した際に関数を呼び出すようにします。

    クリックで呼び出された関数名「toggle」が実行されると、HTMLの「menubutton」クラスの要素に「open」クラスが付加・削除されるようになります。

    <div class="menubutton" onclick="toggle()">
    ・・・
    </div>
メニューボタンの形を変化させる

HTMLの「menubutton」クラスの要素に、新しく「open」クラスが付加された際に、メニューボタンの形を「×」に変化するようにします。

メニューボタンの形を変化させるには、3本の白いバーを個別にCSSを当てる必要があります。

3本の白いバーのうち、上と下のバーは回転させた後に交差するようの移動して、さらに中央のバーは透明にすることで見えなくします。

上の白いバー

上の白いバーを「top: 50%」で上下方向に中心に来るように移動します。

そして、CSSの「rotate(45deg)」で、45度回転します。

.menubutton i:first-child {
top: 10px;
}
.menubutton.open i:first-child {
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}
下の白いバー

下の白いバーを「top: 50%」で上下方向に中心に来るように移動します。

そして、CSSの「rotate(-45deg)」で、反対方向に45度回転します。

.menubutton i:last-child {
top: 30px;
}
.menubutton.open i:last-child {
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}
中央の白いバー

中央の白いバーは不要になるので、CSSプロパティの「opacity」の値を「0」にして非表示にします。

.menubutton i:nth-child(2) {
top: 50%;
}
.menubutton.open i:nth-child(2) {
opacity: 0;
}
transformの値がなぜ2つある？

transformの値に「translate(-50%,-50%)」と「rotate(45deg)」の2つの値が指定されています。

もちろん、要素の回転させているのは「rotate(45deg)」です。

では、どうして「translate(-50%,-50%)」が必要なのでしょうか？

translateを残した理由

理由は位置がズレてしまうからです。

もし下記のようにした場合、元から指定していた「translate(-50%,-50%)」は上書きされて「rotate(45deg)」のみが適用されます。

.menubutton i {
transform: translate(-50%,-50%);
}
.menubutton i:first-child {
/* 下にズレるからNG */
transform: rotate(45deg);
}

そのため「translate(-50%,-50%)」は残した状態で「rotate(45deg)」も適用させる必要があります。

1つ目の値に「translate(-50%,-50%)」2つ目の値に「rotate(45deg)」を半角スペースで空けて記述して両方適用させるようにしましょう。

.menubutton i {
transform: translate(-50%,-50%);
}
.menubutton i:first-child {
/* これならズレないのでOK */
transform: translate(-50%,-50%) rotate(45deg);
}

どうですか？出来ましたか？

急にやることが増えてちょっと難しかったですね...。

この後は先ほど作ったメニューボタンを使って、ドロワーメニューを作ってみましょう。

ドロワーメニュー

<div class="menubutton" onclick="toggle()">
<i></i>
<i></i>
<i></i>
</div>
<div class="menu">
<ul>
<li>About</li>
<li>Access</li>
<li>Recruit</li>
<li>Contact</li>
</ul>
</div>
<script>
function toggle() {
document.querySelector('.menubutton').classList.toggle('open');
document.querySelector('.menu').classList.toggle('open');
}
</script>
/* メニューボタン */
.menubutton { ... }
.menubutton i { ... }
.menubutton i ... { ... }
.menubutton.open i ... { ... }
/* メニュー */
.menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: white;
transition: all .5s;
}
.menu.open {
left: 0;
}
.menu ul {
margin: 40px 0 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 5px 0;
text-align: center;
}
  • About
  • Access
  • Recruit
  • Contact
ドロワーメニュー
左上のメニューボタンをクリックするとメニューがスライドしてきます。
メニュー
  • About
  • Access
  • Recruit
  • Contact

モバイル版のメニュー画面を作っていきます。

  1. メニューを最大まで広げる

    メニュー全体を画面サイズの最大まで広げるようにします。

    左右方向はCSSの「width: 100%」で広げて、上下方向は「height: 100vh」で最大に広げていきます。

    .menu {
    width: 100%;
    height: 100vh;
    }
  2. メニュー上部に余白を作る
    • About
    • Access
    • Recruit
    • Contact

    メニューの上部に「40px」の余白を作ります。

    左上にあるメニューボタンとメニューの文字が重なってしまう可能性があるので、防止策として余白を作っておきましょう。

    .menu ul {
    margin: 40px 0 0 0;
    }
  3. メニューの配置
    • About
    • Access
    • Recruit
    • Contact

    メニューを画面に固定するため、CSSプロパティ「position」の値を「fixed」に設定します。

    また、メニューが画面の左側に隠れている状態にしたいので、今回は「left」の値を「-100%」に設定しておきましょう。

    メニューの横幅の大きさ分(100%)を左側にずらすため、マイナスの値で画面の外に追い出しています。

    もし、わかりにくい場合は「left: -50%」といったようば値で動作を確認してみてください。

    .menu {
    position: fixed;
    top: 0;
    left: -100%;
    }
画面サイズを基準にした単位

CSSの大きさを示す単位には、画面サイズを基準にした単位が存在します。

画面サイズの基準にした「vh」と「vw」について解説します。

100vh
vh

「vh」という単位は「viewport height」の略で画面(ブラウザ)の縦の大きさを基準にした単位です。

今回の「100vh」という値では、画面(ブラウザ)の縦の大きさの最大の高さと同じ大きさを意味します。

もし「50vh」という値にした場合は、画面(ブラウザ)の縦の大きさの半分の大きさと同じ大きさになります。

height: 100vh;
height: 50vh;
100vw
vw

「vw」という単位は「viewport width」の略で画面(ブラウザ)の横の大きさを基準にした単位です。

もし「100vw」という値にした場合は、画面(ブラウザ)の横の大きさの最大の高さと同じ大きさを意味します。

また「50vh」という値にした場合は、画面(ブラウザ)の横の大きさの半分の大きさと同じ大きさになります。

width: 100vw;
width: 50vw;
100vwと100%の違い

CSSの大きさの単位で「100vw」と「00%」の違いについても解説します。

「100vh」は画面サイズの大きさを基準にした単位に対して、「100%」は親要素の大きさを基準にした単位です。

より具体的に言うのであれば、「vw」はブラウザのスクロールバーを含む大きさになります。

つまり、「100vw」と「100%」では、ブラウザによってはスクロールバーの大きさ分(約16px)の差が出ることがあるので注意が必要です。

メニューをスライドして表示
  • About
  • Access
  • Recruit
  • Contact
  1. メニューボタンをタッチ
  2. JavaScriptを使ってスイッチON
  3. メニューを表示
  4. メニューボタンをタッチ
  5. JavaScriptを使ってスイッチOFF
  6. メニューを閉じる
アニメーション設定

CSSの状態の変化を検知して、アニメーションをしながら変化する設定をします。

今回はアニメーション対象を「all」に指定して、アニメーションの秒数は「0.5秒」に設定します。

.menu {
transition: all .5s;
}
メニューボタンを切り替える機能

メニューボタンの切り替えは、JavaScriptを使って作成します。

ボタンが「押された」「押されていない」を判断するための目印(クラス)を操作する機能を作っていきます。

今回はJavaScriptを使って、HTMLタグに「open」クラスのがある場合は「押された」と判断して、ない場合は「押されていない」を判断するようにします。

<div class="menubutton" onclick="toggle()">
<i></i>
<i></i>
<i></i>
</div>
<div class="menu">
<ul>
<li>About</li>
<li>Access</li>
<li>Recruit</li>
<li>Contact</li>
</ul>
</div>
<script>
function toggle() {
document.querySelector('.menubutton').classList.toggle('open');
document.querySelector('.menu').classList.toggle('open');
}
</script>
<script>
関数名:toggle {
'menubutton'クラスに'open'クラスを付加または消去する;
'menu'クラスに'open'クラスを付加または消去する;
}
</script>
  1. クラスを付加・削除する機能を作る

    HTMLの「menu」クラスの要素に、目印として「open」クラスを付加もしくは削除する機能をJavaScriptで作ります。

    先ほどメニューボタンで作った「toggle」関数の中に機能を追加していきます。

    function toggle()
    関数の名前を「toggle」に設定します。
    document.querySelector('.menu')
    HTMLの中にある「menu」クラスがある要素を対象に操作します。
    classList
    対象のHTMLタグにクラスの操作します。
    toggle('open')
    対象のHTMLタグに「open」クラスがない時はクラスを付加して、反対に「open」クラスがある時はクラスを消去します。
    <script>
    function toggle() {
    document.querySelector('.menu').classList.toggle('open');
    }
    </script>
    <script>
    関数名:toggle {
    'menubutton'のクラスがある要素に'open'クラスを付加または消去する;
    }
    </script>
  2. クリックを検知する

    メニューボタンがクリックされた時に「toggle」関数を呼び出すようにします。

    クリックで呼び出された関数名「toggle」が実行されると、HTMLの「menu」クラスの要素に「open」クラスが付加・削除されるようになります。

    <div class="menubutton" onclick="toggle()">
    ・・・
    </div>
メニューをスライドして表示させる

JavaScriptで「open」クラスが付加された時に、CSSで表示するように上書きします。

「left: -100%」で画面の外に飛ばしていたメニューを「left: 0」で戻します。

.menu {
left: -100%;
}
.menu.open {
left: 0;
}

モバイル用のメニューに使えますね！！

今回は左から表示していましたが、上から表示するなどアレンジしてみて下さい。

今度はアニメーションの遅延を追加してさらにオシャレにしちゃいましょう。

遅延アニメーション

<div class="menubutton" onclick="toggle()">
<i></i>
<i></i>
<i></i>
</div>
<div class="menu">
<ul>
<li>About</li>
<li>Access</li>
<li>Recruit</li>
<li>Contact</li>
</ul>
</div>
<script>
function toggle() {
document.querySelector('.menubutton').classList.toggle('open');
document.querySelector('.menu').classList.toggle('open');
}
</script>
/* メニューボタン */
.menubutton { ... }
.menubutton i { ... }
.menubutton i ... { ... }
.menubutton.open i ... { ... }
/* メニュー */
.menu {
position: fixed;
top: 0;
left: -200px;
width: 200px;
height: 100vh;
background: white;
transition: all .5s;
}
.menu ul {
margin: 40px 0 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 5px 0;
text-align: center;
margin-left: -20px;
opacity: 0;
transition: all .5s;
}
.menu.open {
left: 0;
}
.menu.open li {
margin-left: 0;
opacity: 1;
}
.menu.open li:first-child {
transition-delay: .5s;
}
.menu.open li:nth-child(2) {
transition-delay: .7s;
}
.menu.open li:nth-child(3) {
transition-delay: .9s;
}
.menu.open li:nth-child(4) {
transition-delay: 1.1s;
}
  • About
  • Access
  • Recruit
  • Contact
ドロワーメニュー
左上のメニューボタンをクリックするとメニューがスライドしてきます。
メニュー
メニューの基本デザイン
ドロワーメニュー
  • About
  • Access
  • Recruit
  • Contact
横幅の大きさ

メニューの横幅を「200px」にして記事の部分は見えるようにします。

位置

最初はメニューが見えない状態にしたいので、「left: -200px」で画面の外に飛ばします。

メニューの横幅と同じ「200px」をマイナス値で画面の左側に飛ばしています。

表示する時は、「left: 0」にして見える状態にします。

アニメーション

メニューの開閉を「0.5秒」かけてアニメーションします。

.menu {
position: fixed;
top: 0;
left: -200px;
width: 200px;
height: 100vh;
background: white;
transition: all .5s;
}
.menu.open {
left: 0;
}
メニューリストの動作
  • About
  • Access
  • Recruit
  • Contact
透明度の変化

メニューが開く前は透明にして、開いた後は不透明にします。

「opacity」の値を最初は「0」に設定して、メニューが開いた時に「1」にして見えるようにします。

マージンの変化

メニューが開く前はリストを左に寄せて、開いた後は元の位置に戻します。

マージンの左側を「-20px」を指定して、マイナス値でリストを左に寄せます。

メニューが開いた時にマージンの値を「0」にして元の位置に戻します。

.menu li {
opacity: 0;
margin-left: -20px;
}
.menu.open li {
opacity: 1;
margin-left: 0;
}
遅延アニメーションの設定

メニューのリストを「0.5秒」かけて変化させて、さらに開始タイミングを遅らせます。

リスト全体のアニメーション

リストの変化を「0.5秒」かけてアニメーションするようにします。

.menu li {
transition: all .5s;
}
1つ目のリスト(About)の遅延アニメーション

１つ目リスト「About」の表示を「0.5秒」遅らせて表示します。

メニューがスライドして画面内に表示されるのに「0.5秒」かかるので、完全にメニューが表示されたタイミングで1つ目のリストを表示します。

.menu.open li:first-child {
transition-delay: .5s;
}
2つ目のリスト(Access)の遅延アニメーション

2つ目リスト「Access」表示を「0.7秒」遅らせて表示します。

メニューの表示の「0.5秒」と1つ目のリストを表示し始めて「0.2秒後」に、2つ目のリストを表示します。

.menu.open li:nth-child(2) {
transition-delay: .7s;
}
3つ目のリスト(Recruit)の遅延アニメーション

3つ目リスト「Recruit」表示を「0.9秒」遅らせて表示します。

2つ目のリストを表示し始めて「0.2秒後」に、3つ目のリストを表示します。

.menu.open li:nth-child(3) {
transition-delay: .9s;
}
4つ目のリスト(Contact)の遅延アニメーション

4つ目リスト「Contact」表示を「1.1秒」遅らせて表示します。

3つ目のリストを表示し始めて「0.2秒後」に、4つ目のリストを表示します。

.menu.open li:nth-child(4) {
transition-delay: 1.1s;
}
遅延アニメーション

これまでマウスを乗せた時やクリックがきっかけでアニメーションをスタートさせていました。

そのスタートするタイミングを何秒後といったように、アニメーションのスタートを遅らせることが出来ます。

アニメーションの遅延時間を設定
transition-delay: 1s;

アニメーションの遅延は、CSSプロパティの「transition-delay」でアニメーションの開始を遅らせる事が出来ます。

例えば「2秒」遅らせたい場合は、値を「2s」のように指定して使います。

.menu li {
transition: all 2s;
transition-delay: 1s;
}
アニメーションをまとめて設定
transition: all 2s 1s;

アニメーションの設定の際に、アニメーションの「対象」「アニメーション時間」「遅延時間」の順番で、まとめて設定することが可能です。

  1. アニメーション対象
  2. アニメーション時間
  3. アニメーション遅延時間
.menu li {
transition: all 2s 1s;
}
アニメーション設定の記述順番

アニメーションの設定をまとめて行う場合は、記述する順番に注意が必要です。

アニメーションの設定は記述順番によって意味が変わってしまうことがあります。

「all」の位置を変えると？
transition: 2s 1s all;

例えばアニメーション対象の「all」の位置を一番後ろに変えるとどうなるのでしょうか？

この場合は、特に問題はありません。

アニメーション対象は順番に関係なく記述可能です。

秒数を入れ替えると？
transition: all 1s 2s;

例えば、アニメーションの時間を「2秒間」で遅延時間を「1秒後」に設定したい場合を想定します。

上記のように、指定する秒数をそれぞれ入れ替えて記述した場合は、意味が反対になってしまいます。

この場合「1秒かけて変化」「2秒遅延する」という意味なってなってしまいます。

アニメーションをあえて遅延させると少しオシャレになりますね。

ただし、アニメーションのの使いすぎや長時間の遅延は利用者とってストレスになります。

アニメーション待ちになってしまわないか気をつけながら使ってみてください。

複雑なアニメーション

今度はより複雑なアニメーションを作ってみましょう。

いろんな動きが出来たり、アニメーションを繰り返したり出来ます。

まずは、ローディングアニメーションを作ってみましょう。

ローディングスピナー

<div class="spinner"><div>
.spinner {
width: 50px;
height: 50px;
border: solid 5px transparent;
border-bottom-color: #01558d;
border-radius: 50%;
animation: guru-guru 1s linear infinite;
}
@keyframes guru-guru {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
ローディングスピナーのデザイン

HTMLとCSSでローディングスピナーを作成します。

CSSでボーダーを作成して、1つだけに色の付けて回転させるようにします。

  1. 正方形を作る

    まずは「50px」の正方形を作ります。

    .spinner {
    width: 50px;
    height: 50px;
    }
  2. 透明のボーダーを作る

    正方形の周りに「5px」のボーダーを作成します。

    ボーダーの色は、透明を意味する「transparent」を指定します。

    .spinner {
    border: solid 5px transparent;
    }
  3. 下のボーダーのみに色を入れる

    透明のボーダーの下の部分のみを紺色に変更します。

    下のボーターの色を変える場合は、CSSプロパティの「border-bottom-color」で色を変更することが出来ます。

    今回は、紺色のボーダーを作るため、値にカラーコードの「#01558d」に指定します。

    .spinner {
    border: solid 5px transparent;
    border-bottom-color: #01558d;
    }
  4. 円にする

    最後に正方形から円形に変更します。

    .spinner {
    border-radius: 50%;
    }
要素を回転させる
回転アニメーションを作る

CSSの「@keyframes」を使って、要素を1回転させるアニメーションを作成します。

アニメーションの始まり(0%)から終わり(100%)まで、一連のアニメーションをCSSで作成します。

要素の角度が0度の状態を起点(0%)して、要素を360度回転させた状態を終点(100%)にします。

要素の回転は、transformの値に「rotate」の関数を使って角度を指定することが出来ます。

degrees: 角度

@keyframes guru-guru {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
アニメーション設定

先ほど作成したアニメーション名「guru-guru」を、対象の要素にアニメーションの設定をします。

CSSプロパティの「animation」で、4つの値「アニメーション名」「時間」「変化の速さ」「繰り返す回数」を順番にまとめて設定します。

  1. アニメーション名: guru-guru
  2. アニメーション時間: 1s (1秒)
  3. 変化の速さ: linear (一定)
  4. 繰り返し回数: infinite (無限)
.spinner {
animation: guru-guru 1s linear infinite;
}
変化の速さ

アニメーションの変化の速さに緩急を付けたり、一定の速さで変化するように調節することが出来ます。

変化の速さは全部で5つの中から選択することが可能です。

上の図では、全て同じタイミングで開始して、同じ秒数でアニメーションさせています。

ease(初期値)

ゆっくりと始まり、急激に加速して、終わりに向かって徐々に遅くなります。

何も指定しなかった場合、初期値の「ease」が自動で適用されます。

.spinner {
animation: guru-guru 1s;
}
.spinner {
animation: guru-guru 1s ease;
}
ease-in

ゆっくりと始まり、だんだんと加速していき、最後は急停止します。

.spinner {
animation: guru-guru 1s ease-in;
}
ease-out

急激に始まり、終わりに向かって減速していきます。

.spinner {
animation: guru-guru 1s ease-out;
}
ease-in-out

ゆっくりと始まり、緩やかに加速していき、終わりに向かって減速していきます。

.spinner {
animation: guru-guru 1s ease-in-out;
}
linear

一定の速さで変化します。

.spinner {
animation: guru-guru 1s linear;
}
繰り返す回数

アニメーションを繰り返す回数を設定することが出来ます。

何も指定しない場合

アニメーションは1回で終わります。

.spinner {
animation: guru-guru 1s linear;
}
数字を入れた場合

指定した数字の回数分を繰り返します。

下のサンプルは3回アニメーションします。

.spinner {
animation: guru-guru 1s linear 3;
}
「infinite」の場合

無限に繰り返します。

.spinner {
animation: guru-guru 1s linear infinite;
}

どうでしたか？アニメーションに仕組みは少し難しいですね。

ローディングアニメーションは、読み込み中でも利用者を飽きさせない効果があります。

ぜひ使ってみて下さい。

次はふわっと表示するフェードインという方法を紹介します。

フェードイン

<div class="switch" onclick="toggle()">
ふわっと
</div>
<div class="fadein">
<div class="hello">
HELLO
</div>
</div>
<script>
function toggle() {
document.querySelector('.hello').classList.toggle('open');
}
</script>
.fadein {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.switch {
width: 80px;
font-size: 14px;
background: #920000;
color: white;
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: all 0.5s;
}
.switch:hover {
background: #f05050;
}
.hello {
width: 200px;
height: 150px;
background: #01558d;
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.hello.open {
opacity: 1;
animation: Fade-In 1s;
}
@keyframes Fade-In {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
ふわっと
HELLO
フェードイン
アニメーション開始のタイミング

ボタンが押された際に、アニメーションを開始して表示するようにします。

「ふわっと」ボタンが押された際に「hello」クラスのある要素に対して「open」クラスを付加・削除するような処理を追加します。

「hello」クラスがある要素に、新しく「open」クラスが付加された場合に、フェードインのアニメーションを行います。

<div class="switch" onclick="toggle()">
ふわっと
</div>
<div class="fadein">
<div class="hello">
HELLO
</div>
</div>
<script>
function toggle() {
document.querySelector('.hello').classList.toggle('open');
}
</script>
<script>
関数名:toggle {
'hello'クラスに'open'クラスを付加または消去する;
}
</script>
アニメーションの準備

まず最初に、アニメーションが始まる前の状態を作ります。

アニメーションが開始される前は見えない状態にする必要があります。

あらかじめ要素を透明にしておいて、ボタンが押された時に元に戻すようにします。

.hello {
opacity: 0;
}
.hello.open {
opacity: 1;
}
フェードインのアニメーションを作る

CSSの「@keyframes」を使って、フェードインのアニメーションを作成します。

アニメーションの開始(0%)の時は、要素を透明にして、さらにCSSの「translateY」で下に「30px」ズラした状態から開始します。

アニメーションの終了(100%)に向けて、要素を不透明に戻していき、さらに要素の位置を元に位置に戻します。

@keyframes Fade-In {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
アニメーション設定

作成したアニメーション名「Fade-In」を、対象の要素にアニメーションの設定をします。

今回はアニメーションの時間を「1秒」に設定してアニメーションするように設定します。

.hello.open {
animation: Fade-In 1s;
}
アニメーションが終わった時

すぐに消える...

CSSの「@keyframes」で作ったアニメーションは、アニメーションが終了すると元の状態に戻るという特徴があります。

つまり、アニメーション終了後は、アニメーションが始まる前の状態に戻ってしまうので、せっかくフェードインさせた要素が透明に戻ってしまうという現象が発生します。

もし、アニメーション終了後に消えてしまう場合は、下記の方法を試してみてください。

アニメーション終了後の状態を上書きする

アニメーション終了後に元に戻ってしまうのであれば、アニメーション終了後にCSSで理想の状態に上書きしようという方法です。

今回の例ではアニメーション開始前は、要素を「opacity: 0」で透明した状態にしていました。

アニメーション終了後は再び「opacity: 0」戻ってしまうので、openクラスがある時は「opacity: 1」で要素を不透明に上書きをします。

.hello {
opacity: 0;
}
.hello.open {
opacity: 1;
animation: Fade-In 1s;
}
アニメーション終了後の状態を維持する

アニメーション終了後に元の状態に戻るという特徴を、終了後の状態を維持するように特徴自体を変える方法です。

つまり、アニメーションが終わったら「終わった状態で維持してね」という設定を行います。

アニメーションの状態を設定する場合は、CSSプロパティ「animation-fill-mode」を使って、その値を「forwords」に設定します。

下のコードの例では、CSSの「@keyframes」の100%の状態を維持するようになります。

.hello {
opacity: 0;
}
.hello.open {
animation: Fade-In 1s;
animation-fill-mode: forwards;
}
@keyframes Fade-In {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

ちょっと難しいですね...

実際にコードと動作を確認しながら作ってみると理解が進むかもしれません。

次はスクロールアナウンスを作りましょう。

スクロールアナウンス

<div class="scroll-icon">
<div class="dot"></div>
<div class="text">
Scroll
</div>
</div>
.scroll-icon {
position: relative;
width: 60px;
height: 100px;
border: solid 4px black;
border-radius: 30px;
box-sizing: border-box;
}
.scroll-icon .dot {
position: absolute;
top: 20px;
left: 50%;
transform: translate(-50%,-50%);
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
opacity: 0;
animation: announce 1.5s linear infinite;
}
.scroll-icon .text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
}
@keyframes announce {
0% {
top: 10px;
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
70% {
top: 80px;
opacity: 0;
}
100% {
top: 80px;
opacity: 0;
}
}
Scroll
スクロールアナウンス
アイコンの作成
Scroll

スクロールが出来ることを知らせる動くアイコンを作成します。

まずはアイコンを全てHTMLとCSSで作っていきましょう。

  1. ベースを作る

    アイコンのベースとなる輪郭を作成します。

    横幅「60px」高さ「100px」の長方形を作成して、さらに「4px」の大きさのボーダーを作成します。

    そして、長方形の角を横幅の半分の大きさである「30px」の大きさで角を丸めます。

    また、要素の大きさの基準をボーダー領域も含ませるため、CSSプロパティ「box-sizeing」の値を「border-box」に指定します。

    .scroll-icon {
    width: 60px;
    height: 100px;
    border: solid 4px black;
    border-radius: 30px;
    box-sizing: border-box;
    }
  2. ドットの作成

    直径「10px」の黒い丸い点を作成します。

    そして「scroll-icon」の要素をドット配置の基準にするため「position: relative」を設定しておきましょう。

    作成した丸い点を、上から「20px」左から「50%」の位置に配置して、さらに「translate(-50%,-50%)」で位置を微調整します。

    また、アニメーションの際にドットを表示したいので、ドットをあらかじめ透明にしておきます。

    .scroll-icon {
    position: relative;
    }
    .scroll-icon .dot {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 50%;
    opacity: 0;
    }
  3. テキストの作成
    Scroll

    アイコンの下に「Scroll」のテキストを作成します。

    フォントサイズを「20px」の大きさにして、テキストがアイコンの下に来るように「top: 100%」で配置します。

    .scroll-icon {
    position: relative;
    }
    .scroll-icon .text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    }
アニメーションの作成

ドットが移動して最後は消えるアニメーションを作成します。

今回は、アニメーションを「移動」「消える」の2つに分けて考えていきましょう。

アニメーションの開始(0%)と終了(100%)をこのように変化させます。

ドットの移動
  1. 0%〜70%

    ドットが上から下に移動するようにします。

    ドットの位置を「top: 10px」から「top: 80px」まで移動します。

  2. 71%〜100%

    ドットがその場に止まり続けるようにします。

    ドットの位置を「top: 80px」で停止した状態にします。

ドットの透明・不透明
  1. 0%〜20%

    透明な状態のドットを徐々に戻していきます。

    ドットの透明度を「opacity: 0」から「opacity: 1」へ変化させます。

  2. 21%〜50%

    ドットが常に見える状態にします。

    ドットの透明度を常に「opacity: 1」にします。

  3. 51%〜70%

    ドットを徐々に透明にしていきます。

    ドットの透明度を「opacity: 1」から「opacity: 0」へ変化させます。

  4. 71%〜100%

    ドットを透明のままにします。

    ドットの透明度を「opacity: 0」のままにします。

@keyframes announce {
0% {
top: 10px;
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
70% {
top: 80px;
opacity: 0;
}
100% {
top: 80px;
opacity: 0;
}
}
アニメーションの設定

先ほど作成したアニメーション名「announce」を、対象の要素にアニメーションの設定をします。

アニメーションの時間を「1.5秒」かけて無限に繰り返すように設定します。

.scroll-icon .dot {
animation: announce 1.5s linear infinite;
}

これはそんなに難しくはないですね。

アニメーションさせてるのはドットの部分だけです。

スクロール出来る事を知らせたい時に作ってみて下さい。

擬似要素を使う

続いては擬似要素について少し触れてみましょう。

アニメーションから少し離れてしまいますが、後でちゃんと戻ってきます。

擬似要素とは

擬似要素
召喚！！！
キャハハ！！！

擬似要素とは、CSSで新しく要素を作り出したモノです。

HTMLでは要素が1つしかありませんが、CSSで要素を作ると最大2つまで架空の要素を作りだすことが出来ます。

下のコードの例では、1つのHTMLの要素「wizard」ですが、CSSで2つの擬似的な要素「Before要素」「After要素」を作成した例です。

<div class="wizard">要素使い</div>
.wizard::before {
content: 'Before魔人';
}
.wizard::after {
content: 'After魔人';
}
擬似要素の種類
<div class="wizard">
::before
要素使い
::after
</div>

擬似要素には「Before要素」「After要素」の2つが存在します。

実在する要素は「wizard」の1つのみですが、その中に擬似的に「before」と「after」の要素を作り出すことが可能です。

Before要素
  • ヒツジ父
  • ヒツジ母
  • ヒツジ

Before要素は、本体の要素の前に生成される要素です。

例えば、リストの左側に「☆」マークをつけたい場合は、下記のコードで該当する全てのリストに擬似要素を生成して表示します。

<ul>
<li>ヒツジ父</li>
<li>ヒツジ母</li>
<li>ヒツジ</li>
</ul>
li::before {
content: "☆";
color: #920000;
}
After要素
  • ヒツジ父
  • ヒツジ母
  • ヒツジ

After要素は、本体の要素の後に生成される要素です。

例えば、リストの右側に「!!」マークをつけたい場合は、下記のコードで該当する全てのリストに擬似要素を生成して表示します。

<ul>
<li>ヒツジ父</li>
<li>ヒツジ母</li>
<li>ヒツジ</li>
</ul>
li::after {
content: "!!";
color: #01558d;
}
擬似要素の使い方

擬似要素を生成するには、必ずCSSプロパティ「content」が必要になります。

もし「content」がない場合は、擬似要素は生成されません。

擬似要素にはただ文字を表示するだけでなく、通常のHTML要素のように自由に形を変えることが出来ます。

テキストを表示する
  • ヒツジ父
  • ヒツジ母
  • ヒツジ

擬似要素でテキストを表示する場合は、CSSプロパティ「content」の値にテキストを入力します。

下記のコードはBefore要素に「☆」を入力して、After要素に「!!」を入力した時に表示される擬似要素です。

<ul>
<li>ヒツジ父</li>
<li>ヒツジ母</li>
<li>ヒツジ</li>
</ul>
li::before {
content: "☆";
color: #920000;
}
li::after {
content: "!!";
color: #01558d;
}
図形を表示する
  • ヒツジ父
  • ヒツジ母
  • ヒツジ

擬似要素で図形を表示する場合は、CSSプロパティ「content」の値を「""」で空で作成します。

contentに空の値を設定している状態で、CSSで好きな図形を作りましょう。

下記のコードはBefore要素・After要素共に四角形の図形を作成した際の擬似要素です。

<ul>
<li>ヒツジ父</li>
<li>ヒツジ母</li>
<li>ヒツジ</li>
</ul>
li {
display: flex;
align-items: center;
}
li::before,
li::after {
content: "";
width: 10px;
height: 10px;
display: block;
background: #01558d;
transform: rotate(45deg);
}

擬似要素はあまり使わなそうに感じられるかもしれません。

擬似要素の使い道を知って、うまく活用できるととても便利なものになります。

これからいくつか例をあげて実際に作ってみましょう。

注釈を入れる

<p>
こちらの商品は9800円<sup>※</sup>です。
</p>
<p class="notes">
消費税は含まれていません。
</p>
<p class="notes">
時期によって価格が変動する可能性があります。
</p>
<p class="notes">
お一人様３箱までとさせていただきます。
</p>
p {
margin: 0;
padding-left: 5px;
border-left: solid 4px #920000;
}
.notes {
font-size: 16px;
color: #920000;
}
.notes::before {
content: '※';
}

こちらの商品は9800円※です。

消費税は含まれていません。

時期によって価格が変動する可能性があります。

お一人様３箱までとさせていただきます。

注釈を入れる

ヒツジです。

CSSの擬似要素で「※」を挿入します。

要素の前(左側)に追加したいので「Before要素」を使います。

「content」の中に「※」を記述します。

.notes::before {
content: '※';
}

Before要素を使った注釈の使い方でした。

この方法は簡単でよく使われる方法です。

次はAfter要素を使ったパンくずリストを作ってみましょう

パンくずリスト

<ol class="breadlist">
<li>トップ</li>
<li>販売</li>
<li>グッズ</li>
<li>ぬいぐるみ</li>
</ol>
.breadlist {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-bottom: dashed 2px #01558d;
font-size: 20px;
}
.breadlist li {
padding: 0;
}
.breadlist li::after {
content: '>';
margin: 0 5px;
}
.breadlist li:last-child::after {
display: none;
}
  1. トップ
  2. 販売
  3. グッズ
  4. ぬいぐるみ
パンくずリスト
  1. トップ
  2. 販売
  3. グッズ
  4. ぬいぐるみ

パンくずリストとは、現在見ているページと他のページの関係性を親子関係で表したリストです。

例えば、今見ているページが「ぬいぐるみ」に関するページの場合、その親ページは「グッズ販売ページ」という事がわかります。

さらにその親ページは「販売ページ」になるので、他の何か販売しているかもと予測が立つようになります。

こういったように、パンくずリストはページ同士の関係性がすぐにわかることで、利用者を案内する役割があります。

パンくずリストの作成

パンくずリストはページの順番を表すため、HTMLタグは「ol」「li」がよく使われます。

これをCSSでデザインしていきます。

  1. リストを横並びにする
    1. トップ
    2. 販売
    3. グッズ
    4. ぬいぐるみ

    Flexboxを使ってリストを横並びにします。

    さらに下に「2px」の破線を引きます。

    .breadlist {
    display: flex;
    border-bottom: dashed 2px #01558d;
    }
  2. リストの後に「>」を入れる
    1. トップ
    2. 販売
    3. グッズ
    4. ぬいぐるみ

    After要素でリストの後(右側)に追加します。

    そして「>」の左右に「5px」の余白を入れます。

    .breadlist li::after {
    content: '>';
    margin: 0 5px;
    }
  3. 最後のリストの「>」を非表示
    1. トップ
    2. 販売
    3. グッズ
    4. ぬいぐるみ

    最後の「ぬいぐるみ」の後には「>」は必要ないので、最後の「>」を非表示にします。

    .breadlist li:last-child::after {
    display: none;
    }

After要素を使ったパンくずリストの作り方でした。

CSSの擬似要素の便利な使い方がまだまだあります。

最後に「Before要素」「After要素」を使って、デザインを作る方法もやってみましょう。

見出しデザイン

<h2 class="head-design">ヒツジの勉強部屋</h2>
<p>ヒツジは約1年かけて本でWeb制作について学びました。</p>
.head-design {
position: relative;
padding-left: 25px;
border-bottom: solid 1px #ababab;
}
.head-design::before {
position: absolute;
content: "";
top: 50%;
left: 0;
width: 12px;
height: 12px;
transform: translateY(-10px);
background: #01558d;
border-radius: 50%;
}
.head-design::after {
position: absolute;
content: "";
top: 50%;
left: 10px;
width: 10px;
height: 10px;
background: #2798e4;
border-radius: 50%;
}
ヒツジの勉強部屋

ヒツジは約1年かけて本でWeb制作について学びました。

早く何でもできるようになりたいと焦ってしまうこともたくさんありました。

しっかり地道に頑張る事が最大の近道です。かんばりましょう。

見出しデザイン
ヒツジの勉強部屋

CSSの擬似要素を使って、見出しのデザインを作成します。

擬似要素の「Before要素」と「After要素」で、2種類の円を作って見出しの左側に来るようにします。

  1. 見出しの左側に余白を作る
    ヒツジの勉強部屋

    見出しの左側に「25px」の余白を作ります。

    .head-design {
    padding-left: 25px;
    }
  2. 擬似要素で2つの円を作成する

    擬似要素の「Before要素」と「After要素」で、大きさと色が異なる円を2つ作ります。

    .head-design::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #01558d;
    border-radius: 50%;
    }
    .head-design::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #2798e4;
    border-radius: 50%;
    }
  3. ２つの円を中央付近に配置
    ヒツジの勉強部屋

    見出しの「head-design」クラスに対して、CSSの「position: relative」を追加します。

    擬似要素の円を見出しの左側に寄せて、さらに上下方向の中央線の下に来るように「top: 50%」で配置します。

    また、明るい青の「After要素」の円を、左から「10px」移動したところに配置します。

    .head-design {
    position: relative;
    padding-left: 25px;
    }
    .head-design::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    }
    .head-design::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 10px;
    }
  4. 円の位置を調整
    ヒツジの勉強部屋

    暗い青の「Before要素」の円を、現在の位置から「10px」上にズラします。

    上下方向の中央線の上に来るように配置します。

    .head-design::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-10px);
    }
  5. 下線部を引く
    ヒツジの勉強部屋

    見出しの下に薄い灰色の線を引きます。

    .head-design {
    border-bottom: solid 1px #ababab;
    }

擬似要素は装飾を追加するためにも使います。

さまざまな使い方があるので、いろんな場面で試してみてください。

上級アニメーション

ちょっと高度なアニメーションを作ってみましょう。

擬似要素の「Before要素」と「After要素」を使ってアニメーションします。

ちょっと難しいですが、余裕がある時にやってみて下さい。

リストアニメーション

<div class="mokuji">
<ul>
<li>CSSについて</li>
<li>CSSの書き方</li>
<li>CSSテクニック</li>
<li>CSSの注意点</li>
</ul>
</div>
.mokuji ul {
margin: 40px auto;
padding: 0;
list-style: none;
max-width: 400px;
}
.mokuji li {
position: relative;
margin: 12px 0;
padding-left: 20px;
cursor: pointer;
}
.mokuji li::before,
.mokuji li::after {
position: absolute;
content: '';
background: #01558d;
transition: all .2s;
}
.mokuji li::before {
top: calc(50% - 5px);
left: 0;
width: 10px;
height: 10px;
transition-delay: .2s;
}
.mokuji li::after {
top: 100%;
left: 10px;
width: 0;
height: 2px;
transition-delay: 0s;
}
.mokuji li:hover::before {
top: 100%;
height: 2px;
transition-delay: 0s;
}
.mokuji li:hover::after {
width: 100%;
transition-delay: .2s;
}
  • CSSについて
  • CSSの書き方
  • CSSテクニック
  • CSSの注意点
リストのデザイン
CSSについて

CSSの擬似要素を使って、リストのデザインを作っていきます。

今回は「Before要素」をリストの左側に置いて、そして「After要素」でリストの下に線を作ります。

  1. リストの左側に余白を作る
    CSSについて

    リストの左側に「20px」の余白を作ります。

    .mokuji li {
    padding-left: 20px;
    }
  2. Before要素をリストの左側に置く
    CSSについて

    擬似要素の「Before要素」を使って、紺色の大きさ「10px」の正方形を作成します。

    リストに「position: relative」を追加して、Before要素が上下方向の中央に来るように配置します。

    CSSの「calc関数」を使って、リストの上から「50%」の位置まで移動して、その後正方形の半分の大きさ「5px」を上に戻すようにして配置します。

    .mokuji li {
    position: relative;
    padding-left: 20px;
    }
    .mokuji li::before {
    position: absolute;
    content: '';
    top: calc(50% - 5px);
    left: 0;
    width: 10px;
    height: 10px;
    background: #01558d;
    }
  3. After要素をリストの下に置く
    CSSについて

    擬似要素の「After要素」を使って、紺色の細い線をリストの下に配置します。

    リストの下に来るように「top: 100%」で下まで移動して、さらに左から「10px」の位置に「left: 10px」に配置します。

    After要素の横幅はあらかじめ「width: 0」にしておき、リストをホバーした時に横幅を大きくしていきます。

    .mokuji li {
    position: relative;
    padding-left: 20px;
    }
    .mokuji li::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 10px;
    width: 0;
    height: 2px;
    background: #01558d;
    }
calc関数ってなに？

今回は位置の指定に「calc」という計算してくれる関数を使いました。

Calc関数は「%」「px」など、さまざま単位を計算してくれる関数です。

calc関数の計算方法

例えば上記ような「10px」の正方形を中央に配置したい時の計算を考えます。

「100px」の高さのある要素の中で正方形を中央に寄せる時、その半分の高さ「50%」は「50px」の位置に配置されます。

さらにそこから正方形の半分の大きさ「5px」を引いて上に修正します。

計算結果は「top: 45px」が指定されます。

.mokuji li::before {
position: absolute;
content: '';
top: calc(50% - 5px);
left: 0;
}
calc関数を使わない方法

calc関数を使わないで、「translate」でもほぼ同じ働きが可能です。

上から「50%」の値で中央まで移動します。

その後に「translateY」で高さを「5px」上に戻して中央寄せしています。

.mokuji li::before {
position: absolute;
content: '';
top: 50%;
left: 0;
transform: translateY(-5px);
}
ホバーアニメーション
CSSについて

リストをマウスカーソルでホバーした時にアニメーションさせます。

リストのホバーと擬似要素の変化

リストをホバーした時に、擬似要素の「Before要素」と「After要素」の形をCSSで変更します。

Before要素の変化

リストの左側にあるBefore要素の正方形を、ホバーした時に「2px」まで潰して、さらに「top: 100%」でリストの下に移動します。

.mokuji li::before {
top: calc(50% - 5px);
left: 0;
width: 10px;
height: 10px;
}
.mokuji li:hover::before {
top: 100%;
height: 2px;
}
After要素の変化

リストの下にあるAfter要素の下線部を、ホバーした時に「width: 100%」まで広げます。

.mokuji li::after {
top: 100%;
left: 10px;
width: 0;
height: 2px;
}
.mokuji li:hover::after {
width: 100%;
}
アニメーション設定

擬似要素に対してアニメーションを設定します。

アニメーション対象を「all」にして、アニメーション時間を「0.2秒間」に設定します。

.mokuji li::before,
.mokuji li::after {
transition: all .2s;
}
アニメーションの遅延設定

リストをホバーした時・ホバーをしない時に分けて、アニメーションの遅延時間を設定します。

Before要素とAfter要素を分けて遅延時間を設定します。

Before要素の遅延設定

リストをホバーした時は、Before要素のアニメーションを「0秒」遅延させて開始します。

反対に、リストをホバーが解除された時は、Before要素のアニメーションを「0.2秒」遅延させてから元に戻します。

.mokuji li::before {
transition-delay: .2s;
}
.mokuji li:hover::before {
transition-delay: 0s;
}
After要素の遅延設定

リストをホバーした時は、After要素のアニメーションを「0.2秒」遅延させて開始します。

反対に、リストをホバーが解除された時は、After要素のアニメーションを「0秒」遅延させてから元に戻します。

.mokuji li::after {
transition-delay: 0s;
}
.mokuji li:hover::after {
transition-delay: .2s;
}
0秒の遅延の理由

アニメーションの遅延をしないのに、なぜ「0秒」の遅延を記述する必要があったのでしょうか？

その理由は「ホバーした時」と「ホバーを解除した時」に、Before要素とAfter要素の遅延時間を入れ替えるために上書きが必要だからです。

アニメーションの遅延時間を上書きしない場合は、アニメーションの順番を入れ替えることができないので、遅延時間「0秒」という設定が必要になります。

リストをホバーした時
CSSについて

リストをホバーした時は、Before要素のアニメーションが終了してからAfter要素をアニメーションさせるのが理想です

そのため、Before要素を「0秒」遅延させて(遅延なし)、After要素は「0.2秒」遅延させてからアニメーションを開始します。

.mokuji li:hover::before {
transition-delay: 0s;
}
.mokuji li:hover::after {
transition-delay: .2s;
}
ホバー解除した時のCSS
CSSについて

リストのホバーを解除した時は、After要素のアニメーションが終了してから、Before要素をアニメーションをさせる理想です

つまり、After要素のアニメーションが終わるまで、Before要素は「0.2秒」遅延させて待機をしなくてなりません。

.mokuji li::before {
transition-delay: .2s;
}
.mokuji li::after {
transition-delay: 0s;
}

はい！ちょっと難しいですね！

アニメーションの遅延設定は、ぜひ遅延する・しないで動作を確認してみてください。

きっと意味が理解できるはずです。

波紋エフェクト

<div class="waves">
<div class="round" data-text="Wave">
<div class="wave"></div>
</div>
<div class="round" data-text="Wave2">
<div class="wave"></div>
</div>
</div>
.waves {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #a7dcff;
}
.round {
position: relative;
width: 120px;
height: 120px;
cursor: pointer;
}
.round::before {
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
background: #3992ce;
border-radius: 50%;
z-index: 2;
}
.round::after {
position: absolute;
content: attr(data-text);
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 30px;
color: white;
z-index: 3;
}
.wave::before,
.wave::after {
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
border: solid 2px white;
border-radius: 50%;
z-index: 1;
}
.round:hover .wave::before,
.round:hover .wave::after {
animation: wave 2s linear infinite;
}
.waves:hover .wave::after {
animation-delay: .7s;
}
@keyframes wave {
0% {
width: 50px;
height: 50px;
opacity: 1;
}
70% {
opacity: 1;
}
90% {
width: 100%;
height: 100%;
opacity: 0;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
波紋のデザイン

要素をマウスカーソルでホバーした時に、波紋が広がるようなアニメーションを作成します。

基本部分のデザイン作成

要素がホバーされる前のデザインを作っていきましょう。

青い円を作って、円の上にテキストを重ねるようにします。

  1. 基本フレームの作成

    まずはアニメーションの範囲の基準となる基本フレームを作成します。

    要素の大きさ「120px」の正方形を作ります。

    この横幅・高さ「120px」の範囲が、波紋が広がる最大の範囲になります。

    .round {
    position: relative;
    width: 120px;
    height: 120px;
    }
  2. 円の作成

    「round」クラスのBefore要素を使って、直径「60px」の円を作成します。

    そして、作成した円を基本フレームの中央に来るように配置します。

    .round::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #3992ce;
    border-radius: 50%;
    }
  3. テキストを円の上に重ねる

    「round」クラスのAfter要素を使って「Wave」というテキストを円の上に重ねていきます。

    CSSプロパティの「left: 0」「right: 0」で左右を最大まで広げて、その後テキストを中央寄せします。

    また、擬似要素の「content」の値に「attr()」という関数を使って、HTMLからCSSへ「Wave」というテキストを引き継いで表示させます。

    .round::after {
    position: absolute;
    content: attr(data-text);
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 30px;
    color: white;
    }
  4. 円とテキストの重なる順番の指定

    円とテキストが重なる順番を「z-index」で指定します。

    /* 円 */
    .round::before {
    z-index: 2;
    }
    /* テキスト */
    .round::after {
    z-index: 3;
    }
attr(data-text)ってなに？

HTMLタグに「data-text="Wave"」というデータ属性を記述しました。

この「data-text」とは、HTMLタグごとに個別で任意をデータを追加することが出来ます。

データ属性

HTMLのタグごとにデータ属性というものを付与することができます。

記述の仕方は「data-〇〇」のように、〇〇の部分がデータの名前になるので自由に決めることができます。

<div data-title="Sheep"></div>
<div data-text="Wave"></div>
attr関数

CSSのattr関数は、HTMLタグのデータ属性を取得する際に使う関数です。

取得したいデータ属性をattr関数に指定すると、その値がCSSに引き継がれて代入されます。

HTMLタグごとに設定したデータ属性の値を、擬似要素の「content」に代入する構造にする事で、少ない記述量でCSSの再利用がしやすくなります。

div::before {
content: attr(data-title);
}
div::after {
content: attr(data-text);
}
波紋の作成

waveクラスの「Before要素」と「After要素」を使って2つの波紋を作成します。

  1. 波紋のデザイン作成

    waveクラスの擬似要素を使って、2つの波紋を作成します。

    擬似要素の「Before要素」と「After要素」で直径「50px」の円を作成して、さらに白いボーダーを「2px」の大きさで作成します。

    作成した２つの円を、基本フレームの中央に来るように配置します。

    .wave::before,
    .wave::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    border: solid 2px white;
    border-radius: 100%;
    }
  2. 波紋を後ろに隠す

    アニメーションが始まる前には波紋を見せたくないので、要素の重なりを利用して波紋を隠します。

    z-indexを使って「1〜3」で重なる順番を指定します。

    数字が大きいほど出前に重なって表示されます。

    .wave::before,
    .wave::after {
    z-index: 1;
    }
    .round::before {
    z-index: 2;
    }
    .round::after {
    z-index: 3;
    }
波紋のアニメーション

波紋アニメーションの作成と要素をホバーしたときにアニメーションが開始されるようにします。

波紋アニメーションの作成

波紋のアニメーションは、円を拡大していきながら最後はフェードアウトしていく仕組みで作成します。

今回は「円の拡大」と「フェードアウト」の2つに分けて考えていきましょう。

円を拡大する
  1. 0%〜90%

    円の直径を「50px」から最大の「100%」まで広げます。

  2. 91%〜100%

    円の直径は「100%」のまま停止した状態にします。

円をフェードアウトする
  1. 0%〜70%

    アニメーションが始まる状態は、円が見える状態にして開始します。

    円の透明度を「opacity: 1」で見える状態を維持します。

  2. 71%〜90%

    円をフェードアウトします。

    円の透明度を「opacity: 1」から「opacity: 0」に徐々に変化させていきます。

  3. 91%〜100%

    円を透明のままアニメーションを終了します。

@keyframes wave {
0% {
width: 50px;
height: 50px;
opacity: 1;
}
70% {
opacity: 1;
}
90% {
width: 100%;
height: 100%;
opacity: 0;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
アニメーションの設定

「round」クラスの要素のホバーした時に波紋アニメーションを開始するようにします。

波紋のアニメーションを「2秒間」かけて繰り返します。

また、２つの波紋はタイミングをズラす必要があるので、片方の円のアニメーションを「0.7秒」遅延させてアニメーションを開始します。

<div class="round" data-text="Wave">
<div class="wave"></div>
</div>
.round:hover .wave::before,
.round:hover .wave::after {
animation: wave 2s linear infinite;
}
.waves:hover .wave::after {
animation-delay: .7s;
}

とても複雑なアニメーションですね。

CSSアニメーションは印象をパッと変えてくれます。

ぜひCSSアニメーションも習得してみてくだい。

デザインレシピ