初心者のプログラミングチャレンジ【101~106日目】
初心者のプログラミングチャレンジ【101日目】
Webサイト模写 その2
100日を越えてしまいました。まずは、出来上がるまで頑張ります。
- ごちゃごちゃ、その1
- その2
- その3
- marginとwidth
- height
- 無事に表示される
- videoに重ねる
- 良い感じ
- 無事に表示される
- HTML修正必要
寝ぼけていたのか、ボタンがbuttonになっていないことが発覚しました!まず、きちんとbuttonに直して、それからcss修正ですね。
初心者のプログラミングチャレンジ【102日目】
Webサイト模写 その2
formのbuttonを直します。
- 2箇所
- buttonタグ
- css
- position
- もうひとつ
- HTML入れ替える
- css
- 無事に表示される
- tablet
- HTML修正
- 無事に表示される
- できた!
6時間以上かかりました。今までで、最長時間だと思います(苦笑)。諦めない気持ちが勝つのはわかっていますが、ちょっとやりすぎましたね(笑)。
初心者のプログラミングチャレンジ【103日目】
Webサイト模写 その2
真のラスボス、navとの戦いが始まります!(笑)
- navとの最終戦
- まずHTML
- 雰囲気は良い
- css
- ぼちぼち
- marginとpadding
- id付与
- HTMLでスタイル指定
- css
- 良い感じで
- 無事に表示される
navをHTMLに書き込んで、見た目はそれなりに表示させることができました。これをクリック表示、非表示にうまくきりかえられると良いのですが…。明日の課題です。
初心者のプログラミングチャレンジ【104日目】
Webサイト模写 その2
navの表示切替えに挑戦します。
- 表示と非表示
- HTML修正
- css
- うまくいかない
- 無反応
- やっぱり無反応
- HTML順序変更
- うまくいかない
- div修正でもダメ
模写1のときと同じ方法で書いてみても、全然うまくいきませんでした。何故なのでしょうかね……。いろいろ試しすぎて、headerのflexが、位置固定に役立ちそうなのを発見しました(笑)。
初心者のプログラミングチャレンジ【105日目】
Webサイト模写 その2
ムジュラの仮面か、それともリゼロか。リトライしまくりの105日目です。
- 気分はムジュラの仮面
- 模写1のHTML
- 模写1のcss
- テスト中
- css修正
- 無事に表示される!
- z-index修正
- tablet
- pcはどうしよう?
videoの下にドロップダウンが隠れていたことがわかり、どうにか表示させることができました。pcでnavをメニューバーにできれば、課題終了にします。
初心者のプログラミングチャレンジ【106日目】
Webサイト模写 その2
navをメニューバーに表示させたいです。頑張ります。
- メニューバー
- display:block
- css修正
- label停止
- HTMLにmenu追加
- css
- 無事に表示される
htmlにmenuを追加した方が綺麗にできあがったので、これを採用しました。模写課題も、これでクリアということにします。
今回の出来上がりを眺めつつ、 同じことばかりでは成長しないので、次はPHPに挑戦します!