プログラミング初心者の６０日間チャレンジ【５６～６０日目】
プログラミング初心者の６０日間チャレンジ【５６日目】
Webサイト模写 その１
つまずいていても進んでいる！と信じている、終盤戦です。
- 今日はこの辺から
- idをつける
- base.cssを書く
- うまくできるようになってきた
- HTMLを書く
- 表示される
- noneで消す
- HTMLを追加
- base.cssを追加
- 玉砕
floatで玉砕です。実はgridも一度書いたのですが、こちらは全く動きませんでした。そのためfloatでどうにかしてやろうと思い、かなり踏ん張ったのですが、玉砕。ブロック要素の考え方が違うのかしら？毎日課題がてんこ盛りです。
プログラミング初心者の６０日間チャレンジ【５７日目】
Webサイト模写 その１
なかなか前に進めない、今日この頃です。
- そっとコメントアウト
- pc.cssに挑戦
- headerを書く
- およそ、表示される
- mainを書く
- display:noneのh2がいる
- 数珠つなぎで崩れる
- どうしよう……
全然解決方法が思いつきませんでした。残っている課題をbase、tablet、pcの順に片付けていった方が良さそうですね。baseに戻ります。
プログラミング初心者の６０日間チャレンジ【５８日目】
Webサイト模写 その１
もう一度baseから、順番に取り組んでみます。
- 最初から、もう一度挑戦
- headerのnavを消す
- margintopを詰める
- h1を画像の上に表示
- startbuttonの設置
- 無事に表示される
- 体裁が崩れている
- marginで直す
- 惜しい
- あと少しが難しい
marginで画像の上に文字を乗せているのですが、よくよく落ち着いて考えてみるとpositionを取れば良かったのではないでしょうか？最後の部分が上手くいかないのも、ゴリ押ししすぎが原因だと思われます。明日、改善してみます。
プログラミング初心者の６０日間チャレンジ【５９日目】
Webサイト模写 その１
微妙な感じで上手くいかないのが歯がゆいです。
- ここを直したい
- 画像と文字がdivの中
- コメントアウト
- positionに変更
- 惜しい？
- 落ち着いて書き直す
- 元に戻る
- classを修正
- ボタンはうまくいく
- 検証したのですが…
上手くいきそうだったのですが、結局上手くいきませんでした。何度も書き直しているうちに、何となくpositionの構成はわかってきました。画像に乗せる要素が１個なら、できました。２個乗せるためにどうすれば良いのか、もう少し検証していきます。
プログラミング初心者の６０日間チャレンジ【５９．５日目】
Webサイト模写 その１
position問題を残して、年は越せないのです。予定していなかった勉強のため、０．５日目のカウントをしています。
- どうしてもここを直したい
- 今の体裁
- HTMLを修正
- CSSを修正
- 無事に表示される
- 年越しできる♪
どうにかpositionを使って、表現することができました。たくさん失敗して、たくさん考えたので、positionのことは、しばらく忘れられそうにありませんね。
プログラミング初心者の６０日間チャレンジ【６０日目】
Webサイト模写 その１
目標としていた６０日目のプログラミングです。完成形から遠いところにいますが、進めていきます。
- 課題の検索box
- headerに書く
- h1と重なりかすれる
- mainに移動
- 無事に表示される
- 検索タイトルの体裁修正
- formボックスを広げる
- 角と開始位置が気になる
- 無事に表示される
- baseはまずまず
mainに検索boxを書きましたが、pc版の表示でpositionの使用を考えると、良くない書き方だと思います。あとから修正ですね。tabletに広げると、体裁が崩れます。ここから先は、より一層レスポンシブを考えていく必要があります。