通常のセレクタにプロパティ transition を設定し、
通常のセレクタ内に設定したその他のプロパティ: 値から、
擬似クラスで設定したそれに対応するプロパティ: 値までアニメーションします。
.color
{
color: #000;
transition: 0.2s ease-in-out;
}
.color:hover
{
color: #00ffff;
}
値は 動作開始から動作終了までの時間 (s は second / 秒 の略)、
半角スペースを挟んで easing の種類を記述します。
アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、
一連の CSS アニメーションの中間ステップを制御します。
これにより、アニメーションの中間ステップを プロパティ transition よりも詳細に制御できます。
.loader
{
position: fixed; /* 固定配置 */
z-index: 1; /* 深度 */
margin: auto; /* 以下中央配置 */
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 26px; /* 幅 */
height: 26px; /* 高さ */
border-radius: 50%; /* 角丸 (円) */
border: 3px solid #333; /* 枠 */
border-right-color: transparent; /* 枠右取る */
animation: loading 1s linear infinite; /* アニメーション */
}
@keyframes loading
{
0%
{
transform: rotate(0deg);
}
50%
{
transform: rotate(180deg);
}
100%
{
transform: rotate(360deg);
}
};
@keyframes 後の loading 部分は custom-ident と呼ばれ識別子として使われるユーザー定義の任意の文字列を意味します。
アニメーションの始まりである 0% (from) から アニメーションの終わりである 100% (to) を示し、
その間のアニメーションの設定をプロパティ: 値で指定します。
@keyframes で指定したアニメーションは対象のセレクタ内にプロパティ animation を設定することにより稼働します。
値は custom-ident 名、アニメーションが終了するまでの時間、easing、繰り返し回数 (半角数字) を半角スペースで区切り設定します。
再生を無限に繰り返すには繰り返し回数 (半角数字) を infinite に設定します。
プロパティ animation は複数の設定をまとめて設定できるプロパティになります。
その他にも詳細にアニメーションを設定することが可能です。
深く知りたい場合は @keyframes, animation 等で検索してみてください。
レスポンシブ WEB デザインの際のメニューの挙動を解説します。
最初に PC 用のメニューを用意します。
<div class="container"> <ul class="menu"> <li><a href="news">NEWS</a></li> <li><a href="concept">CONCEPT</a></li> <li><a href="photo">PHOTO</a></li> <li><a href="profile">PROFILE</a></li> <li><a href="author">AUTHOR</a></li> <li><a href="access">ACCESS</a></li> </ul> </div>
.container
{
margin: 0 auto; /* 中央配置 */
width: 950px; /* 幅 */
}
.menu
{
list-style: none; /* ・取る */
margin-top: 65px; /* 外側上部余白 */
font-family: Arial; /* フォント */
font-size: 0; /* フォントサイズリセット */
font-weight: bold; /* 太字 */
}
.menu li
{
display: inline-block; /* 変換 */
width: 16.66%; /* 幅 (100 ÷ 6 = 16.66666) */
font-size: 14px; /* フォントサイズ再設定 */
}
.menu a
{
text-decoration: none; /* 下線削除 */
color: #000; /* 黒 */
transition: 0.2s ease-in-out; /* アニメーション */
}
.menu a::before /* 疑似要素 */
{
content: ''; /* なし */
position: absolute; /* 絶対配置 */
display: block; /* 変換 */
margin-top: 20px; /* 外側上部余白 */
width: 30px; /* 幅 */
height: 2px; /* 高さ */
background-color: #d3d3d3; /* 背景色 */
transition: 0.2s ease-in-out; /* アニメーション */
}
.menu a:hover
{
color: #0099cc; /* マウスオーバーで色変化 */
}
.menu a:hover::before
{
width: 60px; /* 疑似要素マウスオーバーで幅変化 */
}
次にハンバーガーメニューを設置し、隠しておきます。
<div class="hm"> <input type="checkbox" id="hm"> <label for="hm"> <!-- 属性 for の属性値は input の属性 id の属性値と対応 --> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </label> </div>
.hm
{
display: none;
}
次に横幅が 950px 以下になった際のメディアクエリを設定します。
@media screen and (max-width:950px) /* 画面サイズが 950px 以下に読み込まれるメディアクエリ */
{
.container
{
margin: 0; /* 中央配置を削除 */
width: 100%; /* 幅の値を上書き */
}
.menu
{
display: none; /* ハンバーガーメニューを押すまでは隠れています */
position: fixed; /* 固定配置 */
z-index: 1; /* 深度を設定 */
top: 0; /* 上部に固定 */
margin: 0; /* メディアクエリ外で設定した余白を削除 */
padding: 70px 0; /* 上下に内側の余白を設定 */
width: 100%; /* 画面いっぱいに広がるように */
background-color: #000; /* 背景色 */
}
.menu li
{
display: block; /* メディアクエリ外で設定した inline-block を再変換 */
width: 100%; /* メディアクエリ外で設定した width を上書き */
text-align: center; /* テキスト中央配置 */
}
.menu li:not(:last-child) /* 最後の li 以外 */
{
margin-bottom: 35px; /* 下部の外側に余白 */
}
.menu a
{
color: #fff; /* メディアクエリ外で設定した色を上書き */
}
.menu a::before
{
margin: 20px auto 0; /* 外側余白、上: 20px, 左右: 中央, 下: 0 */
left: 0; /* 中央配置のため */
right: 0; /* 中央配置のため */
width: 70px; /* 幅再設定 */
background-color: #666; /* 背景色再設定 */
}
/* ここからハンバーガーメニュー */
.hm
{
display: block; /* メディアクエリ外で none にしていたので再設定 */
position: fixed; /* 固定配置 */
z-index: 2; /* 深度を設定 */
top: 5px; /* 上部 */
right: 5px; /* 右部 */
width: 50px; /* 幅 */
height: 50px; /* 高さ */
cursor: pointer; /* マウスオーバーでカーソルをポインタに */
user-select: none; /* ユーザーが選択できないように */
}
.hm label /* input[type=checkbox] のクリックエリア */
{
display: block; /* 変換 */
width: 50px; /* 幅 */
height: 50px; /* 高さ */
background-color: #000; /* 背景色 */
}
.hm input[type=checkbox] /* input 自体は画面上に隠しておく */
{
z-index: -1; /* 深度を負の値に */
width: 1px; /* 最小サイズに */
height: 1px; /* 最小サイズに */
position: absolute; /* 絶対配置 */
visibility: hidden; /* 見えないようにする */
}
.hm span /* 三本線 */
{
position: absolute; /* 絶対配置 */
left: 12px; /* 左部 */
border-top: 2px solid #808080; /* 線の描写 */
width: 25px; /* 幅 */
transition: 0.2s ease-in-out; /* アニメーション */
}
/* それぞれの線の位置 */
.hm .top
{
top: 14px;
}
.hm .middle
{
top: 24px;
}
.hm .bottom
{
top: 34px;
}
#hm:checked ~ label span /* input がチェックされた時の span の背景色 */
{
border-color: #fff;
}
/* input がチェックされた時の span それぞれの挙動 */
#hm:checked ~ label .top
{
top: 24px; /* 上部位置変更 */
transform: rotate(135deg); /* 角度変更 */
}
#hm:checked ~ label .middle
{
opacity: 0; /* 透過 */
transform: rotate(15deg); /* 角度変更 */
}
#hm:checked ~ label .bottom
{
top: 24px; /* 上部位置変更 */
transform: rotate(-135deg); /* 角度変更 */
}
}
次にハンバーガーメニュークリック時にメニューが表示、非表示される機能を追加します。
メニューの表示、非表示は JavaScript を使用します。
JavaScript には jQuery と呼ばれるライブラリがあります。
jQuery を使用することにより JavaScript で 0 からプログラミングせずとも、
比較的簡単にプラグイン (機能拡張) の開発が可能で、
今回はこの jQuery のプラグインを使用します。
まずは jQuery とその UI の機能拡張したプログラムを読み込みます。
以下 HTML を <head> 内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
次に jQuery のプラグインも読み込みます。
以下をダウンロード、解凍し、index.html と同じ階層に「js」というフォルダを作成し、その中に格納してください。
hm.js
その上で以下のように記述してください。
<script src="./js/hm.js"></script>
hm.js には主に以下のような動作をするようにプログラムされています。