初心者のプログラミングチャレンジ物語【後編：８６日目から１０６日目まで】

初心者のプログラミングチャレンジ物語【後編：８６日目から１０６日目まで】

目標だったプログラミング勉強６０日間を達成したのですが、勉強の区切りがつかないタイミングだったため、勉強を継続しました。もし、あなたがプログラミング勉強をしてみたいと考えていらっしゃるのであれば、開始前にこちらの２本の記事を読んでいただきたいです。
→プログラミング初心者の６０日間チャレンジ【検証結果】
→初心者がプログラミングを６０日間勉強して【悪かった点、良かった点】

前回、６１日目までの記録はこちらです。
→初心者のプログラミングチャレンジ物語【前編：６１日目から８５日目まで】

では、８６日目からの記録です。

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

Webサイト模写 その２

ようやく「その２」に挑戦開始です。その１の経験を糧に、手際よく進めたいです。

1. フォルダ作成
2. データファイル作成
3. png、imgの準備
4. 画像のファイル確認
5. 全体構成図を作成開始

まずは、全体構成図を作ります。前回はbase、tablet、pcをそれぞれ作成したのですが、今回はbase１枚にまとめます。１枚にまとめる理由は、HTMLタグとcssコードを関連づけるためです。上手くいくかどうかわかりませんが、試してみます。

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

Webサイト模写 その２

模写２の全体構成中です。baseは書いたので、tablet、pcと見比べて、もう少しタグを書き足します。１のときの反省を生かしたいですね。

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

Webサイト模写 その２

全体構成図が完成しました。これでようやく、HTMLを書けます。模写２はnavが一層難しそうです。現時点で、模写１のnav固定は解決できていません。不安は残りますが、とにかくやるしかないので、諦めずに進めていきます。

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

Webサイト模写 その２

今回は前回より、効率的にコードを書きたいです。そのために、全体構成図も工夫しました。成果を出せるように頑張ります！

1. 空のHTML
2. headを書く
3. 無事に表示される
4. 地味な初期作業
5. 初videoタグ
6. 無事に再生される
7. h1とlinkをdivで括る
8. formをまとめておく
9. header完成
10. 最初の段落完成
11. ふたつめ完成
12. みっつめ完成
13. 最後の段落完成
14. footer
15. 前回よりも工夫してみる
16. HTMLひとまず完成

idとclassはまだ、割り当てていません。base.cssを書くときに、追加していきます。最初から構成図を作成し、divで分割しているため、前回よりも迷子にならずに（！）cssを攻略できたら嬉しいですね。

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

Webサイト模写 その２

cssを開始します。

1. 空のbase.css
2. 地味な作業から
3. hにidを付与
4. hにclassを付与
5. 文字色変更
6. 無事に表示される（テスト：背景着色）
7. classからidに変更
8. 画像幅をフレキシブルに
9. 無事に表示される
10. videoも幅をフレキシブルに
11. 無事に表示される

前回の苦労は何だったのかと思うほど、あっさり動画・画像の幅を変えることができました。一応、進歩しているのかな（笑）。このまま、続けていきます。

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

Webサイト模写 その２

順調な滑り出しです。

1. linkから
2. 基本
3. idとclassを設定
4. css追加、表示される
5. id付与、aからh3に変更
6. css追加、表示される
7. footerのdisplay:none
8. 背景色を指定
9. divを追加
10. css追加、無事表示される
11. divを追加
12. cssを追加、表示される

「#」「.」に悩むのが、cssの悩みです。慌てて書くと、すぐに間違えてしまいます。それでも、大分落ち着いて書けるようになってきました。次は、もう少し細かい体裁を加えていきます。

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

Webサイト模写 その２

このまま順調に滑り続けたいです（切実な願望）。

1. hrから
2. cssを書く
3. 無事に表示される
4. hを揃えたい
5. font-weight
6. text-align
7. 余白を整える
8. padding
9. 微妙
10. hはcenterではなさそうだ

微妙な部分を真剣に考えていたら、寝落ちしました（反省）。

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

Webサイト模写 その２

揃えた体裁を修正するところから、開始です。

