初心者のプログラミングチャレンジ【81~85日目】
初心者のプログラミングチャレンジ【81日目】
Webサイト模写 その1
さすがにそろそろ、課題その1はクリアしたくなってきました。90日目までに何とかしたいので、頑張ります。
- これを
- こうしたい
- h2を左寄せ
- cssを書く
- それなりに表示される
- css追加
- 画像幅が問題
- baseは良し
- tabletで試す
- contain
- 確かに背景ではない
- 画像を変える
- baseは変化なし
- tabletで事故
- 定番cssを書く
- 親要素か…?
何となく、理解できた気がします。プログラミングでは「気がする」を「試して確かめる」ことが多いですね。挑戦する精神、トライアンドエラーを学べます。
初心者のプログラミングチャレンジ【82日目】
Webサイト模写 その1
写真幅に全力で取り組んでみます。
- headerとfooterの写真幅
- HTMLの修正が必要?
- とりあえず、ここから挑戦
- baseはぴったり
- 大きい画像にする
- base変わらず
- tabletが変化
- css追加
- 無事に表示される
- pcは崩れている
- paddingとmargin
- 無事に表示される
最初から画像を小さくしていたのが、悪かったようです。cssでフレキシブルに操作できるのだから、指定画像は大きいものを使う方が、整えやすいことを学びました。これからは、画像サイズに遠慮しません(笑)。
初心者のプログラミングチャレンジ【83日目】
Webサイト模写 その1
headerとfooterの写真幅に挑戦します。
- 画像が小さい
- 画像を変更
- 変化なし
- 変化なし
- 画像を変更その2
- 変化なし
- cssを書く
- 変化なし
- 変化なし
ここまで何一つ変わらないと、キッカケがつかめません。どこか、微妙に、でも良いので動いてくれれば、何か掴めるのですが……。
初心者のプログラミングチャレンジ【84日目】
Webサイト模写 その1
画像幅の迷宮に入り込んでしまいました。出口が見えないため、footerに移行します。
- footerを整える
- cssを書く
- 足りない
- css追加
- 偏る
- padding
- アイコンが右に寄らない
- padding
- アイコンが気になる
- 親要素をflex
- おぉ?
- paddingとmargin
- HTMLに全角スペース
- 無事に表示される
- tabletも修正完了
footerがきれいに整いました。残ったのは画像幅と、navの上下固定ですね。何も思いつかないため、次の課題に進んでしまおうかと……悩んでいます。
初心者のプログラミングチャレンジ【85日目】
Webサイト模写 その1
やり残しを探します。
- formをまとめて、画像に乗せたい
- position
- おぉ?
- startbutton
- う…
- HTML修正
- css修正
- 表示される
- css再修正
- 無事に表示される
formをまとめて、画像の上に乗せることができました!ずっと悩んでいたことが解決できて、とても嬉しいです。頑張れば、何とかなるのですね!! 諦めなくて、本当に良かったです。
ひとまず、完成(?)したので、スクロール動画を上げておきます。