Animation,HTML & CSS

Thumbnail of post image 009

何を作るのか

ローディングのサンプル

完成したもの

気をつけたところ

・特になし

今回のことで得た知識

・ローディングの速さは今まで気にしたことがなかったですが、
 速さによって感じ方が

Animation,HTML & CSS,JavaScript

Thumbnail of post image 075

何を作るのか

エンドロールのサンプル

完成したもの

気をつけたところ

・特になし

今回のことで得た知識

今までは0%から100%の書き方しか知りませんでしたが、

fromからtoは0

Animation,HTML & CSS,JavaScript

Thumbnail of post image 131
何を作るのか

アニメーションのサンプル

完成したもの

気をつけたところ

・keyframesやanimationの使い方

今回のことで得た知識

・animationの時間や表示方法

ソース

HTML & CSS,JavaScript

Thumbnail of post image 132

何を作るのか

TOPに戻るのサンプル

完成したもの

気をつけたところ

・position fixedとbottomとrightとz-index

今回のことで得た知識

・fixedの指定をする場合

HTML & CSS

Thumbnail of post image 107
何を作るのか

アコーディオンのサンプル

完成したもの

気をつけたところ

・important、transitionの値 ease、transformの値 rotate

今回のことで得た知識

・i

Bootstrap,HTML & CSS

Thumbnail of post image 131
何を作るのか

カルーセル (bootstrap)

完成したもの

気をつけたところ

・特になし

今回のことで得た知識

Bootstrapはチュートリアルやそのまま使えるソースコードがすでに用意され

HTML & CSS,JavaScript

Thumbnail of post image 115

何を作るのか

カウントダウン時計

完成したもの

気をつけたところ

・HTMLとCSSは最適なものを使う

・コード量は少なく簡潔に行う

・日付の算出方法

HTML & CSS,JavaScript

Thumbnail of post image 123

何を作るのか

タブレイアウト

完成したもの

気をつけたところ

・HTMLとCSSは最適なものを使う

・コード量は少なく簡潔に行う

・タブが切り替わる仕組み

・JavaS

HTML & CSS

Thumbnail of post image 022

何を作るのか

grid+polygonで色々並べてみる

完成したもの

気をつけたところ

・HTMLとCSSは最適なものを使う

・コード量は少なく簡潔に行う

・polygonやcir

HTML & CSS

Thumbnail of post image 040

何を作るのか

グリッドレイアウト

完成したもの

気をつけたところ

・HTMLとCSSは最適なものを使う

・コード量は少なく

・グリッドの行列の指定方法

今回のことで得た知識