1. h2修正
2. text-align
3. h３修正
4. 無事に表示される
5. 余白修正
6. br挿入
7. 無事に表示される
8. 細部修正
9. class付与
10. 無事に表示される
11. 余白修正
12. 無事に表示される
13. 修正箇所、多数あり
14. 無事に表示される

上部と下部のform以外の体裁が整いました。このままformができあがれば、tabletに挑戦できます。１回目より、要領よくなってきました。未だに解決していないnav固定問題はありますが、少しずつでも先に進めていきます。

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

Webサイト模写 その２

base.cssのクリアを目指します。

1. video修正から
2. autoplay停止
3. 無事に反映される
4. position
5. 動画には重ならない
6. class付与
7. 文字とボタン
8. HTML追加
9. もう少し
10. こちらももう少し
11. css修正
12. 宿題

宿題がふたつ残ってしまいました。動画の上にタイトルを表示させること、searchにボタンを乗せること、です。保留して、tabletを書き始めます。

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

Webサイト模写 その２

tablet.cssを開始します。

1. まずはここから
2. div追加
3. css、無事に表示される
4. 次もflexか？
5. hrを表示しない
6. div追加
7. css、無事に表示される
8. html修正
9. css、無事に表示される
10. 続行
11. 無事に表示される
12. 続けてみると？？
13. 実数に修正
14. 無事に表示される

順調に進められました。写真の切り取り方を、変えたいです。footerは前回の仕様を活用します。次回もうまくいきますように。

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

Webサイト模写 その２

tabletからpcに移行していきます。

1. footerから
2. footlinks表示
3. footlinkssns表示
4. privacy表示
5. hr表示と体裁
6. 体裁が落ち着かない
7. borderとmargin
8. 思い切ってflex
9. ul修正
10. flex子要素修正
11. とりあえず……

hrのwidthを90%にしたかったのですが、90%にしてしまうと中央寄せが上手くいきません。とりあえず、100%にして誤魔化し中。とりあえずついでに、明日はpcに進みます。

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

Webサイト模写 その２

進行速度はさておいて、気持ちは「ガンガンいこうぜ」です。

1. tabletとpcがほぼ同じ
2. tabletからコピー
3. 細部修正が必要
4. margin
5. widthとpadding
6. 無事に表示される
7. hrにid付与
8. flexとpadding
9. 無事に表示される
10. 修正
11. 無事に表示される

ガンガン書いてみました（笑）。前回のサイト模写はgridから書き始めましたが、先にflexに挑戦するのが正解だったのでしょう（反省）。 まずflexで整列、それから、もっと細かいレイアウトを取りたいときにgridで、という使い分けですね。苦労して勉強した甲斐はありました…よね……？

これも初心者あるあるなので、記録しておきます。

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

Webサイト模写 その２

ここまで来ると、是が非でも１００日目にはクリアしたいです。

1. バランスが悪い
2. widthとpadding
3. 無事に表示される
4. さて
5. search
6. 各種体裁
7. もう少し
8. footer
9. 無事に表示される

残してしまっている課題は「①nav固定」「②video再生、画像を重ねる」「③form体裁」「④画像トリミング」です。もう少し、頑張っていきます。

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

Webサイト模写 その２

できると信じてやるだけです。

1. 画像トリミング、挑戦
2. object-fit
3. 無事に表示される？
4. 良さそう♪
5. 細部修正
6. 体裁崩れ
7. 修正
8. tablet修正
9. 余白が入らない
10. うまくいかない

baseがうまくできたので、tabletもうまくできると思ったのですが、撃沈しました。もう少し頑張ろう。

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

Webサイト模写 その２

ついに、１００日目を迎えてしまいました。課題をクリアできない初心者ですが、積み上げだけは立派になりました（笑うところです）。

1. ぐだぐだになった体裁
2. girdに変更
3. 無事に表示される
4. 修正
5. 続、修正
6. 続々、修正
7. pc.css
8. 修正
9. もう少し

１００日で終わりませんでした。明日も頑張ります。

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

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に挑戦します！

前編はこちらです。
→初心者のプログラミングチャレンジ物語【前編：６１日目から８５日目まで】

満稀（みつき）

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

XContact

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