カテゴリー: Web制作

僕のポートフォリオサイトのトップページにアクセスすると、ローディングアニメーションが再生されるようになっています（マイクロバスが走っている様子）。

これです。

これは当初、アニメーションGIFで作成して公開していましたが、閲覧環境によってはどうにも動きがガタついて見えてしまい、特にスマートフォンの場合それが顕著でした。せっかくレスポンシブ対応なのに・・・。

これではいかんと言うことで、早速GIFではなく、SVGファイルに作り直し、これをCSS3のアニメーションで表現させてみました。

イラストを分解してSVGに

まずマイクロバスのイラストを、車体部分とタイヤ2本に分解して、3つの独立したsvgファイルとして書き出します。

これらを、それぞれ別な動きをさせることで、あたかも走っているかのように見せていきたいと思います。

元々このイラストはAdobe IllustratorCCで作成しているので、これをそのまま「SVG形式」で書き出すことができます。HTMLファイルから、このsvgファイルを読み込んで、CSSで動きをつける、という流れになります。

※SVG（Scalable Vector Graphics）とは、1998年に誕生したベクターイメージフォーマットで、画像ファイル形式の一つです。ラスターイメージと違い、画像を拡大表示しても画質が劣化せず、ファイルサイズも小さく抑えられるなどのメリットがあります。

CSSで動きをつける

まずは、車体のsvgファイルに対して、以下の一連の動きをつけていきます。

1. 前部を斜め左上を向くように、回転
2. そのまま少しだけ真上に、移動
3. 後部を斜め右上に回転させ、平行になるように
4. 前部を斜め右下を向くように、回転
5. そのまま少しだけ真下に、移動
6. 後部を斜め右下に回転させ、平行になるように

これを連続でループさせます。

ではこの一連の動きを、CSS3でアニメーションさせるには、どうすれば良いのかというところですが、まずアニメーションを定義づけする必要があります。

上記のように、車体部分を”#bus”というIDでタグを付与し、”#bus”のアニメーションを指定します。それぞれのプロパティと値の解説は以下の通り。

animation-name:anime;　　←アニメーションの名前をつける。この場合は”anime”とつけた。
animation-duration:0.5s;　　←一連の動き一回分に要する時間。この場合は0.5秒と設定。
animation-timing-function:linear;　　←アニメーションの進行の度合い。この場合は、一定のスピードで動く。
animation-iteration-count:infinite;　　←アニメーションのループ回数。この場合は無限。

これで車体部分のアニメーションの定義が完了しました。

次に、上記でアニメーション定義した”anime”に実際の動きをつけます。

上記のコードの1行目を見てください。

何やら”@keyframes”などという単語が出てきましたが、これは定義したアニメーションの動きを指定するためのプロパティです。

キーフレームとはアニメーションにおいて、時間軸上の特定の位置（フレーム）の、要素（今回の場合はバスとタイヤですね）の状態や位置を決定する印です。
CSSでキーフレームを指定する場合は、パーセンテージで指定することができます。
すなわち、0%はアニメーションの初期値。100%はアニメーションの終わりをあらわします。

@keyframes　　アニメーションの名前　{ キーフレーム { 動きをつけるプロパティ　：　値 ;} }

上記の規則でCSSを指定していきます。細かい上記のコードの解説は以下の通り。

@keyframes anime　←”anime”にキーフレームを挿入
0% {transform:rotate(0deg) ;}　　←アニメーションの一番はじめ。初期値。
15% {transform:rotate(3deg) ;}　　←要素を3度回転させる。
30% {transform:translateY(5px) ;}　　←要素を5px真上に移動させる。
45% {transform:rotate(0deg) ;}　　←回転を元に戻し、平行に。
60% {transform:rotate(-3deg) ;}　　←要素を-3度回転させる。
75% {transform:translateY(-5px);}　　←要素を5px真下に移動させる。
100%{transform:rotate(0deg) ;}　　←アニメーションの一番最後。初期値に戻す。

これらの一連の動きを0.5秒で動かします。無限ループで再生したアニメーションが以下です。

こうなります。

