みんな、キータ（Quiita）知ってる？

おはよーございます。

ねこです。

皆さん、キータ（Quiita）というプログラマのための情報交換サイト、ごぞんじですか？

ねこがjavascript始めた頃にとおぉ～ってもお世話になりました。

ねこは今日からの二週間、このなかの記事を一日一つ読んでいこうとおもいます。

恥ずかしながらねこはまだフレームワークなどというものにばっちり触れたことがありません。

なので、アメリカ一番人気のLaravelという記事を探して、これから勉強していこうと思います。

こちら、キータさまのサイトです。http://qiita.com/

皆さんも読んでみましょう！

 

それから、今ねこはウェブデザインの仕事もしています。

ありがたいことに日本の「クラウドワークス」というところで仲介していただいたお客様です。

そこで、こんな重宝なアニメーションのツールがあったので、ご紹介しておきます。

初めての方でもＯＫ！

では、まず、こちらのサイト（http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps）を開いてhtmlとcssをコピー、そしてこちらのgifファイルを同じディレクトリに入れて呼び出せるようにします。

treehouse http://blog.teamtreehouse.com/

Guil Hernandez writes on July 14, 2014 参照

 

[html]

<div class="monster">div> 

[css]

body { background: #24aecd;}.monster { width: 190px; height: 240px; margin: 2% auto; background: url('(あなたのgifファイルのディレクトリ)/monster.png') left center; animation: play .8s steps(10) infinite;}@keyframes play { 100% { background-position: -1900px; }}

[gif ファイルはこちらから]

http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png

必ず「保存」してくださいね。

どうですか？かんたんだったでしょう？うごきましたか？ＣＳＳ３おそるべし！ですよね。

 

ねこでした。