半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録22日目

更新日:

こんにちは、こずえです。
プログラミング学習記録22日目です。
今までの学習を土台にサイト模写をしていこうと思います。

所感:毎日学習&更新が途切れてしまいました。
目標までの時間が後ろにズレた事実を認識しつつ、プライベートで得たエネルギーを元にして前向きに取り組んでいきたいと思います。(`・ω・´)ゞ
大事なのは前に進むこととマイペース!

合計学習時間

前回までの時間:32.75[h]
今回の時間:1.25[h]
合計時間:34.00[h]

学習内容

今までのHTML、CSS、Bootstrap(少し)の学習をしてきました。
シンプルなレスポンシブ対応のWebページを作成するのに必要な道具を広く浅く知ることができている状態だと思います。

そこで、学習してきた内容を土台に、世に公開されているWebページの再現(模写)をして、クラウドソーシングの案件で求められているレベルを体感したいと思います。
これをすることによる利点は以下です。

  1. 復習
  2. 現在のレベルの把握
  3. サイト作成のイメージ獲得
  4. 過程の中で理解を深める or 新しい事を学ぶ(重要!)

1~3も大事なのですが、4.が大きい部分だと思います。

つまづきを解決したりイメージに近づけていくことは能動的な行動ですから、理解を深めたり新しい事を学ぶことに繋がっていくと思います。

読んだ記事

  1. Webサイトをコーディング模写するやり方と使用するツール
  2. HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
    1. ワイヤーフレームの苦手感にサヨナラを告げられたのは、このiPadとApple Pencilのおかげでした。

1.について

サイトの模写はもちろんはじめてですし、どこまでがOKなのか?といった基準もあいまいだったのでの記事を参考にしました。

記事を読んで以下のツールを導入しました。

  1. What Font
  2. Image Downloader
  3. Ruler
  4. ColorPicker

2.について

サイトを模写するだけならそこまで気にする必要はないかもしれませんが、コーディングする前にデザインの下書きをすることは後々必須になってくると考えていたのでワイヤーフレームについての記事を読みました。

記事を読んで以下のツールを導入しました。

  1. Adobe Comp CC

サイトの模写

以下のページを模写したいと思います。
まずはいきなりHTMLを書いていくのではなく、完成形を定めることから始めました。

row, colのイメージ

導入したRulerのTracking Modeを使用して、rowとcolの配置や余白などがどのようになっているのかを見ていきました。

サイズ別のスクリーンショットの保存

デベロッパーツールのToggle device toolberでブレイクポイントの境界値の前後、モバイルサイズ、ラップトップサイズのSSを保存しました。

まとめ

  • サイトの模写をしていきます
    • row, colの配置などのイメージをつかみました
    • ブレイクポイントの把握、サイズ別のSSを保存しました
  • サイト模写に関する基準の把握と便利ツールの導入をしました

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.