デイトラWeb制作コースの中級編　アニメーションの付け方編

こんにちは、プログラミングスクールのカモのヒカルです。

現在デイトラWeb制作コースで月に５万円稼ぐためにプログラミングを勉強中です。

この記事を書いたのはこんな人

• IT業界未経験でプログラミング初めてみた
• プログラミングスクールに入って稼げるか試してみた
• ブラック企業の社畜奴隷

こんにちはヒカルです。

デイトラ中級編ではデザインカンプからのコーディングを主なカリキュラムとしています。

デザインカンプからのコーディングは実務では必須のスキルとなります。

デイトラWeb制作コースの中級編の中盤では実践でよく使うアニメーションの実装を行っていきます。

実際にデザインカンプからのコーディングをやってみて、アニメーションなどをつけてみた感想を書いていきます。

コーディング実務の流れ

まずクライアント(依頼主)からデザインカンプと仕様書、画像などが送られてきます。

私達コーダーはこのデザインカンプを元にコーディングをしていきます。

WEB制作の流れは大体こんな感じです

1. ヒアリング
2. 仕様書の決定(設計図みたいなモノ)
3. デザイナーがデザインカンプを作成
4. コーダーがコーディング
5. 案件によってはWordPress化
6. 納品
7. コーダー

コーダーの仕事はデザインカンプからHTML,CSS,Javascriptなどのコーディングを行うことです。

プロカモが目指しているのはここ

1. ヒアリング
2. 仕様書の決定(設計図みたいなモノ)
3. デザイナーがデザインカンプを作成
4. コーダーがコーディング
5. 案件によってはWordPress化
6. 納品
7. コーダー

このコーディングをすることによって月に５万円稼ぐことを目標としています。

サイトのワードプレス化なんかもできたらカッコイイですね

人によってはデザインも自分で作るプログラマーもいるようです。

スキルが多いと掛け算で仕事が増えて行きます。

スキルが多いと掛け算で仕事が増えて行きます。

まずはコーディングで月に５万円稼ぐことを目標にしよう

デイトラで解説を行っているのは以下のアニメーション

• ドロワー
• アコーディオン
• スライダー
• モーダルウィンドウ
• ボタンを押すとトップまでスムーススクール
• スクロールするとふわっと表示

どれもよく見るアニメーションばかりですね

このアニメーションや機能をHTML,CSS,Javascritをもちいて実装していきます。

ですがコーディングをしていれば必ずわからない箇所が出てきます。

コーディングで分からないところが必ず出てくる

分からないところがあるときにどうする

ググる（Google検索）

まず一番最初にやることは検索することです。上記アニメーションは誰も一般的なモノなので検索すればいくらでも答えが出てきます。

検査をするときのコツは

簡潔にキーワードの組み合わせで検索することです。

ドロワーの検索例をあげると

例

ドロワー　コード

ドロワー　JavaScript

ドロワー　jQuery

などです。

クラス名、id名などは自分で変える必要がありますが、ほぼコピーでいけるはずです。

ググるチカラはコーダーに必須

質問する（分かる人に聞いてしまえば早い）

質問できる人がいる人は質問する方法もあります。

正直コーディングは自分で考えていてもほとんど何も浮かんできません。そらなら、詳しい人にさっさと質問してしまった方が断然いいです。

質問するときのコツ

具体的に話す

自分はどこまで分かっていて、何がわからないのか。

どんなエラーが出るのか。

参考にしたサイトなど

なるべく具体的に質問した方が良い回答が返ってきやすいです。

コードをコピーして貼り付ける

質問するときは具体的にコードをコピーして貼り付けて質問することもいいと思います。

このときコピーできない画像などはダメです。

質問に答える人もコードをコピーアンドペーストして質問に答えるのでコードがコピーできない画像はNGです

とはいえやっぱりコーダーの調べのもの基本はGoogle検索となります。

分からないところがあるときはとにかくググる