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

プログラミング日記

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

Webサイト模写 その2

順調な滑り出しです。

  1. linkから
  2. 基本
  3. idとclassを設定
  4. css追加、表示される
  5. id付与、aからh3に変更
  6. css追加、表示される
  7. footerのdisplay:none
  8. 背景色を指定
  9. divを追加
  10. css追加、無事表示される
  11. divを追加
  12. cssを追加、表示される

「#」「.」に悩むのが、cssの悩みです。慌てて書くと、すぐに間違えてしまいます。それでも、大分落ち着いて書けるようになってきました。次は、もう少し細かい体裁を加えていきます。

 

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

Webサイト模写 その2

このまま順調に滑り続けたいです(切実な願望)。

  1. hrから
  2. cssを書く
  3. 無事に表示される
  4. hを揃えたい
  5. font-weight
  6. text-align
  7. 余白を整える
  8. padding
  9. 微妙
  10. hはcenterではなさそうだ

微妙な部分を真剣に考えていたら、寝落ちしました(反省)。

 

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

Webサイト模写 その2

揃えた体裁を修正するところから、開始です。

  1. h2修正
  2. text-align
  3. h3修正
  4. 無事に表示される
  5. 余白修正
  6. br挿入
  7. 無事に表示される
  8. 細部修正
  9. class付与
  10. 無事に表示される
  11. 余白修正
  12. 無事に表示される
  13. 修正箇所、多数あり
  14. 無事に表示される

上部と下部のform以外の体裁が整いました。このままformができあがれば、tabletに挑戦できます。1回目より、要領よくなってきました。未だに解決していないnav固定問題はありますが、少しずつでも先に進めていきます。

 

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

Webサイト模写 その2

base.cssのクリアを目指します。

  1. video修正から
  2. autoplay停止
  3. 無事に反映される
  4. position
  5. 動画には重ならない
  6. class付与
  7. 文字とボタン
  8. HTML追加
  9. もう少し
  10. こちらももう少し
  11. css修正
  12. 宿題

宿題がふたつ残ってしまいました。動画の上にタイトルを表示させること、searchにボタンを乗せること、です。保留して、tabletを書き始めます。

 

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

Webサイト模写 その2

tablet.cssを開始します。

  1. まずはここから
  2. div追加
  3. css、無事に表示される
  4. 次もflexか?
  5. hrを表示しない
  6. div追加
  7. css、無事に表示される
  8. html修正
  9. css、無事に表示される
  10. 続行
  11. 無事に表示される
  12. 続けてみると??
  13. 実数に修正
  14. 無事に表示される

順調に進められました。写真の切り取り方を、変えたいです。footerは前回の仕様を活用します。次回もうまくいきますように。