なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。 以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

CSSのinfiniteは無限ループです。デュレーションの値(infiniteの後)を書くことで3つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]

Read More

SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

信号機を描くコードをサンプルとして載せました。 ぞれぞれ解説します。 […]

Read More

【HTML5】video要素について

y223xbi2によるPixabayからの画像 HTML5から新たに追加されたvideo要素について書いていこうと思います。音声と同様に動画ファイルにも様々な形式がありますが、モダンブラウザをカバーするにはいまのところmp4があればいいということが個人的に調べ検証する中でわかりました。 私は動画編集が苦手で勉強中です。どうしてもPhotoshopを使い慣れてしまい、移行できずにいます。しかしPho […]

Read More

【HTML5】audio要素について

ひさしぶりの更新になってしまいました。 個人的にHTML5から新たに追加されたaudio要素を使う機会があったのでまとめたいと思います。 audio要素は音声を再生するためのタグです。しかしブラウザによって再生可能なファイル形式が異なり、ひとつのファイル形式だけをsrc属性に書いても対応しきれないのが現状です。ただし、音声の場合は私が個人的に調べて検証した結果では、mp3形式とogg形式があればモ […]

Read More