HTML用のプログラム学習カテゴリ
ローディングを作ってみた【HTMLとCSS】
![Thumbnail of post image 110](https://prog.temochic.com/wp-content/uploads/2019/11/loading-sample-150x150.png)
何を作るのか
ローディングのサンプル
完成したもの気をつけたところ・特になし
今回のことで得た知識・ローディングの速さは今まで気にしたことがなかったですが、
速さによって感じ方が
エンドロールサンプル【Keyframes+animation】
![Thumbnail of post image 087](https://prog.temochic.com/wp-content/uploads/2019/11/endroll-sample-150x150.png)
何を作るのか
エンドロールのサンプル
完成したもの気をつけたところ・特になし
今回のことで得た知識今までは0%から100%の書き方しか知りませんでしたが、
fromからtoは0
アニメーションサンプル【Keyframes+animation】
![Thumbnail of post image 197](https://prog.temochic.com/wp-content/uploads/2019/11/animation-sample-150x150.png)
何を作るのか
アニメーションのサンプル
完成したもの気をつけたところ・keyframesやanimationの使い方
今回のことで得た知識・animationの時間や表示方法
ソースTOPに戻るを使ってみた【HTMLとCSSとJS】
![Thumbnail of post image 122](https://prog.temochic.com/wp-content/uploads/2019/11/back-to-top-sample-150x150.png)
何を作るのか
TOPに戻るのサンプル
完成したもの気をつけたところ・position fixedとbottomとrightとz-index
今回のことで得た知識・fixedの指定をする場合
【よくある質問】アコーディオンで作ってみた【HTMLとCSSのみ】
![Thumbnail of post image 187](https://prog.temochic.com/wp-content/uploads/2019/11/accordion-sample-150x150.png)
何を作るのか
アコーディオンのサンプル
完成したもの気をつけたところ・important、transitionの値 ease、transformの値 rotate
今回のことで得た知識・i
カルーセルを使ってみた【Bootstrap】
![Thumbnail of post image 152](https://prog.temochic.com/wp-content/uploads/2019/11/carousel-sample-150x150.png)
何を作るのか
カルーセル (bootstrap)
完成したもの気をつけたところ・特になし
今回のことで得た知識Bootstrapはチュートリアルやそのまま使えるソースコードがすでに用意され
カウントダウン時計を作ってみた【HTMLとCSSとJS】
![Thumbnail of post image 145](https://prog.temochic.com/wp-content/uploads/2019/11/countdown-clock-sample2-150x150.png)
何を作るのか
カウントダウン時計
完成したもの気をつけたところ・HTMLとCSSは最適なものを使う
・コード量は少なく簡潔に行う
・日付の算出方法
今タブレイアウトを作ってみた【HTMLとCSSとJS】
![Thumbnail of post image 084](https://prog.temochic.com/wp-content/uploads/2019/11/tab-layout-sample-150x150.png)
何を作るのか
タブレイアウト
完成したもの気をつけたところ・HTMLとCSSは最適なものを使う
・コード量は少なく簡潔に行う
・タブが切り替わる仕組み
・JavaS
ポリゴン(polygon)を使ってみた【HTMLとCSS】
![Thumbnail of post image 096](https://prog.temochic.com/wp-content/uploads/2019/11/polygon-sample-150x150.png)
何を作るのか
grid+polygonで色々並べてみる
完成したもの気をつけたところ・HTMLとCSSは最適なものを使う
・コード量は少なく簡潔に行う
・polygonやcir
グリッドレイアウトを使ってみた【HTMLとCSS】
![Thumbnail of post image 023](https://prog.temochic.com/wp-content/uploads/2019/11/grid-layout-150x150.png)
何を作るのか
グリッドレイアウト
完成したもの気をつけたところ・HTMLとCSSは最適なものを使う
・コード量は少なく
・グリッドの行列の指定方法
今回のことで得た知識