プログラミング
PR

初心者のプログラミングチャレンジ物語【前編:61日目から85日目まで】

mitsuki
記事内に商品プロモーションを含む場合があります。
Contents
  1. 初心者のプログラミングチャレンジ物語【前編:61日目から85日目まで】
  2. 初心者のプログラミングチャレンジ【61日目】
  3. 初心者のプログラミングチャレンジ【62日目】
  4. 初心者のプログラミングチャレンジ【63日目】
  5. 初心者のプログラミングチャレンジ【64日目】
  6. 初心者のプログラミングチャレンジ【65日目】
  7. 初心者のプログラミングチャレンジ【66日目】
  8. 初心者のプログラミングチャレンジ【67日目】
  9. 初心者のプログラミングチャレンジ【68日目】
  10. 初心者のプログラミングチャレンジ【69日目】
  11. 初心者のプログラミングチャレンジ【70日目】
  12. 初心者のプログラミングチャレンジ【71日目】
  13. 初心者のプログラミングチャレンジ【71.5日目】
  14. 初心者のプログラミングチャレンジ【72日目】
  15. 初心者のプログラミングチャレンジ【73日目】
  16. 初心者のプログラミングチャレンジ【74日目】
  17. 初心者のプログラミングチャレンジ【75日目】
  18. 初心者のプログラミングチャレンジ【76日目】
  19. 初心者のプログラミングチャレンジ【77日目】
  20. 初心者のプログラミングチャレンジ【78日目】
  21. 初心者のプログラミングチャレンジ【79日目】
  22. 初心者のプログラミングチャレンジ【80日目】
  23. 初心者のプログラミングチャレンジ【81日目】
  24. 初心者のプログラミングチャレンジ【82日目】
  25. 初心者のプログラミングチャレンジ【83日目】
  26. 初心者のプログラミングチャレンジ【84日目】
  27. 初心者のプログラミングチャレンジ【85日目】

初心者のプログラミングチャレンジ物語【前編:61日目から85日目まで】

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

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

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

Webサイト模写 その1

当たり前のように、前回の続きからはじめていきますね。一段落がついたため、少しだけタイトルを変えました。

  1. navがあったことに(今さら)気付く
  2. 何も思い浮かばないため、保留
  3. 検索ボックスの体裁崩れ
  4. baseでうまくいかなかったところ
  5. tabletで行き詰まったところ
  6. flexに挑戦する
  7. ちょっと違う
  8. divで区切る
  9. 雰囲気出た
  10. HTMLを修正
  11. 雰囲気出た
  12. 中央に余白を作れない
  13. baseに書いちゃった……

「超初心者」は卒業したと思いますが、まだまだ「初心者」の領域から抜け出せていません。初級者、くらいにランクアップしたいところです。HTML、各CSSを書き分けていくことに、なかなか慣れないのが悔しいです。経験値不足は否めないので、地道にスライムを倒し続けていきます。

 

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

Webサイト模写 その1

まだまだミスが初心者ですね。気を引き締め直していきます。

  1. baseに書いてしまった(失敗)
  2. 全部tabletに移動
  3. baseをコメントアウト
  4. 無事に表示される
  5. base表示のためbr挿入
  6. 体裁を修正
  7. ボタン幅を直したい
  8. baseでwidthを90%
  9. 微妙だけど保留
  10. hrがここだけ崩れる
  11. 原因はこの辺り?
  12. こっちは問題なし

blockquoteの書き方が悪いのではないか、と推測を立てています。見た目はblockquoteですが、別にタグまでblockquoteにこだわる必要性はない気がします。FontAwesomeを使うなら、なおさらですよね。検討、検証してみます。

 

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

Webサイト模写 その1

FontAwesomeに協力をお願いしてblockquoteを諦めてみようと思います。

  1. blockquoteを修正する
  2. baseをコメントアウト
  3. tabletをコメントアウト
  4. baseは良い
  5. 何故かうまく直る
  6. float+paddingで整える
  7. こちらも大丈夫
  8. 問題その1
  9. 問題その2とその3
  10. 問題その4
  11. copyrightは修正完了

最初にblockquateを書き、その後FontAwesomeを使い、HTMLとCSSが散らかったままだったのが、原因かもしれません。うまく直せた勢いでcopyrightを修正しました。この部分をいろいろ考えていたら、何となくinline-blockのことがわかった気がします。今後に生かそう。

 

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

Webサイト模写 その1

baseのheaderトップ、アイコンにnavをつけたいです。

  1. アイコンにnavを反映させたい
  2. まずはアイコン挿入
  3. HTMLを修正
  4. CSSを書く
  5. 全て重なる(笑うしかない)
  6. 位置を指定してみる
  7. おぉ!(感動した)
  8. アイコンにnavを反映させたい
  9. inputかdetailsか?

