プログラミング初心者の６０日間チャレンジ【３６～４０日目】
プログラミング初心者の６０日間チャレンジ【３６日目】
ページをまるごと作ってみよう
昨日の続きで、HTMLコードを書き切りたいと思います。見本のページをお手本にしながら、とにかく書いていきます。
- 見本のWebページを確認
- headerを書く
- 無事に表示される
- mainを書く
- 表示がおかしい（けど、無視）
- footerを書く
- 無事に表示される
- 表示がおかしい場所に戻る
- mainではなくheaderがおかしいことに気付く
- 無事に表示される（HTML終了）
表示がおかしいときって、焦りますよね。自分ではきちんとコードを書いているつもりになっているので、自分で誤りを見つけるのが難しいです。もう少しSublimeTextに慣れてきたら、自分用に設定をカスタマイズしていきます。
プログラミング初心者の６０日間チャレンジ【３７日目】
ページをまるごと作ってみよう
HTMLを書いたので、次はCSSです。「base」「pc」「tablet」に分けるため、最初はbaseから挑戦していきます。
- 見本のWebページを確認
- ざっくり、カテゴリ分け
- Web表示を小さくする
- これ以上小さくならない？
- 頑張って書いてみた
- 何故か反映されない
- HTML記述を忘れていることに気付く
- 無事に表示される
- navで思考停止（次回課題）
私としては、順調な進行具合です。もっと勉強時間を増やせば、もっと書き進められるのかもしれませんが、覚えながら進むにはこれくらいが限界です。一度、ひとつのWebページを書き切れば、要領も良くなるので、初めの一歩は踏ん張っていきますね。
プログラミング初心者の６０日間チャレンジ【３８日目】
ページをまるごと作ってみよう
baseのCSSの続きです。
- しっかり復習
- navを書く
- 無事に表示される
- まだレスポンシブではない
- 次はメイン
- 無事に表示される
- footerでスペルミス発見
- なぜか、行間が狭い
- HTMLに戻る
- 修正完了
今日は時間がかかりました。量は書いていませんが、何を書くのかを考えるのと調べるために、時間を費やしました。自分で考えることが、きっと大切。
プログラミング初心者の６０日間チャレンジ【３９日目】
ページをまるごと作ってみよう
tabletのCSSを書いていきます。
- baseと同じカテゴリ分け
- 変更部分をコピペ
- 書き換えても、反映されない
- HTML記述を忘れていることに気付く
- 次も忘れそうなので、先に書いておく
- 変更部分をコピペ（その２）
- 書換え後、無事に表示される
- 変更部分をコピペ（その３）
- 記述が必要ない部分に気付く
- 不要部分を探してみる
- 消してみる
- ＰＣ画面
- タブレット画面
- 無事に表示される
冗長なコードを書いてしまいました。使わないコードは、メモリの圧迫とセキュリティホールにつながるので、ダメですね。理由はわかっているのですが、何が冗長になってしまうのかを理解するまで、しばらく時間がかかりそうです。
プログラミング初心者の６０日間チャレンジ【４０日目】
ページをまるごと作ってみよう
tabletの続きからCSSを書いていきます。完成のあと、pcのCSSを書きます。
- baseからtabletにコピペしようとして
- 部分コピペで良いことに気付く
- 無事に表示される
- pc表示の設計図を確認
- ページ全体を書く
- 無事に表示される
- ヘッダーを書く
- navがおかしい
- 記述が足りないことに気付く
- 書き加える
- 無事に反映される
- メインを書く
- 体裁がおかしい
- セミコロンが足りない
- まだ、体裁がおかしい
- 『:first-child』に直す
- 無事に反映される
- フッターを書く
- 無事に表示される
- sample site完成
このコード書きをしている途中で、コントラスト比率を確認できるサイトを、参考書で知りました。良質なユーザインタフェースを考えるためには必要なため、即ブックマークです。
「ページをまるごと作ってみよう」はこれで完成しました。
しかし、この課題を簡単にクリアしたわけではありません。今日だけでも「:first-child」に気付けず、１時間くらいググり続けました。動画にまとめるとあっと言う間ですが、初心者ならではの躓きがいくつもあったと思います。めげずにこれからも、勉強＋実践を続けていきます。