初心者のプログラミングチャレンジ【81~85日目】

プログラミング日記

初心者のプログラミングチャレンジ【81日目】

Webサイト模写 その1

さすがにそろそろ、課題その1はクリアしたくなってきました。90日目までに何とかしたいので、頑張ります。

  1. これを
  2. こうしたい
  3. h2を左寄せ
  4. cssを書く
  5. それなりに表示される
  6. css追加
  7. 画像幅が問題
  8. baseは良し
  9. tabletで試す
  10. contain
  11. 確かに背景ではない
  12. 画像を変える
  13. baseは変化なし
  14. tabletで事故
  15. 定番cssを書く
  16. 親要素か…?

何となく、理解できた気がします。プログラミングでは「気がする」を「試して確かめる」ことが多いですね。挑戦する精神、トライアンドエラーを学べます。

 

初心者のプログラミングチャレンジ【82日目】

Webサイト模写 その1

写真幅に全力で取り組んでみます。

  1. headerとfooterの写真幅
  2. HTMLの修正が必要?
  3. とりあえず、ここから挑戦
  4. baseはぴったり
  5. 大きい画像にする
  6. base変わらず
  7. tabletが変化
  8. css追加
  9. 無事に表示される
  10. pcは崩れている
  11. paddingとmargin
  12. 無事に表示される

最初から画像を小さくしていたのが、悪かったようです。cssでフレキシブルに操作できるのだから、指定画像は大きいものを使う方が、整えやすいことを学びました。これからは、画像サイズに遠慮しません(笑)。

 

初心者のプログラミングチャレンジ【83日目】

Webサイト模写 その1

headerとfooterの写真幅に挑戦します。

  1. 画像が小さい
  2. 画像を変更
  3. 変化なし
  4. 変化なし
  5. 画像を変更その2
  6. 変化なし
  7. cssを書く
  8. 変化なし
  9. 変化なし

ここまで何一つ変わらないと、キッカケがつかめません。どこか、微妙に、でも良いので動いてくれれば、何か掴めるのですが……。

 

初心者のプログラミングチャレンジ【84日目】

Webサイト模写 その1

画像幅の迷宮に入り込んでしまいました。出口が見えないため、footerに移行します。

  1. footerを整える
  2. cssを書く
  3. 足りない
  4. css追加
  5. 偏る
  6. padding
  7. アイコンが右に寄らない
  8. padding
  9. アイコンが気になる
  10. 親要素をflex
  11. おぉ?
  12. paddingとmargin
  13. HTMLに全角スペース
  14. 無事に表示される
  15. tabletも修正完了

footerがきれいに整いました。残ったのは画像幅と、navの上下固定ですね。何も思いつかないため、次の課題に進んでしまおうかと……悩んでいます。

 

初心者のプログラミングチャレンジ【85日目】

Webサイト模写 その1

やり残しを探します。

  1. formをまとめて、画像に乗せたい
  2. position
  3. おぉ?
  4. startbutton
  5. う…
  6. HTML修正
  7. css修正
  8. 表示される
  9. css再修正
  10. 無事に表示される

formをまとめて、画像の上に乗せることができました!ずっと悩んでいたことが解決できて、とても嬉しいです。頑張れば、何とかなるのですね!! 諦めなくて、本当に良かったです。

 

ひとまず、完成(?)したので、スクロール動画を上げておきます。