プログラミング初心者の60日間チャレンジ【46~50日目】
プログラミング初心者の60日間チャレンジ【46日目】
Webサイト模写 その1
Webサイトの分析が終了したので、早速HTMLから書き始めます。
- フォルダを準備
- headとheaderから
- 次にfooter
- headerが無事に表示される
- footerも無事に表示される
- mainを書く
- 無事に表示される
- とにかく書いて、反映させる
- 途中に写真を埋め込む
- 無事に表示される
- mainを書き切って
- 無事に表示される
細かいことは抜きにして、とにかく書き続けました。きれいに表示させることができていないので、続きのCSSで追加していきます。そもそもHTMLが足りていない部分がありますが、これは最後の課題にします。それまでの間に、うまく表現できる方法を見つけられますように。
プログラミング初心者の60日間チャレンジ【47日目】
Webサイト模写 その1
HTMLを修正しつつ、baseを書いていきます。
- フォルダを確認
- 忘れていたCSS適用を書く
- baseを書くが、表示されない
- 1時間後、反映させることに成功
- 原因はスペルミス(反省)
- headerを書く
- 無事に表示される
- mainを書く
- 表示されるが「h2」が気になる
- 工夫してみる
- 挑戦
- 無事に表示される
- blockqoateに挑戦
- 無事に表示される
コードを書くとのスペルには気をつけていたのですが、CSSデータ保存で間違えているという、超初心者躓きです。気付くまで、かなり時間がかかってしまいました。間違えたときの動きを覚えて、もっと早くに(自分)バグ修正をできるようになりたいです。今日の躓きも経験値にします(反省)。
h1からh6までの使い方を考えた上で、表示方法を工夫してみました。これが良い方法なのかどうかはわかりませんが、考えたとおりに表示させられたのが嬉しかったです。まだまだ、頑張れそうです。
blockqoateもかなり時間がかかりました。ひとつひとつ動かしながら、どうにか見た目を作ることができました。不十分な感じもしますが、今日はこれで合格ということにしておきます。
プログラミング初心者の60日間チャレンジ【48日目】
Webサイト模写 その1
細かい部分の模写をしていきます。HTMLとbase.cssを行ったり来たりです。
- テンプレを作って復習
- 見本:hoverは下線
- 見本:リンクをボタンに
- hoverは無事に表示される
- ボタンは、惜しい感じに
- class指定を書く
- classにcssを加える
- 無事に表示される
- 見本:小さい水平線
- 見本:普通の水平線
- hrで、普通の水平線
- 無事に表示される
- class指定を書く
- cssを加えて、無事に表示される
思いつくままにコードを書き足しているので、記述順序があいまいなところがあります。記述順序が関係あるもの、ないもの、書く順序の理想、も覚えたいです。
プログラミング初心者の60日間チャレンジ【49日目】
Webサイト模写 その1
base.cssの残りの課題です。
- 難しいのは後回しにして
- footerを整える
- それなりに表示される
- ulのリストマークを消す
- 無事に消える
- チェックマーク?
- 丸のチェックマーク?
- スクロールバー?
- 煮詰まったため、blockquoteを直す
- hrを直す
- hrを直す
- 余白にセンスのなさを感じる……
直したいところを直しきれないまま、直せる部分を直すだけになりました。難しい課題+チェックマーク2種+スクロールバー削除、が問題ですね。
プログラミング初心者の60日間チャレンジ【50日目】
コードを書く時間がなかったため、復習です。
基礎知識を固め直そうと思い、参考書を片手にググりまくりました。が、しっかりした内容が結果に出て来なかったり、用語が難しすぎて理解できなかったり。 今日、理解できた部分はノートにまとめました。今後もカテゴリごとに理解し、覚えるためにまとめます。