初心者のプログラミングチャレンジ【１０１～１０６日目】

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

Webサイト模写 その２

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

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

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

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

Webサイト模写 その２

formのbuttonを直します。

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

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

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

Webサイト模写 その２

真のラスボス、navとの戦いが始まります！（笑）

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

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

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

Webサイト模写 その２

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

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

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

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

Webサイト模写 その２

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

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

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

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

Webサイト模写 その２

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

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

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

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

満稀（みつき）

大人だからこそ効率的に勉強したい運営者

TwitterContact

社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。