画像や文字を重ねるときは、relativeとabsoluteを使いましょう。navリストの表示方法は、inputが良いのかdetailsが良いのかわかりません。実はどちらも書いてみたのですが、しっくりこなかったのです。課題、持ち越しです。

 

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

Webサイト模写 その1

アイコンにnavをつけたいと言いつつ、もう3日目です。

  1. HTMLを書く
  2. CSSを書く
  3. もう一回HTML
  4. 惜しい?
  5. absolute?
  6. text-alignとmargin-left
  7. background-colorとpaddingに
  8. 大分、惜しい

微妙な部分が直らないときは、とても悔しいです。が、「微妙に直らない」ときこそ「根本的な間違い」が起きていると思います。作戦変更を検討です。

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

Webサイト模写 その1

アイコンにnavがついたので、次の課題です。

  1. 課題
  2. flexよりgrid?
  3. HTML修正
  4. CSSコメントアウト
  5. h2修正
  6. h3修正
  7. cssを書く
  8. お?
  9. おぉ!
  10. 惜しいけれど
  11. HTMLの揃え方がわからない
  12. picture、h3、articleに戻す
  13. もう少し
  14. 余白の修正が上達

タグの使い分けを、もう一度復習したくなりました。自分デフォルトはいろんな表現とpだったのですが、cssを指定するためならdivタグの方が有効である気がします。SEO対策などいろんな要件を考えなくてはいけないので、もう一度基本に戻って勉強します。

 

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

Webサイト模写 その1

nav固定が課題です。

  1. nav固定が課題
  2. stickyを書く
  3. 何も起きない
  4. fixedも変わらない
  5. う~ん…
  6. うう~ん…
  7. Google先生に聞いてみる
  8. CSSだけで位置を固定
  9. う~ん…

jQueryを使う方法がたくさん紹介されていますが、今はHTMLとCSSしか使えない(という前提条件)のため、CSSで実装できる方法を探しました。見つかりませんでした。邪魔をしているのは、親要素「position: absolute;」だと思っています。思っているのですが、アイコンnavとスクロール固定を同時に成立させる方法が思いつきません。困りました。

 

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

Webサイト模写 その1

nav固定は保留して、tabletに移ります。nav固定はあとから考えます。

  1. tabletに挑戦
  2. 崩れた場所
  3. 要素が不十分
  4. まずはfooterから
  5. cssを書く
  6. 変化なし
  7. footerにclass指定
  8. footerのリンクだけ文字色変更
  9. 無事に表示される
  10. 崩れていないことの確認

初心者の勢いを利用してHTMLを書いていたため、divとp、idとclassなど、間違えやすい場所を思い切り間違えています。書きながら、少しずつ覚え直していきます。

 

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

Webサイト模写 その1

初心者の勢いを大切にしつつ、少しずつ修正していきます。

  1. cssをまとめたい
  2. やればできる
  3. 要素を元に戻す
  4. idを付与
  5. HTMLの記述位置が違う
  6. 位置を修正、divに変更
  7. baseが崩れる
  8. base修正、無事に表示される
  9. tablet表示、微妙に違う
  10. 直してみる
  11. うまくいかない
  12. 実験
  13. 違う気がする…
  14. これも何か違う……

書いては直し、書いては直し、だったのですが、結局うまく表示されませんでした。inline、block、display、visibilityでもない。まだ惜しくない状態なので、これから頑張らなくてはいけません。あと残っているのは、何だろう。

 

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

Webサイト模写 その1

初心者の勢いを大切にしつつ、少しずつ修正していきます。

  1. 気持ちを新たに、頑張ろう
  2. base修正
  3. HTMLにhr挿入
  4. base修正
  5. 無事に表示される
  6. 体裁が整わない
  7. divにしてみる
  8. idをつけてみる
  9. 表示されない
  10. これも表示されない…

簡単に修正できると考えていたのですが、うまく表示させられませんでした。細かい修正が、とても難しいです。何か動いてくれないと、解決の糸口がつかめませんよね。変化なしと崩れるのでは、いっそ崩れてくれた方が修正しやすい気がします。

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

Webサイト模写 その1

細かい部分の修正が上手くできない日々です。

  1. 直すと崩れるパターン
  2. headerを直す
  3. footerを直す
  4. header、footerよし
  5. 隠れた文字あり
  6. 挑戦する
  7. 消えた……。
  8. バックアップ大事(涙)
  9. baseと同じ要領で書いてみる
  10. 大事故発生

grid枠の指定が良くない、HTML記述でdivを使って細切れにしているのが良くない、と思いました。baseでは表示されるけれど、これでは切り替えが利きません。baseの表示ごと、方法を変える方法はないかしら。

 

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

