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

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

初めてプログラミング勉強をしたときの記録記事を、取りまとめました。
前編はこちらです。
→プログラミング初心者の６０日間チャレンジ物語【前編：３０日目まで】

勉強開始前にどうしても読んでいただきたい記事は、こちらの２本です。
→プログラミング初心者の６０日間チャレンジ【検証結果】
→初心者がプログラミングを６０日間勉強して【悪かった点、良かった点】

この２本の記事を読んで、それでもやりたい！と思った方には、全力でプログラミング勉強をオススメし、全力で応援させていただきますね！

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

はじめてのレスポンシブWebデザイン入門講座　動画視聴

入門講座の視聴は４－１～４の４本で、視聴時間は約１６分でした。

・レスポンシブデザインの考え方
入門講座の最初に、この講義があって良かったのでは？と思いました。今さらだから理解できる部分もありますが、１－１でもう少し説明が欲しかったです。

・切り替えポイントを作る
理屈はわかりましたが、使い方が思いつきません。ウインドウを広げてブレークポイントを超えると、背景色が変化するのは、ちょっと面白かったです。

・段組を切り替える
めちゃくちゃオシャレですね。デザインは勉強だけではなく、センスが必要に感じてきました。どのくらいの大きさで段組を変えるのか、などは、デザインした人のセンスが現れると思います。見やすいデザインを考えた後に、コードを書かないといけませんね。気をつけます。

・更に見た目を整える
デザインのセンスが、さらに問われますね。どのくらいの幅（px）なのかを、どんどん修正していってしまいましたが、これは実践感覚で身につくのでしょうか。どこが不十分なのかが、すぐにわかってしまうのは、本当にすごいことだと思います。自分で書いたコードは、しっかり自分で直せるようになりたいです。

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

Responsive Web Design Tutorial and Explanation　動画視聴

動画視聴時間は約２０分でした。

今回の英語講義は、何となくわかったような気がします。知った単語が多くなったおかげなのか、ＣＳＳコードで動くサイトの動きが先読みできるようになったからなのかは、謎です。

動画は、今までの初心者レスポンシブをまとめた感じですね。コードを拡大してくれているので、とても見やすい動画です。

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

CSS3入門レッスンflexbox

動画視聴時間は約８分でした。とにかく便利そうな「flexbox」ですね。「float」よりわかりやすいことと、書き込むコードが短くなるのは嬉しいです。

「Webクリエイターボックス」さんのサイトで、「日本語対応！CSS Flexboxのチートシートを作ったので配布します」という記事があります。個人利用に限り、CSS Flexboxのチートシートを使わせて頂くことができるので、おすすめですね（無料ニュースレターの登録が必要です）。

初心者には、ありがたい情報です。

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

Bootstrap Tutorial For Beginners – Responsive Design with Bootstrap 3

動画視聴の前に「Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする」「初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる」の初心者向けの記事を２つ読みました。その後に動画講義で、視聴時間は約１４分でした。

「flexbox」は行（横方向）の区切りを重視し、「Bootstrap」は列（縦方向）の区切りを重視している感じがします。このふたつの使い分けは、行か列かで適正値を模索すればいいのかもしれませんね。（まだ、Webサイトをゼロから作成していないので、確かなことは言えませんが…。）

ここまで勉強して気付いたことは、プログラムするときは「ＨＴＭＬ」よりも「ＣＳＳ」の方を重要視されているということです。私はセキュリティの観点からプログラムを考えることが多かったため、内部動作を命じるＨＴＭＬにばかり注意が向いていました。これは、作成依頼者と保守側との相違が大きくなる原因ですよね。今さらですが、妙に納得できました。

そして、優秀なプログラマーが何をしてくれているのかも、ほんの少しですが理解することができました。内部動作、ビュー、セキュリティの要求を満たしてくれるプログラマーは、最強ですね。本当に感謝します。

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

ページをまるごと作ってみよう

いきなりWebサイトページの模写ができる気がしないので、参考書の「ページをまるごと作ってみよう」から挑戦開始です。

1. ファイル構成を考える
2. ファイルを作る
3. headとheaderでつまずく
4. とりあえずHTMLコードから書き始める
5. Webで表示させる
6. サンプル画像はあった方が良さそう
7. サンプル画像をダウンロード
8. タイトルと画像が表示させる

