初心者のプログラミングチャレンジ【61~65日目】

プログラミング日記

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

Webサイト模写 その1

当たり前のように、前回の続きからはじめていきますね。一段落がついたため、少しだけタイトルを変えました。

  1. navがあったことに(今さら)気付く
  2. 何も思い浮かばないため、保留
  3. 検索ボックスの体裁崩れ
  4. baseでうまくいかなかったところ
  5. tabletで行き詰まったところ
  6. flexに挑戦する
  7. ちょっと違う
  8. divで区切る
  9. 雰囲気出た
  10. HTMLを修正
  11. 雰囲気出た
  12. 中央に余白を作れない
  13. baseに書いちゃった……

「超初心者」は卒業したと思いますが、まだまだ「初心者」の領域から抜け出せていません。初級者、くらいにランクアップしたいところです。HTML、各CSSを書き分けていくことに、なかなか慣れないのが悔しいです。経験値不足は否めないので、地道にスライムを倒し続けていきます。

 

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

Webサイト模写 その1

まだまだミスが初心者ですね。気を引き締め直していきます。

  1. baseに書いてしまった(失敗)
  2. 全部tabletに移動
  3. baseをコメントアウト
  4. 無事に表示される
  5. base表示のためbr挿入
  6. 体裁を修正
  7. ボタン幅を直したい
  8. baseでwidthを90%
  9. 微妙だけど保留
  10. hrがここだけ崩れる
  11. 原因はこの辺り?
  12. こっちは問題なし

blockquoteの書き方が悪いのではないか、と推測を立てています。見た目はblockquoteですが、別にタグまでblockquoteにこだわる必要性はない気がします。FontAwesomeを使うなら、なおさらですよね。検討、検証してみます。

 

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

Webサイト模写 その1

FontAwesomeに協力をお願いしてblockquoteを諦めてみようと思います。

  1. blockquoteを修正する
  2. baseをコメントアウト
  3. tabletをコメントアウト
  4. baseは良い
  5. 何故かうまく直る
  6. float+paddingで整える
  7. こちらも大丈夫
  8. 問題その1
  9. 問題その2とその3
  10. 問題その4
  11. copyrightは修正完了

最初にblockquateを書き、その後FontAwesomeを使い、HTMLとCSSが散らかったままだったのが、原因かもしれません。うまく直せた勢いでcopyrightを修正しました。この部分をいろいろ考えていたら、何となくinline-blockのことがわかった気がします。今後に生かそう。

 

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

Webサイト模写 その1

baseのheaderトップ、アイコンにnavをつけたいです。

  1. アイコンにnavを反映させたい
  2. まずはアイコン挿入
  3. HTMLを修正
  4. CSSを書く
  5. 全て重なる(笑うしかない)
  6. 位置を指定してみる
  7. おぉ!(感動した)
  8. アイコンにnavを反映させたい
  9. inputかdetailsか?

画像や文字を重ねるときは、relativeとabsoluteを使いましょう。navリストの表示方法は、inputが良いのかdetailsが良いのかわかりません。実はどちらも書いてみたのですが、しっくりこなかったのです。課題、持ち越しです。

 

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

Webサイト模写 その1

アイコンにnavをつけたいと言いつつ、もう3日目です。

  1. HTMLを書く
  2. CSSを書く
  3. もう一回HTML
  4. 惜しい?
  5. absolute?
  6. text-alignとmargin-left
  7. background-colorとpaddingに
  8. 大分、惜しい

微妙な部分が直らないときは、とても悔しいです。が、「微妙に直らない」ときこそ「根本的な間違い」が起きていると思います。作戦変更を検討です。