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

プログラミング日記

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

Webサイト模写 その1

つまずいていても進んでいる!と信じている、終盤戦です。

  1. 今日はこの辺から
  2. idをつける
  3. base.cssを書く
  4. うまくできるようになってきた
  5. HTMLを書く
  6. 表示される
  7. noneで消す
  8. HTMLを追加
  9. base.cssを追加
  10. 玉砕

floatで玉砕です。実はgridも一度書いたのですが、こちらは全く動きませんでした。そのためfloatでどうにかしてやろうと思い、かなり踏ん張ったのですが、玉砕。ブロック要素の考え方が違うのかしら?毎日課題がてんこ盛りです。

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

Webサイト模写 その1

なかなか前に進めない、今日この頃です。

  1. そっとコメントアウト
  2. pc.cssに挑戦
  3. headerを書く
  4. およそ、表示される
  5. mainを書く
  6. display:noneのh2がいる
  7. 数珠つなぎで崩れる
  8. どうしよう……

全然解決方法が思いつきませんでした。残っている課題をbase、tablet、pcの順に片付けていった方が良さそうですね。baseに戻ります。

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

Webサイト模写 その1

もう一度baseから、順番に取り組んでみます。

  1. 最初から、もう一度挑戦
  2. headerのnavを消す
  3. margintopを詰める
  4. h1を画像の上に表示
  5. startbuttonの設置
  6. 無事に表示される
  7. 体裁が崩れている
  8. marginで直す
  9. 惜しい
  10. あと少しが難しい

marginで画像の上に文字を乗せているのですが、よくよく落ち着いて考えてみるとpositionを取れば良かったのではないでしょうか?最後の部分が上手くいかないのも、ゴリ押ししすぎが原因だと思われます。明日、改善してみます。

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

Webサイト模写 その1

微妙な感じで上手くいかないのが歯がゆいです。

  1. ここを直したい
  2. 画像と文字がdivの中
  3. コメントアウト
  4. positionに変更
  5. 惜しい?
  6. 落ち着いて書き直す
  7. 元に戻る
  8. classを修正
  9. ボタンはうまくいく
  10. 検証したのですが…

上手くいきそうだったのですが、結局上手くいきませんでした。何度も書き直しているうちに、何となくpositionの構成はわかってきました。画像に乗せる要素が1個なら、できました。2個乗せるためにどうすれば良いのか、もう少し検証していきます。

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

Webサイト模写 その1

position問題を残して、年は越せないのです。予定していなかった勉強のため、0.5日目のカウントをしています。

  1. どうしてもここを直したい
  2. 今の体裁
  3. HTMLを修正
  4. CSSを修正
  5. 無事に表示される
  6. 年越しできる♪

どうにかpositionを使って、表現することができました。たくさん失敗して、たくさん考えたので、positionのことは、しばらく忘れられそうにありませんね。

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

Webサイト模写 その1

目標としていた60日目のプログラミングです。完成形から遠いところにいますが、進めていきます。

  1. 課題の検索box
  2. headerに書く
  3. h1と重なりかすれる
  4. mainに移動
  5. 無事に表示される
  6. 検索タイトルの体裁修正
  7. formボックスを広げる
  8. 角と開始位置が気になる
  9. 無事に表示される
  10. baseはまずまず

mainに検索boxを書きましたが、pc版の表示でpositionの使用を考えると、良くない書き方だと思います。あとから修正ですね。tabletに広げると、体裁が崩れます。ここから先は、より一層レスポンシブを考えていく必要があります。