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

プログラミング日記

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

Webサイト模写 その2

ようやく「その2」に挑戦開始です。その1の経験を糧に、手際よく進めたいです。

  1. フォルダ作成
  2. データファイル作成
  3. png、imgの準備
  4. 画像のファイル確認
  5. 全体構成図を作成開始

まずは、全体構成図を作ります。前回はbase、tablet、pcをそれぞれ作成したのですが、今回はbase1枚にまとめます。1枚にまとめる理由は、HTMLタグとcssコードを関連づけるためです。上手くいくかどうかわかりませんが、試してみます。

 

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

Webサイト模写 その2

模写2の全体構成中です。baseは書いたので、tablet、pcと見比べて、もう少しタグを書き足します。1のときの反省を生かしたいですね。

 

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

Webサイト模写 その2

全体構成図が完成しました。これでようやく、HTMLを書けます。模写2はnavが一層難しそうです。現時点で、模写1のnav固定は解決できていません。不安は残りますが、とにかくやるしかないので、諦めずに進めていきます。

 

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

Webサイト模写 その2

今回は前回より、効率的にコードを書きたいです。そのために、全体構成図も工夫しました。成果を出せるように頑張ります!

  1. 空のHTML
  2. headを書く
  3. 無事に表示される
  4. 地味な初期作業
  5. 初videoタグ
  6. 無事に再生される
  7. h1とlinkをdivで括る
  8. formをまとめておく
  9. header完成
  10. 最初の段落完成
  11. ふたつめ完成
  12. みっつめ完成
  13. 最後の段落完成
  14. footer
  15. 前回よりも工夫してみる
  16. HTMLひとまず完成

idとclassはまだ、割り当てていません。base.cssを書くときに、追加していきます。最初から構成図を作成し、divで分割しているため、前回よりも迷子にならずに(!)cssを攻略できたら嬉しいですね。

 

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

Webサイト模写 その2

cssを開始します。

  1. 空のbase.css
  2. 地味な作業から
  3. hにidを付与
  4. hにclassを付与
  5. 文字色変更
  6. 無事に表示される(テスト:背景着色)
  7. classからidに変更
  8. 画像幅をフレキシブルに
  9. 無事に表示される
  10. videoも幅をフレキシブルに
  11. 無事に表示される

前回の苦労は何だったのかと思うほど、あっさり動画・画像の幅を変えることができました。一応、進歩しているのかな(笑)。このまま、続けていきます。