【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦30【お問い合わせフォーム】

こんにちは、タビんちゅです。

目標は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を初期化してオリジナルなデザインを再現しよう!

https://twitter.com/tabin_chu23/status/1221318170620809216

ひと口メモ

デザインカンプを完璧に再現できなかった。もっといろんなコードを見て勉強しなくてはいけない。模写するか。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事