豆腐とコンソメ

豆腐とコンソメ

もろもろのプログラム勉強記録

COBOLERが頑張る:日めくりカレンダー:参考サイト

前回からの続き

tohutokonsome.hatenablog.com

さて、早速日めくりカレンダーをつくっていきたいと思います。

学んだこと

Webブラウザで参照できるようにしたいので、HTMLを書くんだろうなというのは、さすがに知ってます。

どっから手をつけようかな、というところで、以下が目についたので無料体験だけ簡単にやってみました。
techacademy.jp

TeckAcademy

オンラインで、プログラムを学ぶことができるとのこと。
手厚い?チャットサポートなんかがついている。無料体験中も、課題を提出したら、1時間後ぐらいには「引き続きがんばってください!」的なメッセージが届いた。

無料体験の中身は、結構あっさりしている。ちゃんとお金を払えば効果はありそう。
ただ、4週間で12万という値段なので、働いていて帰って勉強する時間があんまりとれない人だとちょっと勿体無い気もする。

とりえあえず3時間程度で学習が終わった。

一番の発見は「Cloud9」というサイトの存在。
こんな便利なものがあるのね。

ドットインストール

動画で学習できるサイト。全部無料な上に、わかりやすい。
HTML入門とCSSをざっくり見た。

http://dotinstall.com/lessons/basic_html_v3
http://dotinstall.com/lessons/basic_css_v3
http://dotinstall.com/lessons/basic_css3_v2
http://dotinstall.com/lessons/basic_css_layout


アニメーションをCSSで作成することができるんだ、すげえというとこが一番の発見。
こちらも、ざっくり3.4時間程度で詰め込んだ。が、怪しいところは多い。

CSSレイアウトを学ぶ

CSSレイアウトを学ぶ

ドットインストールと重なる部分は多いけれども、参考になるものが多かった。
ただ、記載通りの挙動通りにならないものがちょこちょこあって、自信がない。
何かを間違えているのだろう。

これは1時間30分〜2時間程度かかった気がする。

CodePen

ここまで、なんとなくレイアウトってこう作るんだよというものを見てきたのですが
やりたいアニメーションをどう実現すればいいのか、いまいちよくわかっていませんでした。
しかし、CSS、アニメーションでインターネットの森をさまよっているときに、見つけてしまいました。

codepen.io

これがやりたかったことじゃ!
作者様に感謝しつつ、コードを見ることにした。
CodePenはHTML・CSSJavaScriptを編集・共有できるサービスみたいです。

再度、ドットインストール

上記、ソースを覗いていてみると、JavaScriptの知識が必要そうなことがわかったので以下を学習。

http://dotinstall.com/lessons/basic_javascript_v2

さらに、よくみるとjQueryの技術も使っていたことがわかったので以下を学習。
http://dotinstall.com/lessons/basic_jquery_v2

このへん、結構時間かかった上に、いろいろ怪しい。

とりあえず、今はこんな感じ

ピンちゃんと撮ったチェキを素材に作成した。
なぜHTMLではなく、gifかというと、PCで開いたらおもくっそレイアウトが崩れることがわかったので
一旦、gifにした。

https://c1.staticflickr.com/1/350/31816328123_38e6c03852_o.gif


次回は、PCとスマホ、どちらでもそれなりに見えるすることを目標とする。
また、記憶があるうちにHTML・CSSを貼っておきたい。
CodePenの使い方がさっぱりわからない。