Webサイト模写 その1

grid指定の前に、HTMLを見直す必要がありそうです。

  1. brは必要か?
  2. 整っている、ように見える
  3. paddingではない
  4. marginか?
  5. brを消す
  6. 無事に表示される
  7. お?

grid、flexの前に、HTMLを見直していたため、71.5日目です。余計なbrを消したら、希望の光が見えました。

 

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

Webサイト模写 その1

希望の光に向かって、前進あるのみです。

  1. baseは崩れない
  2. tabletに挑戦
  3. 余分なコードを消す
  4. お試しflexは変化なし
  5. display:block
  6. 画像幅が広がらない
  7. 修正してみる
  8. block幅も広がらない
  9. flex:auto
  10. 問題は画像幅

header、footerも同じ状態で、画像を横幅いっぱいにすることができません。何か同じ間違いをしていると、推測して、対策を考えます。

 

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

Webサイト模写 その1

微妙な修正が、一番難しいと思っています。

  1. base、tabletの切替えサイズ
  2. 600→750
  3. ちょっとずつ気になる
  4. font、marginを修正
  5. copyrightが気になる
  6. HTML修正
  7. お?
  8. baseが崩れる
  9. HTML修正
  10. tabletが崩れる
  11. 微妙に直る
  12. 思い切ってinline-flex
  13. 無事に表示される

大分、考えて書き直して、整えられるようになってきたと思います。gridとflex、inlineとblockの経験値が少し溜まってきました。小さな積み重ねが大切ですね。

 

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

Webサイト模写 その1

微妙な修正の積み上げ中ですね。

  1. アイコンの挿入
  2. fontawesomeを使用
  3. HTMLを書く
  4. tabletを書く
  5. 表示される
  6. 試しにinline
  7. 変化なし
  8. 右に寄らない
  9. divで囲む
  10. 右に寄らない
  11. 宿題

どうしても右寄せにすることができません。inline、block、inline-○○などいろいろ試してみたのですが、どうしてもうまくいきませんでした。宿題です。

 

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

Webサイト模写 その1

微妙な修正の積み上げ中。いろいろ気になる部分があるのに、なかなか直せないですね。難しいです。

  1. 気になる余白
  2. 気になる文字ずれ
  3. まずmargin
  4. 無事に表示される
  5. 次はfont-size
  6. 無事に表示される
  7. base、tabletがほぼ完成?
  8. 課題1:フルサイズ
  9. 課題2:集計結果
  10. 課題3:上下のナビ
  11. 課題4:写真100%幅
  12. 課題5:フルサイズ
  13. 課題6:写真100%幅
  14. 課題7:アイコン

予想より多めに、解決していない問題がありました(反省)。今のところ、解決策が思い浮かばないため、次回からpcを書いていきます。

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

Webサイト模写 その1

pcに突入です。できる部分から、直していきます。

  1. 体裁崩れを確認
  2. mainは右に寄っている
  3. footerは左に寄っている
  4. h2のfont-size
  5. 無事に表示される
  6. 思い切って消してみる
  7. この辺りから開始
  8. hrを修正
  9. 位置がおかしい
  10. 打ち消しmargin:auto;
  11. display:grid;
  12. なるほど
  13. HTMLにdiv追加
  14. 無事に表示される
  15. 体裁を整える
  16. div idを修正
  17. まずまず

自分の頭で考えながら、コードを書けるようになってきました。中途半端な位置から開始した理由は、解決方法を見つけられていない部分が最初にあったからです。

 

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

Webサイト模写 その1

思いの外、サクサク進められているような気持ちです。本人の気持ちだけなので、気のせいかもしれませんが、気にしないで進めます。

  1. 今日はここから
  2. HTML修正
  3. baseは崩れない
  4. tabletも崩れない
  5. pcを書く
  6. 無事に表示される
  7. 左右が逆
  8. div idを付与
  9. grid columnとrow
  10. 無事に表示される

昨日と今日の要領で書いていけば、それなりに体裁が整うのではないでしょうか?tablet作成時の課題解決方法を模索しつつ、pcを地道に書き続けていきます。

 

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

Webサイト模写 その1

できるところから、コツコツ積み上げていきますね。

  1. 今日もgridから
  2. HTML修正
  3. pcを書く
  4. ありゃ?
  5. HTML修正
  6. 体裁が微妙…
  7. br挿入
  8. cssを分ける
  9. 無事に表示される

cssをまとめられそうで、まとめられなかったです。体裁を整えるためのbrをHTMLに直接挿入したのは、少し悔しいです。他に何か良い方法はないかしら??

 

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

Webサイト模写 その1

