30DAYSトライアル2nd
DAY0：Webコーダーとして仕事できるようになる30日
今回の「#30DAYSトライアル」では、 「Webコーダーとして仕事できるようになる」 を目標に、30日の課題を作成しました。前提としては、第1週目の「DAY25」あたりまで完了させておいてください！…
はにわまん
DAY1：XDからヘッダーとメインビジュアルのコーディング
HTMLとCSSの基礎を学び、コーディング模写まで経験している方なら「できる！」ということで、今回の課題は全編を通じてXDのデザインカンプからコーディングするということをやっていただこうと思います。 …
DAY2：XDから横並びのカードのコーディング
以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY1で作成したメインビジュアルの続きとして追加する形になります。 → https://xd.adobe.com/spec/58…
DAY3：「PerfectPixel」を使ってチェック ＆ 修正
DAY2までに作ったサイトを「PerfectPixel」を使ってズレがないかチェックしてみましょう！ まずは以下の画像を右クリック → 名前を付けて画像を保存 で手元のPCにダウンロードしてください。…
DAY4：ボタン、見出しを自在に作れるようになる
見出しやボタンのパーツが利用頻度がたぶん一番多いです。 HTMLやCSSで自在に作れる状態がベストです。そこまでいかなくても、コピペしたとしてどの値を変更すれば見た目が変わるか分かる状態にしておきまし…
DAY5：XDからニュース系のコーディング
以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY2までにコーディングした続きに書いていく感じになります。 → https://xd.adobe.com/spec/d2cde…
DAY6：XDからテーブルとGoogleMap埋め込みのコーディング
以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY5の続きからコーディングする感じになります。 → https://xd.adobe.com/spec/ac246482-0f…
DAY7：XDからお問い合わせフォームのコーディング
以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY6の続きにコーディングしていく感じになります。 → https://xd.adobe.com/spec/ff02d2d2-b…
DAY8：XDからフッターのコーディング
以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY7の続きにコーディングしてく感じになります。 → https://xd.adobe.com/spec/bb6eef73-71…
DAY10：マウスホバー時の動きを付ける
ボタンやリンクの上にボタンを乗せた時にどういったアニメーションをさせるかの代表的なパターンを覚えていきましょう。 :hoverの擬似クラスと一緒に、transitionのCSSプロパティも理解しておく…
DAY11：Webフォント、デバイスフォントの理解
デザインカンプのフォントをコーディングで表現する時、以下の3パータンのいずれかで対応します。 デバイスフォント Webフォント 画像 優先順位としては、デバイスフォント > Webフォント &g…
DAY12：コーディング後の品質を担保するテスト
コーディングの品質を担保するために、最低限チェックしておいた方がいい（と思う）項目がいくつかあります。 わたしは新卒でシステムエンジニアとして働いていたのですが、プログラミング（実装）後は「テスト指示…
DAY13：Progate：JavaScript Ⅰ
これからサイトに動きを付けていきますが、その前にJavaScriptとjQueryの基礎をProgateで学んでください。ここから6日間は久しぶりのProgateです。 → JavaScript 学習…
DAY14：Progate：JavaScript Ⅱ
引き続き、ProgateでJavaScriptを進めてください。 → JavaScript 学習コース Ⅱ | プログラミングの入門なら基礎から学べるProgate[プロゲート] 繰り返し処理 配列 …
DAY15：Progate：JavaScript Ⅲ
引き続き、ProgateでJavaScriptを進めてください。JavaScritpはここまででOKです。 → JavaScript 学習コース Ⅲ | プログラミングの入門なら基礎から学べるProg…
DAY16：Progate：jQuery 初級編
続いてjQueryです！jQueryはJavaScriptを扱いやすくしたライブラリです。 JavaScriptよりHTMLの要素を直感的に操作できるので、とても扱いやすいです。JavaScriptよ…
DAY17：Progate：jQuery 中級編
引き続きjQueryを進めてください。モーダルとアコーディオンはこの後のコーディングでも使います！（クラスの追加なども使いがち） → jQuery 学習コース 中級編 | プログラミングの入門なら基礎…
DAY18：Progate：jQuery 上級編
引き続き、jQueryを進めてください。※ ページ内を移動は後ほど使うので特に重点的に！ jQueryはこれで最後です。明日からは、実践的にJavaScriptやjQueryを使ってサイトを作っていき…
DAY19：スライダー（カルーセル）を作る
スライダーを作っていきましょう。スライダーはカルーセルとも呼ばれたりします。 作ると言っても、ライブラリの使い方を覚えることと、そのライブラリをカスタマイズできればとりあえずはOKだと思います。 課題…
DAY20：スクロールに応じて要素を「フワッ」と登場させる
スクロールに応じて要素が「フワッ」と登場させるアニメーションもWebサイトで好まれがちな動きです。今回はこの動きを実装してもらいます。 課題：スクロールに応じて要素を「フワッ」と登場させる DAY11…
DAY21：スマホ時のドロワーメニューを作る
スマホ時のグローバルメニューをドロワーメニューで作っていきましょう。 スマホ時のドロワーメニューを作る 以下のようなドロワーメニューを作成してください。「drawer-open」の方が通常時、「dra…
DAY22：スムーススクロールとフローティングアイテムを作る
内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。この動きのことをスムーススクロールと呼んだりします（呼び方はスムーズスクロールの説もあ…
DAY23：ページ内リンクでクリックした要素に対して下線を引く（クリックイベントの処理）
個人的にjQueryでよく使うのが要素をクリックした時の処理です。 今回は、ページ内リンクでクリックした要素に対して下線を引くという処理を加えてください。 課題：ページ内リンクでクリックした要素に対し…
DAY24：Q and Aをアコーディオンでコーディング
アコーディオンを使った実践的なコーディングをしてみます。アコーディオンがよく使われる代表的なアイテムが「Q and A」です。 課題：Q and Aをアコーディオンでコーディング アコーディオンについ…
DAY25：モーダルを作る
よくコーディングで登場するモーダルをデザインカンプを見ながら作って行きましょう！ 課題：モーダルを作る Contactセクションの「プライバシーポリシー」のリンクをクリックした時にモーダルで内容が表示…
DAY26：Progate：Sass Ⅰ
CSSは管理がとても大変… その大変なCSSの管理を楽にすべく登場したのがSassという言語です。 使えるようになっておくと、コーディングが早く、ミスが少なく、管理が楽になります。 今回の…
DAY27：VSCodeに「Easy Sass」導入してSassで書いてみる
Webサイト（ブラウザ）はSassを読み取りことはできません。あくまでもHTMLやCSSだけです。 なので、Sassで記載した内容をCSSに変換してあげる処理が必要になります。変換する方法（ツール）は…
DAY28 ～ 30：実践コーディング
最終課題という感じで、もう一回LPのコーディングをしてみましょう！難易度は最初よりも高いと思います。ボリュームもあるので3日間の期間を設けました。 実際のお仕事でも（急ぎでなければ）3日から5日ほど期…