こんにちは、タビんちゅです。
目標はWeb制作で100万円稼ぐ!!
東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。
これからデイトラをはじめる人の参考にもなるかもです。
この記事を書いたタビんちゅは、
- Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
- セブIT留学で大失敗
- 海外フリーランスを諦められない
- #30DAYSトライアル で再挑戦プログラミング中
- Web制作、フリーランス関連を学んで即発信中
あと記事はサクッと書いているので、誤字脱字があったらすみません。
『2nd:DAY15』を学習中
https://www.daily-trial.com/lessons/web_site/courses/40074aa6/articles/13270530
【今日やること】お問い合わせフォームのコーディング
お問い合わせフォームは各ブラウザごとのデザインの差異が色濃く反映される『癖のある要素』らしい
くやしいけど未完成
お問い合わせフォームは難しい
フォームは、各ブラウザごとのデザインの差異が色濃く反映される『癖のある要素』で、ブラウザ間の差異を極力なくすようにコーディングするには
・まず全てのフォーム要素のデザインをフラットな状態にする
・その上にデザインを乗せていく
結果90%はデザインカンプを再現できました。のこり10%は調べたけどわからなかったので一旦保留にします。悔しい。

お問い合わせ種別の再現が上手くいかなかった。。。
スマホ版はこんな感じ。

レスポンシブは上手くdisplay: block;を使ったり、margin、paddingで余白の調整をして完成!

contactセクションのsassが上手く書けなかったのでCSS形式で書きました。sassのお手本コードが欲しいなあ。
参考サイト
フォームのCSSを初期化してオリジナルなデザインを再現しよう!
ひと口メモ
デザインカンプを完璧に再現できなかった。もっといろんなコードを見て勉強しなくてはいけない。模写するか。
というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。
人気No.1記事