初心者のプログラミングチャレンジ【８１～８５日目】

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

Webサイト模写 その１

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

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. 親要素か…？

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

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

Webサイト模写 その１

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

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

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

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

Webサイト模写 その１

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

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

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

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

Webサイト模写 その１

画像幅の迷宮に入り込んでしまいました。出口が見えないため、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の上下固定ですね。何も思いつかないため、次の課題に進んでしまおうかと……悩んでいます。

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

Webサイト模写 その１

やり残しを探します。

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

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

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

満稀（みつき）

大人だからこそ効率的に勉強したい運営者

TwitterContact

社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。