初心者のプログラミングチャレンジ【８６～９０日目】
初心者のプログラミングチャレンジ【８６日目】
Webサイト模写 その２
ようやく「その２」に挑戦開始です。その１の経験を糧に、手際よく進めたいです。
- フォルダ作成
- データファイル作成
- png、imgの準備
- 画像のファイル確認
- 全体構成図を作成開始
まずは、全体構成図を作ります。前回はbase、tablet、pcをそれぞれ作成したのですが、今回はbase１枚にまとめます。１枚にまとめる理由は、HTMLタグとcssコードを関連づけるためです。上手くいくかどうかわかりませんが、試してみます。
初心者のプログラミングチャレンジ【８７日目】
Webサイト模写 その２
模写２の全体構成中です。baseは書いたので、tablet、pcと見比べて、もう少しタグを書き足します。１のときの反省を生かしたいですね。
初心者のプログラミングチャレンジ【８８日目】
Webサイト模写 その２
全体構成図が完成しました。これでようやく、HTMLを書けます。模写２はnavが一層難しそうです。現時点で、模写１のnav固定は解決できていません。不安は残りますが、とにかくやるしかないので、諦めずに進めていきます。
初心者のプログラミングチャレンジ【８９日目】
Webサイト模写 その２
今回は前回より、効率的にコードを書きたいです。そのために、全体構成図も工夫しました。成果を出せるように頑張ります！
- 空のHTML
- headを書く
- 無事に表示される
- 地味な初期作業
- 初videoタグ
- 無事に再生される
- h1とlinkをdivで括る
- formをまとめておく
- header完成
- 最初の段落完成
- ふたつめ完成
- みっつめ完成
- 最後の段落完成
- footer
- 前回よりも工夫してみる
- HTMLひとまず完成
idとclassはまだ、割り当てていません。base.cssを書くときに、追加していきます。最初から構成図を作成し、divで分割しているため、前回よりも迷子にならずに（！）cssを攻略できたら嬉しいですね。
初心者のプログラミングチャレンジ【９０日目】
Webサイト模写 その２
cssを開始します。
- 空のbase.css
- 地味な作業から
- hにidを付与
- hにclassを付与
- 文字色変更
- 無事に表示される（テスト：背景着色）
- classからidに変更
- 画像幅をフレキシブルに
- 無事に表示される
- videoも幅をフレキシブルに
- 無事に表示される
前回の苦労は何だったのかと思うほど、あっさり動画・画像の幅を変えることができました。一応、進歩しているのかな（笑）。このまま、続けていきます。