今日は書きまくる!が目標です。

  1. とにかく書こう
  2. HTML修正
  3. cssはまとめる
  4. 無事に表示される
  5. 前回と並び順が変わる
  6. HTML修正
  7. cssをまとめる
  8. 無事に表示される
  9. 同じ要領で続けて書く
  10. HTML修正
  11. css追加
  12. css追加その2
  13. 無事に表示される
  14. gridはふたつ
  15. HTML修正
  16. cssをまとめる
  17. 無事に表示される
  18. 本日の最難関
  19. HTML修正
  20. まず、崩れない
  21. cssを書く
  22. ……
  23. hrはブロック要素→宿題

最後に躓きました。そうですよね、hrはブロック要素ですよね。ということで、どうすれば左右に並べられるのかが、宿題になりました。どうすればいいのだろう…?

 

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

Webサイト模写 その1

プログラミングをはじめて、80日になってしまいました。スキルアップしている自信はないのですが、諦めずに続ける忍耐力は向上していると思います。

  1. hrをどうしよう
  2. HTMLでclass付与
  3. とりあえずinline
  4. つまり?
  5. HTML修正
  6. cssを書く
  7. 拡大
  8. css修正
  9. 無事に表示される

かなり力技でcssを書きました。もっと簡単に揃えられる方法がありそうな気がします。が、今は力技でも良としておきますね。

90日目までは、このままプログラミング勉強を続けます。90日経過後、言語選択や今後の勉強作戦などを考えていきます。もう少しだけ、初心者プログラミングにお付き合い下さいね。

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

Webサイト模写 その1

さすがにそろそろ、課題その1はクリアしたくなってきました。90日目までに何とかしたいので、頑張ります。

  1. これを
  2. こうしたい
  3. h2を左寄せ
  4. cssを書く
  5. それなりに表示される
  6. css追加
  7. 画像幅が問題
  8. baseは良し
  9. tabletで試す
  10. contain
  11. 確かに背景ではない
  12. 画像を変える
  13. baseは変化なし
  14. tabletで事故
  15. 定番cssを書く
  16. 親要素か…?

何となく、理解できた気がします。プログラミングでは「気がする」を「試して確かめる」ことが多いですね。挑戦する精神、トライアンドエラーを学べます。

 

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

Webサイト模写 その1

写真幅に全力で取り組んでみます。

  1. headerとfooterの写真幅
  2. HTMLの修正が必要?
  3. とりあえず、ここから挑戦
  4. baseはぴったり
  5. 大きい画像にする
  6. base変わらず
  7. tabletが変化
  8. css追加
  9. 無事に表示される
  10. pcは崩れている
  11. paddingとmargin
  12. 無事に表示される

最初から画像を小さくしていたのが、悪かったようです。cssでフレキシブルに操作できるのだから、指定画像は大きいものを使う方が、整えやすいことを学びました。これからは、画像サイズに遠慮しません(笑)。

 

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

Webサイト模写 その1

headerとfooterの写真幅に挑戦します。

  1. 画像が小さい
  2. 画像を変更
  3. 変化なし
  4. 変化なし
  5. 画像を変更その2
  6. 変化なし
  7. cssを書く
  8. 変化なし
  9. 変化なし

ここまで何一つ変わらないと、キッカケがつかめません。どこか、微妙に、でも良いので動いてくれれば、何か掴めるのですが……。

 

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

Webサイト模写 その1

画像幅の迷宮に入り込んでしまいました。出口が見えないため、footerに移行します。

  1. footerを整える
  2. cssを書く
  3. 足りない
  4. css追加
  5. 偏る
  6. padding
  7. アイコンが右に寄らない
  8. padding
  9. アイコンが気になる
  10. 親要素をflex
  11. おぉ?
  12. paddingとmargin
  13. HTMLに全角スペース
  14. 無事に表示される
  15. tabletも修正完了

footerがきれいに整いました。残ったのは画像幅と、navの上下固定ですね。何も思いつかないため、次の課題に進んでしまおうかと……悩んでいます。

 

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

Webサイト模写 その1

やり残しを探します。

  1. formをまとめて、画像に乗せたい
  2. position
  3. おぉ?
  4. startbutton
  5. う…
  6. HTML修正
  7. css修正
  8. 表示される
  9. css再修正
  10. 無事に表示される

formをまとめて、画像の上に乗せることができました!ずっと悩んでいたことが解決できて、とても嬉しいです。頑張れば、何とかなるのですね!! 諦めなくて、本当に良かったです。

ひとまず、完成(?)したので、スクロール動画を上げておきます。

後編はこちらです。
→初心者のプログラミングチャレンジ物語【後編:86日目から106日目まで】

ABOUT ME
満稀(みつき)
満稀(みつき)
大人だからこそ効率的に勉強したい運営者
社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。

【スポンサーリンク】

記事URLをコピーしました