月の変わり目なので、前回と同じように先月の学習を振り返ってみようと思います。
6月上旬
Linuxの基礎コマンドを学習
Git Pull Request、GitHub flow学習
- チーム開発において、レビュワーに作成したコードを確認してもらうPull Requestの方法、プログラムを、安全に効率よく開発を行うことができるGitHub flowについて学習しました。
- 中でもGitコマンドでの動きをGUIで確認しながら学習できるLearn Git Branchingはハンズオンで学習することができて参考になる教材でした。
6月中旬
HTML、CSS基本学習
6月の中頃からUdemy教材を使用したHTMLとCSSの学習に取り組みました。
- ページ内の要素をグリッドレイアウトに沿って配置するFluid Grid、ウインドウの幅に沿って画像サイズを縮小拡大するFluid Image
- formタグ、inputタグを使用したコンタクトフォームの作成方法
を学びました。
HTML課題(Webサイトアウトプット模写)
- 教材にて基礎知識を学習後、実際のWebページのコーディング模写に取り組みました。
- 初めに見本となるWebページの画像やアイコンなどを取得し、フォントサイズや要素の幅・高さ・色などはソースを見ずにChromeプラグインを使って計測により取得しました。
次にモバイルファーストを念頭にHTMLファイルから作成するため、見本のページにあるテキストをHTMLファイルに書き写し、見本のレイアウトになるようHTMLタグでマークアップしていきました。 - HTMLの記述が完了後、CSSプロパティの設定を行い、細かい箇所のサイズを再度計測しながら、テキストや画像の装飾・調整を行ました。
6月下旬
HTML課題(Webサイトアウトプット模写続き)
- 次に見本のサイトにある動きのある箇所の再現のため、まず初めにCSSの記述だけで再現できないか取り組みました。(画像の回転、プルダウンメニュー、画像ポップアップなど)
- Webサイトの動きを検証中、どうしてもJavascriptを使用しなければできそうにない、ページスクロールに追従したメニューのハイライト表示の再現には、
APIであるIntersectionObserverとElement.scrollIntoViewによるCSSプロパティの付与と解除機能とスクロール追従機能を再現しました。(このAPIを発見するまでかなり検索しました。)
