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

プログラミング日記

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

Webサイト模写 その2

100日を越えてしまいました。まずは、出来上がるまで頑張ります。

  1. ごちゃごちゃ、その1
  2. その2
  3. その3
  4. marginとwidth
  5. height
  6. 無事に表示される
  7. videoに重ねる
  8. 良い感じ
  9. 無事に表示される
  10. HTML修正必要

寝ぼけていたのか、ボタンがbuttonになっていないことが発覚しました!まず、きちんとbuttonに直して、それからcss修正ですね。

 

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

Webサイト模写 その2

formのbuttonを直します。

  1. 2箇所
  2. buttonタグ
  3. css
  4. position
  5. もうひとつ
  6. HTML入れ替える
  7. css
  8. 無事に表示される
  9. tablet
  10. HTML修正
  11. 無事に表示される
  12. できた!

6時間以上かかりました。今までで、最長時間だと思います(苦笑)。諦めない気持ちが勝つのはわかっていますが、ちょっとやりすぎましたね(笑)。

 

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

Webサイト模写 その2

真のラスボス、navとの戦いが始まります!(笑)

  1. navとの最終戦
  2. まずHTML
  3. 雰囲気は良い
  4. css
  5. ぼちぼち
  6. marginとpadding
  7. id付与
  8. HTMLでスタイル指定
  9. css
  10. 良い感じで
  11. 無事に表示される

navをHTMLに書き込んで、見た目はそれなりに表示させることができました。これをクリック表示、非表示にうまくきりかえられると良いのですが…。明日の課題です。

 

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

Webサイト模写 その2

navの表示切替えに挑戦します。

  1. 表示と非表示
  2. HTML修正
  3. css
  4. うまくいかない
  5. 無反応
  6. やっぱり無反応
  7. HTML順序変更
  8. うまくいかない
  9. div修正でもダメ

模写1のときと同じ方法で書いてみても、全然うまくいきませんでした。何故なのでしょうかね……。いろいろ試しすぎて、headerのflexが、位置固定に役立ちそうなのを発見しました(笑)。

 

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

Webサイト模写 その2

ムジュラの仮面か、それともリゼロか。リトライしまくりの105日目です。

  1. 気分はムジュラの仮面
  2. 模写1のHTML
  3. 模写1のcss
  4. テスト中
  5. css修正
  6. 無事に表示される!
  7. z-index修正
  8. tablet
  9. pcはどうしよう?

videoの下にドロップダウンが隠れていたことがわかり、どうにか表示させることができました。pcでnavをメニューバーにできれば、課題終了にします。

 

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

Webサイト模写 その2

navをメニューバーに表示させたいです。頑張ります。

  1. メニューバー
  2. display:block
  3. css修正
  4. label停止
  5. HTMLにmenu追加
  6. css
  7. 無事に表示される

htmlにmenuを追加した方が綺麗にできあがったので、これを採用しました。模写課題も、これでクリアということにします。

 

今回の出来上がりを眺めつつ、 同じことばかりでは成長しないので、次はPHPに挑戦します!