初心者のプログラミングチャレンジ【86~90日目】
初心者のプログラミングチャレンジ【86日目】
Webサイト模写 その2
ようやく「その2」に挑戦開始です。その1の経験を糧に、手際よく進めたいです。
- フォルダ作成
- データファイル作成
- png、imgの準備
- 画像のファイル確認
- 全体構成図を作成開始
まずは、全体構成図を作ります。前回は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
今回は前回より、効率的にコードを書きたいです。そのために、全体構成図も工夫しました。成果を出せるように頑張ります!
- 空のHTML
- headを書く
- 無事に表示される
- 地味な初期作業
- 初videoタグ
- 無事に再生される
- h1とlinkをdivで括る
- formをまとめておく
- header完成
- 最初の段落完成
- ふたつめ完成
- みっつめ完成
- 最後の段落完成
- footer
- 前回よりも工夫してみる
- HTMLひとまず完成
idとclassはまだ、割り当てていません。base.cssを書くときに、追加していきます。最初から構成図を作成し、divで分割しているため、前回よりも迷子にならずに(!)cssを攻略できたら嬉しいですね。
初心者のプログラミングチャレンジ【90日目】
Webサイト模写 その2
cssを開始します。
- 空のbase.css
- 地味な作業から
- hにidを付与
- hにclassを付与
- 文字色変更
- 無事に表示される(テスト:背景着色)
- classからidに変更
- 画像幅をフレキシブルに
- 無事に表示される
- videoも幅をフレキシブルに
- 無事に表示される
前回の苦労は何だったのかと思うほど、あっさり動画・画像の幅を変えることができました。一応、進歩しているのかな(笑)。このまま、続けていきます。