あとは残りの二つのタイヤの動きだけとなります。
タイヤの動きは、単純に上下に動かすだけです。タイヤの動きを加えた具体的な完成コードは以下の通り。

上記のように、タイヤをそれぞれ、”tire01″ “tire02″とし、それぞれのアニメーションを”tanime01” “tanime02″としてアニメーション定義を行いました。

animation-name:tanime01;　　←アニメーションの名前をつける。この場合は”tanime01″とつけた。
animation-duration:0.2s;　　←一連の動き一回分に要する時間。この場合は0.2秒と設定。
animation-timing-function:ease;　　←アニメーションの進行の度合い。この場合は、アニメーションの一連の動きの、はじまりとおわりがややゆっくり動く
animation-iteration-count:infinite;　　←アニメーションのループ回数。この場合は無限。

コードの38行目をみてください。二つ目のタイヤのみ、CSSの動きに”animation-delay:0.1s;”と書いてありますが、これはアニメーションの動きを0.1秒遅らせることを意味しています。

何故わざわざ、二つ目のタイヤだけこのような指定をしているかというと、二つのタイヤ、前輪と後輪の動きにズレを出すことによってより、車が走っているような表現を出すためです。

さて、これで今回のアニメーションは完成となります。これを実際に動かすと・・・

以上で、SVGファイルをCSSでアニメーションさせる方法はおしまいです。お疲れ様でした。

ここまでお読みくださり、誠にありがとうございました。

ウェブサイト上で、他のページや他のサイトに飛ぶための機能を「ハイパーリンク機能」と言いますが、通常ブラウザで閲覧する際はユーザーがそれとすぐわかるように、そのテキスト箇所のみ色が変わっていたり下線が引いてあったりします。

デザイナーやコーダーの皆さんであれば、単にアンカータグで囲むだけで勝手にブラウザがテキストに下線を引いてくれるのはご承知の通りかと思います。

しかしデフォルトのままだと何か寂しいというか、見た目を色々と工夫してみたくなるのは制作者としては当然の欲求でしょう。と言うことで、今回はCSSを使用してカスタマイズする方法を備忘録として書き記しておこうと思います。

基本の「text-decoration: underline;」

基本はやはり、下記のようにマウスオーバーで下線のオンオフを切り替える手法ですね。

a:link { text-decoration: underline;}

a:hover { text-decoration: none;}

:link 疑似クラスの[ text-decoration ]を[ none ]に設定するのは、ユーザビリティ上好ましくないです。ユーザーが見てすぐそれと判別できるよう、下線を引いておくのがベターでしょう。しかし、この方法ですと下線のみ色を変更することができません。

CSSで下線を引いてみる

であれば、[ border-bottom ]で下線を引きましょう。

a{ border-bottom: 1px  solid  orange }

この方法であれば、下線の色のみを変更することができますし、

[ solid ]・・・1本線

[ double ]・・・2本線

[ dotted ]・・・点線

[ dashed ]・・・破線

のように、線の種類を変更することもできます。

他にも[ groove ]、[ ridge ] などの指定もありますが、正直パッと見てよく分からないのであまり使いどころが無い気がします。

background: linear–gradient で文字の背景に下線を引く

テキストに、まるで蛍光マーカーで線を引いたような効果を出すため、線形グラデーションを表現するための[linear–gradient() ]を指定する方法が一時期流行っていましたが、この方法を使って下線を引くこともできます。

background: linear–gradient( black,  black ) no-repeat;

background-size: 100%  1px;

background-position: 0  1.2em;

上記のように指定すると、黒の下線が指定箇所の横幅100%で1pxの太さの線が文字の上から1.2emの場所に引かれることになります。ちなみに、上記の場合[ padding-bottom ]で余分にスペースを取っておかないと、下線が見切れて表示されませんのでご注意を。

CSS3での新たなプロパティ

まだ勧告候補の段階ですが、text-decorationについて新たなプロパティが定義されているようです。現在ほとんどのブラウザで未対応ですが、[ text-decoration-style ]プロパティで[ wavy ]と指定することで波線を引くこともできるようです。

いずれどんどんと、新しい表現方法が使用できるようになるのでしょう。楽しみですね。