スクラッチ猫と一緒にトップに戻る！

お気づきの方もいると思いますが、縦に長いページで下までスクロールすると、右下からピョコッと猫が出てきます。

このスクラッチ猫はみんな大好きグリフパッチさんによってカスタマイズされたコスです。

高画質ペンでプレイする紹介URLをコピーするハートを押しに行くメモを書く

非公開メモ（このパソコンだけに保存しています）

この子をクリックすると自動でページの一番上まで戻ってくれます！

トップに戻るボタンは、どうやって作ったの？

せっかくなので作り方も載せます。ただまぁ、へーって感じでOKです。これはHTMLとCSSとJavaScriptを使っているのでスクラッチとはあんまり関係ないから。

まずスクラッチ猫の画像を用意する

グリフパッチさんのコスを参考にしてこんな（↓）画像を作成しました。

パラパラ漫画みたいに、すべてのモーションがコマ切りになった画像をつなげていく感じです。

ok-scratch

っというかパラパラ漫画をJavaScriptで動かしてるんです。

HTMLで出力する

まずこの画像をHTMLで出力してあげます。

コードはこんな感じ↓

<div class="scratch-cat"></div>

ちなみにこの段階では何も出力されない。ここからCSSあてる。

ok-scratch

説明のために実際よりも簡略化してるよ

CSSをあてる

HTMLもCSSも見た目を整える記述だけど、違いはHTMLは骨組みでCSSは肉付けみたいな感じ。

家で例えるとHTMLは柱とか基礎とか、それだけじゃあ家の中が丸見えだけど家造りには絶対に必要なコアとなる部分。HTMLの段階ではあまりオシャなことは気にしなくていい。CSSは、HTMLを利用してどれだけオシャにするかを記述する。

ということで上のHTMLにCSSをあてて、スクラッチキャットが出力されるようにする。コードはこんな感じ↓

.scratch-cat{
    position   : fixed; // 画面のどこかに固定する指定
    right      : -100px; // 画面の右側から-100pxに固定する指定
    bottom     : 15px; // 画面の下から15pxに固定する指定
    width      : 100px;　// 横幅は100px
    height     : 100px; // 高さも100px
    background : url(xxx/images/scratch-cat.png) no-repeat; // 画像の指定
}

各値の説明はスラッシュで書かれたコメント部分を参照のこと。

このままだと、動かない。そこで今度は動きを出すためのJavaScriptを作る。