バカみたいに短い前書き
頑張りたい。
頑張りたいと思いながら常日頃生きているが、結果１ｍｍも頑張れない毎日を送っている。それが僕だ。
頑張らないといけないわけではないが、とにかく頑張りたい。でも頑張らない。
では頑張るためにはどうすればいいか、頑張る様子を監視してもらえばいいのだ。
磯野、一緒に地獄見ようぜ。
What is this?
前置きは短ければ短いほど良い、みたいなことを聞いたことがあるので、超特急で前書きを短くした。
結果、何も伝わらない前書きになった。なので補足的に企画内容を説明したいと思う。
◆発端
努力という言葉が無責任に好きなのだが、自分自身それをしたことも、他人が努力している過程を凝視したことも無かった。
が、ある日YouTubeで動画をみていた時、次の二本の動画に衝撃を受けた。
ゲームの対人戦でランクを上げたい、というキャッチーでポップな内容なのだが、よくよく見てみれば投稿者の本気度と思考法は一目も二目も置けてしまうものだ。
決して、決して妥協しないよう自信を奮い立たせるメンタルコントロール、より効果的に上達への道を辿るための冷静で厳格な分析方法、そしてそれを実行するある種の執念深さ。
ひとえに「努力」として風呂敷に包んでいた僕のパラダイムは、大きく大きくシフトさせられてしまった。
この動画を参考にしながら、自分もほんとうの「努力」をしていきたい。そう心が高鳴った。
◆企画内容
というわけでくだんの動画からインスパイアされた僕は、30日間何かについてコツコツ（これも苦手だ）頑張ってみることにした。
パソコンのワードファイルじゃなくてインターネットにアップすることにしたのは、やっぱり「もしかすると誰か見ているかも」「途中で挫折したらみっともないな」「下手な成果じゃダメだよな」と自分を奮い立たせ、そして同時に背水の陣に立つためである。
ざっくりしたルールは以下の通り。
- 30日間、毎日やったことをここに日記として追記していく。
- 記録する内容は「取り組んだことと取り組んだ時間」「できるようになったこと」「今後の課題」
- 何もやらなくても、正直に書くこと。
- 一日の文量をなるべく最低限にすること（そうじゃないと続かないから）
◆何をするのか？
この企画フォーマットが上手くいったら、自分のためにもどんどこ続けていきたい。
だから敢えて、初回なのに「今回は」という言葉を使わせてもらえば…
今回は、何をするのか。
「HTML＆CSS」の習得によるWebサイト制作である
最終目標は
『自分のブログやこの企画についてまとめた紹介ページを作ること』
である。
頑張るぞ。
◆注意
30日完走後にもっと見やすくまとめて新しい記事としてアップする予定でいるので、当記事は本当に「下書き」みたいになる予定。
だから書き直した後にこの記事消えるかも、ヨロシク。
では、ほんへに行ってみよう。
30日間本気で頑張ればWebサイトは完成するのか？
第１週目
０日目（３月７日：25時37分）
前提について話しとかないと。
実は僕、プログラミングは完全初心者じゃない。VSCodeもちゃんと搭載しているし…なんならHTML＆CSSもぜんぜん今から初めて触るじゃない。２週間前くらいからちょびっとずつ始めちゃってる。
Webサイトも一応、ローカルで動くようになってる。
ちなみに勉強に使ってる本はコレ。Amazonのリンク載せとくね。
とりあえず、この本のCSS編の途中まで今やってるから、明日からはそれを進めていこうと思う。
流れとしては、
- 本を一通りやって基本習得
- そのあとWebサイトの骨子を作る
- 必要な知識はGoogle大先生に
みたいなのを想像してます。じゃ、寝て起きたらガンバロウ。
１日目（３月８日）
【取り組んだ時間】
・３時間
【取り組んだこと】
・CSSのレイアウト操作の練習、フルスクリーンのページ制作の写経、ファビコンの設定方法、あとはひたすら写経。現在は２カラムページの写経中。
【できるようになったこと】
・ファビコンの設定方法（もっと難しいと思っていた）
・実はコーディングより素材用意の方が自分にとっては大変だとわかった
【今後の課題】
・集中力が低すぎて、一日24時間のうち３時間しか勉強できていなかった。
・写経ばかりで勉強しているので、ゆくゆくは何も見ずにコーディングできるようになっていきたい。
２日目（３月９日）
【取り組んだ時間】
・３時間
【取り組んだこと】
・今日も今日とてハイパー写経
・２カラム（縦に二分割された）サイトの写経
・タイル型のページの写経（あれね。メニュー表みたいな）
・メッセージフォームの作成…の写経
・displayについて調べた
【できるようになったこと】
・rem,px,%の違いをきちんと勉強した。（https://note.com/takamoso/n/nde1275183086）曰く、pxはドット数、remは一個上の要素との比率、％はremに似ているがプロパティの要素に対する比率。
・思っていた２倍くらい、美術のセンスが要る仕事だとわかった
【今後の課題】
・もうちょい時間を増やす。今日は髪を切りに行ったり27万円払ったから仕方ない
３日目（３月10日）
【取り組んだ時間】
・１時間
【取り組んだこと】
・Google Mapの埋め込み方法の写経
・日向坂46の４期生募集サイトを分析・ローカルで改造した
【できるようになったこと】
・人の書いているHTML、CSSのコードが読めるようになった！！
・日向坂のコーディングした人はかなり仕事が丁寧だった。スキ。
【今後の課題】
・やっぱり作業時間だよね…。
４日目（３月11日）
【取り組んだ時間】
・30分
【取り組んだこと】
・ちょっぴり写経…
【できるようになったこと】
・id, classの具体的区別/活用方法を勉強した
【今後の課題】
・シンプルに時間。毎回これ言ってるな
５日目（３月12日）
【取り組んだ時間】
・４時間
【取り組んだこと】
・Twitter,Facebook,YouTubeの埋め込みプラグインの勉強
・外部メディアのカスタマイズ方法を学習
・とうとうHTML＆CSSの入門講座が終わった！
・自分のサイトのサイトマップを書いた
・目次ページの画像を用意し、軽くコーディング
【できるようになったこと】
・自分で素材を用意する環境を整えた
・ある程度自分でコードを見ながらサイトを調整できるようになった：今日はフォントの整備が完璧？に！
【今後の課題】
・ちょっと写経癖というか、原理から理解せずに行きあたりばったりでコーディングしているので、もう少し効率的に。
・あとなんかロゴと文字が離れすぎになっちゃった。なんで？ こればかりは原因不明
６日目（３月13日）
【取り組んだ時間】
・４時間30分
【取り組んだこと】
・全部で５つのファイル（目次、Works、Formなど）のうち目次ページの骨組みを完成
・Works（今まで書いてきた小説やブログのまとめ）ページに使う素材を調達。
・紹介文などを作文。
・パリパリにコーディング。CSS。
【できるようになったこと】
・class内でclassを定義した際に、分けて使えることが発覚。最高。
・画像加工ソフトになれてきた。スマホのほうがやりやすい。スマホを仕事用で使う人の心理がわかってきた。
【今後の課題】
・何故か同じCSSファイルでコードも同じなのに表示のされ方が違う場合があって、原因が本当にわからない。昨日も言ったように「原理」を理解していきたい。
７日目（３月14日）
【取り組んだ時間】
・１時間30分
【取り組んだこと】
・Works部分の文章打ち込みとレイアウト、フォントの微調整
【できるようになったこと】
・黒歴史とも向き合った。
【今後の課題】
・もしかしたら今後レイアウトを大幅変更することに備えて、もっと柔軟性のあるタグ付などしておけばよかったのに…と思った。
第一週（３月８日～３月14日）
・とりあえず入門本ができたのはよかった。
・ちなみに構造としては
□Index.html（最初にアクセスするページ）
┣□Products.html（今まで書いてきたブログや作品をまとめているページ）
┣□Blog.html（ブログみたいなものを載せるページ）
┣□About.html（紹介ページ）
┗□Form.html（お問い合わせページ）
みたいになっていて、今は全体の20％目、Products.htmlを作っている。
――ここまで：合計17時間
第２週目
８日目（３月15日）
【取り組んだ時間】
・１時間
【取り組んだこと】
・Products.htmlの文章打ち込み
【できるようになったこと】
・昔の文章を冷静に読めるようになった
【今後の課題】
・でも文章打ち込みよりコーディングを先にしたほうが、骨組みから作った方がいいのではという至極当然な疑問を無視して文章を書き続けるのは如何なものか。
・明日からとりあえずテキスト仮置きしてコーディングの方先にしてこうかな～
・明日の俺に任せる
９日目（３月16日）
【取り組んだ時間】
・１時間
【取り組んだこと】
・Products部分を仮置きコメントでおいておいたよ、昨日の俺
・全ページにフッターを追加
・Blog.htmlのトップ部分を作成。小小説を書いた。
【できるようになったこと】
・フッターが以外と簡単に作れると把握
【今後の課題】
・CSSの根本的理解という部分をガン無視している
10日目（３月17日）
【取り組んだ時間】
・ちょっとだけ…。
【取り組んだこと】
・ブログ部分の文章を添削・入力
【できるようになったこと】
・特にナシ
【今後の課題】
・忙しかったのはわかるが、こういう日を作ってはいけない。少なくとも「30分」はやりたい。毎日ちゃんと積み重ねたいのに、このありさまをネットに公開するのは憚られる。
11日目（３月18日）
【取り組んだ時間】
・１時間30分
【取り組んだこと】
・なんと、一からやり直した
・タグ付けや共通classなどをメチャクチャにしているせいで思うような（MECEな）分類ができず突貫工事で（見た目がととのえばよかろうと）メチャクチャなコーディングをしていたから。そして入門本から何も考えず移植しまくっているせいで「成長」を一ミリもしなそうだから。ね。
・でとりあえず今日はまたIndexから構築中。作るものは何も変わらない。
【できるようになったこと】
・コメントアウトに気を付けて見やすくわかりやすい画面の状態を作れるようになった
・を考えてコードを書けるようになった。このjustify-contentは何の意味があるのか？ リストの横の点を消すにはどうすればいいのか？ など。
【今後の課題】
・二度とやり直しが無いように、丁寧丁寧丁寧に描くと決めたんだよ
12日目（３月19日）
【取り組んだ時間】
・４時間
【取り組んだこと】
・Index.htmlの打ち込み
・padding,marginとか、displayのプロパティとか、一々自分で調べて確認しながらコーディングをした
【できるようになったこと】
・paddingは要素の端（お家の外壁）からブロック内（フェンス）まで。marginはフェンスから車道までの歩道部分。
・displayに関してどこにどのプロパティを適用すればやりたいことができるか、親要素や子要素を意識しながら試行錯誤できるようになってきた
・CSSでコメントアウトを駆使したり、共通で使えそうな部分のclass名に気を遣って、少なくとも俺が使いやすいコーディングができている
【今後の課題】
・丁寧にやりすぎて進捗がヤバい
13日目（３月20日）
【取り組んだ時間】
・30分
【取り組んだこと】
・Index.htmlのトップ部分の打ち込み
【できるようになったこと】
・特にナシ。作業回
【今後の課題】
・マジで単純な作業時間が足りないって言ってんの、こっちは。
14日目（３月21日）
【取り組んだ時間】
・4時間
【取り組んだこと】
・Works.htmlのレイアウト下書き
・実際にコーディング
【できるようになったこと】
・gridの仕様を勉強した
【今後の課題】
・特にナシ。しいて言えば進捗がヤバい。
第二週（３月15日～３月21日）
・作り直した。
・構造も変えた。
□Index.html（最初にアクセスする）
┣□Works.html（今まで書いてきたもの纏めてるやつ）
┣□Blog.html（ブログみたいなものを載せるページ）
┣□About.html（紹介ページ）
┗□Form.html（お問い合わせページ）
現在、Works作っている。
――ここまで：合計29.5時間
第３週目
15日目（３月22日）
【取り組んだ時間】
・30分
【取り組んだこと】
・Works.htmlの編集
【できるようになったこと】
・特にナシ。
【今後の課題】
・特にナシ。
16日目（３月23日）
【取り組んだ時間】
・1時間
【取り組んだこと】
・Works.htmlのレイアウト完成
【できるようになったこと】
・タグの使い分け
・続・親要素と子要素の理解
【今後の課題】
・進捗がヤバい。
17日目（３月24日）
【取り組んだ時間】
・4時間
【取り組んだこと】
・Works.html完成！
・worksの各作品に対するページ制作。
・Blog.htmlページ着手
【できるようになったこと】
・相対パスによる参照の方法
・地味な調整に次ぐ調整
・font-weightとjustify-contentsの仕様をざっくり理解
【今後の課題】
・ちょっとネットに公開したい気もしてきたからそれも調べたい。
18日目（３月25日）
【取り組んだ時間】
・1時間30分
【取り組んだこと】
・Blog.html完成！
・About.htmlページ着手
【できるようになったこと】
・borderセレクタについて理解
・display flexをどこに掛ければ理想のレイアウトになるのか、完全に理解した
・max/min-widthやmax/min-heightを予め適用しておくことで、今後別の画像に挿げ替えても完ぺきに対応できるようにした
【今後の課題】
・時間を、割きたい
・文章を全て仮置きコメントにしているので、この記事のラスト１週間はずっと文章を書くことが懸念される
・Blogページの画像対応ができていないので、これは余裕があればすることにする
19日目（３月26日）
【取り組んだ時間】
・2時間
【取り組んだこと】
・About.htmlの概要は完成
・Form.htmlをContact.htmlと名称変更
【できるようになったこと】
・特にナシ。ただ、昔オモコロのテックキャンプのPR広告で読んだ「一つの変数の名前を変えるだけで大変」みたいな文言の意味を理解した。ヤバい
【今後の課題】
・Aboutページ、Blogページともにもうちょっと体裁を整えられる気がしている
20日目（３月27日）
【取り組んだ時間】
・3時間30分
【取り組んだこと】
・大体枠組みは全部完成！！！！！！！
・嬉しい
【できるようになったこと】
・on-click要素の設定方法
【今後の課題】
・文章を書きまくるターンが来る
・ビジュアルが雑だから、もっとやっていく
21日目（３月28日）
【取り組んだ時間】
・30分
【取り組んだこと】
・Index.htmlの文章書いた～
【できるようになったこと】
・特にない
【今後の課題】
・特にない…進捗…。
第三週（３月22日～３月28日）
・コーディングはマジで完成！
・なので後は文章を書くだけ
・なのだが…
――ここまで：合計42時間
第４週目
22日目（３月29日）
【取り組んだ時間】
・0分
【取り組んだこと】
・Not found 404
【できるようになったこと】
・ちょんぴぃ♡
【今後の課題】
・マジで詰めが甘い。俺の詰めの甘さが遺憾無く発揮されている。コーディングできたからといって文章を打つのをサボっている。まあ教員免許の手続きで忙しかったのも、あるけど、それは多分言い訳に過ぎない。
23日目（３月30日）
【取り組んだ時間】
・30分
【取り組んだこと】
・Index.htmlの文章完成
【できるようになったこと】
・――
【今後の課題】
・ま、間に合うのか？完成に
24日目（３月31日）
【取り組んだ時間】
・30分
【取り組んだこと】
・Works.htmlの文章
【できるようになったこと】
・――
【今後の課題】
・技術云々の問題でないから、本当に書くことがない
25-30,ひたすら文字を打ち込んだら完成しました…いうこと何にもなかった…