独り立ちの初日は、こんなものでしょうか？すぐに躓いたのは悔しいですが、ひとつずつ積み重ねるしかないので、とにかく小さくても積み重ねていきます。

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

ページをまるごと作ってみよう

昨日の続きで、HTMLコードを書き切りたいと思います。見本のページをお手本にしながら、とにかく書いていきます。

1. 見本のWebページを確認
2. headerを書く
3. 無事に表示される
4. mainを書く
5. 表示がおかしい（けど、無視）
6. footerを書く
7. 無事に表示される
8. 表示がおかしい場所に戻る
9. mainではなくheaderがおかしいことに気付く
10. 無事に表示される（HTML終了）

表示がおかしいときって、焦りますよね。自分ではきちんとコードを書いているつもりになっているので、自分で誤りを見つけるのが難しいです。もう少しSublimeTextに慣れてきたら、自分用に設定をカスタマイズしていきます。

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

ページをまるごと作ってみよう

HTMLを書いたので、次はCSSです。「base」「pc」「tablet」に分けるため、最初はbaseから挑戦していきます。

1. 見本のWebページを確認
2. ざっくり、カテゴリ分け
3. Web表示を小さくする
4. これ以上小さくならない？
5. 頑張って書いてみた
6. 何故か反映されない
7. HTML記述を忘れていることに気付く
8. 無事に表示される
9. navで思考停止（次回課題）

私としては、順調な進行具合です。もっと勉強時間を増やせば、もっと書き進められるのかもしれませんが、覚えながら進むにはこれくらいが限界です。一度、ひとつのWebページを書き切れば、要領も良くなるので、初めの一歩は踏ん張っていきますね。

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

ページをまるごと作ってみよう

baseのCSSの続きです。

1. しっかり復習
2. navを書く
3. 無事に表示される
4. まだレスポンシブではない
5. 次はメイン
6. 無事に表示される
7. footerでスペルミス発見
8. なぜか、行間が狭い
9. HTMLに戻る
10. 修正完了

今日は時間がかかりました。量は書いていませんが、何を書くのかを考えるのと調べるために、時間を費やしました。自分で考えることが、きっと大切。

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

ページをまるごと作ってみよう

tabletのCSSを書いていきます。

1. baseと同じカテゴリ分け
2. 変更部分をコピペ
3. 書き換えても、反映されない
4. HTML記述を忘れていることに気付く
5. 次も忘れそうなので、先に書いておく
6. 変更部分をコピペ（その２）
7. 書換え後、無事に表示される
8. 変更部分をコピペ（その３）
9. 記述が必要ない部分に気付く
10. 不要部分を探してみる
11. 消してみる
12. ＰＣ画面
13. タブレット画面
14. 無事に表示される

冗長なコードを書いてしまいました。使わないコードは、メモリの圧迫とセキュリティホールにつながるので、ダメですね。理由はわかっているのですが、何が冗長になってしまうのかを理解するまで、しばらく時間がかかりそうです。

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

ページをまるごと作ってみよう

tabletの続きからCSSを書いていきます。完成のあと、pcのCSSを書きます。

1. baseからtabletにコピペしようとして
2. 部分コピペで良いことに気付く
3. 無事に表示される
4. pc表示の設計図を確認
5. ページ全体を書く
6. 無事に表示される
7. ヘッダーを書く
8. navがおかしい
9. 記述が足りないことに気付く
10. 書き加える
11. 無事に反映される
12. メインを書く
13. 体裁がおかしい
14. セミコロンが足りない
15. まだ、体裁がおかしい
16. 『:first-child』に直す
17. 無事に反映される
18. フッターを書く
19. 無事に表示される
20. sample site完成

このコード書きをしている途中で、コントラスト比率を確認できるサイトを、参考書で知りました。良質なユーザインタフェースを考えるためには必要なため、即ブックマークです。

「ページをまるごと作ってみよう」はこれで完成しました。

しかし、この課題を簡単にクリアしたわけではありません。今日だけでも「:first-child」に気付けず、１時間くらいググり続けました。動画にまとめるとあっと言う間ですが、初心者ならではの躓きがいくつもあったと思います。めげずにこれからも、勉強＋実践を続けていきます。

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

Webサイト模写 その１

参考書なしのWebサイト模写のはじまりです。模写対象サイトは『Airbnbでおうち、アパート、お部屋をシェアしよう』です。まずは、サイト構成図とレイアウト図から作ります。構成&レイアウトが理解できれば、ググりながらコードを書ける！と思っていたのですが、なんだかしっくりいきません。

