プログラミング初心者の60日間チャレンジ【46~50日目】

プログラミング日記

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

Webサイト模写 その1

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

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

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

 

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

Webサイト模写 その1

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

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

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

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

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

 

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

Webサイト模写 その1

細かい部分の模写をしていきます。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を加えて、無事に表示される

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

 

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

Webサイト模写 その1

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

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

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

 

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

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

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