DAY 9 課題の作成の反省と陥りがちなミス

日にちが空いてしまいました。

身内の不幸と本業のデスクワークの増加で、本当に学習時間がなくなってしまいました。

こうなったら本業にかけている時間を少しでも減らして、なおかつ土日の学習時間を増やす・・・

それでもおそらく足りないので、その時は１ヶ月期間を延長するしかないです。

「ひとまず、追いつけるだけスケジュールにおいつかないと」

ということでこの１週間はメンターさんと相談して第一の提出課題に取り組んでいました。

　グルメサイトのフロントエンド作成

最終的な仕上げとしては、今日の晩に講師の先生にコードを見ていただく予定です。

さて、かかった時間が１８時間ほど。

もう少し早くやれたはず。反省点は、

・完成予定図と要件チェックシートを印刷しとく

・全体をある程度の親要素ごとに分割して使用する CSS までを決めておく

これだけやるだけでも無駄な時間を大幅に減らせると思います。

まだまだテクニックがあるはずなので講師の先生から吸収したいところです。

そして、さまざまなスタイリングに適切な CSS は自分で調べますが、それでもプレビューしたら上手くいかないことが頻回に。

なんとなくその場合に多いのが、CSS の更新に気を取られて HTML を改変したにもかかわらずデータの保存を忘れていたことです。

そりゃあせっかく CSS を更新しても HTML と対応していなければ機能しませんよね。。。

さて、課題の校閲や採点はこれからとして、祝日の今日は自習内容を JavaScript へと進めていきたいと思います。

Day 9 時間の確保

本業の方でデスクワークが増えまして、なかなか進めにくくなりました。

少しでも空き時間にコードを打って進めていくしかないですね。

それでも、htmlの宣言から、head、charset、title、cssのlink、body...とスムーズに何も見ないで打てるようになってきました。

こうなると、コード全体の構成に関しても頭に残ってくるので、だいぶ知識が整理された感じがします。

Day 8 ブロックレベルの各要素

なんとなくやってしまいそうなことに文章中の余白を設けることがあります。

ブログなんかやっていると、

「ここは少し多めにスペースを取りたいから・・・」

と、段落と段落の間を広めに取り、「改行」を３、４回繰り返すなんてことがあります。

が、HTMLではこれをやらずに、ということなんですね。

覚えとこう・・・。

あと、ヘッダとかフッタとかWebページやワードに出てくる単語、なんとなく読み飛ばしていましたが、ここでちゃんと勉強しとこ。

Day7 文字の色や修飾

ちょっと日にちが空いてしまいました。

会食の他で夜の時間が取られると学習時間の確保が流石に厳しいですね。

対策せねば・・・

ひとまず、文字の色、大きさ、その他修飾をどのように設定するか見てきました。

基本的な流れは同じくCSSで設定しておいて、HTMLにLINKを飛ばす・・・

ただ、他の応用例を見ているとさらにJavaScripなんかを使ってボタン表示にしたり、一括表示にしたら要素だけでなくクラスをセレクタに選んでさらに細かく設定を分けた理、いろんな方法があることがわかりました。

さて、課題を作成できるかどうか、今週末はチャレンジです。

Day 5 CSS でカラーを

CSS では勿論色の名前でカラーを指定できます。

100色以上指定できます。色鉛筆で言えばすごい色の数ですが、

それでも制限されているのは間違いないですね。

そこで、RGB カラーです。

名前は聞いたことがあった RGB カラー。

昔の Macintosh でも画面の色調調整に「256色カラー」というのがありました。

256 という数字についてあまり考えたことなかったですが、よくないですね。

今回の学習で、中学の数学で n 進法をやったのを久々に思い出して懐かしくなりました。好きだったなー。

色の三原色、赤黄青、各色２桁とし、16進数で表現。

ということは一色につき 16 の二乗で 256 段階。

それが三色なので、256 の 3 乗で約 1678 万色。

すげー・・・

ちなみに0 から 9 までは算用数字ですが、10, 11, … ,16 は、a, b, …, f で表すわけですね。楽しいw

Day 4 初授業

HTML と CSS を教科書で読んで、コード書いてやってきましたが、今日はついに初授業です。

日曜にも関わらず、家族もあるので授業時間はよる・・・にも関わらず夜10時からお付き合いいただいた講師の先生、ありがとうございます。

そして、今の所コードは綺麗に書けているし、教科書にないことも面白そうなので試してみてたので、

「これからも続けてください」

とのお話をいただきました。

基本的にコードの書き方は教科書に載っているので、インデントなんかもそれの通りにやれば良いだけの話なのですが、自分で勝手に書いてみたコードだと化けの皮が剥がれますね。笑

<p> </p> の入れ子部分のインデントの取り方でプロ的には「気持ち悪い」部分がありました。そういったお話を聞けると本当にありがたいです！

素人が一人でやってたら絶対にプロの人の常識はそう簡単に入ってこないですからね！

いやあ、そう言うお話を聞けたのがいちばんの収穫でした。

また今後、もっと難しくなるであろう学習内容にも、ざっくりとした見通しをいただけたことは非常に encourageable でした。

あと、</xxx> みたいなのを「閉じタグ」と呼ぶんですね。

そう言うとこです！知りたいのは。

これからプロになる人間として、「ちゃんと知ってる人」になりたいですね。

さあ、ギアを上げてやっていこう♪

Day 3 HTML と CSS の基礎

いよいよ HTML と CSS の勉強に入る・・・

というところで問題が発生しまして、少し日が開きましたが本格的に始まります。

自分で ChatGPT なんかを使いつつホームページを作ってみたことはあるので、HTML、CSS、JavaScript はまだみたことがある分野。

ところが、やっぱり基礎を知らないのです（トホホ・・・）

ただの丸暗記は苦手、嫌いな私にとってこういうスクールで体系的に学べるのはありがたいです。

「タグ」と「要素」の違いや各要素が何の略かなんかも、意識して使うとモノづくりしてる実感が湧いてきて、プロセスが頭に定着していくのがわかります。

いざ、エディタに打ち込んでみます。

htmlでタイトルと本文をコードし表示させてみるも・・・

見事に文字化け。笑

調べると２大原因として、

・cherset で UTF-8 などの値を設定していない

・file の charset とエディタでの charset が一致していない

があるそう。

File の charset ってどうやって確認するの？

と思いましたが、私の場合、

・<mata charset>.の meta を meata と書き間違えてました・・・

いっぱい打ち込んで、凡ミスを出し尽くそうと思いました。