『bootstrapで作成されている』というヒントはありますが、それはCSSの話で、先に考えるべきなのは、HTMLなのでは？と、いろいろ不安になってしまいました。HTMLから構成を開始する、ような気がしている初心者です。

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

Webサイト模写 その１

HTML構成をスマホ版のビューから行いましたが、うまくいきません。スマホ版とPC版と見比べて、HTML構成を考え、CSSにとりかかる、という手順で試してみようと思いました。

作戦変更後、サイト構成を分析です。すぐに、つまずきました。HTMLイメージができないので、試しに見た目だけで分析していたら、何かコツが掴めそうな予感。タブレット&スマホも、見た目で分析してみます。

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

Webサイト模写 その１

スマホ版の構成分析をしていきます。ノートに書き込みをしつつ、自分テンプレートに変換できるように挑戦です。構成分析がうまくできれば、HTMLとCSSはググりまくるだけ(のはず)。

と考えて、作業をしていたのですが、課題のWebサイトの分析中に気になることが出てきました。『base.CSS』はPC版が良いのか、スマホ版が良いのか、です。気になってしまったので、先に、いろいろ調べて考えた結果。モバイルファーストで作った方が、書き込むコードが少なくなるようなので、baseはスマホに決めました。

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

Webサイト模写 その１

tabletの構成分析です。その後、baseスマホ版からHTMLを考えます。HTMLからCSSの順で作成するのだと思い込んでいましたが、Web見た目からHTMLとCSSを同時進行させる、方式が、私にはまとめやすいかもしれません。

base、tablet、pcの分析完了後、勢いに乗ったままで、base構成図に思いつく限りのHTMLをメモりました。HTMLを考えながら困ったのが、h1～h6の適切な使用方法とid値の命名規則です。初心者だからこその疑問を大切にして、勉強に生かしていきます。

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

Webサイト模写 その１

h1～h6の使い方を確認して、構成図に入れ込みます。id値は『冗長なく、わかりやすく』をモットーにして、割り振りを決めていきます。構成図が出来上がれば、コードを書いて動かすだけです。

h1を修正し、id値を設定し、HTML構成のイメージをつかみました。ヘッダーと浮遊タイルの表現方法がわからないのですが、まずは、試して書いていこうと思います。iconとimageはサイズを整えて保存しました。あとは実行あるのみです。

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

Webサイト模写 その１

Webサイトの分析が終了したので、早速HTMLから書き始めます。

1. フォルダを準備
2. headとheaderから
3. 次にfooter
4. headerが無事に表示される
5. footerも無事に表示される
6. mainを書く
7. 無事に表示される
8. とにかく書いて、反映させる
9. 途中に写真を埋め込む
10. 無事に表示される
11. mainを書き切って
12. 無事に表示される

細かいことは抜きにして、とにかく書き続けました。きれいに表示させることができていないので、続きのCSSで追加していきます。そもそもHTMLが足りていない部分がありますが、これは最後の課題にします。それまでの間に、うまく表現できる方法を見つけられますように。

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

Webサイト模写 その１

HTMLを修正しつつ、baseを書いていきます。

1. フォルダを確認
2. 忘れていたCSS適用を書く
3. baseを書くが、表示されない
4. １時間後、反映させることに成功
5. 原因はスペルミス（反省）
6. headerを書く
7. 無事に表示される
8. mainを書く
9. 表示されるが「h2」が気になる
10. 工夫してみる
11. 挑戦
12. 無事に表示される
13. blockqoateに挑戦
14. 無事に表示される

コードを書くとのスペルには気をつけていたのですが、CSSデータ保存で間違えているという、超初心者躓きです。気付くまで、かなり時間がかかってしまいました。間違えたときの動きを覚えて、もっと早くに（自分）バグ修正をできるようになりたいです。今日の躓きも経験値にします（反省）。

h1からh6までの使い方を考えた上で、表示方法を工夫してみました。これが良い方法なのかどうかはわかりませんが、考えたとおりに表示させられたのが嬉しかったです。まだまだ、頑張れそうです。

blockqoateもかなり時間がかかりました。ひとつひとつ動かしながら、どうにか見た目を作ることができました。不十分な感じもしますが、今日はこれで合格ということにしておきます。

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

