プログラミング

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

mitsuki

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

Webサイト模写 その2

tabletからpcに移行していきます。

  1. footerから
  2. footlinks表示
  3. footlinkssns表示
  4. privacy表示
  5. hr表示と体裁
  6. 体裁が落ち着かない
  7. borderとmargin
  8. 思い切ってflex
  9. ul修正
  10. flex子要素修正
  11. とりあえず……

hrのwidthを90%にしたかったのですが、90%にしてしまうと中央寄せが上手くいきません。とりあえず、100%にして誤魔化し中。とりあえずついでに、明日はpcに進みます。

 

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

Webサイト模写 その2

進行速度はさておいて、気持ちは「ガンガンいこうぜ」です。

  1. tabletとpcがほぼ同じ
  2. tabletからコピー
  3. 細部修正が必要
  4. margin
  5. widthとpadding
  6. 無事に表示される
  7. hrにid付与
  8. flexとpadding
  9. 無事に表示される
  10. 修正
  11. 無事に表示される

ガンガン書いてみました(笑)。前回のサイト模写はgridから書き始めましたが、先にflexに挑戦するのが正解だったのでしょう(反省)。 まずflexで整列、それから、もっと細かいレイアウトを取りたいときにgridで、という使い分けですね。苦労して勉強した甲斐はありました…よね……?

これも初心者あるあるなので、記録しておきます。

 

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

Webサイト模写 その2

ここまで来ると、是が非でも100日目にはクリアしたいです。

  1. バランスが悪い
  2. widthとpadding
  3. 無事に表示される
  4. さて
  5. search
  6. 各種体裁
  7. もう少し
  8. footer
  9. 無事に表示される

残してしまっている課題は「①nav固定」「②video再生、画像を重ねる」「③form体裁」「④画像トリミング」です。もう少し、頑張っていきます。

 

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

Webサイト模写 その2

できると信じてやるだけです。

  1. 画像トリミング、挑戦
  2. object-fit
  3. 無事に表示される?
  4. 良さそう♪
  5. 細部修正
  6. 体裁崩れ
  7. 修正
  8. tablet修正
  9. 余白が入らない
  10. うまくいかない

baseがうまくできたので、tabletもうまくできると思ったのですが、撃沈しました。もう少し頑張ろう。

 

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

Webサイト模写 その2

ついに、100日目を迎えてしまいました。課題をクリアできない初心者ですが、積み上げだけは立派になりました(笑うところです)。

  1. ぐだぐだになった体裁
  2. girdに変更
  3. 無事に表示される
  4. 修正
  5. 続、修正
  6. 続々、修正
  7. pc.css
  8. 修正
  9. もう少し

100日で終わりませんでした。明日も頑張ります。

ABOUT ME
満稀(みつき)
満稀(みつき)
大人だからこそ効率的に勉強したい運営者
社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。
記事URLをコピーしました