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

プログラミング日記

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

Webサイト模写 その1

細かい部分の修正が上手くできない日々です。

  1. 直すと崩れるパターン
  2. headerを直す
  3. footerを直す
  4. header、footerよし
  5. 隠れた文字あり
  6. 挑戦する
  7. 消えた……。
  8. バックアップ大事(涙)
  9. baseと同じ要領で書いてみる
  10. 大事故発生

grid枠の指定が良くない、HTML記述でdivを使って細切れにしているのが良くない、と思いました。baseでは表示されるけれど、これでは切り替えが利きません。baseの表示ごと、方法を変える方法はないかしら。

 

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

Webサイト模写 その1

grid指定の前に、HTMLを見直す必要がありそうです。

  1. brは必要か?
  2. 整っている、ように見える
  3. paddingではない
  4. marginか?
  5. brを消す
  6. 無事に表示される
  7. お?

grid、flexの前に、HTMLを見直していたため、71.5日目です。余計なbrを消したら、希望の光が見えました。

 

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

Webサイト模写 その1

希望の光に向かって、前進あるのみです。

  1. baseは崩れない
  2. tabletに挑戦
  3. 余分なコードを消す
  4. お試しflexは変化なし
  5. display:block
  6. 画像幅が広がらない
  7. 修正してみる
  8. block幅も広がらない
  9. flex:auto
  10. 問題は画像幅

header、footerも同じ状態で、画像を横幅いっぱいにすることができません。何か同じ間違いをしていると、推測して、対策を考えます。

 

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

Webサイト模写 その1

微妙な修正が、一番難しいと思っています。

  1. base、tabletの切替えサイズ
  2. 600→750
  3. ちょっとずつ気になる
  4. font、marginを修正
  5. copyrightが気になる
  6. HTML修正
  7. お?
  8. baseが崩れる
  9. HTML修正
  10. tabletが崩れる
  11. 微妙に直る
  12. 思い切ってinline-flex
  13. 無事に表示される

大分、考えて書き直して、整えられるようになってきたと思います。gridとflex、inlineとblockの経験値が少し溜まってきました。小さな積み重ねが大切ですね。

 

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

Webサイト模写 その1

微妙な修正の積み上げ中ですね。

  1. アイコンの挿入
  2. fontawesomeを使用
  3. HTMLを書く
  4. tabletを書く
  5. 表示される
  6. 試しにinline
  7. 変化なし
  8. 右に寄らない
  9. divで囲む
  10. 右に寄らない
  11. 宿題

どうしても右寄せにすることができません。inline、block、inline-○○などいろいろ試してみたのですが、どうしてもうまくいきませんでした。宿題です。

 

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

Webサイト模写 その1

微妙な修正の積み上げ中。いろいろ気になる部分があるのに、なかなか直せないですね。難しいです。

  1. 気になる余白
  2. 気になる文字ずれ
  3. まずmargin
  4. 無事に表示される
  5. 次はfont-size
  6. 無事に表示される
  7. base、tabletがほぼ完成?
  8. 課題1:フルサイズ
  9. 課題2:集計結果
  10. 課題3:上下のナビ
  11. 課題4:写真100%幅
  12. 課題5:フルサイズ
  13. 課題6:写真100%幅
  14. 課題7:アイコン

予想より多めに、解決していない問題がありました(反省)。今のところ、解決策が思い浮かばないため、次回からpcを書いていきます。