Webサイト模写 その１

細かい部分の模写をしていきます。HTMLとbase.cssを行ったり来たりです。

1. テンプレを作って復習
2. 見本：hoverは下線
3. 見本：リンクをボタンに
4. hoverは無事に表示される
5. ボタンは、惜しい感じに
6. class指定を書く
7. classにcssを加える
8. 無事に表示される
9. 見本：小さい水平線
10. 見本：普通の水平線
11. hrで、普通の水平線
12. 無事に表示される
13. class指定を書く
14. cssを加えて、無事に表示される

思いつくままにコードを書き足しているので、記述順序があいまいなところがあります。記述順序が関係あるもの、ないもの、書く順序の理想、も覚えたいです。

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

Webサイト模写 その１

base.cssの残りの課題です。

1. 難しいのは後回しにして
2. footerを整える
3. それなりに表示される
4. ulのリストマークを消す
5. 無事に消える
6. チェックマーク？
7. 丸のチェックマーク？
8. スクロールバー？
9. 煮詰まったため、blockquoteを直す
10. hrを直す
11. hrを直す
12. 余白にセンスのなさを感じる……

直したいところを直しきれないまま、直せる部分を直すだけになりました。難しい課題＋チェックマーク２種＋スクロールバー削除、が問題ですね。

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

コードを書く時間がなかったため、復習です。

基礎知識を固め直そうと思い、参考書を片手にググりまくりました。が、しっかりした内容が結果に出て来なかったり、用語が難しすぎて理解できなかったり。 今日、理解できた部分はノートにまとめました。今後もカテゴリごとに理解し、覚えるためにまとめます。

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

Webサイト模写 その１

難しい課題が残っています。解決できるかどうかわかりませんが、挑戦あるのみです。

1. チェックマークの課題
2. Font Awesomeが使えるのか？
3. 実験
4. 下準備
5. 恐ろしいアイコン発見
6. 下準備
7. 撃沈
8. 「何か」が反映されているのは確か
9. もうひとつ、挑戦
10. 下準備
11. 惜しい
12. 明日の宿題

発想は良かったと思うのですが、結果が伴いませんでした。FontAwesomeが反映されません。空白が発生したということは、何かが読み込まれているはず。もう一工夫が必要みたいです。

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

Webサイト模写 その１

課題が解決できずに、悔しいです。そろそろ、何とかしたいですね。

1. 横スクロールバーが不要
2. 書き足してみる
3. そういう問題ではないらしい
4. 書き足してみる、その２
5. 惜しい
6. 同じ設定のはずなのに
7. 一度忘れて、FontAwesome
8. ダウンロードし直したら、反映される
9. 空白も、無事に反映される
10. 嬉しかったので、サイズを直す
11. 色を変える
12. サイズを直す

無事にFontAwesomeが表示されました。が、模写の観点で考えると、FontAwesomeではないですよね（反省）。CSSで直接デザインしていると推測しますが、まだ、私にそこまでの技術力がないため、許してやって下さいませ。

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

Webサイト模写 その１

ざっくりと、似た雰囲気を醸し出しています。模写した！とは、まだ言えませんね。

1. どうしても気になる
2. idを指定する
3. cssを書く
4. ダメでした
5. 検証してみる
6. と、いうことは？
7. もうひとつ、検証してみる
8. あれ？
9. 困ったときのTECKACADEMY
10. 参考書もある
11. idを指定する
12. cssを書く
13. ダメでした（ごめんなさい）

全然上手くいかない日でした。ここに挙げた以外のことも、いろいろと試してみたのですが、上手くいきませんでした。発想の転換をするために、明日からはtabletを書きます。

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

Webサイト模写 その１

baseを整えられていませんが、次に進みます。tabletに挑戦です。

1. 気持ちよくコードを書きたい
2. 余白を広げる
3. h2を中央に
4. hrを中央に
5. 余白を整える
6. footerを整える
7. 結局、整わない
8. hrを追加する
9. 無事、表示される
10. 表示を消す
11. 表示させる
12. 切り替え成功

微妙な完成具合で、ちょっと気持ちが悪いですね。footerリンクの切り替えができず、gridの幅がへたくそです。毎日、課題ばかり増えていますね。気合いを入れ直して頑張ります。

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

Webサイト模写 その１

あちらこちらつまずきながら、少しずつ進んでいます。

