初心者のプログラミングチャレンジ【６１～６５日目】

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

Webサイト模写 その１

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

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

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

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

Webサイト模写 その１

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

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を使うなら、なおさらですよね。検討、検証してみます。

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

Webサイト模写 その１

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

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

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

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

Webサイト模写 その１

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

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

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

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

Webサイト模写 その１

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

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

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

満稀（みつき）

大人だからこそ効率的に勉強したい運営者

TwitterContact

社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。