1. 今日はここを整えたい
2. classを指定
3. cssを書く
4. さもありなん
5. blockquoteを変えてみる
6. 少しマシになる
7. FontAwesomeの力を借りる
8. 随分マシになる
9. もうちょっと頑張る
10. float right
11. float left
12. 余白の調整
13. 余白の調整
14. 調子に乗って、もうひとつ頑張る
15. 似てきた

意地でコードを書き続けていますが、「全然模写になってない！」というお叱りの声が聞こえてきそうです。これまでの勉強で使用した教材しか使っていないため、思考力がまだまだ初心者なのですよね。しかし、マナブさんがロードマップとして提案してくれているということは「できる」準備は終わっているはず。諦めない気持ちで進みます。

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

Webサイト模写 その１

つまずいていても進んでいる！と信じている、終盤戦です。

1. 今日はこの辺から
2. idをつける
3. base.cssを書く
4. うまくできるようになってきた
5. HTMLを書く
6. 表示される
7. noneで消す
8. HTMLを追加
9. base.cssを追加
10. 玉砕

floatで玉砕です。実はgridも一度書いたのですが、こちらは全く動きませんでした。そのためfloatでどうにかしてやろうと思い、かなり踏ん張ったのですが、玉砕。ブロック要素の考え方が違うのかしら？毎日課題がてんこ盛りです。

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

Webサイト模写 その１

なかなか前に進めない、今日この頃です。

1. そっとコメントアウト
2. pc.cssに挑戦
3. headerを書く
4. およそ、表示される
5. mainを書く
6. display:noneのh2がいる
7. 数珠つなぎで崩れる
8. どうしよう……

全然解決方法が思いつきませんでした。残っている課題をbase、tablet、pcの順に片付けていった方が良さそうですね。baseに戻ります。

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

Webサイト模写 その１

もう一度baseから、順番に取り組んでみます。

1. 最初から、もう一度挑戦
2. headerのnavを消す
3. margintopを詰める
4. h1を画像の上に表示
5. startbuttonの設置
6. 無事に表示される
7. 体裁が崩れている
8. marginで直す
9. 惜しい
10. あと少しが難しい

marginで画像の上に文字を乗せているのですが、よくよく落ち着いて考えてみるとpositionを取れば良かったのではないでしょうか？最後の部分が上手くいかないのも、ゴリ押ししすぎが原因だと思われます。明日、改善してみます。

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

Webサイト模写 その１

微妙な感じで上手くいかないのが歯がゆいです。

1. ここを直したい
2. 画像と文字がdivの中
3. コメントアウト
4. positionに変更
5. 惜しい？
6. 落ち着いて書き直す
7. 元に戻る
8. classを修正
9. ボタンはうまくいく
10. 検証したのですが…

上手くいきそうだったのですが、結局上手くいきませんでした。何度も書き直しているうちに、何となくpositionの構成はわかってきました。画像に乗せる要素が１個なら、できました。２個乗せるためにどうすれば良いのか、もう少し検証していきます。

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

Webサイト模写 その１

position問題を残して、年は越せないのです。予定していなかった勉強のため、０．５日目のカウントをしています。

1. どうしてもここを直したい
2. 今の体裁
3. HTMLを修正
4. CSSを修正
5. 無事に表示される
6. 年越しできる♪

どうにかpositionを使って、表現することができました。たくさん失敗して、たくさん考えたので、positionのことは、しばらく忘れられそうにありませんね。

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

Webサイト模写 その１

目標としていた６０日目のプログラミングです。完成形から遠いところにいますが、進めていきます。

1. 課題の検索box
2. headerに書く
3. h1と重なりかすれる
4. mainに移動
5. 無事に表示される
6. 検索タイトルの体裁修正
7. formボックスを広げる
8. 角と開始位置が気になる
9. 無事に表示される
10. baseはまずまず

mainに検索boxを書きましたが、pc版の表示でpositionの使用を考えると、良くない書き方だと思います。あとから修正ですね。tabletに広げると、体裁が崩れます。ここから先は、より一層レスポンシブを考えていく必要があります。

６０日間をまるっとまとめた記事は、こちらの２本です。
→プログラミング初心者の６０日間チャレンジ【検証結果】
→初心者がプログラミングを６０日間勉強して【悪かった点、良かった点】

満稀（みつき）

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

XContact

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